up vote 0 down vote favorite

I have a <input> that displays suggestions when someone types in it. I am building the backend to it so that ajax grabs the first five tags in the database that have that letter sequence and displays it in spans in particular <div>. I don't seem to be completely succeeding. This is the first Ajax I have ever done. Help would be greatly appreciated. Below is the applicable HTML, Javascript, and PHP. I think I am close but not exactly sure how to continue. The problem is probably in the javascript.

HTML:

<label id="testTagsLabel">Tags:</label>
<input type="text" name="tags" id="testTags" placeholder="Ex: Poem, Edgar Allen Poe">
<div id="tagSuggest">
<ul>
<!--the javascript would add the suggests as list items here-->
</ul>
</div>

PHP:

<?php #create_set.ajax.php

$tagSuggestions = array();

$currentTag = $_POST['sendTag'];

if (!empty($currentTag)){

require_once (MYSQL); //gets the database connection

$enteredTag = mysqli_real_escape_string ($dbc, $currentTag);

$q = "SELECT name FROM tags WHERE MATCH(name) AGAINST('$enteredTag'.'*' IN BOOLEAN MODE) LIMIT 5";
$r = mysqli_query ($dbc, $q) or trigger_error("Query: $q\n<br />MySQL Error: " . mysqli_error($dbc));

if (mysqli_num_rows($r) > 0) {//if there are tags that match what the user typed

while ($row = mysqli_fetch_array($r, MYSQLI_ASSOC)) {

$tag = $row['name'];

$tagSuggestions[] = $tag;

}

echo json_encode($tagSuggestions);

}

}

?>

Javascript:

$(function(){
      function sendTag(str){
            $.post("../includes/create_set.ajax.php",{ sendTag: str },
            function(data){
                for (var key in data.returnTag) {
                    if(data.returnTag.hasOwnProperty(key)) {
                       $('#tagSuggestTag').html('<li class="tagSuggestTag">' + data.returnTag + "<li>");
                    }
                }
            }, "json");

      }

      $('#testTags').keyup(//on key press in tag field show the send the request and show the suggestions
         function(){
            sendTag($(this).val());
            $('#tagSuggest').show();
         });
});
share|improve this question
feedback

2 Answers

up vote 1 down vote accepted

I don't see what data.returnTag should be, data is a simple array.

So you can iterate over it using

for(var i =0;i<data.length;++i)

and access the items inside the loop via data[i]

$('<li class="tagSuggestTag"/>').appendTo('#tagSuggestTag ul').text(data[i]);
share|improve this answer
feedback
up vote 1 down vote

If I'm reading this right, you are basically appending one same <li> through every pass in the loop. This seems to be the problematic bit:

for (var key in data.returnTag) {
    if(data.returnTag.hasOwnProperty(key)) {
        $('#tagSuggestTag').html('<li class="tagSuggestTag">' + data.returnTag + "<li>");
    }
}

In this bit of code, you take the #tagSuggestTag, which I assume is the suggest box that should hold the list of suggestions, and you replace it's HTML content with a single <li>. And you do this every pass of the loop. If I'm right, you should end up with only 1 item in the suggest box. To fix this, use .append() instead of .html(). Also, your suggest box selector (ID) seems to be wrong.

Example:

for (var key in data) {
    $('#tagSuggest ul').apend('<li class="tagSuggestTag">' + data[key] + "<li>");
}

Also note that you were calling the returned value wrong. when getting the value from your response object, you were calling data.returnTag which doesn't exist, because data in your case is an array of objects. So instead, you should iterate over data, not data.returnTag and access the properties with data[key].

It's quite possible that there is more issues than this though.

share|improve this answer
feedback

Your Answer

 
or
required, but never shown
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.