Question

I’m trying to create a form when someone clicks an “Edit” button. I’m following this example:
http://jqueryui.com/demos/dialog/modal-form.html

I have two problems:

1. The button looks like a regular html button. When I click, it turns into the jquery button. Then I click again and the dialog opens up. Obviously I just want the jquery button that I click once to open the dialog.

2. My form shows up on the main page AND when you click the edit button to open the dialog. It shouldn’t show up in the main page. It should only exist in the dialog. But from this tutorial (http://jqueryui.com/demos/dialog/modal-form.html) I fail to see them hiding the form, so I’m not sure how they do it.

My html form:

<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>

My button (which is in another table showing all the cameras):

<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>

My jquery code. It still needs more work but just has one thing I’m processing which is 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

You should probably move the js that turns your editButton into an jQuery button outside of the edit method. You want to bind the click() function and declare it as a button BEFORE you go into your edit method.

All this code only gets run after you click on the button the first time. That is why you are getting the strange functionality.

Put this in your page outside of the edit function:

$(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" );
    });
});

You can probably keep the var js = jQuery.noConflict(); if you really need it. You may also want to move your edit onclick logic into the click method of editbutton but that depends on what you really want to do.