Solved

Keep jQuery popup open

Posted on 2014-12-15
10
299 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4
  • 2
10 Comments
 
LVL 55

Expert Comment

by:Huseyin KAHRAMAN
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 55

Expert Comment

by:Huseyin KAHRAMAN
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
The Ultimate Checklist to Optimize Your Website

Websites are getting bigger and complicated by the day. Video, images, custom fonts are all great for showcasing your product/service. But the price to pay in terms of reduced page load times and ultimately, decreased sales, can lead to some difficult decisions about what to cut.

 
LVL 55

Expert Comment

by:Huseyin KAHRAMAN
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 55

Expert Comment

by:Huseyin KAHRAMAN
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

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article discusses how to implement server side field validation and display customized error messages to the client.
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.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

695 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