We help IT Professionals succeed at work.

New podcast episode! Our very own Community Manager, Rob Jurd, gives his insight on the value of an online community. Listen Now!

x

Jquery driving me nuts...

Stephen Forlance
on
105 Views
Last Modified: 2017-04-10
Hi all,
on this page:

http://bit.ly/2nhZPV8

Can anyone tell me why the modal that is launched when you click "Feedback modal" at the bottom of the page works fine, however the modal that is launched by clicking the red button and then "risk" doesnt.

When you click send its supposed to send the data via POST method and close the modal, same as the feedback modal.

All help is appreciated,
Comment
Watch Question

CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
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"
Greg AlexanderLead Developer

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

Author

Commented:
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.
Greg AlexanderLead Developer

Commented:
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");
			}
		});
	});
	
});

Open in new window

CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION

Author

Commented:
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.

Author

Commented:
Brilliant, thank you so much!
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
You are welcome.

Author

Commented:
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?
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
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.

Author

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


Thanks
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
Where is form.feedback on that page?

You have this
<div id="feedback">OPP</div>

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

Author

Commented:
On the Ajax form the form is:
 <form class="feedback" role="form" method="POST" id="feedback" name="feedback">
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
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.
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.