I have a DropDownList called "ddlCaseFiles". I then have a script which I import that contains the jQuery .change() function to capture the event. Then I have 3 radio buttons which sorts the dropDownList. When the default radio button is loaded, then the event fires. But as soon as I select another radio button, then the event doesn't fire anymore.
Here is my DropDownList:
<asp:DropDownList runat="server" ID="ddlCaseFiles" DataSourceID="dsMyCaseFiles"
DataTextField="Display" DataValueField="FileID" OnPreRender="ddl_PreRender" />
and here is my jQuery .change():
$('#ddlCaseFiles').change(function () {
debugger;
$('#lblNextExhibitNumber').text('');
var temp = $(this).val();
});
Here is a snipper of what the radio buttons do:
protected void rbByFileName_CheckedChanged(object sender, EventArgs e)
{
ddlCaseFiles.DataSourceID = "dsCaseFilesReverse";
ddlCaseFiles.DataTextField = "Display";
ddlCaseFiles.DataValueField = "FileID";
}
protected void rbByFileID_CheckedChanged(object sender, EventArgs e)
{
ddlCaseFiles.DataSourceID = "dsCaseFiles";
ddlCaseFiles.DataTextField = "Display";
ddlCaseFiles.DataValueField = "FileID";
}
I have never used the .change() before. So maybe I am missing something
I have a DropDownList called "ddlCaseFiles". I then have a script which I import that contains the jQuery .change() function to capture the event. Then I have 3 radio buttons which sorts the dropDownList. When the default radio button is loaded, then the event fires. But as soon as I select another radio button, then the event doesn't fire anymore.
Here is my DropDownList:
<asp:DropDownList runat="server" ID="ddlCaseFiles" DataSourceID="dsMyCaseFiles"
DataTextField="Display" DataValueField="FileID" OnPreRender="ddl_PreRender" />
and here is my jQuery .change():
$('#ddlCaseFiles').change(function () {
debugger;
$('#lblNextExhibitNumber').text('');
var temp = $(this).val();
});
Here is a snipper of what the radio buttons do:
protected void rbByFileName_CheckedChanged(object sender, EventArgs e)
{
ddlCaseFiles.DataSourceID = "dsCaseFilesReverse";
ddlCaseFiles.DataTextField = "Display";
ddlCaseFiles.DataValueField = "FileID";
}
protected void rbByFileID_CheckedChanged(object sender, EventArgs e)
{
ddlCaseFiles.DataSourceID = "dsCaseFiles";
ddlCaseFiles.DataTextField = "Display";
ddlCaseFiles.DataValueField = "FileID";
}
I have never used the .change() before. So maybe I am missing something
Share Improve this question asked Nov 1, 2012 at 13:37 johnjohn 4,1587 gold badges36 silver badges60 bronze badges 7- try the onclick (or click) event. – alfred Commented Nov 1, 2012 at 13:45
- that doesn't capture anything since it fire even if i just click on the dropdownlist. I am trying to capture the selectedValue. but via jquery – john Commented Nov 1, 2012 at 13:49
- Is this not because you have the Dropdownlist as runat="server" which would do a postback? – Steve Commented Nov 1, 2012 at 13:55
- This will cause an error because I need to assign data field and values to the dropdownlist – john Commented Nov 1, 2012 at 13:57
- i think you use this with your dropdownlist ClientIDMode="Static" i think this will help you – Rajpurohit Commented Nov 1, 2012 at 14:02
2 Answers
Reset to default 7Looks like your CheckedChanged events of the radio buttons don't trigger the dropdown change event. The JS change event fires when the selected value of a drop down changes. This doesn't necessarily happen when you change the DataSourceID
, does it?
I'm not sure how to trigger this in ASP. Perhaps ddlCaseFiles.SelectedIndexChanged()
?
Otherwise, you could add a click event handler to the radios:
$('input[type="radio"].someCssClass').click(function(){
$('#ddlCaseFiles').trigger('change');
});
EDIT:
This is just a guess, but it looks like the CheckedChanged
might be modifying the <select>
element on the page. For example, is it reinserted every time DataSourceID
changes?
Try changing your dropdown change event handler like this using the .on()
function:
$('body').on('change', '#ddlCaseFiles', function () {
debugger;
$('#lblNextExhibitNumber').text('');
var temp = $(this).val();
});
Note: for better performance change $('body')
to some container closer to the dropdown.
The .change()
function attaches the change
handler to an element on a page. If ASP removes an element and re-adds it later then the handler is gone.
A handler attached using the .on()
function persists even if the element is removed. Read more here.
A more modern answer using jquery 3.6
$(document).on('change', "#ddlCaseFiles", function (e) {
debugger;
$('#lblNextExhibitNumber').text('');
var temp = $(this).val();
});