CODEWITHSUNDEEP
ajaxjquery
Augus
Augus

Reputation: 495

My ajax request isn't working

I have an <ul id="keuze_lijst"> , an input field with id #sykje and an button with class .search .

Now when i press the button i would like to clear the UL and repopulate it with data, for this i currently got this .js file.

$(document).ready(function() {
    $(".search").click(function(){
        var searchValue = $("#sykje").val();
        $("#keuze_lijst").empty();

        $.ajax({
            url: 'http://www.autive.nl/frysk/simulator/sim.php?action=getSongs&search='+searchValue,
            data: "",
            dataType: 'json',
            success: function(rows) {
                for(var i in rows){
                    var row = rows[i];
                    var id = row[1];
                    var titel = row[2];
                    var artiest = row[9];

                    $("#keuze_lijst").append("<li class='mag_droppen'>"+
                                    "<div class='song_left'>"+
                                    "<div class='titel'>"+titel+"</div>"+
                                    "<div class='artiest'>"+artiest+"</div>"+
                                    "</div><!-- .song_left -->"+
                                    "</li>");
                }

            }
        });
    });
});

When i remove the ajax command and put something like $("#keuze_lijst").html("hello"); it works fine. But the ajax command isn't working. Though the var searchValue does his work. (ajax uses the correct url). And when i enter that url the page echoes an fine json with multiple rows.

But in my page the ajax script isn't adding the <li>.

What am i doing wrong?

edit: added an jsfiddle -> http://jsfiddle.net/TVvKb/1/

Upvotes: 0

Views: 165

Answers (4)

Tim S.
Tim S.

Reputation: 13843

Not sure, but I think if you insert a string in the .append() and other jQuery methods, it parses to (valid) HTML first. That means that unclosed tags are closed, making your HTML invalid.

$('<div />'); // parses to <div></div>

So, I assume that your DOM ends up like this this:

$('ul').append('<li>').append('foo').append('</li>'); // <ul><li></li>foo</li></ul>

Please, just format your string first. You don't want jQuery to parse every input.

var str = '<li>';
str += 'foo';
str += '</li>';

$('ul').html(str);

For cross-domain AJAX requests (without JSONP):

proxy.php

header('Content-Type: application/json');

if(empty($_GET['search'])) exit;

$url = 'http://www.autive.nl/frysk/simulator/sim.php?action=getSongs&search=' . $_GET['search'];

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_exec($ch);
curl_close($ch);

Javascript

$.getJSON({
    url: 'proxy.php&search='+searchValue,
    success: callback
});

Upvotes: 0

Christoph
Christoph

Reputation: 51181

Possible Problems:

You are running into a Same Origin Problem. Per default you can only make Ajax-Requests to your own domain. If you need to make cross-domain calls use JSONP or CORS.

Use the html() only once, and hand over your complete string, otherwise you will override your previous html all the time.

You are not landing in the success handler due to an error (e.g. invalid JSON).

Upvotes: 0

Lix
Lix

Reputation: 47956

From a quick glance, I can say that the problem might be with your use of the html() function. This actually replaces the entire html content.

You might want to try using append() or prepend().

Upvotes: 0

Darrrrrren
Darrrrrren

Reputation: 6078

.html() totally replaces the HTML. So at the end, your "#keuze_list will contain </li>.

Just execute one html() command after you build your html into a string var or something.

Upvotes: 1

Related Questions