JavaScript Development
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me

The Shed is going Social! Join us on FaceBook and Twitter and chime in on the conversation.

Go Back   Dev Shed Forums > Web Design > JavaScript Development
Reload this Page

Ajax: Populating data string to be sent based on button clicked


Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Dev Shed Forums Sponsor:
  #1  
Old October 10th, 2012, 01:56 PM
BlackAce BlackAce is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jun 2010
Posts: 164 BlackAce User rank is Sergeant Major (2000 - 5000 Reputation Level)BlackAce User rank is Sergeant Major (2000 - 5000 Reputation Level)BlackAce User rank is Sergeant Major (2000 - 5000 Reputation Level)BlackAce User rank is Sergeant Major (2000 - 5000 Reputation Level)BlackAce User rank is Sergeant Major (2000 - 5000 Reputation Level)BlackAce User rank is Sergeant Major (2000 - 5000 Reputation Level) 
Time spent in forums: 1 Day 17 h 37 m 21 sec
Reputation Power: 43
Ajax: Populating data string to be sent based on button clicked
I cringe every time I venture out of the PHP forums to visit the Javascript forum, and I'm sure you do as well. I just don't work with this stuff enough to retain it all, and it feels like I'm learning Javascript all over again each time I try.

With that in mind, hopefully this will not be too horrific of a n00b question.

I'm working on an Ajax function that adds a "like" into the mysql database when someone clicks on the like link. I have that aspect of it working just fine, as long as I hard-code the values I want to submit into the dataString.

But there will be many "like" links on this page, so I need some way to pass information specific to whichever link they click on into the Ajax function.

So here is my test code:

javascript Code:
Original - javascript Code 
  1.  
  2. <script type="text/javascript">
  3. $(document).ready(function(){
  4.     $('#likeButton').click(function(e){
  5.         dataString = 'type=' + 'project' + '&id=' + '9';
  6.          $.ajax({
  7.              type: 'GET',
  8.              url: 'sql_like.php',
  9.              data: dataString,
  10.              success: function(data){
  11.                 $('#output').html(data);
  12.              },
  13.              error: function(request, status, error){
  14.                  alert(request.responseText);
  15.              }
  16.          })
  17.         })
  18.  })
  19. </script>
  20.  
  21. <h2>Result:</h2>
  22. <a href="#" id='likeButton'>Like</a>
  23. <div id="output">2</div>


I need to be able to change the "type" and "id" values depending on which link they click.

Help?
Last edited by BlackAce : October 10th, 2012 at 02:01 PM.
Reply With Quote
  #2  
Old October 10th, 2012, 08:22 PM
E-Oreo's Avatar
E-Oreo E-Oreo is offline
Lost in code
Click here for more information.
  
Join Date: Dec 2004
Posts: 7,947 E-Oreo User rank is General 91st Grade (Above 100000 Reputation Level)E-Oreo User rank is General 91st Grade (Above 100000 Reputation Level)E-Oreo User rank is General 91st Grade (Above 100000 Reputation Level)E-Oreo User rank is General 91st Grade (Above 100000 Reputation Level)E-Oreo User rank is General 91st Grade (Above 100000 Reputation Level)E-Oreo User rank is General 91st Grade (Above 100000 Reputation Level)E-Oreo User rank is General 91st Grade (Above 100000 Reputation Level)E-Oreo User rank is General 91st Grade (Above 100000 Reputation Level)E-Oreo User rank is General 91st Grade (Above 100000 Reputation Level)E-Oreo User rank is General 91st Grade (Above 100000 Reputation Level)E-Oreo User rank is General 91st Grade (Above 100000 Reputation Level)E-Oreo User rank is General 91st Grade (Above 100000 Reputation Level)E-Oreo User rank is General 91st Grade (Above 100000 Reputation Level)E-Oreo User rank is General 91st Grade (Above 100000 Reputation Level)E-Oreo User rank is General 91st Grade (Above 100000 Reputation Level)E-Oreo User rank is General 91st Grade (Above 100000 Reputation Level)  Folding Points: 945 Folding Title: Novice Folder
Time spent in forums: 2 Months 10 h 37 m 24 sec
Reputation Power: 7053
Within your click event handler, this represents the HTML element that was clicked.

You can insert data elements into your HTML to contain data:
Code:
<a href="#" id="likeButton" data-type="1" data-id="2">Like</a>


You can retrieve attribute values using jQuery's attr function:
Code:
$(this).attr('data-type');
__________________
PHP FAQ
How to program a basic, secure login system using PHP
Connect with me on LinkedIn


Quote:
Originally Posted by Spad
Ah USB, the only rectangular connector where you have to make 3 attempts before you get it the right way around
Reply With Quote
  #3  
