кнопка jQuery и модальная форма

Question

Я пытаюсь создать форму, когда кто-то нажимает кнопку «Изменить». Я следую этому примеру: http://jqueryui.com/demos/dialog/modal-form.html

У меня есть две проблемы:

1. Кнопка выглядит как обычная кнопка HTML. Когда я нажимаю, он превращается в кнопку jquery. Затем я снова нажимаю и открывается диалоговое окно. Очевидно, я просто хочу кнопку jquery, которую я нажимаю один раз, чтобы открыть диалог.

2. Моя форма отображается на главной странице И когда вы нажимаете кнопку редактирования, чтобы открыть диалог. Он не должен отображаться на главной странице. Он должен присутствовать только в диалоговом окне. Но из этого урока (http://jqueryui.com/demos/dialog/modal-form.html) я не вижу, чтобы они скрывали форму, поэтому я не уверен, как они это делают.

Мой HTML-форм:

<div id="dialog-form" title="Change camera settings"> 
     <form> 
     <fieldset> 
      <label for="camera_name">Camera Name</label> 
      <input type="text" size="16" maxlength="32" name="camera_name" id="camera_nameid" class="text ui-widget-content ui-corner-all" /> 
     </fieldset> 
     </form> 
</div> 

Моя кнопка (которая находится в другой таблице показаны все камеры):

<button id="editbutton" onClick='edit(this, "<?php echo htmlentities($_SERVER['REQUEST_URI']); ?>", "<?php echo $result_cameras[$i]["camera_name"]; ?>", "<?php echo $camera_quality; ?>")'>Edit</button> 

Мой JQuery код. Он по-прежнему нужно больше работать, но только есть одна вещь, я обработка, которая camera_name:

function edit(t, to, cameraname, cameraquality,) 
{ 
var js = jQuery.noConflict(); 
js(function() { 
    var name = js("#camera_name"); 
    allFields = js([]).add(name); 
    js("input:text").val(cameraname); //fill in the current data for cameraname 

    js("#dialog-form").dialog({ 
     autoOpen: false, 
     height: 300, 
     width: 350, 
     modal: true, 
     buttons: { 
      "Edit camera settings": function() { 
       allFields.removeClass("ui-state-error"); 

      }, 
      Cancel: function() { 
       js(this).dialog("close"); 
      } 
     }, 
     close: function() { 
      allFields.val("").removeClass("ui-state-error"); 
     } 
    }); 

    js("#editbutton") 
     .button() 
     .click(function() { 
      js("#dialog-form").dialog("open"); 
     }); 
}); 
} 

Answer 1

Вы, вероятно, следует переместить JS, что превращает ваш editButton в кнопку JQuery вне метода редактирования. Вы хотите связать функцию click() и объявить ее как кнопку ПЕРЕД вы переходите к вашему методу редактирования.

Весь этот код запускается только после нажатия кнопки в первый раз. Вот почему вы получаете странную функциональность.

Put это в вашей странице за пределами функции редактирования:

$(function() {  

$("#dialog-form").dialog({ 
    autoOpen: false, 
    height: 300, 
    width: 350, 
    modal: true, 
    buttons: { 
     "Edit camera settings": function() { 
      allFields.removeClass("ui-state-error"); 

     }, 
     Cancel: function() { 
      $(this).dialog("close"); 
     } 
    }, 
    close: function() { 
     allFields.val("").removeClass("ui-state-error"); 
    } 
}); 

$("#editbutton") 
    .button() 
    .click(function() { 
     $("#dialog-form").dialog("open"); 
    }); 
}); 

Вы можете вероятно держать var js = jQuery.noConflict();, если вам действительно нужно. Вы также можете перенести свою правую логику onclick в метод щелчка editbutton, но это зависит от того, что вы действительно хотите сделать.