Ajax Update

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
srinathbtech
Forum Newbie
Posts: 6
Joined: Mon Nov 16, 2009 12:42 pm

Ajax Update

Post by srinathbtech »

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.
User avatar
iankent
Forum Contributor
Posts: 333
Joined: Mon Nov 16, 2009 4:23 pm
Location: Wales, United Kingdom

Re: Ajax Update

Post by iankent »

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 :)
srinathbtech
Forum Newbie
Posts: 6
Joined: Mon Nov 16, 2009 12:42 pm

Re: Ajax Update

Post by srinathbtech »

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..
Attachments
Screenshot.png
Screenshot.png (170.27 KiB) Viewed 112 times
User avatar
iankent
Forum Contributor
Posts: 333
Joined: Mon Nov 16, 2009 4:23 pm
Location: Wales, United Kingdom

Re: Ajax Update

Post by iankent »

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:

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;
    }
}
 
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
Post Reply