CODEWITHSUNDEEP
javascriptjqueryhtmljquery-ui
Robert3452
Robert3452

Reputation: 1486

JQuery UI Dialog not closing when launched from Input focus event

I have a problem using JQuery and JQuery UI. I have moved to the latest stable version in case that was the issue but I have determined that it isn't. I am using Chrome

When I use the dialog I created by clicking the element it works without a problem. You can open it and close it mutiple times.

When I use the dialog by clicking the input box (I use the focus event). It opens but it will never close. It dissapears from the screen but the screen remains in modal. If I call the dialog isOpen function I still get true.

I can't find any documentation on this. Can anyone explain the difference in behaviour?

<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.css">
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>

<script>

	function RepetitionIntervalInput_display(str, title, okfn, cancelfn) {
	
		$( "#RepetitionIntervalInput_dlg" ).dialog( "open" );
	};
	$(document).ready(function() {

		var ret = "<div id=\"RepetitionIntervalInput_dlg\" title=\"Input Repetition Interval\">";

		ret += "</div>";
		$("body").append(ret);
		$( "#RepetitionIntervalInput_dlg" ).dialog({
			autoOpen: false,
			width: 500,
			modal: true
		});


		$(document).on('click.tab_stateset', "a[href$='#tab_stateset_delete']", function(event) {
			RepetitionIntervalInput_display(
				"STRING", 
				"TITLE", 
				function () {
					console.log("OK");
				}, 
				function () {
					console.log("CANC");
				}
			);
			event.preventDefault();			  	
		});

		$(document).on('focus.tab_stateedit', ".tab_stateedit_repetitioninterval", function() {
			RepetitionIntervalInput_display(
				"STRING", 
				"TITLE", 
				function () {
					console.log("OK");
				}, 
				function () {
					console.log("CANC");
				}
			);
		});

	});
</script>

</head>
<body>
<h1>A</h1>
<a href="#tab_stateset_delete">aaa</a>
<input type="text" value="NULL" class="tab_stateedit_repetitioninterval"></input>
</body>
</html>

Upvotes: 0

Views: 72

Answers (1)

Dekel
Dekel

Reputation: 62556

You had a problem with the focus event, which is called twice (on the first click, and once the dialog was closed) and therefore your dialog's "open" was triggered twice.

The fix was to use click on the input instead of focus.

Here is a your snippet with the fix:

<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.css">
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>

<script>

	function RepetitionIntervalInput_display(str, title, okfn, cancelfn) {
	
		$( "#RepetitionIntervalInput_dlg" ).dialog( "open" );
	};
	$(document).ready(function() {

		var ret = "<div id=\"RepetitionIntervalInput_dlg\" title=\"Input Repetition Interval\">";

		ret += "</div>";
		$("body").append(ret);
		$( "#RepetitionIntervalInput_dlg" ).dialog({
			autoOpen: false,
			width: 500,
			modal: true
		});


		$(document).on('click', "a[href$='#tab_stateset_delete']", function(event) {
			RepetitionIntervalInput_display(
				"STRING", 
				"TITLE", 
				function () {
					console.log("OK");
				}, 
				function () {
					console.log("CANC");
				}
			);
			event.preventDefault();			  	
		});

		$(document).on('click', ".tab_stateedit_repetitioninterval", function() {
			RepetitionIntervalInput_display(
				"STRING", 
				"TITLE", 
				function () {
					console.log("OK");
				}, 
				function () {
					console.log("CANC");
				}
			);
		});

	});
</script>

</head>
<body>
<h1>A</h1>
<a href="#tab_stateset_delete">aaa</a>
<input type="text" value="NULL" class="tab_stateedit_repetitioninterval"></input>
</body>
</html>

Upvotes: 1

Related Questions