I have a page with a lot of buttons on it. I need to get data from database when I click on each of them . I need to implement some jQuery styling for which I need to use AJAX to do it. How do I pass the url of the button to the "ajax.php" page(where my processing is done and where I can use my GET method to retrieve data from the database).
3 Answers
A few points of clarification:
First, jQuery can be used for communication via AJAX, and also for "styling" (that is, controlling layout elements and interacting with CSS. However, styling and AJAX do no intersect. AJAX is used to allow a page to communicate with a server. Styling controls how the page looks and acts.
Second, buttons do not have URLs. You can give them IDs, classes, or names, but not URLs. As noted in the comments, you can wrap your button in an anchor tag (<a>) to easily assign an action to it.
If you are already comfortable with building HTML forms and passing data to server-side scripts for processing, I suggest that you check the jQuery website for helpful documentation and tutorials.
If you are unfamiliar with HTML forms, there are a great many tutorials available via your favorite search engine.
If you are unfamiliar with server-side scripting, PHP is a language that is easy to pick up and learn quickly.
1 Comment
Leena Suresh
I might have communicated it wrongly .. So let me put it this way. I have a link(which has a button styling). When I click on a link I need to get data from database (which I am able to do using PHP and MySQL).What I am unable to achieve is to provide a toggle effect to the data retrieved for which I believe I need to use AJAX. I am unable to pass the url to another page where I can use the parameter passed using a GET method. I hope I have put it in a better way.
Well as your buttons are actually links you can do something like following
HTML:
<a class="btn" href="myurl.php?id=2"></a>
Jquery:
$('.btn').click(function(event){
event.preventDefault();
$.ajax({
url: $(this).attr('href'),
type: 'GET',
success: function(data){
alert('server respond with' + data)
}
});
})
Comments
<a class="button" href="page.html">do some ajax</a>
<script>
$('.button').click(function() {
var btn_url = $(this).attr('href');
$.get('ajax.php', {url: btn_url}, function(data){
alert('done');
});
return false;
});
</script>
Since you talk about "buttons" and "urls" I think you mean <a>-tags styled as buttons, because <button> does not have something like a href-attribute. <a>-elements should not be abused as buttons - that's what <button> is for, actually. You can apply some information to the id or class-attribute though, e.g.
<button class="button" id="page">do some ajax</button>
Then you could gather the 'url' with
var btn_url = $(this).attr('id')+'.html';
So have a look at jQuery.get (or jQuery.post, if you like) and try to use XHTML in the way it was meant to ;)
<a href="url"></a>? with click listeners.