为什么ajax响应代码没有正确附加?

时间:2014-01-27 12:22:01

标签: javascript php jquery html ajax

我遵循HTML代码:

<form name="package_type_documents"  action="" method="post" enctype="multipart/form-data">
    <input type="hidden" name="op" id="op" value="edit"/>
    <input type="hidden" name="pt_id" id="pt_id" value="5"/>
    <input type="hidden" name="form_submitted" value="yes"/>
    <div class="hor-form w33">

    </div>
    <div class="hor-form">    
      <ul>
        <li>
          <div class="answer-block" id="doc_title">
            <a href="#" class="c-gray-btn c-add-btn" name="add_more_title" id="add_more_title" onclick="add_title(); return false;"><span>Add More Documents</span></a>
            <ol>
                                          <li id="ttl1" class="ptdoc">
                <li class="ans_li">
                  <span class="num-block">1&nbsp;</span><span class="num-block reqd">*</span>
                  <label>Document Title</label>
                  <input type="text" name="pt_doc_title[1]" id="pt_doc_title_1" value="Prabhakar Bhosale" />
                </li>
                <li class="ans_li">
                  <span class="num-block">&nbsp;&nbsp;</span><span class="num-block reqd">&nbsp;</span>
                  <label>Document File</label>
                  <p class="uploadBtn"><input type="file" name="document_file_name_1" id="document_file_name_1"/>
                  </p>
                </li>

                                                  <li class="ans_li">
                  <a href="package_type_documents.php?op=download&pt_id=5&pt_doc_id=19" style="font-size:small;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;prabhakar_bhosale.docx</a>
                </li>                 
                                                                  <li class="ans_li">                
                  <input type="checkbox" name="delete_file_1" id="delete_file_1" class="custom-check" />
                  <label for="show">Delete document</label>
                </li>


                <input type="hidden" name="pt_doc_id[0]" value="19" />
                                  <input type="hidden" name="pt_doc_old_file_iname[0]" value="prabhakar_bhosale.docx" />  

              </li>
                                    </ol>
            <a href="#" class="c-gray-btn c-add-btn" name="add_more_title" id="add_more_title" onclick="add_title(); return false;"><span>Add More Documents</span></a>
            <p class="fade">Note * (Image size should be less then 1 mb and allowed image types are jpg, jpeg, gif, png .)</p>
          </div>         
        </li>       
        <li>          
          <p class="last">
            <input id="saveForm" class="c-btn" type="submit" name="submit" value="Update"/>
            <input type="button" class="c-gray-btn" name="back" value="Back" onclick="javascript:window.location.href='http://localhost/eprime/entprm/web/control/modules/package_type/view_package_type.php?page=1'" />
          </p>
        </li>
      </ul> 
    </div>
  </form>

以下是我要调用的附加数据的ajax函数:

<script type="text/javascript">
function add_title() {  
  if($.active > 0) { //or $.active    
    request_inprogress();
  } else { 
    //var next_title_no = $('#doc_title div').size() + 1;    
    var title_no      = $('#doc_title .ptdoc').size() + 1;    
    // While loop is use to check that this id is already exists or not.
    /*while ($('#title'+title_no).length>0) { 
      title_no = title_no+1;
    }*/  
    $('#add_more_title').removeAttr('onclick');

    $.ajax({
      type: "POST",
      url: "package_type_documents.php",
      data: {'request_type':'ajax', 'op':'add_new_title', 'title_no':title_no},  
      success: function(data) {
          if(jQuery.trim(data)=="session_time_out") {
            window.location.href = site_url+'login.php?timeout=1';            
          } else { 
            $('#doc_title ol').append(data);
            $("#add_more_title").attr("onClick", "add_title();return false;");
          }           
        }
    });
  }
}
</script>

附加数据的PHP代码如下:

<?php
$op=$request['op'];
switch($op) {

case 'add_new_title':
      $title_no = $request['title_no'];


      echo "<li id='ttl$title_no' class='ptdoc'>
              <li class='ans_li'>
                <span class='num-block'>$title_no&nbsp;</span>
                <span class='num-block reqd'>*</span>
                <label>Document Title</label>
                  <input type='text' name='pt_doc_title[$title_no]' id='pt_doc_title_$title_no' value='' class='inputfield' />
              </li>
              <span class='num-block'>&nbsp;&nbsp;</span>
              <span class='num-block reqd'>&nbsp;&nbsp;</span>
              <li class='ans_li'>
                <label>&nbsp;Document File</label>
                <p class='uploadBtn'>
                  <input type='file' name='document_file_name_$title_no' id='document_file_name_$title_no' />
                </p>
                <p class='custom-form'>
                  <a href='#' id='ttl$title_no' onclick=\"delete_title(this.id);return false;\" class='c-delete'>Delete</a>
                </p>
              </li>
            </li>";
      exit;
}
?>

我的问题是实际的附加代码不是如上所述。如果我在firebug控制台中看到它会以下列方式附加:

<li id="ttl2" class="ptdoc"> … </li><li class="ans_li"><span class="num-block">
      2 
    </span><span class="num-block reqd">
      *
    </span><label>
      Document Title
    </label><input id="pt_doc_title_2" class="inputfield" type="text" value="" name="pt_doc_title[2]"></input></li><span class="num-block"> … </span><span class="num-block reqd"> … </span><li class="ans_li"><label>
       Document File
    </label><p class="uploadBtn"><input id="document_file_name_2" type="file" name="document_file_name_2"></input></p><p class="custom-form"><a id="ttl2" class="c-delete" onclick="delete_title(this.id);return false;" href="#">
      Delete
    </a></p></li>

我的问题在上面代码的以下行中:

<li id="ttl2" class="ptdoc"> … </li>

实际上,您可以从我的PHP代码中看到我在创建它之后没有关闭li。我将数据放在li中,然后关闭它。那么为什么li在生成HTML后立即关闭?谁可以在这方面帮助我?提前谢谢。

2 个答案:

答案 0 :(得分:3)

这是因为您无法将li直接放在另一个li中。 您需要先在li ulol下创建一个列表,否则浏览器会假设您忘记了</li>并将为您关闭此标记

答案 1 :(得分:1)

如果你没有olul生成孩子,

lili放入ol ul浏览器附加其各自的关闭标记