Solved

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

Posted on 2015-02-19
4
133 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 42

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 42

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 42

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

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

I have answered several questions lately that were solved utilizing the power of jQuery's AJAX functions, so I thought I would write an article demonstrating the ease of use. Why should I use jQuery as opposed to regular JavaScript? Now I know…
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 how to dynamically set the form action using jQuery.
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)

708 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now