Solved

JQuery Pluggin Question

Posted on 2014-11-22
6
169 Views
Last Modified: 2014-12-01
I have this plugin working just fine on this page:  Tagit Working Here.  Just start typing the word "book" in one of the fields and you'll see it works fine.

However, I'd like to see if I can put the ajax call inside a function and just call the function instead of having all that code on the page repeated.  I have tried but it isn't working.  I have no idea why, so I've turned to you experts for help!

Here is an example of the code that isn't working:
function get_tags(request,table){
	$.ajaxSetup({ cache: false });
	$.ajax({
		url: "php/profile-tags.php",
		dataType: "json",
		data: {
			txt: request.term,
			t: table
		},
		success: function( data ) {
			return data;
		}
	});								
}
	
$(function() {							
	$('#tagit_1_bands').tagit({
		tagSource:function( request, response ) {
			var data = get_tags(request,'bands');
			response( data );
		},
		triggerKeys:['enter', 'comma', 'tab'],
		minLength:2,
		maxTags:1,
		select: true,										
		placeholder:'Your 1st favorite band...'							
	});
});

Open in new window


The HTML the jquery references is probably not the problem at all, but here it is:
<ul id="tagit_1_bands" class="tagit" data-name="bands1[]"></ul>

Open in new window


The page its not working on is here: not working page.

Thanks for the help!
0
Comment
Question by:Elxn
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
6 Comments
 
LVL 8

Expert Comment

by:vr6r
ID: 40460374
It looks to me like your ajax call IS working, it's just not returning any data - it's giving back an empty array.  Here's an example - this is the request that was sent from the 'broken' page:

http://girlzunderground.com/php/profile-tags.php?txt=book&t=bands&_=1416731255215

Click it and you'll see it just returns the opening/closing array brackets but no actual data is in the array.
But if you switch the "t" paramater back to "books", you get a response with valid data as expected.

http://girlzunderground.com/php/profile-tags.php?txt=book&t=books&_=1416731255215

Just sort out what is going on in the profile-tags.php script and you should be in good shape.
Hope that helps!
0
 
LVL 2

Author Comment

by:Elxn
ID: 40460627
Yeah, I know the bands table won't return data.  The only table with data in it is the books table.  So everything needs to be done with the books table for now.  But the problem is, on the page in my site where its not working, when i type stuff in a "books" field it still doesn't work for some reason.  

Its returning something too, I put an alert() in the get_tags function and it shows me data, but it doesn't look like JSON when I alert it for some reason, just comma separated values are shown in the alert box.  Perhaps this is the problem.  I've tried converting the return data to JSON again (even though shouldn't it be JSON already?) but this doesn't seem to work either.

Go to this link and try typing "book" into the favorite books field.  Just click on Top 10's and you'll see the field below.

Thanks.
0
 
LVL 8

Accepted Solution

by:
vr6r earned 500 total points
ID: 40461152
Oh ok I see the book fields now - I didn't scroll down far enough.

The return values look ok - looks like a string array which is normal to appear as a comma delimited list when alerted out.  It appears the result is just not being returned from the get_tags function.

Try this - simplifies the generic  function call a little and should eliminate the callback issue...
function get_tags( request, response ) {
	$.ajaxSetup({ cache: false });
	$.ajax({
		url: "php/profile-tags.php",
		dataType: "json",
		data: {
			txt: request.term,
			t: table
		},
		success: function( data ) {
			response( data );
		}
	});
}

$(function() {
	$('#tagit1').tagit({
		tagSource:get_tags,
		triggerKeys:['enter', 'comma', 'tab'],
		minLength:2,
		maxTags:3,
		allowNewTags: true,
		select: true,
		inputWidth:250,				
		placeholder:'Your 1st favorite book...'	});

	$('#tagit2').tagit({
		tagSource:get_tags,
		triggerKeys:['enter', 'comma', 'tab'],
		minLength:2,
		maxTags:3,
		allowNewTags: true,
		select: true,
		inputWidth:250,
		placeholder:'Your 2nd favorite book...'	});
});

Open in new window

0
Stressed Out?

Watch some penguins on the livecam!

 
LVL 2

Author Comment

by:Elxn
ID: 40465602
Yes great it is working fine on the books now.

However, one question remains.  I need to pass get_tags the table name so it can work for all the different tables.

As you can see on this page (http://girlzunderground.com/profile.php) there are other tables besides the "books" table.

Thanks for your help!
0
 
LVL 2

Assisted Solution

by:Elxn
Elxn earned 0 total points
ID: 40467519
Well I think I figured it out myself.  I modified the get_tags function and added a third parameter and wrapped the tagSource get_tags function in an anonymous function and it worked!

function get_tags( request, response, table ) {
	$.ajaxSetup({ cache: false });
	$.ajax({
		url: "php/profile-tags.php",
		dataType: "json",
		data: {
			txt: request.term,
			t: table
		},
		success: function( data ) {
			response( data );
		}
	});
}

$(function() {																						
	$('#tagit_1_bands').tagit({
		tagSource:function(request, response) {
			get_tags( request, response, 'bands' );
		},
		triggerKeys:['enter', 'comma', 'tab'],
		minLength:2,
		maxTags:1,
		select: true,
				
		placeholder:'Your 1st favorite band...'								
	});
});

Open in new window

0
 
LVL 2

Author Closing Comment

by:Elxn
ID: 40473306
The expert who commented on this question didn't answer my additional question.  I had a need for the "get_tags" function to have a way to understand which table i needed to query to get the tags and he didn't show me how.  So I went and figured it out myself and it is a working solution now.  But, it was me who figured this extra thing out, so I have to say both solutions played a part in answering the question.
0

Featured Post

[Webinar] Learn How Hackers Steal Your Credentials

Do You Know How Hackers Steal Your Credentials? Join us and Skyport Systems to learn how hackers steal your credentials and why Active Directory must be secure to stop them. Thursday, July 13, 2017 10:00 A.M. PDT

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

696 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question