getting value of html result after ajax postback

Question

I need to get the html result of the ajax postback after changing the select option. The new-result-item is part of the new result div html which has a value generated from server side after ajax postback. The problem i am having here is if i call new-result-item is empty value although after ajax postback the value for new-result-item is actually display. So how can i get the new-result-item value after postback using javascript or jquery?

Note: new-result-item value is empty by default, it is generated by server side after ajax postback

<div id ="new-result">
  <span id="new-result-value">@Model.NewResult</span>
</div>

$('select#select-option').change(function(){
  $.ajax({
         url: ...,
         type: "POST",
         cache: false,
         success: function (result) {
              $('#new-result').html(result);
         },
         complete: function (result) {
              alert($('#new-result-item').val());
         }
    });
});

please add the server side code, how are you passing it back to the js? — Dima Gimburg, Mar 22 '15 at 16:06
BTW: 1st argument of `complete` handler is `jqXHR`, not result (response) of request. Also you don't need to set `cache` option to `false` for POST request — hindmost, Mar 22 '15 at 16:12

score 1 · Answer 1 · answered Mar 22 '15 at 16:29

you can use the below sample code POST FORM DATA VIA ajax TO THE PHP PAGE it will work

<html>
<head> 
<meta name="viewport" content="width=device-width">
<meta charset="utf-8">
<title>ajax test</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script>
$(document).ready(function(){
$('#restaurant').change(function()
{
if ($(this).val() == "") {
document.getElementById("txtHint").innerHTML = "";
}
else
{
$.ajax({

url: "test.php",
data : "q="+$(this).val(), //if you want to pass one variable 
//data : "name="+name+"&natives="+natives, //if you want to pass more than 1 variable
type : "POST", // if you want to pass data via get method put "GET"
success :function(text){
alert(text);
document.getElementById('txtHint').innerHTML=text;
}
});
}
});
});
</script>
</head>
<body>

<table>
<form>
<td>
<select name="restaurant" id="restaurant">
<option value="">selection</optoin>
<option value="101">DA</option>
<option value="102">FV</option>
<option value="103">CS</option>
<option value="104">TO</option>
</select>
</td>  
</form>
</table>
<b>Select restaurant</b> <div id="txtHint"></div>
</body>
</html>

test.php code

<?php
echo $_POST['q'];
?>

score 0 · Accepted Answer · edited May 23 '17 at 10:24

The construct $('#new-result') parses the current document for an element with ID new_result. Same with new_result_item

You want to parse the HTML returned by the ajax call which is currently NOT in the dom of the current document. You may look at this stackoverflow:

     ....
     success: function (result) {
          alert($(result).find('#new-result-item').html());
     }
     ....

may give you the inner content of the returned HTML snippet

getting value of html result after ajax postback

2 Answers2