?
Solved

Keep jQuery popup open

Posted on 2014-12-15
10
Medium Priority
?
325 Views
Last Modified: 2014-12-16
On this homepage: http://www.sempdx.org/
First column, second row square box that says newsletter signup. When you click the read more button in that box, I'm using jQuery to show the signup form in a popup. But we found that if there's an error, the box disappears and you have to click the read more again to see it. So obviously most users aren't going to know there was an error and they didn't get signed up.

This is the jQuery:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script><script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script><script>// <![CDATA[
jQuery( "#newsletter" ).dialog({ autoOpen: false });
jQuery( "#opennewsletter" ).click(function() {
jQuery( "#newsletter" ).dialog( "open" );
});
// ]]></script>

Open in new window


But the form itself is in an iframe that comes from an external source, so I'm unable to alter anything on or in the form itself.

What I'd like to do is force the popup to just stay open once the read more button is clicked. The user would have to click the close button afterwards, but that would be much better than them not seeing there was an error.

I'm very weak in jQuery, so could I get some help on how to change the code to do this?
0
Comment
Question by:Dzynit
  • 4
  • 4
  • 2
10 Comments
 
LVL 61

Expert Comment

by:HainKurt
ID: 40500968
i cannot re-produce the issue, i mean error part and does not show anything...
0
 
LVL 14

Author Comment

by:Dzynit
ID: 40501142
I'm sorry, just don't fill in an email address and it will cause the error and you should see the popup disappears so the user can't see there was an error on the form. But then if you click the read more button again on the newsletter signup square, the form appears again showing that it errored and didn't complete the signup.
0
 
LVL 61

Expert Comment

by:HainKurt
ID: 40501369
i see the issue now...

fix is not easy i guess...re-design needed...

that form is a part of your main page! and when you click that, you submit the form/page (not just dialog) and whole page refreshes... and of course dialog is not auto open!
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
LVL 61

Expert Comment

by:HainKurt
ID: 40501378
i guess with this plug-in you can do what you need...

http://malsup.com/jquery/form/
0
 
LVL 58

Expert Comment

by:Gary
ID: 40501399
Why are you not checking everything is filled in before allowing the submit?
Somewhere in your footer or after the jquery library add

<script>
$(function(){
	$("#emma-subscription-form").submit(e){
		if($("#emma-email").val()==""){
			e.preventDefault()
			alert("Please enter your email")
		}
	})
})
</script>

Open in new window

0
 
LVL 61

Expert Comment

by:HainKurt
ID: 40501417
validation is not a solution here i guess... There should be some error messages that is coming from server or there should be some messages like "thank you, you are added", "email already in our db" etc...

validation is only good to stop posting with blank/wrong data...

design is wrong! that tiny modal form should not post whole page! first you need to fix that issue...
0
 
LVL 58

Accepted Solution

by:
Gary earned 2000 total points
ID: 40501422
Had a syntax error in the code


<script>
$(function(){
	$("#emma-subscription-form").submit(function(e){
		if($("#emma-email").val()==""){
			e.preventDefault()
			alert("Please enter your email")
		}
	})
})
</script>

Open in new window

0
 
LVL 14

Author Comment

by:Dzynit
ID: 40502856
Gary, that will work perfectly for if the email field is empty. Do you think there's a way to catch it if there's an error?

If you use heather@searchcommander.com in the email field - you can see the error it gives if someone tries to sign up twice with the same email address.
0
 
LVL 14

Author Comment

by:Dzynit
ID: 40502891
I was able to add to that piece of script and this should work  for us now. Much better than a person not knowing there was an error. I knew this was a bit of a tricky one because we don't have access to the actual form. It comes from a separate company in an iframe. Here's the code altogether:

<script>
$(function(){
	$("#emma-subscription-form").submit(function(e){
		if($("#emma-email").val()==""){
			e.preventDefault()
			alert("Please enter your email")
		}
		if($(".emma-status").html()=="Member Not Added, Member may have already been added. Please Try Again."){
			e.preventDefault()
			alert("Member Not Added, Member may have already been added. Please Try Again.")
		}		
	})
})
</script>

Open in new window

0
 
LVL 14

Author Closing Comment

by:Dzynit
ID: 40502893
Thanks much!
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
These seven tips can help you create an extraordinary website, one that captivates audiences and has them wanting to return regularly for more. Keep reading to find out what your site is missing and what you need to add!
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.
Suggested Courses

593 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question