CODEWITHSUNDEEP
jquery
warren
warren

Reputation: 11

ajax form select update not working with jNice

being new to jquery and ajax, i have a small problem that i am sure has an easy fix! i have a form select updating from a DB call using jquery and ajax, when i wrap the form with jNice the ajax update stops working. I have searched around and found that using the $.jNice.SelectUpdate function should resolve the issue but have not be able to get it to work, any assistance would be appreciated.

Edited with code:

function getLocation() {
$.ajax({
    type:"POST",
    url: "formdata.asp",
    dataType: "application/x-www-form-urlencoded",
    data: "Action=GetLocation&Val=" + $("#area").val(),
    async: false,
    success: function(msg){ 
        $("label[id$=Two]").add("select[id$=Two]").remove();
        $("#loclist").append(msg);
    }
})
}

(without the jNice class the 2nd form select updates)

<form class="jNice" method="post" action="searchresults.asp">
<fieldset id="loclist">
<legend id="lgdloclist" title="Locations">Locations</legend>
<label id="lblOne" for="ddlOne" title="Select an Option">Select an Option:</label>
    <select id="area" style="width:175px; display:block;">
    <option value="">Choose..</option>
    <option value="hse">HSE</option>
    <option value="nvq">NVQ</option>
    <option value="made4">Made4</option>
</select>
<br />
</fieldset>
<input type="submit" name="submit" value="Search" />
</form>

Upvotes: 1

Views: 2084

Answers (1)

Andrew Whitaker
Andrew Whitaker

Reputation: 126072

You need to do two things in your ajax success method:

(1) Update the selects list of options using something like this (here's some useful information about updating selects:

var selectEl = $("#area").get(0);
select.options[selectEl.options.length] = new Option("1234", "1234");

You'll need to put the data from your $.ajax call in the Option constructor.

(2) Call jNice's SelectUpdate function:

$.jNice.SelectUpdate(selectEl);

Check out a simple example here (a new option is added when you click "search"): http://jsfiddle.net/andrewwhitaker/w5wwy/

Upvotes: 1

Related Questions