jquery calling variable after ajaxcomplete - php

Question

The whole idea is to limiting the number checkboxes through dropdown, the approach is:
I have dropdown with following code
<select name="form[norequnit][]" id="norequnit" class="rsform-select-box">
<option value="">...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<input name="chk" type="checkbox" class="bd-lable" value="9432"><label>01</label>
<input name="chk" type="checkbox" class="bd-lable" value="9432"><label>02</label>
<input name="chk" type="checkbox" class="bd-lable" value="9432"><label>03</label>
<input name="chk" type="checkbox" class="bd-lable" value="9432"><label>04</label>
<input name="chk" type="checkbox" class="bd-lable" value="9432"><label>05</label>
<input name="chk" type="checkbox" class="bd-lable" value="9432"><label>06</label>
And some check boxes which are loading by ajax and below code is running to get dropdown value and also after ajax part to limit the number of selection based on the selected dropdown,
<script type="text/javascript">
jQuery(document).ready(function($) {
$("#norequnit").on("change", function () {
$('#unitcount').html($(this).find('option:selected').text());
});
$( document ).ajaxComplete(function() {
$( ".log" ).text( "Triggered ajaxComplete handler." );
var nux = $('#unitcount').text();
$("input[name=chk]").change(function(){
var max= nux;
if( $("input[name=chk]:checked").length == max )
{
$("input[name=chk]").attr('disabled', 'disabled');
$("input[name=chk]:checked").removeAttr('disabled');
}
else{
$("input[name=chk]").removeAttr('disabled');
}
})
});
});
</script>
Problem:
variable "nux" get value only in first attempt by selecting dropdown, for example 5 so you to limit the boxes to 5 checks, but after this if you change dropdown to any other number the checkbox limitation remains on 5, in other word "nux" wont get new variable.

Answer 1

There's a few things wrong with your code, I'll try and go through them piece by piece with explanations and fixes.
Select onChange handling:
Separate your data from your view
Use val() instead of text() to get a select's current value
Code:
var nux; // 1. This will hold the value of nux for use in your script
$("#norequnit").on("change", function () {
nux = $(this).val(); // 1. Save the data, 2. Use using val()
$('#unitcount').html(nux); // 1. Use the data
});
Do you really need to use ajaxComplete?
I don't think ajaxComplete is the right way to go about responding to an ajax call (I could be wrong, I don't have all your code in front of me). Below I've done a best guess as to what you should (maybe, probably) do.
Code:
// Assuming you've got your ajax call somewhere else, use the "success"
// handler instead of the "ajaxComplete" function
$.ajax({
url: yourUrl,
method: 'get',
data: {
param1: 'value1',
param2: 'value2', // etc
},
success: function(html) {
// Presumably this is the HTML for your checkboxes, so add them
// to the DOM
$('#norequnit').after(html);
// And the only thing that really should go here otherwise is
// your bit of debug logging
console.log("Triggered ajax success handler.");
}
});
Use console.log if you are just outputting debug text
Maybe you actually do want to print the message on the page, if so you can ignore this. At very least, be aware of this wonderful debug-enabling tool. You can hit F12 (developer console) in your browser to view the output.
console.log("Triggered ajaxComplete handler.");
Move your checkbox onChange handler outside of any ajax closures
You could run into some incredibly hard to debug issues otherwise.
Code:
$(document).on('change', 'input[name="chk"]', function() {
// Handler code here
});
Notice the slightly different call to on, which uses the document object and includes the context parameter. This ensures any objects added to the DOM after the event handler is registered will still be handled.
All of it together
jQuery(document).ready(function($) {
var nux;
$("#norequnit").on("change", function () {
nux = $(this).val();
$('#unitcount').html(nux);
});
$.ajax({
url: yourUrl,
method: 'get',
data: {
param1: 'value1',
param2: 'value2', // etc
},
success: function(html) {
$('#norequnit').after(html);
console.log("Triggered ajax success handler.");
}
});
$(document).on("change", 'input[name="chk"]', function() {
if ($('input[name="chk"]:checked').length == nux) {
$('input[name="chk"]').attr('disabled', 'disabled');
$('input[name="chk"]:checked').removeAttr('disabled');
// Alternatively you could do this:
$('input[name="chk"]').not(':checked').attr('disabled', true);
} else {
$("input[name=chk]").removeAttr('disabled');
}
});
});