• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2024
  • Last Modified:

Tagit jQuery to get Tags from Database

I'm new to jQuery so I was hoping to get a little help.  I am using a jQuery tagit pluggin (code and documentation is here).

This script is setup to have available tags the user can choose from be set by an array called "availableTags."  What I need to do is do an jQuery ajax call to a script that will contain a list of tags that come from a MySQL database which match the user input.

I believe that I just need to modify the tagSource option and put a function in there that has does the ajax call.

Here is the code for the tagit element which currently populates tags from the array availableTags:
$('#demo3').tagit({tagSource:availableTags, triggerKeys:['enter', 'comma', 'tab']});

Open in new window


So I need a function after tagSource: to get the data from an ajax call is what I'm thinking.  This is what I would like help on.  I would like to see how to populate tagSource with tags too; I am guessing I do it with JSON or something like that.
0
Elxn
Asked:
Elxn
  • 13
  • 10
3 Solutions
 
RobOwner (Aidellio)Commented:
Yes, you use the same property as you would if you were using the autocomplete plugin

http://jqueryui.com/autocomplete/#remote

In otherwords,

tagSource: "yourlist.php"

yourlist.php should return JSON data as it says on the above link: "The datasource is a server-side script which returns JSON data, specified via a simple URL for the source-option."
0
 
ElxnAuthor Commented:
Thanks rob.  But do you know how to pass the text the user typed in to the PHP script?  It would probably be easiest to do it with a URL variable, but how do i get the user's text to put into the URL?  I'll need the text to get the tags which are relevant to what the user typed in.
0
 
RobOwner (Aidellio)Commented:
Probably the easiest way is:

tagSource: "yourlist.php?"+$("#id_of_textbox").serialize();

**edit: working version here: http://jsbin.com/wijib/2/
Just make sure you've got a name as well as an id for your textbox

The code above will generate something like:
tagSource: "yourlist.php?textboxName=this+is+a+test"
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
ElxnAuthor Commented:
Well I tried to get it to work but am still having problems.

Here is the page where I'm trying to use Tagit:  http://girlzunderground.com/tagit.php

Here is the script that generates the JSON:  http://girlzunderground.com/php/profile-tags.php?t=books&txt=book

Everything seems like it should work but it isn't for some reason.

Any help would be appreciated!
0
 
RobOwner (Aidellio)Commented:
You need to put your script inside the jQuery initialise function

<script>
	$('#demo3').tagit({tagSource:"php/profile-tags.php?t=books&txt="+$("#test1").serialize();, triggerKeys:['enter', 'comma', 'tab']});
</script>

Open in new window

needs to change to

<script>
$(function() {
	$('#demo3').tagit({tagSource:"php/profile-tags.php?t=books&txt="+$("#test1").serialize();, triggerKeys:['enter', 'comma', 'tab']});
});
</script>

Open in new window

0
 
RobOwner (Aidellio)Commented:
you also have a semicolon ; that shouldn't be there after the serialize()

should be

$('#demo3').tagit({tagSource:"php/profile-tags.php?t=books&txt="+$("#test1").serialize(), triggerKeys:['enter', 'comma', 'tab']});
});
0
 
RobOwner (Aidellio)Commented:
This is a working version but with another page's data: http://jsbin.com/wavilu/1/edit

your script .... needs to return an array string like this http://gd.geobytes.com/AutoCompleteCity?q=robert

$(function() {
	$('#demo3').tagit({
		tagSource:function( request, response ) {
			$.ajax({
				url: ""http://gd.geobytes.com/AutoCompleteCity"",
				dataType: "jsonp",
				data: {
					q: request.term
				},
				success: function( data ) {
					response( data );
				}
			});
		},
		triggerKeys:['enter', 'comma', 'tab'],
		allowNewTags: false
	});
});

Open in new window

0
 
ElxnAuthor Commented:
Rob,

Thanks for the reply.  I tried both suggestions you gave but none of them worked.  You can check out what I've done at the two URLs I gave earlier.

The whole script doesn't seem to be working really, even when I type stuff into the textbox it doesn't make what I typed a tag.

It would be preferable to use json as this will allow me to store the id of the tag and the tag text and send it to a script.

Thanks for any help you can give!
0
 
