accordion not working after load

Question

I just encountered a problem with jquery accordion. What I am doing is loading new content from a php page "jobsload.php". After updating the page with new content, accordion doesnot work. I have tried the destroy property too but in vain.

here is the code

$('#postjob').click(function () {       
//Get the data from all the fields
var title = $('#jobtitle');
var date = $('#jobdate');
var status = $('#status');
var desc = $('#jobdesc');           

//Simple validation to make sure user entered something
//If error found, add error-highlight class to the text field

if (title.val()=='') {
    title.addClass('error-highlight'); 
    return false;
} else title.removeClass('error-highlight');

if (date.val()=='') {
    date.addClass('error-highlight');
    return false;
}

else date.removeClass('error-highlight');
if (desc.val()=='') {
    desc.addClass('error-highlight');
    return false;
}
else desc.removeClass('error-highlight');
var data;
if($("#jobid").val()=="")
{
    data = 'title=' + title.val() + '&date=' + date.val() + '&status=' + status.val() + '&desc=' + desc.val();  
}
else
    data = 'id=' + $("#jobid").val() + '&title=' + title.val() + '&date=' + date.val() + '&status=' + status.val() + '&desc=' + desc.val(); 
//organize the data properly

// Disable fields
//$('.text-label, .textarea-label').attr('disabled','true');
//show the loading sign
$('.loading-contact').show();
//start the ajax
$.ajax({
    //this is the php file that processes the data and send mail
    url: "postjob.php", 

    //GET method is used
    type: "POST",
    //pass the data         
    data: data,     
    //Do not cache the page
    cache: false,
    //success
    success: function (html) {          
        //if process.php returned 1/true (send mail success)
        if (html==1) {                  
        //hide the form
            //show the success message
            $('.loading-contact').fadeOut('slow');  
            //show the success message
            $('.success-message').slideDown('slow');
            $('.success-message').delay(1000).slideUp('slow');
            $('#jobsload').load("jobsload.php");

            // Disable send button
            //$('#send').attr('disabled',true);
            //if process.php returned 0/false (send mail failed)
        } else
        {
            $('.loading-contact').fadeOut('slow')
            alert('Sorry, unexpected error. Please try again later.');
        }
    }       
});
    //cancel the submit button default behaviours
    $('#accordion').accordion('destroy').accordion({ heightstyle: "content" });
    return false;
});

HTML CODE

<div id="jobsload" style="clear:both">
<div class="panel">
<div class="panel-heading"><center>Available Positions</center></div>
<div class="row">
    <?php
        $sql = "SELECT * FROM jobs where valid='YES'";
        $res = mysql_query($sql) or die(mysql_error());
    ?>
    <div class="personalInfo" id="accordion">   
        <?php while ($row = mysql_fetch_array($res)) 
        { ?>
            <h6 class="media-heading historyHeading">
                <span style="width:80%;"><a href="#"><?php echo $row['title'];?></a></span>
                <span style="width:20%;">(<?php echo $row['date'];?>)</span>
            </h6>
            <div>
                <p><?php echo $row['description'];?></p>
            </div>                              
        <?php } ?> 
    </div>
</div>
</div>

   <div class="panel">
<div class="panel-heading"><center>Positions Filled</center></div>
<div class="row">
    <?php
        $sql = "SELECT * FROM jobs where valid='NO'";
        $res = mysql_query($sql) or die(mysql_error());
    ?>
    <ul class="personalInfo">   
        <?php  $mycount=1; while ($row = mysql_fetch_array($res)) 
        { ?>
            <li>
                <span>
                    <div style="width:100%; border:thin #666666">
                        <div style="float:left; width:5%">
                            <p style="margin-left:10px; margin-top:5px" >
                                <?php echo $mycount; $mycount++; ?>
                            </p>
                        </div>
                        <div style="float:left; width:85%">
                            <h6 class="media-heading historyHeading">
                                <?php echo $row['title'];?>
                            </h6>
                        </div>
                        <div style="float:right; width:10%">
                            <h6 class="media-heading historyHeading">
                                <?php echo $row['date'];?>
                            </h6>
                        </div>
                    </div>
                </span>
                <div class="clearfix"></div>
            </li>
        <?php } ?> 
    </ul>
                    <!-- add this line to add small portfolio  -->
</div> 

thank you for your help.

Answer 1

If i'm correct the following code loads your new content:

$('#jobsload').load("jobsload.php"); 

and not the post call.

You need to re-initialize ajaxloaded content, because it's not in the dom, when jquery is initialized.

In the answer Kuma, the accordion is triggered at the same time as the load is being called. Not after the success of the code.

See code beneath to use the success function of the jobsload

$('#jobsload').load("jobsload.php", function( response, status, xhr ) {
    if (status == "success") {
      // Place reload the accordion code here
    }        
    if ( status == "error" ) {
      // optional: place error code here.
      // if you don't place this, user will not receive notification of failure.
    }
});

Answer 2

You should apply the accordion inside your success function.

success: function (html) {          
        //if process.php returned 1/true (send mail success)
        if (html==1) {                  
        //hide the form
            //show the success message
            $('.loading-contact').fadeOut('slow');  
            //show the success message
            $('.success-message').slideDown('slow');
            $('.success-message').delay(1000).slideUp('slow');
            $('#jobsload').load("jobsload.php");

            // Disable send button
            //$('#send').attr('disabled',true);
            //if process.php returned 0/false (send mail failed)

            //cancel the submit button default behaviours
            $('#accordion').accordion('destroy').accordion({ heightstyle: "content" });
            return false;
        } else
        {
            $('.loading-contact').fadeOut('slow')
            alert('Sorry, unexpected error. Please try again later.');
        }
    }