Question

我刚遇到jquery手风琴的问题。我正在做的是从php页面加载新内容＆＃34; jobsload.php＆＃34;。使用新内容更新页面后，手风琴无效。我也试过了破坏财产但是徒劳无功。

这是代码

$('#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>

谢谢你的帮助。

Answer 1

如果我更正，以下代码会加载您的新内容：

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

而非后期电话。

你需要重新初始化ajaxloaded内容，因为当初始化jquery时，它不在dom中。

在答案Kuma中，手风琴在调用负载的同时被触发。不是在代码成功之后。

请参阅下面的代码以使用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

您应该在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)

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

手风琴在装载后不工作

2 个答案: