I am using jQuery Mobile to create a site, in the index page I placed here a form for a search. I hooked submit event for ajax post. When ajax success get the resource (html,<ul>...</ul>), placed in the target container, then trigger the create event for enhance the view. This work fine in the first time. When I click back to index page and search again I got a raw listview without enhance, who can tell me why? ps: I have tried many methods but there is more and more problem, the official document was so poor.

$(document).bind('pageinit',function(){
        $("#search").submit(function(){
            var searchdata = $("#search").serialize();

            $.ajax({
                'type':"POST",
                'url':"/server/jnulib.php?action=search",
                'data':searchdata,
                'success':function(data){
                    $("#searchresultfield > ul").remove();
                    $("#searchresultfield").html(data).find('ul').trigger('create');

                    try{
                        $("#searchresultfield > ul").listview('refresh');
                    }catch(e){

                    }

                    $.mobile.changePage("#searchresult");
                       //$("div[data-role='header'] > a").
                }
            });

            return false;
        });
    });

EDIT： Test Url： Another problem: the second ajax request failed and the browser navigate to the ajax target straightly.

I am using jQuery Mobile to create a site, in the index page I placed here a form for a search. I hooked submit event for ajax post. When ajax success get the resource (html,<ul>...</ul>), placed in the target container, then trigger the create event for enhance the view. This work fine in the first time. When I click back to index page and search again I got a raw listview without enhance, who can tell me why? ps: I have tried many methods but there is more and more problem, the official document was so poor.

$(document).bind('pageinit',function(){
        $("#search").submit(function(){
            var searchdata = $("#search").serialize();

            $.ajax({
                'type':"POST",
                'url':"/server/jnulib.php?action=search",
                'data':searchdata,
                'success':function(data){
                    $("#searchresultfield > ul").remove();
                    $("#searchresultfield").html(data).find('ul').trigger('create');

                    try{
                        $("#searchresultfield > ul").listview('refresh');
                    }catch(e){

                    }

                    $.mobile.changePage("#searchresult");
                       //$("div[data-role='header'] > a").
                }
            });

            return false;
        });
    });

EDIT： Test Url： http://ijnu.sinaapp. Another problem: the second ajax request failed and the browser navigate to the ajax target straightly.

• javascript
• jquery
• ajax
• jquery-mobile

Share Improve this question Follow edited May 4, 2012 at 2:57 horsley asked May 1, 2012 at 14:51 horsleyhorsley 48044 silver badges1010 bronze badges 1

• Is your site a single HTML file? If not then each time a new page is initialized, your event handler will run, rebinding the $('#search').submit(... event handler each time. Also a link to a version we can see would be helpful. – Jasper Commented May 3, 2012 at 21:28

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 1

You could try changing:

$("#searchresultfield").html(data).find('ul').trigger('create');

to:

$("#searchresultfield").html(data).find('ul').listview().listview('refresh');

Anytime you append or remove elements you need to refresh, and if you remove the whole list, you need to reinitialize it.

Also I have had issues with listview('refresh') rendering improperly if it was not visible.

$(document).on('pageshow','div',function(event, ui){
 if($("#searchresultfield > ul").is(":visible")) $("#searchresultfield > ul").listview('refresh');
});

For me, .trigger('create'); always works if applied to the element with data-role="page"

For example

HTML Code

<div data-role="page" id="somePage">
...
</div>

Javascript Code

$('#somePage').trigger('create');

Hope it helps

Try:

$("#searchresultfield > ul").empty();

instead of

$("#searchresultfield > ul").remove();

I think the problem is that jquery mobile loads all pages despite all being from different files into one big page and navigation is based off going to different points in this page, so that when you go onto it the first time the page you access is considered created however when clicking the back button and navigating away from the page that page is still considered created so the event well not fire again,

What I used was:

$('#oppList').live('pageshow',function(event){
    getList();

});

Where #opplist is the id of the data-role="page" for the page I just load, this does not matter whether this happens the first time the page is loaded or after because the event is fired whenever the page is displayed.

See Here foe jquery mobile events

Also see here for jquery mobile navigation

Hope this helps !

Maybe you should try to unhook the submit event once it's been handled. And initiate it again once you go back to the page where you were before. Adding eventhandlers multiple times can cause a lot of problems.