I am trying to set the dropdown value with jquery when modal popup is displayed. I am trying with some static data but without any success. This is what I have:
$(document).on("click", ".open-EditSplitAgent", function () {
var first = $(this).data('first');
var last = $(this).data('last');
var splitPC = $(this).data('splitpc');
var id = $(this).data('id');
$('#<%=txtFirstEdit.ClientID%>').val(first);
$('#<%=txtLastEdit.ClientID%>').val(last);
$('#<%=hfLifeID.ClientID%>').val(id);
$("#ddlAgentPercEdit").val('0.50');
$('#editSplitAgent').modal('show');
});
The dropdown has this values:
<asp:DropDownList ID="ddlAgentPercEdit" runat="server">
<asp:ListItem Value="">Select Percentage</asp:ListItem>
<asp:ListItem Value="0.50">0.5</asp:ListItem>
<asp:ListItem Value="0.75">0.75</asp:ListItem>
<asp:ListItem Value="0.9">0.01</asp:ListItem>
<asp:ListItem Value="0.7">0.7</asp:ListItem>
<asp:ListItem Value="0.1">0.1</asp:ListItem>
<asp:ListItem Value="0.8">0.8</asp:ListItem>
<asp:ListItem Value="0.6">0.6</asp:ListItem>
<asp:ListItem Value="0.9">0.9</asp:ListItem>
<asp:ListItem Value="0.05">0.05</asp:ListItem>
<asp:ListItem Value="0.95">0.95</asp:ListItem>
</asp:DropDownList>
I have textbox and hidden field which have the correct value when the modal popup is displayed. As you can see in the jquery event I am trying static data just so I can see its working ok with static data, but originally I'll need to assign the splitPC var value to the dropdown value. Thanks in advance for your advices, Laziale
EDIT: rendered code for the modal popup:
<div class="modal hide fade" tabindex="-1" role="dialog" id="editSplitAgent">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3>Edit Split Agent</h3>
</div>
<div class="modal-body">
<div class="content">
<div class="form-row row-fluid">
<div class="span12">
<div class="row-fluid">
<label class="form-label span4" for="tooltip">First Name</label>
<input name="ctl00$ContentPlaceHolder1$txtFirstEdit" type="text" id="ctl00_ContentPlaceHolder1_txtFirstEdit" class="span8 tip" />
<span id="ctl00_ContentPlaceHolder1_RequiredFieldValidator4" style="color:Red;display:none;"></span>
<input type="hidden" name="ctl00$ContentPlaceHolder1$ValidatorCalloutExtender5_ClientState" id="ctl00_ContentPlaceHolder1_ValidatorCalloutExtender5_ClientState" />
</div>
</div>
</div>
<div class="form-row row-fluid">
<div class="span12">
<div class="row-fluid">
<label class="form-label span4" for="tooltip">Last Name</label>
<input name="ctl00$ContentPlaceHolder1$txtLastEdit" type="text" id="ctl00_ContentPlaceHolder1_txtLastEdit" class="span8 tip" />
<span id="ctl00_ContentPlaceHolder1_RequiredFieldValidator5" style="color:Red;display:none;"></span>
<input type="hidden" name="ctl00$ContentPlaceHolder1$ValidatorCalloutExtender6_ClientState" id="ctl00_ContentPlaceHolder1_ValidatorCalloutExtender6_ClientState" />
</div>
</div>
</div>
<div class="form-row row-fluid">
<div class="span12">
<div class="row-fluid">
<label class="form-label span4" for="tooltip">Agent Percentage</label>
<div class="span8 controls">
<select name="ctl00$ContentPlaceHolder1$ddlAgentPercEdit" id="ctl00_ContentPlaceHolder1_ddlAgentPercEdit">
<option value="">Select Percentage</option>
<option value="0.50">0.5</option>
<option value="0.75">0.75</option>
<option value="0.9">0.01</option>
<option value="0.7">0.7</option>
<option value="0.1">0.1</option>
<option value="0.8">0.8</option>
<option value="0.6">0.6</option>
<option value="0.9">0.9</option>
<option value="0.05">0.05</option>
<option value="0.95">0.95</option>
</select>
</div>
</div>
</div>
</div>
<input type="hidden" name="ctl00$ContentPlaceHolder1$hfLifeID" id="ctl00_ContentPlaceHolder1_hfLifeID" />
</div>
</div>
</div>
I am trying to set the dropdown value with jquery when modal popup is displayed. I am trying with some static data but without any success. This is what I have:
$(document).on("click", ".open-EditSplitAgent", function () {
var first = $(this).data('first');
var last = $(this).data('last');
var splitPC = $(this).data('splitpc');
var id = $(this).data('id');
$('#<%=txtFirstEdit.ClientID%>').val(first);
$('#<%=txtLastEdit.ClientID%>').val(last);
$('#<%=hfLifeID.ClientID%>').val(id);
$("#ddlAgentPercEdit").val('0.50');
$('#editSplitAgent').modal('show');
});
The dropdown has this values:
<asp:DropDownList ID="ddlAgentPercEdit" runat="server">
<asp:ListItem Value="">Select Percentage</asp:ListItem>
<asp:ListItem Value="0.50">0.5</asp:ListItem>
<asp:ListItem Value="0.75">0.75</asp:ListItem>
<asp:ListItem Value="0.9">0.01</asp:ListItem>
<asp:ListItem Value="0.7">0.7</asp:ListItem>
<asp:ListItem Value="0.1">0.1</asp:ListItem>
<asp:ListItem Value="0.8">0.8</asp:ListItem>
<asp:ListItem Value="0.6">0.6</asp:ListItem>
<asp:ListItem Value="0.9">0.9</asp:ListItem>
<asp:ListItem Value="0.05">0.05</asp:ListItem>
<asp:ListItem Value="0.95">0.95</asp:ListItem>
</asp:DropDownList>
I have textbox and hidden field which have the correct value when the modal popup is displayed. As you can see in the jquery event I am trying static data just so I can see its working ok with static data, but originally I'll need to assign the splitPC var value to the dropdown value. Thanks in advance for your advices, Laziale
EDIT: rendered code for the modal popup:
<div class="modal hide fade" tabindex="-1" role="dialog" id="editSplitAgent">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3>Edit Split Agent</h3>
</div>
<div class="modal-body">
<div class="content">
<div class="form-row row-fluid">
<div class="span12">
<div class="row-fluid">
<label class="form-label span4" for="tooltip">First Name</label>
<input name="ctl00$ContentPlaceHolder1$txtFirstEdit" type="text" id="ctl00_ContentPlaceHolder1_txtFirstEdit" class="span8 tip" />
<span id="ctl00_ContentPlaceHolder1_RequiredFieldValidator4" style="color:Red;display:none;"></span>
<input type="hidden" name="ctl00$ContentPlaceHolder1$ValidatorCalloutExtender5_ClientState" id="ctl00_ContentPlaceHolder1_ValidatorCalloutExtender5_ClientState" />
</div>
</div>
</div>
<div class="form-row row-fluid">
<div class="span12">
<div class="row-fluid">
<label class="form-label span4" for="tooltip">Last Name</label>
<input name="ctl00$ContentPlaceHolder1$txtLastEdit" type="text" id="ctl00_ContentPlaceHolder1_txtLastEdit" class="span8 tip" />
<span id="ctl00_ContentPlaceHolder1_RequiredFieldValidator5" style="color:Red;display:none;"></span>
<input type="hidden" name="ctl00$ContentPlaceHolder1$ValidatorCalloutExtender6_ClientState" id="ctl00_ContentPlaceHolder1_ValidatorCalloutExtender6_ClientState" />
</div>
</div>
</div>
<div class="form-row row-fluid">
<div class="span12">
<div class="row-fluid">
<label class="form-label span4" for="tooltip">Agent Percentage</label>
<div class="span8 controls">
<select name="ctl00$ContentPlaceHolder1$ddlAgentPercEdit" id="ctl00_ContentPlaceHolder1_ddlAgentPercEdit">
<option value="">Select Percentage</option>
<option value="0.50">0.5</option>
<option value="0.75">0.75</option>
<option value="0.9">0.01</option>
<option value="0.7">0.7</option>
<option value="0.1">0.1</option>
<option value="0.8">0.8</option>
<option value="0.6">0.6</option>
<option value="0.9">0.9</option>
<option value="0.05">0.05</option>
<option value="0.95">0.95</option>
</select>
</div>
</div>
</div>
</div>
<input type="hidden" name="ctl00$ContentPlaceHolder1$hfLifeID" id="ctl00_ContentPlaceHolder1_hfLifeID" />
</div>
</div>
</div>
-
1
Why aren't you using
<%=ddlAgentPercEdit.ClientID%>? – Ian Commented May 16, 2013 at 18:39 -
Why are you using
ClientIDfor everything else but not forddlAgentPercEdit? – James Montagne Commented May 16, 2013 at 18:40 - I tried with ClientID at first but it wasn't working that way. – Laziale Commented May 16, 2013 at 18:45
- have you debugged your java script ? – Siz S Commented May 16, 2013 at 20:26
2 Answers
Reset to default 4you should use
$("#<%=ddlAgentPercEdit.ClientID%>").val('0.50');
check my example on JSFIDDLE
Please paste your rendered html from your browser. I will help you fix it
I think this might be an issue ...
You seem to be setting the value of the dropdown , before the Modal is being shown ..
So theoretically speaking your dropdown is not yet visible when you are trying to set the value.
So try setting the value of the dropdown after the modal is shown..
$('#editSplitAgent').modal('show'); // Show the modal first
$("[id*=ddlAgentPercEdit]").val('0.50'); // Then set the value