CODEWITHSUNDEEP
javascriptjqueryajaxjquery-mobile
horsley
horsley

Reputation: 480

jquery mobile trigger 'create' not working except the first time

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.com Another problem: the second ajax request failed and the browser navigate to the ajax target straightly.

Upvotes: 4

Views: 4353

Answers (5)

Sagar Gala
Sagar Gala

Reputation: 944

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

Upvotes: 1

kristof_w
kristof_w

Reputation: 302

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.

Upvotes: 0

scrineym
scrineym

Reputation: 759

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 !

Upvotes: 0

stay_hungry
stay_hungry

Reputation: 1448

Try:

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

instead of

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

Upvotes: 0

Fostah
Fostah

Reputation: 2946

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');
});

Upvotes: 1

Related Questions