Jc John Jc John - 2 months ago 7
Ajax Question

ajax passing the json value to html header class

I am really confused on how to pass the json variable to my html header tag. I am using CodeIgniter framework, I got the values of my query in JSON and i also put it in the variable and it works good, but when i tried to display it in the header, i am very confused how to do it right.

all i want is something like this :

this is my ajax from my query.

function showprojectdetails(projectSelected) {
var studentId = null;
$.ajax({
url : "<?php echo site_url('manager/projects/ProjDetails/')?>/" + projectSelected,
type: "GET",
dataType: "JSON",
success: function(data) {

$projcode = data['project_code'];
$projtitle = data['project_title'];
$projdesc = data['project_desc'];
$projstat = data['project_status'];
$projpercent = data['project_percent'];
$projadd = data['project_address'];

},
error: function (jqXHR, textStatus, errorThrown) {
alert('Error get data from ajax');
}
});


from my html heading. all i want is to display the variables of my data
something like this :

<ul>
<li> <h3 class="blue">$projtitle</h3> <!--span>Interactions</span--></li>
<li> <h3 class="purple">Status:</h3> <!--span>Posts</span--></li>
</ul>

Answer

So I assume your getting your data right and your problem is displaying it on your page. You could use jquery to achieve this.

first add an id attribute to your tags so we could use them as reference for displaying...

<ul>
    <li> <h3 class="blue" id="projectTitle"></h3></li>
    <li> <h3 class="purple">Status:<span id="projectStatus"></span></h3></li>
</ul>

and heres your ajax should look like

function showprojectdetails(projectSelected) {
  var studentId = null;
 $.ajax({
        url : "<?php echo site_url('manager/projects/ProjDetails/')?>/" + projectSelected,
        type: "GET",
        dataType: "JSON",
        success: function(data) {
                 $('#projectTitle').html(data['project_title']);
                 $('#projectStatus').html(data['project_status']);
                 //and so on

        },
        error: function (jqXHR, textStatus, errorThrown) {
            alert('Error get data from ajax');
        }
    });