RobOwner (Aidellio)Commented:
There's no problem using json, it just means you have to parse the data into an array.
Did the demos I posted above work for you? Did you try typing something in the textbox? Did you press enter?
0
 
ElxnAuthor Commented:
Yeah I tried copying everything you did.  The only change I made was I modified the ajax data object to work with my php page.  
data: {	txt: request.term,
			t: "books"
		   }

Open in new window


I can't seem to understand why it doesn't work.  

You can see the code I'm using at the same pages I mentioned earlier.
0
 
RobOwner (Aidellio)Commented:
I think it's your request.term. if this is meant to be the value of the textbox it won't work.
Instead try

txt: $("#id_of_textbox").val(),
0
 
ElxnAuthor Commented:
Tried it, but it still isn't working.
0
 
RobOwner (Aidellio)Commented:
I'm still here looking through what could be wrong.  I notice you're using an old doctype, should be

<!DOCTYPE html>
<html>
0
 
RobOwner (Aidellio)Commented:
don't worry about the doctype but when you call a jsonp with ajax the full url looks like this:

http://girlzunderground.com/php/profile-tags.php?callback=jQuery1111017371571459807456_1408512357990&txt=books&t=books&_=1408512357991

your profile-tags.php script returns a single square bracket "]"  so there is an issue with your php
0
 
ElxnAuthor Commented:
The "]" was showing because no item matched "books" but if you try just "book" you'll get a correct response.  The script will return ] when there are no matches but I assume this doesn't make any difference.

Well I tried that big URL but it didn't work.

I just don't understand how it could be working in that example you gave me and not work on my site.
0
 
RobOwner (Aidellio)Commented:
It's the headers you're sending to the browser from your php code.  You need to specify the output as header("application/json");
echo [your array here];
0
 
RobOwner (Aidellio)Commented:
Without wanting to confuse things further here, as you are trying to get the data from the same server you should use dataType: json, not jsonp (in jQuery) that i'm using.  I have to use jsonp to access your server from another location.

However, the issue is on the server as it's not returning JSON but text, which is why the ajax call is failing
0
 
ElxnAuthor Commented:
Rob,

Thanks, that worked.  But I still have some issues that I can't figure out.

1.  No matter what I type in, the script seems to return the same values--even when they don't match.  I thought this might be because the script was accessing a cached page.  I tried putting $.ajaxSetup({ cache: false }); in the code but it doesn't seem to be solving the problem.

2.  The drop down box for selecting values displays everything on one line AND the entries are crammed together.  It really doesn't make choosing a correct tag easy so this needs to change so that separate entries are on individual lines.



Thanks for the help again!
0
 
RobOwner (Aidellio)Commented:
1. Same results - Firstly your script should return [] (left and right square brackets) to indicate an empty array.  Secondly, what keywords should return results?  i can then test your script for you.

2. Crammed Together - fairly simple.  In your CSS, ul.tagit li, remove float:left
0
 
ElxnAuthor Commented:
I checked my script and I realized that it would return all rows from the table when the txt varialbe wasn't set.  I changed it now and it puts [] on the page if there are no results.

Seems like the txt URL variable isn't set to any value in the ajax call cause now no matter what you type in you don't get any results back from the page.  So the problem seems to lie in the way the jquery sets the value of the txt variable.  It gave results though before I made this change and that means that the t URL variable was passing just fine; if it wasn't there wouldn't have been any results at all.

Here are two URLs to get different results:
http://girlzunderground.com/php/profile-tags.php?t=books&txt=book
http://girlzunderground.com/php/profile-tags.php?t=books&txt=an

To test an empty query string, you can omit the txt URL variable or just make up a weird string that won't match anything.

Thanks for the help!
0
 
ElxnAuthor Commented:
Well I think I got it.  I changed the txt variable in the ajax call to request.term and it worked.  For some reason trying to put the value of txt with txt: $("#test1").val() didn't work but using txt: request.term did work.  Seems like they both should have worked!
0
 
ElxnAuthor Commented:
Rob,

Thanks so much!
0
 
RobOwner (Aidellio)Commented:
No problem and glad we got there in the end. Especially since I was sleeping :-)
0

Featured Post

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

  • 13
  • 10
Tackle projects and never again get stuck behind a technical roadblock.
Join Now