locked
Fill in multiple text boxes based on selection made from dropdown info pulled in via jquery/ajax webservice RRS feed

  • Question

  • User-468656528 posted

    I am in need of a little assistance. I have been trying to figure out what the best way to approach the situation, not to mention I am a noob when it comes to C#, JQuery, Ajax and asp.net so bare with me as I try to explain.

    As it stands now, I have two dynamically created select boxes with several options(More select boxes can be added if needed and typically users create a minimum of 5-10)-- we can call the two boxes Select 1 and Select 2. These boxes are populated based on the fill select function in JQuery. Select 2 is dependent upon Select 1 in other words once an option is chosen from Select1; Select2 gets populated with the appropriate data. See function below;

    FillSelect($smelterMetalSelect, "GetMetals", {}, "", true, false, "metalId", "name", answer != undefined ? answer.metal_id : "", function () {
                        FillSelect($smelterSelect, "GetSmeltersByMetal", { metalId: answer.metal_id }, "", true, false, "smelterId", "name", answer.smelterId, function () {
                            hideShowDetail($smelterSelect);
                        });
                    });

    Now once an option is selected in the Select- +2 box a div gets appended to the selection with multiple input and radio buttons. See code below (as you can see each append adds either an input box or a radio button with the same class);

    $smelterDiv.append($smelter);
                var $smelterDetailDiv = $("<div class='smelter-detail-div'></div>");
                var $smelterName = $('<br><span class="smelter-name-span smelter-detail" ><label class="smelter-detail-label">Name: </label><input class="smelter-name ui-widget-content " /></span>');
                $smelterDetailDiv.append($smelterName);
                var $smelterCountry = $('<span class="smelter-country-span smelter-detail" ><label class="smelter-detail-label">Country: </label><input class="smelter-country ui-widget-content " /></span>');
                $smelterDetailDiv.append($smelterCountry);
                var $smelterId = $('<span class="smelter-id-span smelter-detail"><label class="smelter-detail-label">Smelter Identification: </label><input class="smelter-id ui-widget-content" /></span>');
                $smelterDetailDiv.append($smelterId);
                var $smelterIdSource = $('<span class="smelter-id-source-span smelter-detail"><label class="smelter-detail-label">Source of Smelter Identification Number: </label><input class="smelter-id-source ui-widget-content" /></span>');
                $smelterDetailDiv.append($smelterIdSource);
                var $smelterStreet = $('<span class="smelter-street-span smelter-detail" ><label class="smelter-detail-label">Smelter Street: </label><input class="smelter-street ui-widget-content" /></span>');
                $smelterDetailDiv.append($smelterStreet);
                var $smelterCity = $('<span class="smelter-city-span smelter-detail"><label class="smelter-detail-label">Smelter City: </label><input class="smelter-city ui-widget-content"/></span>');
                $smelterDetailDiv.append($smelterCity);
                var $smelterFacilityLocation = $('<span class="smelter-facility-span smelter-detail"><label class="smelter-detail-label">Smelter Facility Location State/Provice: </label><input class="smelter-facility ui-widget-content" /></span>');
                $smelterDetailDiv.append($smelterFacilityLocation);
                var $smelterContactName = $('<span class="smelter-contact-name-span smelter-detail"><label class="smelter-detail-label">Smelter Contact Name: </label><input class="smelter-contact-name ui-widget-content" /></span>');
                $smelterDetailDiv.append($smelterContactName);
                var $smelterContactEmail = $('<span class="smelter-contact-email-span smelter-detail"><label class="smelter-detail-label">Smelter Contact Email: </label><input class="smelter-contact-email ui-widget-content" /></span>');
                $smelterDetailDiv.append($smelterContactEmail);
                var $smelterNextSteps = $('<span class="smelter-next-steps-span smelter-detail"><label class="smelter-detail-label">Proposed Next Steps: </label><input class="smelter-next-steps ui-widget-content" /></span>');
                $smelterDetailDiv.append($smelterNextSteps);
                var $smelterMineName = $('<span class="smelter-mine-name-span smelter-detail"><label class="smelter-detail-label">Name of mine(s) or if recycled or scrap source enter recycled or scrap: </label><input class="smelter-mine-name ui-widget-content" /></span>');
                $smelterDetailDiv.append($smelterMineName);
                var $smelterMineCountry = $('<span class="smelter-mine-county-span smelter-detail"><label class="smelter-detail-label">Location (country) of mine(s) or if recycled or scrap source enter recycled or scrap: </label><input class="smelter-mine-country ui-widget-content" /></span>');
                $smelterDetailDiv.append($smelterMineCountry);
                var $smelterRecycledScrap = $('<span class="smelter-recycled-scrap-span"><label><br>Does 100% of the smeleters feedstock originate from recycled or scrap sources: </label><input type="radio" name="allRecycleScrap" value="Yes" class="smelter-recycled-scrap ui-widget-content" />Yes <input type="radio" name="allRecycleScrap" value="No" class="smelter-recycled-scrap" />No</span>');
                $smelterDetailDiv.append($smelterRecycledScrap);
                var $smelterComments = $('<br><span class="smelter-comments-span">Comments: <textarea class="smelter-comments ui-widget-content"></textarea></span>');
                $smelterDetailDiv.append($smelterComments);

    Here is what a snippet of the return data and what it looks like;

    0: Object
    __type: "WebService+Smelter"
    name: "Avon Specialty Metals Ltd"
    showDetail: "Detail"
    smelterCitys: "Gloucester"
    smelterCountry: "United Kingdom"
    smelterFacilityLocation: "Gloucestershire"
    smelterId: 12
    smelterSourceId: "CFSI"
    standardSmelterName: "Avon Specialty Metals Ltd"

    What I would like to do is to populate the input boxes with the information above. There are two issues I am faced with one, is I can only get it to populate the number of the said row (stored in the database) like this (see code below)however I would like to show the string instead of the row number;

    $(".smelter-select").change(function () {
                                var selectedval = $(this).find("option:selected").val(answer.metal_id);
                                //retrieve records based on selectedval
                                //fill inputs and radio buttons
                                $('.smelter-name').val(selectedval);
    
                            })

    Lastly when It populates the text box it fills in all the text boxes with that given class and I only want to populate the div associated with that particular select box as each select box should be populated with the appropriate data.

    Any help is welcome.

    Monday, December 14, 2015 3:22 PM

