Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

jQuery .change() event fires only once when used in modal dialog?

Posted on 2015-02-19
4
Medium Priority
?
147 Views
Last Modified: 2015-02-20
Experts,

I am using a jQuery UI dialog to show some advanced search options.

The dialog contains a series of checkboxes. When the "#ALL" checkbox is selected I want to check or uncheck the rest of the checkboxes.

The .change() event fires once when the "#ALL" checkbox is clicked but, will not fire repeatedly if the box is checked or unchecked again?

Seems as if the .change() event is being ignored if the "#ALL" checkbox is checked or unchecked more than once?

Can someone help me out?

Code which creates dialog
$("#advanced_search").click(function(e){
	e.preventDefault(e);
	$("#dialog").dialog({
		title: "Advanced Search",
		modal: true,
		width: $(window).width() - ($(window).width()/2),
		height: $(window).height() - 100,
		buttons: {
			"Search": function() {
				//DEFINE SEARCH VARIABLES
				var project_status = $("#project_status").val();
				var global_groups = document.forms["advanced_search_form"]["global_groups"].value;
				<?php if($user!=''){echo 'var my_groups = document.forms["advanced_search_form"]["my_groups"].value;';} ?>
				var consultant = $("#consultant").val();
				var sponsor = $("#sponsor").val();
				var focus_area = $("#focus_area").val();
				var project_type = $("#project_type").val();
				var department = $("#department").val();
				var from_date = $("#from_date").val();
				var to_date = $("#to_date").val();
				//CLOSE DIALOG					
				$(this).dialog('close');
				//LOAD GET PROJECTS PAGE USING PASSED VARIABLES
				$("#search_results").load('get_projects.php?advanced',{
					"project_status": project_status,
					"global_groups": global_groups,
					<?php if($user!=''){echo '"my_groups": my_groups,';} ?>
					"consultant": consultant,
					"sponsor": sponsor,
					"focus_area": focus_area,
					"project_type": project_type,
					"department": department,
					"date_from": from_date,
					"date_to": to_date
					},function(){
						$(function(){
							$("#search_results_tabs").tabs({
								beforeLoad: function(event, ui) {
									ui.jqXHR.error(function(){
										ui.panel.html(
										"Tab load failed. Please try again."
										);
									});
								}//END BEFORE LOAD
							});//END SEARCH RESULT TABS
						});//END FUNCTION
					}//END FUNCTION
				);//END LOAD SEARCH RESULTS
			},//END ADD NOTE
			"Cancel": function(event, ui){
				$(this).dialog('close');	
			}
		},//END BUTTONS
		close: function(event, ui) {
			$(this).dialog('close');
		}//END CLOSE
	});//END DIALOG
});//END ADVANCED SEARCH LINK

Open in new window


Code which should monitor the checked status of the #ALL checkbox
$("#ALL").change(function(){
	if(this.checked){
		$("#AMC").attr("checked","checked");
		$("#ANT").attr("checked","checked");
		$("#BSR").attr("checked","checked");
		$("#SHA").attr("checked","checked");
		$("#PLS").attr("checked","checked");
		$("#MTZ").attr("checked","checked");
		$("#LVM").attr("checked","checked");
		$("#WCR").attr("checked","checked");
	}
	else {
		$("#AMC").removeAttr("checked");
		$("#ANT").removeAttr("checked");
		$("#BSR").removeAttr("checked");
		$("#SHA").removeAttr("checked");
		$("#PLS").removeAttr("checked");
		$("#MTZ").removeAttr("checked");
		$("#LVM").removeAttr("checked");
		$("#WCR").removeAttr("checked");
	}
});

Open in new window

0
Comment
Question by:evibesmusic
  • 3
4 Comments
 
LVL 44

Accepted Solution

by:
Chris Stanyon earned 2000 total points
ID: 40620248
Switch your code to use the prop() method and it'll work fine:

if (this.checked) {
	$("#AMC").prop( "checked", true );
	$("#ANT").prop( "checked", true );
	$("#BSR").prop( "checked", true );
} else {
	$("#AMC").prop( "checked", false );
	$("#ANT").prop( "checked", false );
	$("#BSR").prop( "checked", false );
}

Open in new window

0
 
LVL 44

Expert Comment

by:Chris Stanyon
ID: 40620253
This might also be a cleaner way of doing it:

$("#ALL").change(function(){
    var checked = (this.checked) ? true : false;
    $("#AMC").prop( "checked", checked );
    $("#ANT").prop( "checked", checked );
    $("#BSR").prop( "checked", checked );
});

Open in new window


Working Demo: http://jsfiddle.net/0mzezj15/1/
0
 

Author Closing Comment

by:evibesmusic
ID: 40621854
@Chris Stanyon:

Oddly enough the only code that worked was the following:

      $("#ALL").change(function(){
            if(this.checked){
                  $("#AMC").prop("checked",true);
                  $("#ANT").prop("checked",true);
                  $("#BSR").prop("checked",true);
                  $("#SHA").prop("checked",true);
                  $("#PLS").prop("checked",true);
                  $("#MTZ").prop("checked",true);
                  $("#LVM").prop("checked",true);
                  $("#WCR").prop("checked",true);
            }
            else {
                  $("#AMC").prop("checked",false);
                  $("#ANT").prop("checked",false);
                  $("#BSR").prop("checked",false);
                  $("#SHA").prop("checked",false);
                  $("#PLS").prop("checked",false);
                  $("#MTZ").prop("checked",false);
                  $("#LVM").prop("checked",false);
                  $("#WCR").prop("checked",false);
            }
      });
0
 
LVL 44

Expert Comment

by:Chris Stanyon
ID: 40621907
Maybe something else going on - the demo on JSFiddle works perfectly. Your code effectively does the same but there's a lot of repetition going on.

Anyway, pleased you got it working :)
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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

927 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