Html elements are not accessed in ajax success function

JavaScript
1

Hello. This is my html code

<div class="col-sm-4">
<label for="area_dd" class="sr-only"></label>
				 			
<select name="area_dd" id="area_dd" class="form-control"> 
<option value="">Please choose area</option>
</select>
				 			        
</div>

<p id="tessst">I am test</p>

and this is my jquery code

$("#tessst").hide();    
$("#city_dd").change(function(){

var city_id=$(this).val();
$.ajax({
url:"pages/fetch_areas_dd.php",
method:"POST",
dataType:"json",
data:{city_id:city_id},
success:function(data){

console.log(data);   
$("#tessst").show();
$("#area_dd").html(data);

},
error:function(){
    alert("error");
}

});
});

The problem is success function is not working properly. Html elements are no more accessed in the success method of ajax. I mean when response is return from server I want to show the returned data in html element and id of that element is “#area_dd”. Console.log(data) is working fine. But $(“#area_dd”).html(data) and $(“#tessst”).show() are not working in the success method.

2

can you post a link to a test page?

3

Hi, thanks for your reply. I don’t have any link because my website is on localhost. I have the main issue on the jquery code I mean why my jquery not accept the html elements on the success of ajax and literally I don’t know why this happen to this code. I used the same logic in some other web page that worked fine there…

4

These two code snippets are simply not enough information for us to solve the issue.

5

Yup I know this provided information is not enough but if this did happen to you or anyone out here I mean html elements no more accessed in the success function then please let me know about how you solve this kind of problem then I wil try it with myself. I just need a hint. Thanks!

6

I would inspect the page in question with the browser’s developer tools.

1 Like
7

:slight_smile:

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.