Jquery driving me nuts...

That page has a bunch of console errors you might want to clean up before going any further.

by clicking the red button and then "risk" doesnt.

Define "not working" - I see a modal when I click "risk"

The modal seems to be working as you have described.. please clarify.

Apologies for not being clearer. The modal displays fine in both cases, however on the modal that appears by clicking Risk, when you click the blue "Send" button nothing happens.

Whereas with the modal that appears by clicking "Feedback Modal form" clicking the blue "Send" button resutls in the form contents being submitted and the modal hidden.

You have id="submit" on all three modal submit buttons... IDs need to be unique. I would suggesting using classes class="submit" and then change the function that runs the form to:

$(document).ready(function(){ 	
	$("button.submit").click(function(){
		$.ajax({
			type: "POST",
			url: "up.html",
			data: $('form.feedback').serialize(),
			success: function(message){
				$("#feedback").html(message)
				$("#feedback-modal").modal('hide'); 
			},
			error: function(){
				alert("Error occurred but thats ok, because at least jquery is being called");
			}
		});
	});
	
});

Select allOpen in new window

Just as a quick test I changed the id to "bing" (a unique ID) and also the one in the function, however its still not working.

Brilliant, thank you so much!

You are welcome.

Hello,
just noticed a further problem which may be related.

 data: $('form.feedback').serialize(),

doesnt return the form data, Im guessing because the form is called via ajax. How can I bind it correctly?

It is not due to AJAX - it is most probably because $('form.feedback') is not finding the form - selector may be wrong.

Need to see HTML definition of form.

Hi,
the HTML is at:
http://www.dnx.org/mep/mep.html


Thanks

Where is form.feedback on that page?

You have this

<div id="feedback">OPP</div>

Select allOpen in new window

That is the only element on the page with anything linked to the word feedback. It is clearly not a form so form.feedback is going to give you nothing.

In fact there is no <form> on that page at all - so there is nothing to serialize. For form.serialize() to work there has to be a form involved.

On the Ajax form the form is:
 <form class="feedback" role="form" method="POST" id="feedback" name="feedback">

No the problem is your form

Only one control has a name (section) and all the values in the options are blank.

In order for a control on form to be submitted it HAS TO have a name - no name - no value on the other side - because there is nothing to associate the value to.

The serialize on your AJAX is working - it is just not finding any valid data on the form.

Give your controls names.