Solved

Keep jQuery popup open

Posted on 2014-12-15
10
277 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
Comment Utility
i cannot re-produce the issue, i mean error part and does not show anything...
0
 
LVL 14

Author Comment

by:Dzynit
Comment Utility
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
Comment Utility
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
 
LVL 51

Expert Comment

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

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

Expert Comment

by:Gary
Comment Utility
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
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 
LVL 51

Expert Comment

by:HainKurt
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Thanks much!
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Using SQL Scripts we can save all the SQL queries as files that we use very frequently on our database later point of time. This is one of the feature present under SQL Workshop in Oracle Application Express.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmakerā€¦
The viewer will learn how to count occurrences of each item in an array.

762 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now