How do I set up a basic link with jquery and productID

[revdave]

Hi all,

Currently I'm working on a Page that will list a collection of items

I am using jquery to loop through the results of the database query below.

I have it setup below to add the productID to the url and go to the 'product.html' page

If I wanted to send a POST instead, how can I set this up so that I can capture the value.productID when user clicks and capture the right product with value.productID - then go to the detail view page 'product.html'?

1 - maybe I should change from '<a href' to a click function that can get the product id and "post" to product page? How would I set that up?

2 - or whatever you suggest?

<div data-role="main" >

  <ul id="list" data-role="listview">

  </ul>

</div>

$.each(data, function(key, value) {

console. log ('item', key, value);

output += "<li><button>Get Contact List</button> - <a href=\"invoice.html?id=" + value.productID + "\">" + value.productID + "</a>" ; 

output += " " + value.name + " " + value.price + "</li>";

});

$('#list').html( output );

$('#list').listview( "refresh" );

});

[sinious]

As you said, you can assign a handler to the anchor but for simple SEO I'd probably double up on the anchor link along with a function that handles sending the POST. You could just anchor a simple GET as you are now and handle it since it's not hidden information but you'd want to append the script type where you're sending the data, e.g. invoice.php rather than invoice.html.

After the click on a standard anchor you might want to prevent the default action of going to the link and only send the POST using jQuery and any data necessary while just responding to what happens. It's up to you.

$(document).ready(function(){
     var DOMStr = ''; 
     $.each( data, function( key, val ) {
          DOMStr += '<li><a href="invoice.php?id=' + val.productId 
                    + '" class="invLink" data-val="' + val.productId + '">' 
                    + val.name + '</a></li>';
     });//each
     $('#list').append( DOMStr ); 
     // capture click, prevent default, send POST
     $('.invLink').click( handleInvoiceClick );
});//ready

To add a listener to each link you're creating and access the data you can just assign a click handler to each anchor all at once with a class (like above, .invLink) and set an attribute (like data-val) that you can simply access when it's clicked. e.g.:

function handleInvoiceClick( evt ) {
     // prevent anchor from auto-following by default
     evt.preventDefault(); 
     // POST data
     var postData = { 
         id: $( evt.currentTarget ).attr('data-val'),
         // more stuff
     };
     // verify
     console.log(postData);
     // send POST
     //$.post( 'invoice.php', postData, function( responseObj ) {
          // check responseObj object here if desired to trigger a result
     //} );//post
     return false;
};//handleInvoiceClick

After that it's just about handling the click event. the evt.preventDefault() and false return above is just ignoring the link click via JS so you can silently send the POST and handle the response.

JSFiddle here (open your console to see the logs)

Uncomment the $.post lines to send the data and receive a response without leaving the page, or just remove the click handler and let the normal anchor send a GET request to invoice.php(/.asp/etc) and handle the data on that side as a normal GET. If the data isn't hidden somehow there's little use to using a POST over a GET. At most you may just need to encode the ID if it contains alphanumeric characters (e.g. punctuation/spaces/etc).

[revdave]

THANKS VERY MUCH FOR THE GREAT INFO!!!!!

[sinious]

You're welcome