2012-06-25 58 views
0

下面我有,我用clone()delegate()代碼。 代碼正在通過鏈接加載到jQuery UI對話框中。 問題阿賈克斯被正確觸發,因爲它應該,但沒有確定或角落的div被顯示,我的意思是警報觸發,但div的的CSS不改變它調用的成功方法,如果你覺得我的問題是什麼?選擇器有問題嗎?感謝jQuery的不改變的CSS標籤或也許找不到標籤

<input id="TaskId" name="TaskId" type="hidden" value="18" /> 
    <div id="MainDiv"> 
     <div id="toClone"> 
      <div style="display: inline;"> 
       <select id="Tasksess"> 
        <option value="">لطفاً کار را انتخاب کنيد</option> 
        <optgroup label="کار های جديد"> 
          <option value="16"style="">q3fe</option> 
          <option value="18"style="">fjhv j</option> 
          <option value="19"style="">wref</option> 
          <option value="25"style="">ff</option> 
        </optgroup> 
        <optgroup label="کار های در دست اقدام"> 
          <option value="13"style="">rr</option> 
          <option value="15"style="">yy</option> 
        </optgroup> 
        <optgroup label="کار های تمام شده"> 
          <option value="14"style="">tt</option> 
          <option value="18"style="">fjhv j</option> 
        </optgroup> 
       </select> 
      </div> 
      <div style="display: inline;"> 
       <select id="Statusess" name="Statusess"> 
        <option value="">لطفاً وابستگی را انتخاب کنيد</option> 
        <option value="1">پيشنياز</option> 
        <option value="2">همنياز</option> 
       </select> 
      </div> 
      <div style="display: none;" id="Ok"> 
       ok 
      </div> 
      <div style="display: none;" id="noOk"> 
       تکراری 
      </div> 
      <div id="loadingGif" style="display: none;"> 
       <img src="/Content/Images/ajax-loader/253L.gif" alt=""/> 
      </div> 
     </div> 
    </div> 
    <script type="text/javascript"> 
     $(document).ready(function() { 

      var Maindiv = $("#MainDiv"); 
      var toClone = $("#toClone"); 

      //$("#Statusess").each(function() { 
       $("#MainDiv").delegate('#Statusess', 'change', function() { 
        if ($(this).find(":selected").val() != "") {      
         if ($(this).parent().prev().find(":selected").val() != "") { 
          $(this).parent().parent().find("#loadingGif").attr("style", "display: inline;"); 
          $.ajax({ 
           url: '/ProjectAdmin/Project/AddTaskDependency?MainTaskId=' + $("#TaskId").val() + '&DependentTaskId=' + $(this).parent().prev().find(":selected").val() + '&Status=' + $(this).find(":selected").val(), 
           type: 'GET', 
           success: function (data, status) { 
            if (data != "0") { 
             $(this).parent().parent().find("#Ok").css('display', 'inline'); 
             $(this).parent().parent().find("#noOk").css('display', 'none'); 
    alert("1"); 
            } 
            else if (data == "0") { 
             $(this).parent().parent().find("#Ok").css('display', 'none'); 
             $(this).parent().parent().find("#noOk").css('display', 'inline'); 
    alert("2"); 
            } 
            var div = $('div:eq(0)', Maindiv).clone(); 
            Maindiv.append(div); 
           } 
          }); 
          $(this).parent().parent().find("#loadingGif").attr("style", "display: none;"); 

         } 
        } 
       }); 
      //}); 

     }); 
    </script> 
+3

元素的ID在頁面上應該是唯一的,所以你不需要$(this).parent()。parent()。find(「#Ok」);'。 '$(「#Ok」)'應該沒問題。 –

+1

您使用$(this).parent()。parent()是非常令人困惑的,因爲DOM並不反映您的選擇......雖然它沒問題JQuery它選擇了什麼? $(this)=「#MainDiv」,因此.parent()。parent()將選擇其父母......這不是你所需要的。 –

回答

1

我相信你的主要問題是你的選擇,是的。您可以添加額外的警報,以便在每個參考中提取值以查看錯誤發生的位置。

我對這種方法感到惱火,所以我對你的設置做了一些改變,並且除了ajax片斷之外,如果沒有你的AskTaskDependancy文件,我不能測試),我相信你會如你所願。

首先,the jsFiddle

注:我改變了所有的文字爲英文。這對你的代碼沒有任何影響,我只是不懂英語,所以隨時將它改回來,因爲它對代碼沒有影響。

更改日誌

  • 附加誤差alert()■如果select的值爲空
  • $(this).find(":selected").val()簡單$(this).val()
  • 數的參考名稱首字母大寫的內部
  • 所有ID MainDiv類
  • 從select中移動類名元件到div保持每個
  • .parent.prev().parent.children(".tasksess")(以及其它元件類似的參考方案)
  • 設置爲便於參考的每一個變種DIV /選擇
  • 改變的CSS()來ATTR()(隱蔽/顯示ok/notOk)
  • 我在單獨的行上構建了ajax url以方便閱讀。
  • 移動clone()外的Ajax請求,以驗證它的工作原理(隨時將其移回需要 - 要知道loadingGif它仍然在每個副本顯示,如果不先隱藏)
  • 註釋掉測試

