Click here to Skip to main content
12,451,703 members (58,142 online)
Rate this:
Please Sign up or sign in to vote.
See more: jQuery
I have a asp:DropDownList control in a hidden popup, this popup is activated when the user clicks on an icon(image) on a row of a Gridview Control.

Then i use some jquery to select the row that's been clicked on and then i extract the values of the label controls on the gridview row and then want to populate the popup fields (Text box controls and the DropDown list controls default value), the idea being to use them to update the record in the row in the database.

The issue im having is populating the default selection in the dropdown control on the popup. I can populate the text boxes in the textboxes, just not the dropdown.

Here is the markup for one of the textboxes and the ddl from the gridview where i source my values:
<asp:TemplateField HeaderText="Current Stage"> 
		<asp:Label ID="lblCurrentStage" CssClass="clCurrentStage" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "CurrentStage")%>' ToolTip ='<%# DataBinder.Eval(Container.DataItem, "CurrentStage")%>'></asp:Label>
	<asp:TemplateField HeaderText="Review Date"> 
		<asp:Label ID="lblReviewDate" CssClass="clReviewDate" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "ReviewDate")%>' ToolTip ='<%# DataBinder.Eval(Container.DataItem, "ReviewDate")%>'></asp:Label>
and here is the code that works fine on the textbox but not on the ddl:
<div id="PopUpTrackerEditFieldCurrentStage">
	<div class="clEditFieldCurrentStageContainer">
	<asp:DropDownList ID="ddlPopUpEditCurrentStage" runat="server"> </asp:DropDownList>
<div id="PopUpTrackerEditFieldReviewDate">
	<div class="clEditFieldReviewDateContainer">
	<asp:TextBox ID="tbPopUpEditReviewDate"  CssClass="clPopUpDateFieldsInEdit" runat="server" Text=""  ToolTip =""></asp:TextBox>

And here is jquery used to populate the textbox and dropdown list:
//Store the current row being edited
var row = $(this).closest("tr");
//Get the existing Comments into a string
var strCurrentStage = $(".clCurrentStage", row).text();
//Add the any existing Comments
//Dynamically add the text to the tooltip 
$("#<%=ddlPopUpEditCurrentStage.ClientID%>").attr('title', 'Click to select the current stage here for ' + strPSTNNum);
//Get the existing Review Date into a string
var strReviewDate = $(".clReviewDate", row).text();
//Add the any existing Review Date
//Dynamically add the text to the tooltip 
$("#<%=tbPopUpEditReviewDate.ClientID%>").attr('title', 'Edit the review date here for ' + strPSTNNum);

I know strCurrentStage is ok because i temporaraly used it to populate the textbox to see if it contained the current stage text from the current stage label in the gridview and it did. So the issue i think is that i cannot select the correct part of the dropdown list control to populate the default value in.
Posted 17-May-13 5:22am
Updated 17-May-13 5:47am
Tadit Dash 18-May-13 2:00am
Can you post the rendered html in browser of that dropdown only ?
MoiD101 20-May-13 4:51am
Hi here it is;
<div id="PopUpTrackerEditFieldCurrentStage">
<div class="clEditFieldCurrentStageContainer">
<select name="ctl00$MainContent$ddlPopUpEditCurrentStage" id="MainContent_ddlPopUpEditCurrentStage">
Tadit Dash 20-May-13 5:30am
Hare there are no options inside select tag.
So, what you want to do ? You want to add an option or select an existing option ?

But there are no options, so I guess you want to add one option ? Please reply.
MoiD101 20-May-13 5:37am
Yes i was thinking over the weekend why this is not applying my default selection as coded above and it has occurred to me that there MUST be an existing list of options already in place in the dropdown; one of which is an option that matches the 'strCurrenStage' contents i'm trying to set as the default populated option.

so in summary; i need to have a dropdown with the options present to set the default value to match from?
Tadit Dash 20-May-13 5:55am
If you want to add some predefined options, then you can directly do that from the mark-up aspx page by adding some ListItems inside the Dropdown. What is the problem ?
MoiD101 20-May-13 6:00am
the list items are stored in a database, so i just have to retrieve them and then add them to the dropdown list. Hopefully the default value from the record in the database will populate as planned. The popup window is for editing existing records so the existing dropdown needs to be set as the default selection. Then the user can reselect a new one when editing.
Tadit Dash 20-May-13 6:22am
If your options along with the default selection option gets populated as ListItems in DropDown in the popup, then there will be no problem if you select the DropDown with default value like below...

But, if you want to add this option to the DropDown, then that will be different. As I can see you don't have any options present in the DropDown, this code will not work.
You need to populate this DropDown first.

