External "header" toolbar ignores options - jQM 1.4 #6950

Closed
Palestinian opened this Issue Jan 15, 2014 · 7 comments

Comments

Projects
None yet
4 participants
@Palestinian

When appending/prepending an external header with options after page is initialized, $("[data-role=header]").toolbar("options", "addBackBtn"); returns true but back button doesn't appear in header. Even though there is a second page in DOM but not created yet.

Test on PC - Chrome Version 32.0.1700.76 m

JSFiddle

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Jan 15, 2014

Contributor

To set an option you have to call $("[data-role=header]").toolbar("option", "addBackBtn", newValue);, where newValue can be true or false. The syntax you show is for retrieving the value of an option, not for assigning an option a new value.

Edit: The method name is "option", not "options".

Contributor

gabrielschulhof commented Jan 15, 2014

To set an option you have to call $("[data-role=header]").toolbar("option", "addBackBtn", newValue);, where newValue can be true or false. The syntax you show is for retrieving the value of an option, not for assigning an option a new value.

Edit: The method name is "option", not "options".

@Palestinian

This comment has been minimized.

Show comment
Hide comment
@Palestinian

Palestinian Jan 15, 2014

@gabrielschulhof thank you for your fast reply. Kindly go through my code again, I've already assigned addBackBtn true.

$(pagecontainer).prepend($("<div/>", {
    "data-role": "header",
        "data-theme": "a"
    }).append($("<h1/>").text("Header")).toolbar({
      addBackBtn: true,
      backBtnText: "Home",
      position: "fixed"
    }) /* .toolbar("refresh") has no effect */ );

Edit: options was a typo :)

@gabrielschulhof thank you for your fast reply. Kindly go through my code again, I've already assigned addBackBtn true.

$(pagecontainer).prepend($("<div/>", {
    "data-role": "header",
        "data-theme": "a"
    }).append($("<h1/>").text("Header")).toolbar({
      addBackBtn: true,
      backBtnText: "Home",
      position: "fixed"
    }) /* .toolbar("refresh") has no effect */ );

Edit: options was a typo :)

@Palestinian

This comment has been minimized.

Show comment
Hide comment
@Palestinian

Palestinian Jan 16, 2014

@gabrielschulhof

When I add option as attributes, I get the following error.

Uncaught TypeError: Cannot call method 'getAttribute' of undefined ------ line jquery.mobile-1.4.0.js:12509

$( ".selector" )
    .prepend( $( "<div/>" , {
    "data-role" : "header",
        "data-theme" : "a",
        "data-add-back-btn" : true,
        "data-back-btn-text" : "Home"
})
    .append( $( "<h1/>" )
    .text( "Header" ))
    .toolbar()
);

@gabrielschulhof

When I add option as attributes, I get the following error.

Uncaught TypeError: Cannot call method 'getAttribute' of undefined ------ line jquery.mobile-1.4.0.js:12509

$( ".selector" )
    .prepend( $( "<div/>" , {
    "data-role" : "header",
        "data-theme" : "a",
        "data-add-back-btn" : true,
        "data-back-btn-text" : "Home"
})
    .append( $( "<h1/>" )
    .text( "Header" ))
    .toolbar()
);
@Palestinian

This comment has been minimized.

Show comment
Hide comment
@Palestinian

Palestinian Jan 23, 2014

@gabrielschulhof I'm a jQM advocate; I'm here to assist. Unfortunately, I'm not a programmer and I have a minimal experience in Javascript, otherwise I'd have fixed it myself.

@gabrielschulhof I'm a jQM advocate; I'm here to assist. Unfortunately, I'm not a programmer and I have a minimal experience in Javascript, otherwise I'd have fixed it myself.

@twilly86

This comment has been minimized.

Show comment
Hide comment
@twilly86

twilly86 Apr 22, 2014

Any update on this? I'm also running into this issue. I was hoping to get a bit of a performance bump from using external headers and panels, but I need this to work in order to upgrade to 1.4.

Any update on this? I'm also running into this issue. I was hoping to get a bit of a performance bump from using external headers and panels, but I need this to work in order to upgrade to 1.4.

@Palestinian

This comment has been minimized.

Show comment
Hide comment
@Palestinian

Palestinian Apr 22, 2014

@twilly86 we will have to wait ;)

@twilly86 we will have to wait ;)

@arschmitz

This comment has been minimized.

Show comment
Hide comment
@arschmitz

arschmitz Apr 23, 2014

Member

This only effects the addBackButton option this currently does not work with external toolbars all other options work fine in external toolbars the addBackButton this will be fixed in the next release please see #7188

Member

arschmitz commented Apr 23, 2014

This only effects the addBackButton option this currently does not work with external toolbars all other options work fine in external toolbars the addBackButton this will be fixed in the next release please see #7188

@arschmitz arschmitz reopened this Apr 23, 2014

gabrielschulhof added a commit that referenced this issue Apr 23, 2014

Toolbar: Back button correctly appears/disappears on external toolbar
This commit makes the following modifications:
1. Rename _addBackButton() to _updateBackButton() and move the decision making
   as to whether to add or remove a back button from _setOptions() into
   _updateBackButton().

2. Call _updateBackButton() from refresh() as well. This will cause the back
   button to be updated whenever the page changes, because the "pageshow"
   handler is hooked up to refresh().

3. Modify _addHeaderButtonClasses to not recognize the back button as a left
   button.

4. Modify the preconditions for adding a button to include an alternative to
   checking the page's URL for instances where there is no page present - i.e.
   when the toolbar is external. In such cases one must add a back button if
   the active item on the history stack is not the first item.

Closes gh-7188
Fixes gh-6950

gabrielschulhof added a commit that referenced this issue Jun 6, 2014

Toolbar: Back button correctly appears/disappears on external toolbar
This commit makes the following modifications:
1. Rename _addBackButton() to _updateBackButton() and move the decision making
   as to whether to add or remove a back button from _setOptions() into
   _updateBackButton().

2. Call _updateBackButton() from refresh() as well. This will cause the back
   button to be updated whenever the page changes, because the "pageshow"
   handler is hooked up to refresh().

3. Modify _addHeaderButtonClasses to not recognize the back button as a left
   button.

4. Modify the preconditions for adding a button to include an alternative to
   checking the page's URL for instances where there is no page present - i.e.
   when the toolbar is external. In such cases one must add a back button if
   the active item on the history stack is not the first item.

(cherry picked from commit b0685b3)

Closes gh-7188
Fixes gh-6950

agcolom added a commit to agcolom/jquery-mobile that referenced this issue Nov 26, 2014

Toolbar: Back button correctly appears/disappears on external toolbar
This commit makes the following modifications:
1. Rename _addBackButton() to _updateBackButton() and move the decision making
   as to whether to add or remove a back button from _setOptions() into
   _updateBackButton().

2. Call _updateBackButton() from refresh() as well. This will cause the back
   button to be updated whenever the page changes, because the "pageshow"
   handler is hooked up to refresh().

3. Modify _addHeaderButtonClasses to not recognize the back button as a left
   button.

4. Modify the preconditions for adding a button to include an alternative to
   checking the page's URL for instances where there is no page present - i.e.
   when the toolbar is external. In such cases one must add a back button if
   the active item on the history stack is not the first item.

Closes gh-7188
Fixes gh-6950
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment