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

Question

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

Answer 1

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

• http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/events.html

Answer 2

I found that you can fetch data with $.ajax function. This returns the whole page. My solution was to move the content that needed to be refreshed to a new php page, tab_b.php and load it from there. Not sure if this is the best solution but it works.

$.ajax({
     url: 'php/tab_b.php',
     success: function (data) {
          $("#tab_b").html('');
          $("#tab_b").append(data).trigger('create');
     }
});