Please confirm.
MoiD101 20-May-13 6:24am
As i suspected having thought about it over the weekend and now you have kindly confirmed it Tadit Dash, thank you :)
Tadit Dash 20-May-13 6:53am
So, the problem is solved ? Have I helped anything ? What was the solution ?
MoiD101 20-May-13 7:18am
ok i have now populated the dropdown with the options but the default option is not being added using $("#<%=ddlPopUpEditCurrentStage.ClientID%>").val(strCurrentStage); strCurrentStage does contain the string i want, but its not being placed into the dropdown as the default
Tadit Dash 20-May-13 7:38am
So, u want to add that to this dropdown only, right ?
Or you also want to select it by default ?
MoiD101 20-May-13 7:42am
i want the user to see the dropdown with the selected value showing being the one from the record (they are about to update) in the database, then if they click on the dropdown they see the rest of the options to choose from (they are editing a record)
Tadit Dash 20-May-13 7:47am
So, the option strCurrentStage needs to be selected, right ?
MoiD101 20-May-13 7:52am
strCurrentStages contents is from the database for the record that is about to be updated by the user.
Whatever string is inside strCurrentStage will also be one of the options in the dropdown list;
So the idea is when the popup modal appears, the default value present in the dropdown list will match the present value for that record from the database.
Tadit Dash 20-May-13 8:02am
Ok tell me one thing...

Is the value of strCurrentStage already added to the DropDown ?

If yes, then we only need to select it, right ?
If no, we need to add it and then select.

So, which one is the requirement ?
MoiD101 20-May-13 8:06am
yes whatever ends up in strCurrentStage(from the database) will be an option in the dropdown list. And that is all i want to do is to show the current status for the record so that the user can change it.

Tadit Dash 20-May-13 8:18am
Ok. As you have added options inside the DropDown, then please post the rendered html again and tell me which option to select. I mean give an example value for strCurrentStage.
MoiD101 20-May-13 8:26am
The content of strCurrentStage is 'Order Acknowledgment' so i want that to be showing inside the dropdown...
Below is what is renderd:

<div class="clEditFieldCurrentStageContainer">
<select id="MainContent_ddlPopUpEditCurrentStage" title="Click to select the current stage here for Order AcknowledgmentPSTN26560" name="ctl00$MainContent$ddlPopUpEditCurrentStage">
<option>Customer Delay</option>
<option>In escalation</option>
<option>Initial Planning</option>
<option>Not Set</option>
<option>Order Acknowledgment</option>
<option>Order in Progress</option>
<option>Order on Track</option>
<option>Supplier Delay</option>
Tadit Dash 20-May-13 8:34am
Check the fiddle it is working.
MoiD101 20-May-13 8:38am
yeh i was afraid of that i was always using the correct syntax apart from i was using $("#<%=ddlPopUpEditCurrentStage.ClientID%>").val(strCurrentStage);
so it must be something else causing this not to show
Tadit Dash 20-May-13 8:42am
Yes, something else. And I guess the problem is, before binding the data to DropDown, you are executing this code, so it can't select anything if there will be no options.

Please check the flow of data and also check the console window of Firebug in FireFox, if there are any errors.

Please let me know.
MoiD101 20-May-13 8:45am
i have just noticed that if i press the DOM refresh icon on the IE dev tools window then click on the icon that shows the modal again, the dropdown now shows the correct selected string. So i need some way to refresh the dropdown just after its list has been populated to show the new value
Tadit Dash 20-May-13 8:50am
Yes, exactly.... But you don't need to refresh or do something like that.

Just call the function which is selecting the dropdown value after it is bounded completely, that's all.
MoiD101 20-May-13 8:53am
i have just done this which alters it immediately the user moves over the modal container, but i fear that will happen every time they do and therefore change their selection ;
$('#PopUpTrackerEditFields').live('mouseover', function () {
//Get the existing Comments into a string
var strCurrentStage = $(".clCurrentStage", row).text();

//Add the any existing Comments
//Dynamically add the text to the tooltip
$("#<%=ddlPopUpEditCurrentStage.ClientID%>").attr('title', 'Click to select the current stage here for ' + strCurrentStage + strPSTNNum);


MoiD101 20-May-13 9:28am
I fixed the issue in the end, i added the
//Get the existing Comments into a string
var strCurrentStage = $(".clCurrentStage", row).text();
//Add the any existing Comments

Just after where the dropdown options were populated. ill post it beelow
Tadit Dash 20-May-13 9:35am
Ok. Good... :) Congrats.

1 solution

Rate this: bad
Please Sign up or sign in to vote.

Solution 1

The problem was that once the dropdownlist was populated the DOM would not let me select the dropdown list to select the default value. unless i do it at the same time as the just after adding the options from the database.

function getListOfStages() {
    var ddlCurrentStages = $("#<%=ddlPopUpEditCurrentStage.ClientID%>");
        type: "POST",
        url: "PSTN_OrderManagementTracker.aspx/PopCurrentStagesddl",
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
            var xmlDoc = $.parseXML(response.d);
            var xml = $(xmlDoc);
            var CurrentStagesReturned = xml.find("Table");
            //for each current stage from the database, add it to the dropdown list on the modal
            $.each(CurrentStagesReturned, function (index, CurrentStagesReturned) {
                dbCurrentStageName = $(this).find("CurrentStage").text()
                ddlCurrentStages.append('<option>' + dbCurrentStageName + '</option>');
                //Get the this records existing current stage into a string
                var strCurrentStage = $(".clCurrentStage", row).text();
                //Add the existing current stage for that record as the default one showing
        failure: function (msg) {

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month

Advertise | Privacy | Mobile
Web02 | 2.8.160826.1 | Last Updated 20 May 2013
Copyright © CodeProject, 1999-2016
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100