I am working on jQuery mobile controls. I have a jqgrid in a master page and on click of selected row id I am redirecting to another page with the id. In that page I have drop down which is bound with json. And after binding I want to save data to database on click of a button.
The problem is that the button click event is not firing, however, when I run that particular aspx on its own the button click event does fire.
<a href="#" data-role="button" data-inline="true" id="btnsave" data-transition="fade"
data-theme="b" data-icon="check" data-iconpos="right" runat="server"
onserverclick="btnsave_click" >Save</a>
Try adding the data-ajax="false" to your link.
For example
<a href="#" data-role="button" data-ajax="false" data-inline="true" id="btnsave"
data-transition="fade" data-theme="b" data-icon="check" data-iconpos="right"
runat="server" onserverclick="btnsave_click" >Save</a>
Now for the explanation, by default when you link to a page in jQuery Mobile, JQM pulls in that page via ajax and attaches it to the current page's DOM. When JQM pulls in a page via ajax it only pulls in that data-role="page" and does not load any of resources that may be in the <head> or elsewhere on the page.
From your question and markup it sounds like you are using asp.net, without seeing any more of your markup/code I'm pretty certain that your issue is that you don't have the necessary code for the linked page on your master page.
Normally to resolve this you can either place the unique content within the linked page's data=role="page" div, or when you call the page make sure the page is completely loaded, that is without ajax. In your case since it looks like you are trying to call a server method the code to create the postback is probably outside of your second page's div in which case you will need to load the page without ajax, the easiest way you can do that is by adding the data-ajax="false" to your link.
Related
Have the following markup in my html page to toggle a search bar based on if a search icon is clicked:
<a id="searchIcon" href="/"></a>
<div id="searchWrapOuter" style="display:none;">
<div id="searchWrapInner">
<div id="formContainer">
<form id="searchForm" action="#">
<div>
<input type="search" name="search-mini" id="search-mini" value="" data-mini="true" />
</div>
</form>
</div>
</div>
</div>
Width the following javascipt/jquery:
$(function() {
$(document).on("click", "#searchIcon", function () {
var searchWrapper = $("#searchWrapOuter");
$(searchWrapper).slideToggle();
return false;
});
});
This code works as expected on a page load direct off a Url. When coming into the page off a link which is Ajax loaded, loads the contents of the page into the DOM, and the DOM ready handler only executes for the first page.
I have read about using the
$(document).on('pageinit'), not $(document).ready()/$(function()
I still haven't been able to get this to work when coming in off an ajax link however. What would be the correct way to implement these events to get the code to work coming in from an Ajax link?
Thanks,
Most likely it is because you are using IDs instead of classes. jQuery Mobile doesn't work well with IDs because it caches pages into the DOM so if you open a page, close it, then go back to the page, you might have your page twice inside the DOM (one visible, one hidden/cached). So when you do $("#searchWrapOuter") you don't know which element you are actually dealing with (in your case, probably the hidden one).
The solution is to change your IDs to classes. This is not very intuitive but I found that is the best way to work with jQuery Mobile.
Also note this comment in the doc which might also be relevant to you:
The id attribute of all your elements must be not only unique on a given page, but also unique across the pages in a site. This is because jQuery Mobile's single-page navigation model allows many different "pages" to be present in the DOM at the same time. This also applies when using a multi-page template, since all "pages" on the template are loaded at once.
http://jquerymobile.com/demos/1.2.0/docs/pages/page-anatomy.html
You can manually adjust delay time to 500ms and 1s.
$(searchWrapper).delay(1000).slideToggle();
My issue is that the page id was below the pages tags. So once I moved the page div above it, the javascript was included in the ajax page load. Previous to this
I have a JQuery Mobile app with two pages: page1 and page2
On page1, I am redirecting the user to page2 via the following code:
$.mobile.changePage("/home/page2/", { transition: "slide" });
Page2 has three data-role="page" elements in it. Each of these pages has the following in the footer:
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Screen 1</li>
<li>Screen 2</li>
<li>Screen 3</li>
</ul>
</div>
</div>
If I navigate directly to /home/page2 the tabs work fine. However, when I redirect the user to page2 via changePage(), the tabs do not work. What would cause this?
From the jQuery Mobile documentation:
Linking within a multi-page document
It's important to note that if you are linking from a mobile page that
was loaded via Ajax to a page that contains multiple internal pages,
you need to add a rel="external" or data-ajax="false" to the link.
This tells the framework to do a full page reload to clear out the
Ajax hash in the URL. This is critical because Ajax pages use the hash
(#) to track the Ajax history, while multiple internal pages use the
hash to indicate internal pages so there will be conflicts in the hash
between these two modes.
changePage() inherently uses Ajax to load the page and that is the cause of your problem, because only #screen1 gets loaded.
If your app UI and logic allow you make your redirect from Page1 to Page2 with a link:
Go to Page 2
If you have to redirect programmatically consider splitting the multipage Page2 into separate JQM pages (e.g. page21.html, page22.html, page23.html) and link them appropriately or produce your content dynamically when user clicks on navbar tabs.
I'm dynamically creating the navbar in my multi-page document. My problem is that the navbar is not enhanced on the first page in the document, but - strangely - on every other page. The kicker is that if I add a page in the code before this actual first page and set up an event to forward to the "actual" first page, everything works fine. The code for the navbar is the same everywhere for now:
<div data-role="page" id="stdPage" data-theme="b">
<div data-role="content">
...
</div><!-- /content -->
<div data-role="footer" data-position="fixed" data-id="persFooter">
<div data-role="navbar">
<ul>
<li></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div>
I'm populating the navbar on all the pages using:
$(function () {
$("div[data-role='navbar'] ul").empty();
$("div[data-role='navbar'] ul").append("<li>Test</li>");
$("div[data-role='navbar']").navbar();
});
When doing this, as I said, the navbar on the first page - the one already on display - is not enhanced. All the other pages have enhanced navbars.
I've tried messing around with .page() and trigger("pagecreate") etc. to no avail.
Any help would be greatly appreaciated.
The problem is that your navbar needs to be in the page when the 'pageinit' event fires the first time your browswer loads that page. This is when jQ Mobile enhances the content of your page.
It sounds like you're adding the navbars to your whole document after the 'pageinit' event fires on your first page. This is why when you navigate to any other page, it fires 'pageinit' and enhances your content properly.
What you should try is copying your common header on the 'mobileinit' event, copying it before jQuery mobile loads (put the script you're using before the jQ Mobile script tag), or put your header's markup on your first page and copy clones (.clone()) to everypage after the markup is enhanced.
As for the trigger the proper syntax is this: $(yourelement).trigger('create').
$(function () {
$("div[data-role='navbar'] ul").empty();
$("div[data-role='navbar'] ul").append("<li>Test</li>");
$("div[data-role='navbar']").trigger('create');
});
Good luck!
FOLLOW UP: Here's how I did it.
I had a header that I wanted to make common to certain pages on of which was my first page. So I made the header on that front page as I normally would. On my other pages I put a placeholder div with a class="commonHeader".
Then on 'mobileinit' I added the following instruction:
$(document).on('mobileinit', function(event){
$('.commonHeader').each(function(index, element) { //attach common header to all pages
$(element).replaceWith($('#frontPage [data-role="header"]').clone(true, true));
});
});
You can try using the same method only on the pages you need common header.
I have noticed that if you add a unobtrusive link in a refreshable partial view such as
<a href="/" data-delete-chapter="#Model.Chapter.ChapterId" class="delete-chapter" >
Delete
</a>
wired up in javascript file in order to do a (less ugly) Jquery popup delete confirmation):
$("[data-delete-chapter]").each(function () {
$(this).click( ...
then upon refresh of the partial view via ajax these javascript handlers dispappear so you end up having to refresh them each ajax call. You can do this with OnSuccess AjaxOption:
or directly in html as data-ajax-success such as my page previous button:
<a data-ajax="true" data-ajax-loading="#chapterAjaxImage" data-ajax-method="GET"
data-ajax-mode="replace" data-ajax-update="#chapterContainer"
href="ScrollChapterPrev/#(Model.VideoId)?pageNumber=#(Model.PageNumber)"
data-ajax-success="afterChapterRefresh()" class="gallery-prev">
<img src="#Url.Content("~/Content/Images/play/chapter-slider-prev.png")" alt="prev" />
</a>
however I feel that having
data-ajax-success="afterChapterRefresh()"
in the multiple places that refreshes my chapter list is not a lot less unobtrusive than making my original delete link use javascript thereby avoid the need to reference a refresh JS function:
<a href="javascript:deleteChapter(10)" class="delete-chapter" >
Delete
</a>
is there a better way or am I as close as unobtrusive that I can get in this special case?
Loading the content via ajax means , you are injecting something to the DOM , after the events ( click or whatever) bounded. So the newly injected elements wont have that event binding.
jQuery on would help. on will work on current elements and future elements
Change this
$("[data-delete-chapter]").each(function () {
$(this).click(function(){
//do something
});
});
to this
$(document).on("click","[data-delete-chapter]"(function(){
//do something
});
Here is my problem. I have a few hard coded pseudo pages in my index. Some filled with content, some empty which will be filled on user interaction only by ajax. This ajax content contains html lists. When they load they don't have the nice jquery mobile look so I have to call a .listview() method so the jqm framework parse it on my ajax callback. That is where I often get this JS error:
Uncaught TypeError: Cannot read property 'jQuery162027575719612650573' of undefined
The number is never the same...
I wonder if I use the proper way to parse a listview after the page loads the ajax content. the error seems to be triggered when there is slight lag for the loading and the complete event is triggered too soon and my listview is not yet in the DOM at that moment, just a guess. what is the recommended way to initialize a listview after an ajax call?
It is very unfortunate because when the js error occurs it seems to freeze any further js execution...
so here is my empty pseudo page:
<div data-role="page" id="playlist" data-add-back-btn="true">
<div data-role="header">
<h1><g:message code="pd.playlist" /></h1>
</div>
<div data-role="content"></div>
</div>
right under it there is a script tag with the bind an ajax call on pageshow to activate the listview
<script type="text/javascript">
$('#playlist').bind('pageshow', function () {
$.ajax({
url: "updatePlaylistTemplate.gsp",
error:function(x,e){handleAjaxError(x,e);},
beforeSend:function(){$.mobile.showPageLoadingMsg();},
complete:function(){
$.mobile.hidePageLoadingMsg();
$('[data-role="listview"]').listview(); //re-active all listview
},
success:function(data, textStatus, jqXHR){
$('#playlist').find('[data-role="content"]').html(data);
}
});
});
</script>
The updatePlaylistTemplate return this (extract):
<ul data-role="listview" data-split-theme="d">
<li data-icon="delete">
Provider: Bell
</li>
<li data-icon="delete">
Rock - Classic Rock
</li>
<li data-icon="refresh" data-theme="e">Refresh list</li>
<li data-role="list-divider">Next song</li>
<li>
<a href="urlToViewSongInfo">
<img src="images/song.gif" />
<h3>Albert Flasher</h3>
<p>The Guess Who</p>
<p class="ui-li-aside">Next</p>
</a>
</li>
<li data-role="list-divider">Now playing</li>
<li>
<a href="urlToviewSongInfo">
<img src="images/song.gif" />
<h3>Crime of the Century</h3>
<p>Supertramp</p>
<p class="ui-li-aside">14h49</p>
</a>
</li>
<li data-role="list-divider">Previous songs</li>
<li>
<a href="urlToViewSongInfo">
<img src="images/song.gif"" />
<h3>Desperado</h3>
<p>Alice Cooper</p>
<p class="ui-li-aside">14h45</p>
</a>
</li>
[...]
</ul>
What version of jQuery Mobile are you using? In the latest beta (1.0b2) you can trigger the create event on a dom element to have the framework initialize it:
New “create” event: Easily enhance all widgets at once
While the page plugin no longer calls each plugin specifically, it
does dispatch a “pagecreate” event, which most widgets use to
auto-initialize themselves. As long as a widget plugin script is
referenced, it will automatically enhance any instances of the widgets
it finds on the page, just like before. For example, if the selectmenu
plugin is loaded, it will enhance any selects it finds within a newly
created page.
This structure now allows us to add a new create event that can be
triggered on any element, saving you the task of manually initializing
each plugin contained in that element. Until now, if a developer
loaded in content via Ajax or dynamically generated markup, they
needed to manually initialize all contained plugins (listview button,
select, etc.) to enhance the widgets in the markup.
Now, our handy create event will initialize all the necessary plugins
within that markup, just like how the page creation enhancement
process works. If you were to use Ajax to load in a block of HTML
markup (say a login form), you can trigger create to automatically
transform all the widgets it contains (inputs and buttons in this
case) into the enhanced versions. The code for this scenario would be:
$( ...new markup that contains widgets... ).appendTo( ".ui-page"
).trigger( "create" );
Create vs. refresh: An important distinction
Note that there is an important difference between the create event
and refresh method that some widgets have. The create event is suited
for enhancing raw markup that contains one or more widgets. The
refresh method that some widgets have should be used on existing
(already enhanced) widgets that have been manipulated programmatically
and need the UI be updated to match.
For example, if you had a page where you dynamically appended a new
unordered list with data-role=listview attribute after page creation,
triggering create on a parent element of that list would transform it
into a listview styled widget. If more list items were then
programmatically added, calling the listview’s refresh method would
update just those new list items to the enhanced state and leave the
existing list items untouched.
Link: http://jquerymobile.com/blog/
You can also copy the output that jQuery Mobile creates and use that structure rather than using <li> tags and depending on jQM to inititialize it:
<li data-role="list-divider" class="ui-li ui-li-divider ui-btn ui-bar-a ui-btn-up-undefined" role="heading"><span>List Divider</span></li>
<li data-theme="b" class="ui-li ui-li-static ui-body-b">Regular LI</li>