Search code examples
phpjquery-mobileappendpartial-page-refresh

How to append content from a php file into a div with jquery mobile

Goal: I'm trying to refresh content inside a div so that if the user is logged in, the page changes dynamically.

Progress: My first attempt was to use $("#tab_b").load("php/tabs.php #tab_b"); but this didn't update the DOM so the jquery styling didn't get applied. Then I tried adding the .trigger('create') function $("#tab_b").trigger('create'); This only led the style blink on and off for a fraction of a sec. Then I tried the .append() function which seems to work, I'm using the following code to test the function and this works:

$("#tab_b").html('');
$("#tab_b").append("<button type='submit' data-theme='a'>Test button</button>").trigger('create');

the only problem I have is fetching the content from the php file and then appending it to the div.

Content that should be refreshed: " #tab_b "

<div id="tab_b" class="content_div">    
    <?php

    if(!isLoggedIn())
    {
        ...
    }
    else
    {
        echo("
        <button type='submit' data-theme='a' id='logout' >Logout</button>
         ");
    }
    ?>
</div>

Any idea's on how to do this? Also Any suggestions on improvements are welcome, I'm a beginner programmer.

This question is an attempt to solve a bigger problem discussed in my other topic:

jQuery Mobile does not apply styles after dynamically loading content

Solution

  • this might work:

    $( '#tab_b' ).live( 'pageinit',function(event){
  alert( 'This page was just enhanced by jQuery Mobile!' );
});

    I would look into the Event API