Load Json Data Using The Dropdown Menu And Refresh The Div Area With The New Results In A Web Site

I am trying to load JSON data from a drop down menu to a div area which would be refreshed with the new results, i have manged to get the data and show it in the div area without u

Solution 1:

Using jquery template is the simple manner :)

You may find some info there jquery template documentation

jquery template is a simple type formatted like this i took it from one of my project:

 <script type="text/x-jquery-tmpl"id="tplmsg">
    <div class="row">
    <div class="col-xs-3 col-md-1">
        <img src="${src}" class="img-thumbnail" alt="${title}" />
    </div>
    <div class="col-xs-9 col-md-11">
        <div class="col-xs-12 col-md-12">
            <p class="title"><a href="/<%=Session("lang")%>/${cat}/${sct}/${rws(title)}/${prov}/${id}">${getSubstring(title,0,100)}</a></p>
        </div>
        <div class="col-xs-12 col-md-12 btf" >
            <p class="adsdts"><strong>Data: </strong>${parseJsonDate(DateAdd)} &nbsp;           
               <strong>Prezzo:</strong>${price} &nbsp;
                <strong>Provincia:</strong><a href="/<%=Session("lang")%>/<%=Resources.COREMSG.ANNUNCIPROV%>/${rws(pvname)}">${pvname}</a> 
               <%--<strong>Provincia:</strong><a href="/<%=Session("lang")%>/${cat}/${sct}/${pvname}">${pvname}</a>--%>
            </p>
        </div>
    </div>
</div>
<hr />
</script>

In abovesnippet you may see some stuff which is vbnet related how ever logic is the same. Then you may fill it with simple js function like this:

functiongetAds(task,token) {

var qry='task='+task+'&token=' +token;
$.ajax(
{
type: "POST", url: url, data: qry
,
 success: function (msg) {

    if (msg.hasOwnProperty('error')) {
        $("#").html(msg.error);
        return;
    }
    elseif (msg.hasOwnProperty('empty')) {
        $("#result").html(msg.empty);
        return;
    }
    else {
        //reular version
        $("#"+msg.tmpl).tmpl(msg.data, null).appendTo("#"+msg.result);
    }
},
error: function (msg) {
    $("#result").html("errore durante l'elaborazione");
}
 });


}

That's all simple and fast.