2013-02-04 110 views
0

測試JQuery UI並且不喜歡它。Jquery UI,對話框不工作

This http://jsfiddle.net/FhjQy/4/是一個複製,粘貼和(個人的詳細信息刪除)。

請告訴我爲什麼當單擊拒絕圖像時頁面剛剛閃爍。這意味着提出我的模態表單對話框!

HTML:

<div id="comments_dialog" title="Reject an event"> 
     <form name="commentsForm" action="#" method="POST"> 
      <p>The Event: <span id="eventName"></span> is being rejected, you have the 
       option to give a reason or any comments in the box below.</p> 
      <p class="ui-icon ui-icon-alert" 
      id="errorComment"></p> 
      <textarea name="comments" id="comments" size="30"></textarea> 
      <p>The Event: <span id="eventName"></span> will be removed from the system 
       and will not go on to the calendar, any comments wiil be emailed to the 
       event author. 
       <br/>Click the button below.</p> 
     </form> 
    </div> 
<TABLE WIDTH="100%" BORDER="1" CELLSPACING="0" CELLPADDING="4" DWCOPYTYPE="CopyTableRow" 
BORDERCOLOR="#000066"> 
    <tr class="tableHeading"> 
     <td>Actions</td> 
     <td>Event Name</td> 
     <td>Event Description</td> 
     <td>Date & Time</td> 
    </tr> 
    <tr class="tableRow<?=$num?>" class="1234"> 
     <td> 
      <form name="actionTaken" class="1234" action="#" method="POST"> 
       <input type="hidden" name="submit_id" id="submit_id" value="1234" /> 
       <input name="approve" id="approve" value="Y" type="image" src="/control/images/tick-green.gif" 
       />Approve 
       <br/> 
       <input name="edit" id="edit" value="Y" type="image" src="/control/images/edit.gif" 
       />Edit & Approve 
       <br/> 
       <input name="reject" id="reject" value="Y" type="image" src="/control/images/cross-small.gif" 
       />Reject & Comment</form> 
     </td> 
     <td class="event_name">Event Name</td> 
     <td>Event Description</td> 
     <td>Date Time</td> 
    </tr> 
</TABLE> 

JS:

$("#comments_dialog").dialog({ 
    autoOpen: false, 
    resizable: true, 
    modal: true, 
    buttons: { 
     "Confirm Event Rejection": function() { 
      var comments = $("#comments").val(); 


      if ((comments !== "") || (comments !== undefined)) { 

       var dataString = 'submit_id=' + submit_id + '&reject=' + reject + '&comments=' + comments; 

       $.ajax({ 
        type: "POST", 
        url: "/echo/html/", 
        data: dataString, 
        success: function (response) { 
         if (response == "rejectSuccess") { 
          $(this).dialog("close"); 
          $("tr#" + submit_id).fadeOut(3000); 

          $("#blue").after("<div id=\"green\">The event has been rejected and deleted from the system. Your comments have been sent to the person that submitted the event.</div>"); 
          window.setTimeout(hideNotify, 60000); 
          $("tr#" + submit_id).remove(); 
         } else { 
          $("#errorComment").text("There was an error, please refresh the page and try again."); 
         } 
        }, 
        error: function() { 
         $("#errorComment").text("There was an error, please refresh the page and try again."); 
        } 
       }); 
       return false; 
      } else { 
       $('#errorComment').text("You need to give a feedback for this rejection!"); 
      } 

     } 
    }, 
    closeOnEscape: false 
}); 

$("input#reject").click(function() { 
     submit_id = $(this).parent().attr("class"); 
     reject = $(this).val(); 
     var event_name = $(this).parent().parent().find(".event_name").html(); 

     $("#eventName").text(event_name); 

     $("#comments_dialog").dialog("open"); 
    }); 

感謝

回答

0

看來input#reject是在一個循環(一個由行)。使用一個類而不是一個id:一個id標識DOM中的一個UNIQUE元素。然後嘗試使用$('input.reject).click...