新的HTML Ajax請求

<input id="TaskId" name="TaskId" type="hidden" value="18" /> 
<div id="MainDiv"> 
    <div class="toClone"> 
     <div class="tasksess" style="display: inline;"> 
      <select name="tasksess"> 
       <option value="">Select a Task</option> 
       <optgroup label="Group 1"> 
         <option value="16"style="">q3fe</option> 
         <option value="18"style="">fjhv j</option> 
         <option value="19"style="">wref</option> 
         <option value="25"style="">ff</option> 
       </optgroup> 
       <optgroup label="Group 2"> 
         <option value="13"style="">rr</option> 
         <option value="15"style="">yy</option> 
       </optgroup> 
       <optgroup label="Group 3"> 
         <option value="14"style="">tt</option> 
         <option value="18"style="">fjhv j</option> 
       </optgroup> 
      </select> 
     </div> 
     <div class="statusess" style="display: inline;"> 
      <select name="statusess"> 
       <option value="">Select a Status</option> 
       <option value="1">opt8</option> 
       <option value="2">opt9</option> 
      </select> 
     </div> 
     <div class="ok" style="display: none;"> 
      Everything looks good! 
     </div> 
     <div class="notOk" style="display: none;"> 
      Something went wrong! 
     </div> 
     <div class="loadingGif" style="display: none;"> 
      Loading... 
      <img src="/Content/Images/ajax-loader/253L.gif" alt=""/> 
     </div> 
    </div> 
</div>​ 

新的jQuery/JavaScript的

$(document).ready(function() { 

    var Maindiv = $("#MainDiv"); 
    var toClone = $(".toClone"); 

    $("#MainDiv").delegate('.statusess', 'change', function() { 
     var thisSel = $(this).children("select"); 
     var prevSel = $(this).parent().children(".tasksess").children("select"); 
     var divOk = $(this).parent().children(".ok"); 
     var divNotOk = $(this).parent().children(".notOk"); 
     var divLoad = $(this).parent().children(".loadingGif"); 

     if (thisSel.val() != "") { 
      console.log("status changed to val " + thisSel.val()); 
      if (prevSel.val() != "") { 
       console.log("task is val "+prevSel.val()); 

       divLoad.attr("style", "display: inline;"); 
       var url = '/ProjectAdmin/Project/AddTaskDependency'; 
       url += '?MainTaskId=' + $("#TaskId").val(); 
       url += '&DependentTaskId=' + prevSel.val(); 
       url += '&Status=' + thisSel.val(); 
       console.log("URL= "+url); 
       /* 
       $.ajax({ 
        url: url, type: 'GET', 
        success: function (data, status) { 
         if (data != "0") { 
          divOk.attr("style","display:inline;"); 
          divNotOk.attr("style","display:none;"); 
         } 
         else if (data == "0") { 
          divOk.attr("style","display:none;"); 
          divNotOk.attr("style","display:inline;"); 
         } 
        } 
       }); 
       */ 
       divLoad.attr("style", "display: none;"); 
       var div = $('div:eq(0)', Maindiv).clone(); 
       Maindiv.append(div); 

      } else { alert("Select 1 val is empty"); } 
     } else { alert("Select 2 val is empty"); } 
    }); 

});​ 
0

以下行不正確:

$$("#MainDiv").delegate('#Statusess', 'change', function() { 

變化$$("#MainDiv")$("#MainDiv")

+0

對不起,這是一個複製粘貼問題,在我的代碼中是正確的 – ePezhman

1

我不能肯定地說這是問題,但可以肯定的是你應該糾正。如果我正確理解你的代碼,你就克隆了#toClone div。然而,該專區內有許多孩子的ID,包括您的#Ok#noOkID是應該獨特一個頁面,所以一旦你克隆,你不再有獨特的項目。因此,應該將它們全部更改爲類:

  • id="toClone"class="toClone"
  • id="Tasksess"class="Tasksess"
  • id="Statusess"class="Statusess"
  • id="Ok"class="Ok"
  • id="noOk"class="noOk"
  • id="loadingGif"class="loadingGif"

(我做的問題,但是,如果你真的想OknoOk,並loadingGiftoClone DIV的孩子,或者如果你只是想他們是MainDiv的唯一的孩子。你的代碼看起來如此。如果是後者,那麼您需要將您的toClone div的標記</div>更改爲不包裝獨特的Ok,noOkloadingGif元素。在這種情況下,您可以將ID留給那些獨特的孩子。)

一旦更改,您需要更改代碼的其餘部分以選擇類,而不是ids;也適用於新克隆的子級的特定類。更改爲類可能會解決您的問題,因爲由克隆創建的多個id項可能會導致它使您的jquery無法找到項目。