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.
LVL 2
ElxnbossAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
ElxnbossAuthor 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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

ElxnbossAuthor 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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
ElxnbossAuthor 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
ElxnbossAuthor 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
ElxnbossAuthor 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
ElxnbossAuthor 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
ElxnbossAuthor 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
ElxnbossAuthor 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
ElxnbossAuthor 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
ElxnbossAuthor 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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.