Old October 10th, 2012, 09:57 PM
BlackAce BlackAce is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jun 2010
Posts: 164 BlackAce User rank is Sergeant Major (2000 - 5000 Reputation Level)BlackAce User rank is Sergeant Major (2000 - 5000 Reputation Level)BlackAce User rank is Sergeant Major (2000 - 5000 Reputation Level)BlackAce User rank is Sergeant Major (2000 - 5000 Reputation Level)BlackAce User rank is Sergeant Major (2000 - 5000 Reputation Level)BlackAce User rank is Sergeant Major (2000 - 5000 Reputation Level) 
Time spent in forums: 1 Day 17 h 37 m 21 sec
Reputation Power: 43
Quote:
Originally Posted by E-Oreo
Within your click event handler, this represents the HTML element that was clicked.

You can insert data elements into your HTML to contain data:
Code:
<a href="#" id="likeButton" data-type="1" data-id="2">Like</a>


You can retrieve attribute values using jQuery's attr function:
Code:
$(this).attr('data-type');


Boy, you are all over around here! Thanks for steering me in the right direction.
Last edited by BlackAce : October 11th, 2012 at 01:26 PM.
Reply With Quote
  #4  
Old October 11th, 2012, 01:21 PM
BlackAce BlackAce is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jun 2010
Posts: 164 BlackAce User rank is Sergeant Major (2000 - 5000 Reputation Level)BlackAce User rank is Sergeant Major (2000 - 5000 Reputation Level)BlackAce User rank is Sergeant Major (2000 - 5000 Reputation Level)BlackAce User rank is Sergeant Major (2000 - 5000 Reputation Level)BlackAce User rank is Sergeant Major (2000 - 5000 Reputation Level)BlackAce User rank is Sergeant Major (2000 - 5000 Reputation Level) 
Time spent in forums: 1 Day 17 h 37 m 21 sec
Reputation Power: 43
Oreo,

I ran into a setback today. For some reason, if I have multiple "Like" buttons on a page, only the first one works with the Ajax. I know they are all coded exactly the same, because it's a PHP loop that creates the page with all the buttons. If I change the order of the records, no matter which one is first, that is the only one that works.

Is there a way I can debug what is happening when I click the other buttons on the page?

I'm wondering if is has to do with the span I am using to output the response to. That span is given an ID of "output".

javascript Code:
Original - javascript Code 
  1.  
  2. success: function(data){
  3.                 $('#output').html(data);
  4.              },


EDIT: Yes, I was able to confirm that the Ajax is actually working when I click the other buttons, but it is only updating the first "#output" span instead of the span associated with that button.

How do I tell the Ajax script to output to a unique span ID instead of a generic "output"?

EDIT2: Fixed it, wasn't as complicated as I thought.

javascript Code:
Original - javascript Code 
  1.  
  2. divname = '#output_' + $(this).attr('data-id');
  3. ...
  4. success: function(data){
  5.     $(divname).html(data);
  6. },
  7.  
Last edited by BlackAce : October 11th, 2012 at 01:36 PM.
Reply With Quote
  #5  
Old October 11th, 2012, 02:07 PM
Kravvitz's Avatar
Kravvitz Kravvitz is offline
CSS & JS/DOM Adept
Dev Shed God 30th Plane (19500 - 19999 posts)
  
Join Date: Jul 2004
Location: USA
Posts: 19,835 Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level) 
Time spent in forums: 6 Months 1 Day 22 h 11 m
Reputation Power: 4192
As you found out through trial-and-error, IDs should be unique. A class can often be used instead.
__________________
Spreading knowledge, one newbie at a time. I'm available for hire at Dynamic Site Solutions.

Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

Remember people spend most of their time on other people's sites (so don't violate web design conventions).
Reply With Quote
  #6  
Old October 11th, 2012, 02:59 PM
BlackAce BlackAce is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jun 2010
Posts: 164 BlackAce User rank is Sergeant Major (2000 - 5000 Reputation Level)BlackAce User rank is Sergeant Major (2000 - 5000 Reputation Level)BlackAce User rank is Sergeant Major (2000 - 5000 Reputation Level)BlackAce User rank is Sergeant Major (2000 - 5000 Reputation Level)BlackAce User rank is Sergeant Major (2000 - 5000 Reputation Level)BlackAce User rank is Sergeant Major (2000 - 5000 Reputation Level) 
Time spent in forums: 1 Day 17 h 37 m 21 sec
Reputation Power: 43
More roadblocks. Grrrr.

So I've modified my code a bit. Previously, I had the <a> tag used to trigger the ajax sequence as a fixed part of the source page and not part of the output returned by Ajax.

However, if someone has already "liked" a post, I want to return a different link for them to click on instead. Thus, I moved the #output div from my earlier code to the outside of the <a> tag so the entire <a> tag will be replaced when the link is clicked.

When I click on the default link on the source page, the Ajax function works correctly, returning an updated link code to the source page. But clicking on the new link does nothing.

