Solved

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

Posted on 2015-02-19
4
135 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 43

Accepted Solution

by:
Chris Stanyon earned 500 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 43

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 43

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

MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

Question has a verified solution.

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

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
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…

808 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