Simply, I have an <a> tag having values(ID) which will be posted to the same page in clicking,
I wanted to load data into the table based on the ID provided by the post method. On the other hand I am having a clock which is rested again and again when fired a post method.
I simply wanted to do the same via jQuery.
In short I wanted to Implement ajax using jQuery
Also I am using database MySQL, with PHP scripting
Any sort help will be appreciated.
<a class="D" href="?ID=<?php echo $rows[0]; ?>" onclick="">Question<?php echo $QNo; ?></a>
I wanted the same above and get ID for searching relevant data against the ID.
I might be wrong here, but you basically want to query a PHP page based on an ID and display relevant content in a div?
To make an AJAX call, setup a PHP page that will query your database and in turn return HTML data which you can then display in a DOM element.
A very simple example of this would be:
HTML
Load table 1
Load table 2
<div id="contentToPopulate"></div>
jQuery:
$('a.linkToLoadTable').click(function(){
var pageId = $(this).data('tableId')
$.ajax({
url: 'loadTable.php?id='+pageId
}).done(function(data) {
$('#contentToPopulate').html(data)
});
})
Related
My problem is that i have 2 dropdowns that get its content from my DB, a simple SELECT * with the category and then select a item from that category.
First dropdown : "dropdown_type" is the category.
Second dropdown : "dropdown_abo" is the item.
At the second dropdown, i am using a JQuery pluging that makes it possible to search inside the dropdown, to get the item faster then scrolling (theres gonna be a lot of items in it). You can see the plugin here
When you select a item from the second dropdown, a div(abo_info) below shall show all the info of the selected item.
My problem is that I'm stuck, and don't know how to proceed. How can i make it so, when i select a category, and then an item i get the content from that item shown in the div below?
I'm using PHP, JQuery and Mysql_*(to DB connect, know about PDO but im not that good at it).
Can i please get some help here, or some examples on how it can be done?
I have made a JSfiddle so you can see the complete code
You seem to be headed the correct way and doing a good job of it.
Please proceed further by using the following steps as a guideline,
Using jQuery.ajax() or jQuery.post() you can basically send a request to a PHP file.
In the PHP file you can connect to your DB using either PDO or normal mySQL connectors and return your required data back to the AJAX call.
The returned data can be rendered and displayed as required at the HTML sections.
Please use these following references that can give you a better idea code wise:
Beginner’s Guide to Ajax Development with PHP
jQuery Ajax POST example with PHP
as #WisdmLabs mentioned, you are on the right track...
The steps to continue shouls be:
Add a JS event once both dropboxes were selected (using onchange() or a submit button)
The event will fire an AJAX request for a PHP file with the POST
data of the item you want to get the data for.
On the PHP file you will run your SQL query and send back the information needed- preferable as in json.
On the JS AJAX function you will get the Json object and inserted neede info into the page DOM
JS Code
$(".dropboxClass").change(function(){ // you can use a button instead or any other event type
// here you can first check that bothdropboxes were selected
// now get the values of the dropboxes
drop1 = $("#dropbox1").val();
drop2 = $("#dropbox2").val();
// run the AJAX request for the PHP file
var request = $.ajax({
url: 'test2.php',
dataType: "json" ,
method: "POST",
data: { d1: drop1, d2:drop2 }
});
request.done(function(itemData){
// here you will get the Json object , get the data you need and insert into the DOM
console.log('Status:' + itemData['status']);
console.log('Name:' + itemData['name']);
alert('success');
});
request.fail(function(){
// AJAX call failed - do something.....
});
});
PHP Script
// connect to your DB and get the data you need into an array
$DB_data = array(
"status"=>"code",
"name"=>"item Name",
"desc"=>"Item Description"
);
echo json_encode($DB_data);
I'm trying to make 2 lists where one lists is updated depending on what the user choses from the first list.
The first list is made up of "lists names"... every "list" that is made by a user contains a number of movies,...
So for example I would make a list: Top 5 fav movies and when I click on it in my first list on the second list it will show the lists of movies that are in that list.
I know I also need to use Ajax to make this happen but I'm stuck. I'm able to create the first list from my database but I don't know how to go any further?
<ul class="MyLists">
<?php
$MyList = new Lists();
$res = $MyList->GetMyLists();
foreach ($res as $r) {
echo "<li><a href='mylists.php?id=".$currentID."&listname".$r['list_name']."'>". $r['list_name'] . "</a></li>";
}
?>
</ul>
<ul class="MyLists">
<?php
<li>Here are items of the selected list</li>
?>
</ul>
I put the name of the list that the user chose in the "href" section as you can tell so that I might be able to get this with a $_GET method. But I been trying and I haven't gotten this to work.
Also any reference to usefull AJAX tips are more then welcome.
Thanks in advance and for your time.
This is my approach when I do something like this.
First when generating the links in php I give each link element a data attribute, like:
<li><a data="<?php echo $id; ?>">List Title</a></li>
The $id can be anything that identifies the list and it's elements. Something that you can use on the php side of things to extract the data that you need. Now in your javascript with jQuery you can do a simple ajax call like so:
$(document).ready(function(){
$('a').click(function(){
var id = $(this).attr("data");
$.ajax({
url: 'getlistitems.php',
type: 'GET',
data: {id:id},
success: function(data){
//I'll talk about what goes in here in a bit
}
});
});
});
Let be break down what is going on. So basically when you are clicking on a link element the jQuery is extracting what you saved in the data attribute of the specific link that was clicked (with $(this)) to pass to you PHP file in the ajax call. The 'url' parameter of the AJAX call is the php file that is going to extract the data from your database, or however it is saved. The 'type' parameter is the HTTP method you are using. The data parameter here is a json object that will get put into the $_GET global server side.
Now in your php file you will simple extract your data using the supplied id, referencing like $_GET['id']. I don't know how your data is saved so I cannot get very specific here but you could easily structure a MySQL query here to get the items prevalent to list that was clicked. Now you just have to get this data back to your client side browser. Thankfully this is very easy using php's built in json_encode() function. Simply save all of your list items to an array and supply that array to json_encode() and echo it out like so:
$listitems = array();
//add all relevant items to $listitems
echo json_encode($listitems);
Now here is where that success: function(data){} parameter in the ajax call above comes into play. That json_encoded($listitems) parameter will be the data parameter to the success callback. It is even turned into a usable array for you. So now all you have to do loop over the data array and append it to the second list using jQuery append and you will be all set.
I have many tags. I want click each tag, then post/get the tag's value to another page.
In another page, received the values and make a mysql query. Then return the resalt data to the first page(do not make an iframe).
I think jquery post and load may be can do that (but have no idea how to combine two functiton). Or maybe there have any other way. Thanks.
here is my code
products.php
model:hml03
model:hml04
model:hml05<!--post value from products.php-->
data.php
<div id="data">
<?php
$result = mysql_query("SELECT id,name,details,add_date,model FROM ctw_products WHERE (MATCH (name,details,model) AGAINST ('+$_GET['get']' IN BOOLEAN MODE) Order By add_date DESC LIMIT 20 "); // get value with a mysql query
while ($row = mysql_fetch_array($result))
{
echo '<div class="name">'.$row['name'].'</div>';
echo '<div class="model">'.$row['model'].'</div>';
echo '<div class="details">'.$row['details'].'</div>';// how to return this part of datas back to products.php
}
?>
</div>
...<!--many other tags -->
<div class="show_data"></div><!-- get the data back show in here without refresh the page.
First you need AJAX to be able to do this. The simplest way to achieve this is use a library like jQuery
You can either download the library and include it locally or link to it directly from the jQuery site. the following code should allow you fetch data from data.php without a page refresh
<!--include the jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.js"></script>
<script type="text/javascript">
function get_data(get){
$.get('data.php?get='+get, function(data) {
$('.show_data').html(data);
});
}
</script>
Next, modify your links to call get_data onclick like this:
model:hml03
Notice how we pass the id of the product to get_data, you need to do this for every link.
I would recommend you read up on Ajax and JQuery to really get the idea.
I am trying to pass an id value to a php script with jquery.
So, I was trying to create a link:
Superman
and when this link is clicked, I would like jquery to grab the id value and place it in the php script or php grabs the id? im not sure the best way.
I want the id value so it can be placed in a mysql query like this:
SELECT * FROM hero_db WHERE category="superman"
So, i get the id and place it in for the category as seen above.
I have trying many things, but am unfamiliar with jquery but trying to learn as much as I can.
Thank you for any help on this.
It sounds like you want to load HTML when the link is clicked. If so you need markup something like this:
Superman
<div id="superman_data">
</div>
with Javascript:
$("a.loaddata").click(function() {
$("#" + this.id + "_data").load('/loaddata.php', {id: this.id});
return false;
});
What this does is binds an event listener to all anchors with a class of "loaddata". When it's clicked on, the ID is passed to loaddata.php. That script should return HTML. It is loaded into the named div.
There are various jQuery Ajax methods. Which one you use depends on what you want to achieve.
$.post('http://PHP_SCRIPT_URL', {id: $('a.yourlik').attr('id')});
I have a list of names (1-15 rows) I display from an array. I want the administrator to select the correct name from the list by clicking on the hypertext called "link." The record id is in the array and I want that passed to the called script.
I found this javascript that works except that I want the linkur.php page to print (with its information messages). I know it doesn't print because of the void(0) but can not figure the correct method needed.
<a href="javascript:void(0);" onclick='$.get("linkur.php",{ rid: "<?php echo $k['id']; ?>", uid: "<?php echo $uid; ?>", } ,function(data){ $("#link<?php echo $k['id']; ?>").html(data); });'>Link</a>
Also, is it possible to do the hyperlink with pure HTML? The hyperlink is straight forward except for passing the array values.
Thanks for any ideas.
Carl
I'm a bit confused by your request. You don't mention needing an asynchronous request, yet that is what your code is doing using the jQuery library. If you don't need an asynchronous request, and want to see the end-page, you just build a regular link:
Link
This would be rendered on the page with solid values rather than variables:
Link
Once you clicked the link, you would pass rid=123 and uid=281 to the end-script, seeing its output on the screen.
Properly Adding some Asynch'ness
If you need to load this data asynchronously, there is only a small addition to the code. Keep the original link that we just referenced above, but add a class to it:
Link
Now with jQuery we can incercept these requests and load up their HTML elsewhere:
$(function(){
// Intercept the click event of our links
$(".loadme").click(function(e){
// Prevent them from leaving the page
e.preventDefault();
// Fire off a request for their content
$.get($(this).attr("href"), function(data) {
// Load their content into a container on our page
$("#content-viewer").html(data);
}, "html");
});
});
Note that I referenced a #content-viewer. You would need to have this on your page someplace:
<div id="content-viewer">I will show the content .loadme links!</div>
Your approach is a bit hacky, to say the least. Now you need to have the javascript stuff on every link, whereas the correct way to do it would be to bind the functions separately. You could do something like this instead:
Link
Which would output to the browser as:
Link
And in a separate Javascript file:
$('a.some_links').click(function() {
$("#link"+$(this).attr('rel')).load($(this).attr('href'));
return false;
});
If I understood your code correctly, this will do the exactly same thing – loading the content from linkur.php with passed variables to #link+rid element.