Solved

Keep jQuery popup open

Posted on 2014-12-15
10
284 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 51

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 51

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
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 
LVL 51

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 51

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 500 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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
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 viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

770 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