I have a page where I put my tab content into a div.
This work fine and I can see the tabs.
Later, an event occurs (like selecting a combo box value) and I want to change to another set of tab.
I basically did:
('#divId').empty();
someData.appendTo("#divId");
$("#divId").tabs();
Here is the problem, this 2nd call show me a list:
. tabName1
. tabName2
..... etc
Any idea what's going on, seems like the call to .tabs() work only once when I first load the page.
Thanks.
Check the value of someData, it might contain invalid html that cannot handled when you call the jquery tabs() method again.
One way to do it is:
console.log(someData);
Then if you're using chrome, hit F12 then click on "Console".
$("#detailUL").append("<li><a href='#tabs3-"+id+"'>Desc No "+m+"</a></li>"); // desc
$("#details").append("<div id='tabs3-"+id+"' class='it_detail'>"+copy+"</div>"); // detail
$("#detailPanel").tabs("refresh");
Related
I try to write a web-component to create a simple login menu. it has paper-inputs for name and password and a button which fires a script to check the data.
the right data redirect to the next page while false credentials should open a toast element right above the button with an error message, siimilar to this one:
http://www.polymer-project.org/tools/designer/#6f21f8d26e14d614c9cb
Select the paper-toast-element in the tree-view and check the 'opened'-checkbox get get a vision what I try to do and please excuse the strange style.
The problem:
I included this element in my main page, but the toast element is always visible right from the start. and it doesn't react to the button click if I move the toast away with css.
I don't wanna spam this page with my code, so I uploaded it here:
https://gist.github.com/Gemoron/6b8f41d1bb6ff522e23c
I appreciate any suggestion on how to fix the problem.
You cannot access the hidden shadow DOM of an element directly with jQuery's $ function, nor with document.querySelector. Also jQuery is not needed anyway. Use Polymer's automatic node finding utility instead: this.$.paper_toast.
You can access the paper-input values with this.$.name.inputValue. But i would prefer to use data-binding instead: <paper-input value={{name}}>. Then you can access the input value in your JavaScript with this.name.
The function to display the toast is show().
I'm unable to reproduce the issue that the toast is visible right after the page has loaded. On my computer the toast is initially hidden and displayed when i click on the button (Chrome 37, Polymer 0.3.3).
In line 76 you try to use an "open()" method, which does not exist on paper-toast. It should be "show()". You can find paper-toasr API here: http://www.polymer-project.org/docs/elements/paper-elements.html#paper-toast
Also, because the ids in shadow dom are encapsulated, you should be using the id selection mechanism from Polymer instead of jquery-style selector
this.$.paper_toast.show();
More on automatic node finding in Polymer: http://www.polymer-project.org/docs/polymer/polymer.html#automatic-node-finding
Here's jsbin (you might need to refresh as jsbin sometimes breaks with Polymer imports)
http://jsbin.com/fened/1/edit
situation:
form1.html has a button
clicking that button calls $.mobile.changePage('../site3/form2.html');
no problem here. all is as expected and the page is loaded. let's call that form2.html
form2.html has 2 sections:
(1) #SiteForm and
(2) #SiteSearched
clicking a button on #SiteForm should call $.mobile.changePage('../site3/form2.html#SiteSearched');
now here's the weird part.
if I load the page form2.html directly and press the button, it works and I see #SiteSearched JQM page.
but, if I start from form1.html, click the button to get to form2.html#SiteForm, then click the button, everything in the attached function executes, except the line calling $.mobile.changePage('../site3/form2.html#SiteSearched');
I know that part is loaded by AJAX by wouldn't the changePage command work?
(note: Form1 may have data filled into the form that I don't want to lose. Form2.html was meant to do a search and throw back the result to Form1 somehow, which is why I am doing things this way.)
You should read official jQuery Mobile documentation before posting here, everything is explained there, but let me give you a short explanation.
jQuery Mobile has two template solutions, one is multi page and second one is multi html. You already know that because you are mixing them. But, what you don't know is (from the perspective of AJAX page handling):
Only first HTML page is fully loaded into the DOM, everything is loaded, including the HEAD content. So if initial HTML page has several data-role="page" <div> containers, every one will load into the DOM.
But, every subsequent page is loaded only partially. Basically if you second, third ... page has more then one data-role="page" div containers only first one will load into the <DOM>. jQuery Mobile will discard everything else.
So in your case, if form2.html has:
(1) #SiteForm and
(2) #SiteSearched
jQuery Mobile will load only #SiteForm, #SiteSearched will get discarded.
Basically this line will not work:
$.mobile.changePage('../site3/form2.html#SiteSearched');
You can't nit pick specific pages in subsequent pages, as I told you. You can only use this:
$.mobile.changePage('../site3/form2.html');
And jQuery Mobile will show you first data-role="page" occurrence inside form2.html page.
Read more about this here and here.
I've been searching for a way to remove the initial page container after jQuery mobile loaded the next page content via $.mobile.changePage(...)
What I'm experiencing is that this initial DIV element, created when the page is first shown will always remain on the page - and will only be hidden after calling $.mobile.changePage(...)
I need this initial page container to be removed instead, since some old data reside there that should be reset on first page change.
Anyone has a solution? Been searching the web for it but to no avail.
I have also tried to do $('#first-page').remove() after I called $.mobile.changePage(...), but that will remove the initial page and make the new loaded page hidden!
EDIT: solved by clearing up the initial DIV using .html("")
You could just make next page load without ajax, this should remove the initial page.
data-ajax="false"
Hope this helps!
I take it that you are dynamically creating these pages. There is a hidden method in the API, but you can apply it to any page and then upon that page's exit, it will be removed.
$.mobile._bindPageRemove
So, it might look like this
newpage.attr( "data-" + $.mobile.ns + "external-page", true ).one( 'pagecreate', $.mobile._bindPageRemove );
NOTE: Since this is a hidden method, it is part of the hidden API and could be subject to change without notice upon upgrade. Test carefully upon upgrade if you use this.
I did:
$.mobile.changePage('login.html', {changeHash:false});
changeHash (default: true) Type: Boolean Decides if the hash in the
location bar should be updated. This has the effect of creating a new
browser history entry. It also means that, if set to false, the
incoming page will replace the current page in the browser history, so
the page from which the user is navigating away will not be reachable
via the browser's "Back" button.
I am doing a PhoneGap app with JQuery Mobile and I have two pages, one that has a dynamic list of pages and one that has a form to either edit or create a page. These are in a single html file.
Tapping on a list item passes ?action=edit and tapping the "Add" button I have, passes ?action=add querystrings.
Here is a jsfiddle to visualize the pages
NOTE: The example doesn't act quite the same as the live code.
I am running my app on an Android phone and if I do these actions, the correct querysting is observed in the alert box: -
Click the add button on list page
Click back on the form page
Click the an edit list item link on list page
However, if I do it the other why around (click edit first, then the add button) clicking the add button never shows the add querystring in the alert box
(the jsfiddle example always locks the first clicked link's querystring, which is even worse than the live code!)
The problem here is that you're using a multiple template to do this. If you were using this as separate pages, this would work as normal. As a multiple app, the best way to handle this would be to make a link trigger the setting of some global variable that keeps track of the current state of the app.
Make the edit links like this
Page 15
Then make the script something like this:
var editingId = 0
function editPage(id){
editingId = id;
$.mobile.changePage("#editingPage");
});
$("div#editingPage").live("pageshow", function(){
loadDataForPage(editingId);
});
I might be making this more difficult than I need to but I am in some need of assistance. I have some jquery ui tabs which are added via the add functionality. these tabs are via ajax.
I have a tabTemplate set as follows on the initial addition of the tabs.
tabTemplate: "<li><a href='#{href}'>#{label},/a><li>"
And the add tab functionality is done via
$tabs.tabs('add', 'http://thanksforyourhelp/greatly/appreciated/, some_title_var)
If a form is submitted on that tab, data is written to the database. The response gives an ID of the row added to the database.
Next time that specific tab is visited the link should actually be 'http://thanksforyourhelp/greatly/appreciated/ID' where the ID is now known since the response from the form (ajax here as well) sent it back. This will pre-populate the forms on the page based off the data in the database for "ID."
I've looked at the example here, but my href is an id for the tab in question (and not a url). Where is the actual url stored?
The tab looks like this.
new
I have tried changing the href on that, but upon clicking the tab the content is loaded without ajax instead of within the tab as desired. What might I be doing wrong here? Thanks for your help.
Edit: removed edits with references of no longer existent urls.
I haven't worked with AJAX-powered tabs too much, but I think you want the url method:
$("#tabs").tabs("url", index, url)
Change the url from which an Ajax
(remote) tab will be loaded. The
specified URL will be used for
subsequent loads. Note that you can
not only change the URL for an
existing remote tab with this method,
but also turn an in-page tab into a
remote tab.
Above answer will not work in JQuery 1.9+ as describer here. To work with jquery ui tabs 1.9+ you have to do something like this
var tabs = $("#tabs");
var tab = $(tabs.data('uiTabs').tabs[TAB_INDEX]);
tab.find('.ui-tabs-anchor').attr('href', "NEW_URL");
// If cached initially. Remove cache then
tab.data( "loaded", false);
tabs.tabs( "option", "active", TAB_INDEX);
tabs.tabs("load", TAB_INDEX);
This will change the URL of tab at particular index and load that tab.