Jump to content
w3schoon

Stop alert/prompt from continuously appearing

Recommended Posts

Nice be with you everyone! My problem is: Every time I click "#show" my prompt is continuously appearing though I click OK, cancel or close? Here is my code:

<script type="text/javascript" src="javascripts/jquery-1.9.1.min.js"></script> <script> $(document).ready(function(){ $("#weight").hover(function(){ $("#show").css("display", "block"); }, function(){ $("#show").css("display", "none"); $("#show").mouseenter(function(){ $(this).data("mouse", "enter"); if ($(this).data("mouse") == "enter"){ $(this).css("display", "block").click(function(){								  var converted = prompt ("Convert poud to kilograms:","")answer = converted * 0.45359237; // 1 lb = 0.45359237 kganswer = answer.toFixed(2);  if (!isNaN(converted)) { // If not illegal number  if (converted != 0) { // If not empty valuealert(converted + " poud = " + answer + " kilograms");$("#weight").val(answer); } else alert("Error: Empty value!"); // If empty value } else alert("Error: Illegal number!"); // If illegal number });}});});}); </script>

Take a look my attached picture. Thank you.

post-119709-0-74334800-1360735154_thumb.png

Share this post


Link to post
Share on other sites

Correct spacing would help, here, the problem is extremely obvious with tabs:

$(document).ready(function () {    $("#weight").hover(function () {        $("#show").css("display", "block");    }, function () {        $("#show").css("display", "none");        $("#show").mouseenter(function () {            $(this).data("mouse", "enter");            if ($(this).data("mouse") == "enter") {                $(this).css("display", "block").click(function () {                    var converted = prompt("Convert poud to kilograms:", "")                    answer = converted * 0.45359237; // 1 lb = 0.45359237 kg                    answer = answer.toFixed(2);                    if (!isNaN(converted)) { // If not illegal number                        if (converted != 0) { // If not empty value                            alert(converted + " poud = " + answer + " kilograms");                            $("#weight").val(answer);                        } else alert("Error: Empty value!"); // If empty value                    } else alert("Error: Illegal number!"); // If illegal number                });            }        });    });});

You're setting a mouseenter handler inside another event handler, and so it will be set multiple times. Then inside the mouseenter handler, you're setting the click handler, so that will be set a lot more times.You should set the event handlers outside of the existing event handlers to prevent them from being added multiple times.

  • Like 1

Share this post


Link to post
Share on other sites

Oh.. I see.. Thanks but is there anything I can do besides

set the event handlers outside of the existing event handlers
?Like methods or functions that will stop alert/prompt form continuously appearing? Edited by w3schoon

Share this post


Link to post
Share on other sites

@ Callumacrae: Wow! Thank you very much! I followed your advice and it works! :good:

You should set the event handlers outside of the existing event handlers to prevent them from being added multiple times. -Callumacrae
I set my jQuery click event handler outside jQuery hover & mouseenter event handlers and it works! :D Here's my code:
              $(document).ready(function(){                 $("#weight").hover(function(){                    $("#show").css("display", "block");                }, function(){                    $("#show").css("display", "none").mouseenter(function(){                        $(this).css("display", "block").mouseleave(function(){                           $(this).css("display", "none");                         });                    });                });                                $("#show").click(function(){                    $(this).css("display", "none");                                                    var a=prompt("Convert pouds to kilograms:","");                    b=a * 0.45359237; // 1 lb = 0.45359237 kg                    b=b.toFixed(2);                                        if (!isNaN(a)) { // If not illegal number                        if (a != 0) {  // If not empty value                            alert(a + " pouds = " + b + " kilograms");                            $("#weight").val(;                        }                        else alert("Error: Empty value!"); // If empty value                    }                    else alert("Error: Illegal number!"); // If illegal numer                });            }); 

Edited by w3schoon

Share this post


Link to post
Share on other sites

What he was trying to say is NOT nest these events within others, i.e don't use the mouseevent, mouseleave events within the hover event trigger, keep separate from each other.

$('.whatever').hover(function(){  // run code for this event}); $('.whatever').mouseenter(function(){// run code for this event}); $('.whatever').mouseenter(function(){// run code for this event});

Edit: 2 create outer container and use this for hover etc

$(document).ready(function () {$("#show").css({"visibility": "hidden" , "display": "block"}); 	$("#weight_wrapper").hover(function () { 		$("#show").css("visibility", "visible"); 	}, function () { 		$("#show").css("visibility", "hidden"); 	});	   				$('#show').click(function () {$("#show").css("visibility", "hidden");					var converted = prompt("Convert pound to kilograms:", "")					answer = converted * 0.45359237; // 1 lb = 0.45359237 kg					answer = answer.toFixed(2); 					if (!isNaN(converted)) { // If not illegal number 						if (converted != null && converted != 0) { // If not empty value							alert(converted + " pound = " + answer + " kilograms");							$("#weight").val(answer); 						} else alert("Error: Empty value!"); // If empty value 					} else alert("Error: Illegal number!"); // If illegal number 				}); });

  <fieldset id="weight_wrapper"><input id="weight" type="text" /><input id="show" type="button" value="convert" /></fieldset>

Edited by dsonesuk
  • Like 1

Share this post


Link to post
Share on other sites

@ dsonesuk: Thank's for editing, I really appreciated your effort and I learned a lot of things :) I have another question my friends, Is it good practice to place jQuery selectors in a variables for optimisation? Here's my code:

		   $(document).ready(function(){				$("form").submit(function(){					var a=$("#position"); var b=$("#job"); var c=$("input#religion"); var d="Others";				  					if (a.val() == "" && b.val() == d ){						b.val("").focus();						return false;					}					if (c.val() == d){						c.val("").focus();						return false;					}				});			});		  

Edited by w3schoon

Share this post


Link to post
Share on other sites

yes. any variable in particular that requires some sort of lookup, like when iterating over an array of objects for example, it is helpful to cache that particular index.

//assumes people is a predefined array of people objectsfor(var i = 0, l = people.length; i < l; i++){  var person = people[i];  console.log("Hi, my name is " + person.firstName + " " person.lastName);  console.log("I am " + person.age + " and I live in " +  person.location);};

or, in the case of what you're doing with jQuery, caching DOM elements instead of hitting the DOM multiple times to call method on the returned object.

  • Like 1

Share this post


Link to post
Share on other sites
@ dsonesuk: Thank's for editing, I really appreciated your effort and I learned a lot of things :) I have another question my friends, Is it good practice to place jQuery selectors in a variables for optimisation? Here's my code:
		   $(document).ready(function(){				$("form").submit(function(){					var a=$("#position"); var b=$("#job"); var c=$("input#religion"); var d="Others";				  					if (a.val() == "" && b.val() == d ){						b.val("").focus();						return false;					}					if (c.val() == d){						c.val("").focus();						return false;					}				});			});		  

Yeah, that's good practice. Micro-optimisations like this and caching the length of an array doesn't really make any difference, but they certainly can't hurt.
  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...