Answers

  • User61956409 posted

    Hi coderPoet10,

    $(this).find("option:selected").val(answer.metal_id);

    The above code will assign “answer.metal_id” to selected option as value.

    I am faced with one, is I can only get it to populate the number of the said row (stored in the database) like this (see code below)however I would like to show the string instead of the row number;

    If you’d like to get another field value from database based on the row number, you could use AJAX call a web method to get the field’s value.

    Lastly when It populates the text box it fills in all the text boxes with that given class and I only want to populate the div associated with that particular select box as each select box should be populated with the appropriate data.

    $('.smelter-name').val(selectedval);

    You select elements via class selector, it will return all elements with the given class. If you’d like to find a specific element form elements set, you could try to use the .eq() method to get the specific element.

    $('.smelter-name').eq("the element index").val(selectedval);

    Or you could specify an id to <input> when you create it, then you could select it via id selector.

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, December 15, 2015 3:21 AM
  • User61956409 posted

    Hi coderPoet10,

    This article explained how to make a call to ASP.Net WebMethod using jQuery AJAX, you could refer to it.

    http://www.aspsnippets.com/Articles/Calling-ASPNet-WebMethod-using-jQuery-AJAX.aspx

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, December 24, 2015 9:36 AM

All replies

  • User61956409 posted

    Hi coderPoet10,

    $(this).find("option:selected").val(answer.metal_id);

    The above code will assign “answer.metal_id” to selected option as value.

    I am faced with one, is I can only get it to populate the number of the said row (stored in the database) like this (see code below)however I would like to show the string instead of the row number;

    If you’d like to get another field value from database based on the row number, you could use AJAX call a web method to get the field’s value.

    Lastly when It populates the text box it fills in all the text boxes with that given class and I only want to populate the div associated with that particular select box as each select box should be populated with the appropriate data.

    $('.smelter-name').val(selectedval);

    You select elements via class selector, it will return all elements with the given class. If you’d like to find a specific element form elements set, you could try to use the .eq() method to get the specific element.

    $('.smelter-name').eq("the element index").val(selectedval);

    Or you could specify an id to <input> when you create it, then you could select it via id selector.

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, December 15, 2015 3:21 AM
  • User-468656528 posted

    Would it be possible to show me how to correctly make the ajax call you are referring to?

    Tuesday, December 15, 2015 3:44 PM
  • User61956409 posted

    Hi coderPoet10,

    This article explained how to make a call to ASP.Net WebMethod using jQuery AJAX, you could refer to it.

    http://www.aspsnippets.com/Articles/Calling-ASPNet-WebMethod-using-jQuery-AJAX.aspx

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, December 24, 2015 9:36 AM