Styjun

I have a complete code for getting the values from PHP through Jquery AJAX with JSON datatype.
But after ajax done, it doesn't response to html. Its become text.

the result become like this.

$("#category li").one('click', function() 

 var catId = $(this).attr("id");

 var that = this;

 $.ajax(
 type: 'GET',
 url: '<?php echo base_url()."dashboard/getsubcategory/"; ?>'+catId,
 dataType: 'html',
 data: category: catId,
 beforeSend: function() 
 $("#loader").show();
 
 )

 .done(function(data)
 var categories = JSON.parse(data)

 $.each(categories, function(k,category) 

 that.after('<li class="collection-item">'+category.id+'</li>');

 );

 )
 .fail(function() 

 alert( "Fetch failed." );

 );

);

JSON output :

[
 
 "id": "7",
 "name": "Blazer & Suits"
 ,
 
 "id": "8",
 "name": "Blouses & Shirts"
 ,
 
 "id": "9",
 "name": "Friendly URL in CodeIgniter"
 
]

Why it has returning to :

<li class="collection-item">7</li>
<li class="collection-item">8</li>
<li class="collection-item">9</li>

output that I expected is

<li class="collection-item">7</li>
<li class="collection-item">8</li>
<li class="collection-item">9</li>

preview :

http://prntscr.com/n1x0ey

Please help ..

Thank a lot.

You are storing in the variable that the reference to the Element and using it to append to the document. You should wrap the element before calling the method after.

Furthermore, in your ajax call you are setting the value dataType to html when it seems that you expect a json.

So, wrapping up, your code should look like:

$("#category li").one('click', function() 
 var $that = $(this);
 var catId = $that.attr("id");

 $.ajax(
 type: 'GET',
 url: '<?php echo base_url()."dashboard/getsubcategory/"; ?>'+catId,
 dataType: 'json',
 data: category: catId,
 beforeSend: function() 
 $("#loader").show();
 
 )
 .done(function(data) 
 data.forEach(function(category) 
 $that.after('<li class="collection-item">'+category.id+'</li>');
 );
 )
 .fail(function() 
 alert( "Fetch failed." );
 );
);