Solved

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

Posted on 2015-02-19
4
141 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
This article discusses how to implement server side field validation and display customized error messages to the client.
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…
Suggested Courses

624 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