Question

Am trying to understand jquery. Am a bit slow, maybe cause I come from a COBOL background.

I learn as i do, instead of just reading. php, jquery are all just hobbies for me

I used to have these update form pages. I wanted to try and put them in dialogs.

I trying using Dialog with an I frame, I did not like it, The iframes were very slow to load, of of the pages being loaded contained jquery tabs, which where even slower to load. And several other problems.

So I trying moving away from iframes. I stripped the pages and kept the meat(the body of my php/html file)(minus the body tag), So now I load a short version of my Form onto the dialog, It loads beautifully and looks good.

So next I wanna submit my for data, this is where I am a bit lost….

I am guesting I have to use Ajax, but on returning from Ajax with a OK/Fail message I am lost again.

My submit buttons were not jquery dialog buttons, Must they be so?

Must I use buttons:

{
     "Save" : function () {
          .....
     "Close" : function () {
          $(this).dialog("close");
          .....
}     

These are ugly and I have less control on where to place them and how the look.

Answer 1

All you need to do is make sure you have a form in your dialog box.
The, add a listener on your form. Let’s say you have

<form id="myForm">
    <input id="myInput" name="myName" type="text" />
</form>

Then you would add a listener :

$("#myForm").die().live('submit',function(e) {
    e.preventDefault();
    $.ajax({
        type : POST,
        url : localhost:8080/myUrl,
        dataType : 'json',
        cache: false,
        contentType: "application/x-www-form-urlencoded; charset=UTF-8",
        data : $("#myForm").serialize(),
        success : function(){ //do what you want here, like displaying validation errors...},
        error:function (xhr, ajaxOptions, thrownError){ //manage ajax errors}
    });

    return false;
});

So your Save button is just a plain input type=”submit”

Have fun !