jQuery UI模式窗體不工作 - DIV不會隱藏，按鈕沒有任何作用

我有代碼不想工作，但我基本上鏡像了我的功能頁之一。自昨晚以來，我一直在抨擊這件事，我看不出有什麼不對。有人可以看看這個，並幫我弄清楚爲什麼它壞了？jQuery UI模式窗體不工作 - DIV不會隱藏，按鈕沒有任何作用

HTML按鈕

<td><input type="button" class="button" value="Add Location" id="AddLoc" style="width: 141px; text-align: center;"></td>

JQuery的

$('#AddLoc').click(function() { 
    var setLoc = function() { 
     var n = $('#LocName').val(); 
     var a1 = $('#LocAddr1').val(""); 
     var a2 = $('#LocAddr2').val(""); 
     var c = $('#LocCity').val(""); 
     var z = $('#LocZip').val(""); 

     $.post('/jqf/hvsr_processajax.php', {N: n, A1: a1, A2: a2, C: c, Z: z}, function (data) { 
      $(#'HVLoc').replaceWith(data); 
     }); 
    } 

    var cancel = function() { 
     $('#LocName').val(""); 
     $('#LocAddr1').val(""); 
     $('#LocAddr2').val(""); 
     $('#LocCity').val(""); 
     $('#LocZip').val(""); 
     $("#AddLocForm").dialog("close"); 
    }; 

    var dialogOpts = { 
     modal: true, 
     buttons: { 
      "Continue": setLoc, 
      "Cancel": cancel 
     }, 
     autoOpen: true, 
     height: 300, 
     width: 550, 
    }; 

    $('#AddLocForm').css("display", "block"); 
    $('#AddLocForm').dialog(dialogOpts); 
}); 
$('#AddLocForm').css("display", "none");

HTML DIV

<div id="AddLocForm" title="Add Missing Location To CHAIRS Database""> 
    <form style="margin:5px; border: 1px solid #f2f2f2; background-color: #FAFAFA;"> 
     <fieldset style="border: 1px solid black; margin-left: 10px; margin-right: 10px; margin-bottom: 10px; margin-top: 0; padding: 10px; width: 460px;"> 
      <legend>Complete Form To Add Location</legend> 
      <table style="border-collapse:collapse; border-spacing:0; border:2px solid #253183; width: 100%; max-width: 480px;"> 
<tr> 
    <th colspan="2" style="font-size:12px; font-weight:bold; background: #4F82CB; color: #FFFFFF; padding:2px 2px; overflow:hidden; word-break:normal;">Location Name</th> 
</tr> 
<tr> 
    <td colspan="2" style="font-size:14px; font-weight: normal; color: #000000; padding:10px 5px; border-style:solid; border-width:1px; border-color: black; overflow:hidden; word-break:normal;"><input class="input" type="text" name="hvlocationName" id="LocName" style="width: 423px"/></td> 
</tr> 
<tr> 
    <th style="font-size:12px; font-weight:bold; background: #4F82CB; color: #FFFFFF; padding:2px 2px; overflow:hidden; word-break:normal;">Address 1</th> 
    <th style="font-size:12px; font-weight:bold; background: #4F82CB; color: #FFFFFF; padding:2px 2px; overflow:hidden; word-break:normal;">Address 2</th> 
</tr> 
<tr> 
    <td style="font-size:14px; font-weight: normal; color: #000000; padding:10px 5px; border-style:solid; border-width:1px; border-color: black; overflow:hidden; word-break:normal;"><input class="input" type="text" name="hvlocationAddr1" id="LocAddr1" style="width: 200px"/></td> 
    <td style="font-size:14px; font-weight: normal; color: #000000; padding:10px 5px; border-style:solid; border-width:1px; border-color: black; overflow:hidden; word-break:normal;"><input class="input" type="text" name="hvlocationAddr2" id="LocAddr2" style="width: 200px"/></td> 
</tr> 
<tr> 
    <th style="font-size:12px; font-weight:bold; background: #4F82CB; color: #FFFFFF; padding:2px 2px; overflow:hidden; word-break:normal;">City</th> 
    <th style="font-size:12px; font-weight:bold; background: #4F82CB; color: #FFFFFF; padding:2px 2px; overflow:hidden; word-break:normal;">Zip Code</th> 
</tr> 
<tr> 
    <td style="font-size:14px; font-weight: normal; color: #000000; padding:10px 5px; border-style:solid; border-width:1px; border-color: black; overflow:hidden; word-break:normal;"><input class="input" type="text" name="hvlocationCity" id="LocCity" style="width: 100px"/></td> 
    <td style="font-size:14px; font-weight: normal; color: #000000; padding:10px 5px; border-style:solid; border-width:1px; border-color: black; overflow:hidden; word-break:normal;"><input class="input" type="text" name="hvlocationZipCode" id="LocZip" style="width: 100px"/></td> 
</tr> 
      </table> 
      <input type="hidden" name="submitted" value="1"> 
      <input id="btnSubmit" type="submit" value="Submit" class="button"> 
     </fieldset> 
    </form> 
</div>

謝謝你這麼多大家！

來源

2015-09-26 TheJester1977

所有線路是這樣的：'變種A1 = $（ '＃LocAddr1'）VAL（「」）;'錯了。當你給'.val（）'一個參數時，它設置該值，它不會返回它。 – Barmar

在'title =「添加缺少的位置到CHAIRS數據庫的末尾有一個額外的雙引號」'。這就搞亂了所有的HTML。 – Barmar

您可以使用$（「＃AddLocForm」）。serialize（）'來從表單中獲得所有的輸入，而不是所有的'.val（）'調用 – Barmar

你有幾個小錯誤。

<div id="AddLocForm" title="Add Missing Location To CHAIRS Database"">有一個最後的額外"。
所有行像var a1 = $('#LocAddr1').val("");不應該有""參數。這是設置值而不是檢索它。
$(#'HVLoc').replaceWith(data);#應該在引號內。這在Javascript控制檯中導致語法錯誤，我不知道你是如何錯過它的。

當我修復這些錯誤，你的代碼工作：

http://jsfiddle.net/barmar/oy6dtsd2/2/

來源

2015-09-26 11:34:29 Barmar

在即將到來的最後期限上工作，每週最多兩個小時的睡眠時間...感謝您的額外的眼睛！ – TheJester1977

jQuery UI模式窗體不工作 - DIV不會隱藏，按鈕沒有任何作用

回答

相關問題