Solved

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

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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

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

by Julian Matz As of jQuery (http://jquery.com/) 1.4 the .live() method (http://api.jquery.com/live/) supports custom events as well as some standard JavaScript events that it previously didn't support. Among these is the submit event. Unlike …
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 how to dynamically set the form action using jQuery.
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…

813 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