?
Solved

Call jquery modal box onclick

Posted on 2011-10-20
6
Medium Priority
?
1,010 Views
Last Modified: 2012-05-12
Hi Experts,

Currently I have a bit of javascript that when a user clicks on a radio button, it checks if there are any spaces left and alerts them
function CheckStanSpaces(numSP) {
	var nSp = numSP;
	if(nSp==0) {
		alert('Sorry there are no spaces left');
		return false;
	}
}

Open in new window


What I want to do is put the alert in a nice jquery modal box with some instructions on what to do next.

Here is my modal div
<div id="dialog-standard" title="There are no spaces available">
<p>
Unfortunately, there are currently no places left on this course, but please fill in the online registration form in order to be added onto a waiting list. You will be notified if a place becomes available or if we should decide to run an additional course in your geographical region. <br /><br />Alternatively, checkout our website as similar courses might be offered in other geographical regions across Europe.</p>
</div>

Open in new window


I have an onclick on the radio's
<input type="radio" name="reg_type" id="type_radio_1"  value="<?php echo $row_courses['e_price']; ?>"  onclick="return CheckStanSpaces(<?php echo $row_courses['e_avail']; ?>)" onchange="priceCalc(this.value);  regType('Standard');"/>

Open in new window


The jquery I am using on another page (which works fine as it is displayed when the page loads) for the modal box is
	$(function() {

		$("#dialog").dialog("destroy");
	
		$("#dialog-message").dialog({
			modal: true,
			width: 500,
			buttons: {
				Close: function() {
					$(this).dialog('close');
				}
			}
		});
	});

Open in new window


But if i put this inside the existing javascript it doesn't work, as in it does nothing at all.
function CheckStanSpaces(numSP) {
	var nSp = numSP;
	if(nSp==0) {
$(function() {

		$("#dialog").dialog("destroy");
	
		$("#dialog-standard").dialog({
			modal: true,
			width: 500,
			buttons: {
				Close: function() {
					$(this).dialog('close');
				}
			}
		});
	});
	}
}

Open in new window


Any ideas please?

many thanks in advance
Jim
0
Comment
Question by:dovercomputers
  • 3
  • 3
6 Comments
 
LVL 11

Accepted Solution

by:
MacAnthony earned 2000 total points
ID: 37002195
Putting code inside an empty $() just binds that code to the onready event for the document. It doesn't actually run the code and you don't need it. Just put the done in without that.

function CheckStanSpaces(numSP) {
	var nSp = numSP;
	if(nSp==0) {
		$("#dialog").dialog("destroy");
	
		$("#dialog-standard").dialog({
			modal: true,
			width: 500,
			buttons: {
				Close: function() {
					$(this).dialog('close');
				}
			}
		});
	}
}

Open in new window

0
 

Author Comment

by:dovercomputers
ID: 37002262
Thanks for the reply.

I have tried that, and it has no effect.

Clicking the radio doesn't trigger the model box but there is a seperate onchange function (that changes the price in the field) that is triggered after that call and the onchange works fine.
0
 
LVL 11

Expert Comment

by:MacAnthony
ID: 37002401
Is the problem that the function is not being called or is it that the dialog is not showing?

If it's being called, then is it getting into the if block?
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:dovercomputers
ID: 37002428
I have put an alert
            
alert('i am called');

Open in new window

inside the if statement and that pops up, so the function is being called and the if statement is working. But no dialogue.

The dialogue div id is correct (dialog-standard).
0
 

Author Comment

by:dovercomputers
ID: 37002456
I could slap myself stupid sometimes.

The div was inside an if statement that wasn't being triggered.

Your code works so points awarded.

thanks again.
0
 
LVL 11

Expert Comment

by:MacAnthony
ID: 37002575
Glad you figured it out. Thanks for the credit.
0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

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

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
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…
Suggested Courses

840 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