Any thoughts?

html Code:
Original - html Code 
    
<span id='output_".$project_ID."'>
    <a href='#' class='likeButton' data-id='".$project_ID."' data-type='project' data-mode='like'>".$like_count." likes</a>
</span>


And if they click on that link, this is what is returned from the other page via Ajax:

html Code:
Original - html Code 
    
<a href='#' class='likeButton' data-id='$id' data-type='$type' data-mode='unlike'>".$like_count." unlike</a>
Last edited by BlackAce : October 11th, 2012 at 03:14 PM.
Reply With Quote
  #7  
Old October 15th, 2012, 06:38 AM
BlackAce BlackAce is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jun 2010
Posts: 164 BlackAce User rank is Sergeant Major (2000 - 5000 Reputation Level)BlackAce User rank is Sergeant Major (2000 - 5000 Reputation Level)BlackAce User rank is Sergeant Major (2000 - 5000 Reputation Level)BlackAce User rank is Sergeant Major (2000 - 5000 Reputation Level)BlackAce User rank is Sergeant Major (2000 - 5000 Reputation Level)BlackAce User rank is Sergeant Major (2000 - 5000 Reputation Level) 
Time spent in forums: 1 Day 17 h 37 m 21 sec
Reputation Power: 43
Sorry guys, I gotta bump this, as I'm stuck here.
Reply With Quote
  #8  
Old October 15th, 2012, 04:55 PM
Kravvitz's Avatar
Kravvitz Kravvitz is offline
CSS & JS/DOM Adept
Dev Shed God 30th Plane (19500 - 19999 posts)
  
Join Date: Jul 2004
Location: USA
Posts: 19,835 Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level) 
Time spent in forums: 6 Months 1 Day 22 h 11 m
Reputation Power: 4192
The onclick handler was only bound to elements that existed when the page first loaded (technically, when the "DOMContentLoaded" event fired), so elements that are loaded via AJAX won't have it applied to them.

The best solution to this is to use event delegation, which is quite easy with jQuery 1.7+. I recommend you read JavaScript Event Delegation is Easier than You Think.

Change
Code:
$('.likeButton').click(function(e){

to
Code:
$('body').on('click','.likeButton',function(e){
Last edited by Kravvitz : October 15th, 2012 at 05:20 PM.
Reply With Quote
  #9  
Old October 16th, 2012, 08:08 AM
BlackAce BlackAce is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jun 2010
Posts: 164 BlackAce User rank is Sergeant Major (2000 - 5000 Reputation Level)BlackAce User rank is Sergeant Major (2000 - 5000 Reputation Level)BlackAce User rank is Sergeant Major (2000 - 5000 Reputation Level)BlackAce User rank is Sergeant Major (2000 - 5000 Reputation Level)BlackAce User rank is Sergeant Major (2000 - 5000 Reputation Level)BlackAce User rank is Sergeant Major (2000 - 5000 Reputation Level) 
Time spent in forums: 1 Day 17 h 37 m 21 sec
Reputation Power: 43
Quote:
Originally Posted by Kravvitz
The onclick handler was only bound to elements that existed when the page first loaded (technically, when the "DOMContentLoaded" event fired), so elements that are loaded via AJAX won't have it applied to them.

The best solution to this is to use event delegation, which is quite easy with jQuery 1.7+. I recommend you read JavaScript Event Delegation is Easier than You Think.

Change
Code:
$('.likeButton').click(function(e){

to
Code:
$('body').on('click','.likeButton',function(e){


Thank you for posting both a working solution, and a link to where I can go learn more. Many people seem to do just one or the other. As I read through this, it's jogging my memory a bit on events and bubbling. I had not yet done this with jQuery, so I appreciate it!
Reply With Quote
  #10  
Old October 16th, 2012, 03:14 PM
Kravvitz's Avatar
Kravvitz Kravvitz is offline
CSS & JS/DOM Adept
Dev Shed God 30th Plane (19500 - 19999 posts)
  
Join Date: Jul 2004
Location: USA
Posts: 19,835 Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 48th Grade (Above 100000 Reputation Level) 
Time spent in forums: 6 Months 1 Day 22 h 11 m
Reputation Power: 4192
You're welcome.

I probably post links more often than I post code. In this case, the change was to a single line, so I posted it as well as two links. I'm here to help people learn (and hope to learn something occasionally myself). Just posting code fixes tends not to help people as much in the long term.
Reply With Quote
Reply

Viewing: Dev Shed Forums > Web Design > JavaScript Development > Ajax: Populating data string to be sent based on button clicked

« Previous Thread | Next Thread »

Developer Shed Advertisers and Affiliates



Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Linear Mode Linear Mode
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump

Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 


Powered by: vBulletin Version 3.0.5
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.

© 2003-2013 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap