jQuery plugin conflicts - please assist

Question

The aim is to show a form which will update the div on the page with the result

1. load this [page]
2. click the linkto show the form
3. submit the form

When submitting, the result does not show in the div if the form had been hidden.

• after adding the code suggested in the below answers, I show the form, it gets submitted, but the data is not appearing in the div I give the ajaxForm as target

  [Here] is the same form that does show the result in the div

Thanks

Answer 1

In the example that doesn't work, if you bind the ajaxForm when you display the form it should work fine.

// you may want to use better/faster selector then 'a' but in this example it 
// will work
$('a').click(function () {
    $('#feditform').fadeIn('slow').ajaxForm(options);
    return false;
});

Add above instead of jQuery.facybox({ div: '#formDiv' }); return false and it should work as expected.

Answer 2

I'm not sure, but may be you init form with the wrong id?

$('#formDiv').fadeIn('slow').ajaxForm(options)

When form id is feditform. And in the correct example located on http://plungjan.name/eetest/facy.html $('#feditform').ajaxForm(options);

Answer 3

When you submit the form, the request is sent to the server and you obtain a HTTP Error: 405 Method Not Allowed.

It looks like it comes from the configuration of your server. http://www.checkupdown.com/status/E405.html

Edit: as your code works for your example in the facy.html page I think it doesn't really comes from the server. The difference between the two examples are the action of the form.

• fancy.html: you load a PHP file
• fancy3.html: you load an HTML file

Did you try to call your thank you page "thanks.php" and modify the action of your form accordingly. I suppose that your server might not allow POST request on an HTML page.

Answer 4

The data did appear for me in the link you posted.

If you think it is related to plugin conflict try jquery.noConflict() http://api.jquery.com/jQuery.noConflict/

While not the most elegant solution. It easily fixes any conflicts you have with plugins.

Answer 5

As far as I can see you now have:

<div id="formDiv" style="display:none"> some other code here </div>

but you still call $('#feditform').fadeIn('slow').ajaxForm(options);

as far as I can see and know about jQuery this will never show up, because the surrounding div is display:none. I suggest to do three things:

• Do simplify the code first by using hide() and show(), which will avoid trouble with some animations. If this works, you can go on and introduce the animated versions again.
• Just hide the content on the (document).ready function via jQuery, so you can rely on those functions. We had bad experiences with 'mixed' approaches (hardcoded and via jQuery) especially concerning show and hide situations.
• Last but not least: Some plugins and environments do make troube using $. We tend to use the keyword jQuery in those situations because this will always keep the scope.

Hope this helps.

Answer 6

I don't think your problem is jQuery/Javascript related.

Once the form is submitted (through PHP I presume?) you need to echo a message which will be passed as part of the success callback. i.e.

echo '<strong>' . $_POST['message'] . '</strong>';

Care to post your server side code?