[jQuery] Re: Problem with submit button of an inserted form

[Cecil Westerhof]

2009/10/2 Giovanni Battista Lenoci <gian...@gmail.com>:
> first the easy thing:
>
>> Is there a way to let the fadeOut be finished before continuing?
>>
>
> Yes, fadeOut accept a callback function that is called after the effect end,
> take a look here:
>
> http://docs.jquery.com/Effects/fadeOut#speedcallback

That I allready found. I tried the folowing:
        $(placeInDOM).replaceWith(header + fields + footer);
        $('.submit_' + formID).click(function() {
          var fadeOutReady = false;
          var fadeSpeed    = 1500;
          var form = $('#' + formID);

          form.fadeOut(fadeSpeed, function() {
            fadeOutReady = true;
          });
          while( !fadeOutReady ) {
            // wait untill fadeOut is ready
          }
          jQuery.post(cgiURL,
            form.serialize(),
            function(xml) {
              alert($(xml).find('status').text() + '\n' +
$(xml).find('duration').text());
              form.fadeIn(fadeSpeed);
            },
            "xml"
          );
          return false;
        });

But when I use this code, my processor is very busy and the fadeOut
does not happen.


>
>>> A question, what placeInDOM contains? is an id? the html you're replacing
>>> contains the id?
>>>
>>
>> div#contact_form
>
> it is a string? the markup you've pasted shows a form that has an id
> "contact_form", not a div, maybe the problem is here?

My html contains:
    <div id = "contact_form">
    <div align = "center"><font color = "#FF0000">
    Hier zou een contact formulier moeten staan!!!
    </font></div>

So the div is replaced by a form. And this works without a problem.

And there is also my stupid mistake. The div is replaced, so I should
not search for it anymore. That happens when you want to make
something 'fast'.

I know use:
        $(placeInDOM).replaceWith(header + fields + footer);
        $thisForm = $('#' + formID);
        $(':submit', $thisForm).click(function() {

I do not need a class anymore. I want to change the click event for
all the submit buttons of the form and no other submit buttons. The
above code does this.


> if you solve your first problem you don't need to do this, only for
> aknowledgment you can use your selector also in this way:
>
> $form = $('#' + formID);
> $('.submit_' + formID, $form).click(function() {
>
> $form is the context in which jquery looks for the element with class
> '.submit_' + formID, but if I haven't misunderstood, if you change
> "placeInDOM" from "div#contact_form" to "#contact_form" you solve your
> problem and you can use the first version of the code you've posted before.

I prefer the way I do it know. In this way the HTML-page or the
function can change the way the id's are made, without breaking
anything. In the above way the HTML and function has to be
synchronized. I prefer to minimize the possibilities to break things.

Thanks for the help.

-- 
Cecil Westerhof