Hi,
I have two divs called Leftpane and Rightpane.
In Leftpane we show images of selected category.
In Rightpane we have list of categories like Eg; Holiday(50), Tourism(120), ...
when clicked on category in Rightpane, this will update Leftpane showing images and also implemted drag and drop.
Now my requirement is when drag an image in Holiday(50) and drop in Tourism(120). The count should update automatically with the help of Ajax without refreshing the page and show Holiday(49) and Tourism(121).
I am using jQuery1.3.x .
Please help me , I am a newbie to Php.
Ajax Update
Moderator: General Moderators
- iankent
- Forum Contributor
- Posts: 333
- Joined: Mon Nov 16, 2009 4:23 pm
- Location: Wales, United Kingdom
Re: Ajax Update
Do you only want to track this info on client-side? If so, I'd wrap the number values in <span> tags with unique ID's, e.g. <span id="tourism_counter">120</span>, then use javascript to update the value, e.g.
var elem = document.getElementById('tourism_counter');
var count = parseInt(elem.innerText) + 1;
elem.innerText = count;
(obviously you'll need to update two values and add to one and subtract from the other)
If you want to send the new info to a PHP script its a different matter entirely, but the code above is enough to track and update the values on the client-side only.
p.s., that doesn't make any use of jquery at all and I'm not sure that it'd need to, but afaik the principle is the same once you've found the element you're looking for
edit: apologies if I've got the wrong end of the stick
var elem = document.getElementById('tourism_counter');
var count = parseInt(elem.innerText) + 1;
elem.innerText = count;
(obviously you'll need to update two values and add to one and subtract from the other)
If you want to send the new info to a PHP script its a different matter entirely, but the code above is enough to track and update the values on the client-side only.
p.s., that doesn't make any use of jquery at all and I'm not sure that it'd need to, but afaik the principle is the same once you've found the element you're looking for
edit: apologies if I've got the wrong end of the stick
-
srinathbtech
- Forum Newbie
- Posts: 6
- Joined: Mon Nov 16, 2009 12:42 pm
Re: Ajax Update
hi, thanks for the reply,
Actually i was retrieving count from SQL .
Can we use php ajax functions to update only categories when drop an image
Sorry if i am unable to explain correctly.Please refer attached screenshot.png for reference
thanks
sri..
Actually i was retrieving count from SQL .
Can we use php ajax functions to update only categories when drop an image
Sorry if i am unable to explain correctly.Please refer attached screenshot.png for reference
thanks
sri..
- Attachments
-
- Screenshot.png (170.27 KiB) Viewed 113 times
- iankent
- Forum Contributor
- Posts: 333
- Joined: Mon Nov 16, 2009 4:23 pm
- Location: Wales, United Kingdom
Re: Ajax Update
Well my example code above will deal with updating the UI to display the correct category counts, but at the same time you'll need to send off a request to a PHP script with the necessary info to update the database.
I'm presuming that you have a table listing all the images and a table listing all the categories, in which case each category and image will have its own unique ID? If so, you'll need to pass the image ID and its destination category ID back to PHP to update the tables.
Without using any libraries this can be done using basic javascript like this:
When your image is 'dropped' in its new category, call the function updateImageCategory(x,y) where x is the image ID and y is the new category ID. Javascript then passes the values to the script /path/to/ajax.php which would handle the database update. In this (simple) example, ajax.php would need to echo "OK" to confirm success, or an error message if it fails. Assuming the result comes back as "OK", the update was successful and now you're ok to finish updating the UI. If not, the error message output by ajax.php will be displayed to the user (at which point you'd probably need to undo any UI changes as the update failed)
hope that makes sense
let me know if you need any more info (or if I'm way off the mark :p)
hth
I'm presuming that you have a table listing all the images and a table listing all the categories, in which case each category and image will have its own unique ID? If so, you'll need to pass the image ID and its destination category ID back to PHP to update the tables.
Without using any libraries this can be done using basic javascript like this:
Code: Select all
function updateImageCategory(image_id, new_cat_id) {
var http = getAjaxObject();
http.onreadystatechange = function()
{
if(http.readyState==4)
{
var result = http.responseText;
if(result == "OK") {
/* db update was successful, update UI with other code */
} else {
alert(result);
}
}
}
http.open("GET","/url/to/ajax.php?mode=update&image="+image_id+"&newcat="+new_cat_id,true);
http.send(null);
}
/* Gets an XMLHttpRequest object */
function getAjaxObject()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
return xmlhttp;
}
else if (window.ActiveXObject)
{
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
return xmlhttp;
}
else
{
return false;
}
}
hope that makes sense
hth