Injecting html with append using ajax data

Question

I'm building some html via ajax and trying to insert it into my page but nothing is working. The data is coming back ok and I can see in firebug that the append is fireing but no html is being inserted.

here is my jquery

//AJAX LEAD SEARCH

$('#ajx_ld_s').on("keyup", function() {

    var search = $('#ajx_ld_s').val();


    if(search == ""){
        search = "__all__";
    }


    $.ajax({
        type: "POST",
        url: "/leads/view-leads-ajax",
        data: { search: search, action: "ls" },
        beforeSend: function(xhr) {
            $('.ajax_label label').after('<img src="/assets/img/system/ajax.gif" alt="loading">');
        }
    })
        .done(function(data) {
           $('.ajax_cont').append( data );

        })
         .always(function() {
        $('.ajax_label img').remove();
        $('.ajax_search form').val('');
        });

});

And here is my function...

public function view_leads_ajax(){


    $data = array();

    //get leads
    $data['leads'] = $this->Lead_model->get_leads_ajax($_POST);

    //build html
    $html = '';
              foreach ($data['leads'] as $key => $l) :

                $lc = ($l['last_contact'] == 0) ? "No Contact Made" : $l['last_contact'];
              $html .= '<tr>
                <td><a href="/leads/action/' . $l['id'] .'"><i class="fa fa-pencil"></i></a></td>
              <td> ' . $l['fname'] . ' ' .  $l['lname'] . '</td>
              <td> ' . $l['email'] . '</td>
              <td> ' . $l['contact'] . '</td>
              <td> ' . $l['contact_other'] . '</td>
              <td> ' . $l['addr_num'] . ' ' . $l['addr_line1'] . ' ' . $l['addr_line2'] . '</td>
              <td> ' . $l['addr_town'] . '</td>
              <td> ' . $this->utility->get_office_short_name( $l['office'] ) . '</td>
              <td> ' . $l['added_date'] . ' </td>
              <td> ' . $lc . '</td>
              <td> ' . $l['o_contact_via'] . '</td>
               </tr>';

              endforeach;

              return $html;


}

If someone can spot my error I'd be really grateful.

Thanks

score 0 · Answer 1 · answered Feb 07 '14 at 14:56

0

Replace

return $html;

with

echo $html;

in the PHP, and of course /leads/view-leads-ajax has to be a valid URL.

Also, this seems strange

$('.ajax_search form').val('');

a form has no value ?

answered Feb 07 '14 at 14:56

adeneo

312,895
29
395
388

I had it set to echo before and the same issue. The URL is valid and I have no idea what I was doing with that 3rd line. But, echoing doesn't work either. I can alert the returned data but nothing is being injected – jhodgson4 Feb 07 '14 at 15:16
If you can alert the data in the success callback, it's obviously there, and then it's just the appending that is the issue, and there's not much that can go wrong there. Do you have an element with the class `.ajax_cont` and are you sure you're not overwriting the content in that element with something else in the script – adeneo Feb 07 '14 at 15:21

score 0 · Answer 2 · edited May 23 '17 at 12:28

0

Not sure if it's the problem here, but I think you can't call directly a php function with Ajax.

See : using jquery $.ajax to call a PHP function

edited May 23 '17 at 12:28

Community

1
1

answered Feb 07 '14 at 14:57

Getz

3,983
6
35
52

Injecting html with append using ajax data

2 Answers2