Page 1 of 2 12 LastLast
Results 1 to 10 of 16

Thread: AJAX Button, how can I pass a var? Help appreciated.

  1. #1
    Join Date
    Jul 2008
    Posts
    65
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default AJAX Button, how can I pass a var? Help appreciated.

    Ok I am new to javascript, and AJAX and am literally playing around to get things to work for specific things.

    My setup is as follows.
    I have a list of items which I have grabbed from a mysql database, e.g apple, pear, banana, orange, lemon. Each is a button, with the image of the respective item.

    I have set up the javascript so that onclicking the button a php file called deleteitem.php is called which contains the code to delete the item.

    deleteitem.php literally has a mysql query DELETE where ID='1' it works perfectly , and deletes the item with ID 1 on clicking one of the buttons.

    What I want is to pass a variable to the deleteitem.php script containing the ID of the item I want to delete. The intention is that each button deletes its respective item, whereas at the moment all the buttons delete the same item (and the ID has to be set in deleteitem.php).

    Is this doable? and how?

    Many Thanks
    T

  2. #2
    Join Date
    Jul 2008
    Posts
    102
    Thanks
    36
    Thanked 6 Times in 6 Posts

    Default

    be aware that IE doesnt pass values if your using image buttons.
    Programmers are tools used to convert Caffeine to code

  3. #3
    Join Date
    Jul 2008
    Posts
    65
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default

    Well Im just not sure how to do it in general... Ill simply use images (<img tags ) but how can I tell the PHP script WHICH image ive clicked on?

  4. #4
    Join Date
    Jul 2008
    Posts
    102
    Thanks
    36
    Thanked 6 Times in 6 Posts

    Default

    You need to use AJAX to pass the id. I would recommend just using the $_GET method, its easier to setup. AJAX is called via a js function you place on the button either by an event listener or by the old method of onclick. Ive used onclick and it works fine but its much easier to script than the event listener method.

    In your php script your just need to test for the query string coming through and then perform the action based on the id number you've sent.

    So your ajax might point to the script deleteitem.php with the id from one of the click button. eg. deleteitem.php?id=12

    inside the php script deleteitem.php you would have;

    if(isset($_GET['id'])) calldelete($_GET['id']);

    function calldelete($id2delete)
    {
    ...your code...
    }
    Programmers are tools used to convert Caffeine to code

  5. #5
    Join Date
    Jul 2008
    Posts
    65
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by Dal View Post
    You need to use AJAX to pass the id. I would recommend just using the $_GET method, its easier to setup. AJAX is called via a js function you place on the button either by an event listener or by the old method of onclick. Ive used onclick and it works fine but its much easier to script than the event listener method.

    In your php script your just need to test for the query string coming through and then perform the action based on the id number you've sent.

    So your ajax might point to the script deleteitem.php with the id from one of the click button. eg. deleteitem.php?id=12

    inside the php script deleteitem.php you would have;

    if(isset($_GET['id'])) calldelete($_GET['id']);

    function calldelete($id2delete)
    {
    ...your code...
    }

    I completely understand the latter part of your explanation, I.E how to use the id when you have it in the php script as .php?id=12

    Ive been using this tutorial to guide me:
    http://www.tizag.com/ajaxTutorial/aj...ttprequest.php

    Each button is <input type='button' onclick='ajaxFunction()'>
    That runs the ajax which in turn calls deleteitem.php
    I still dont understand however how I pass a specific ID to the php file

    Thanks

  6. #6
    Join Date
    Jul 2008
    Posts
    102
    Thanks
    36
    Thanked 6 Times in 6 Posts

    Default

    thats because you havent got to that part yet in the tutorial;

    http://www.tizag.com/ajaxTutorial/aj...l-database.php

    at this point is where you can call ur script and apply the query string;

    var queryString = "?age=" + age + "&wpm=" + wpm + "&sex=" + sex;
    ajaxRequest.open("GET", "ajax-example.php" + queryString, true);
    Programmers are tools used to convert Caffeine to code

  7. #7
    Join Date
    Jul 2008
    Posts
    65
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by Dal View Post
    thats because you havent got to that part yet in the tutorial;

    http://www.tizag.com/ajaxTutorial/aj...l-database.php

    at this point is where you can call ur script and apply the query string;

    var queryString = "?age=" + age + "&wpm=" + wpm + "&sex=" + sex;
    ajaxRequest.open("GET", "ajax-example.php" + queryString, true);

    No, I have gotten that far, Ive read the whole thing.
    Its just that Im using a php while loop to output all the items, and each of the buttons are named as part of an array e.g item[0].

    In the example there is a set field called age, and you get the value of the field... in my case there are numerous fields, and you dont know which one is being clicked...

  8. #8
    Join Date
    Jul 2008
    Posts
    102
    Thanks
    36
    Thanked 6 Times in 6 Posts

    Default

    In that case, why dont you paste your code so I can see whats going on?

    Thanks
    Dal
    Programmers are tools used to convert Caffeine to code

  9. #9
    Join Date
    Jul 2008
    Posts
    65
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default

    Ok this is the main page which grabs the items from a database using the a PHP object previously defined ($battle).

    PHP Code:
    if($batt["playerstage$battle->userplayer"]=='TURN'){
    $battle->location='HAND';
    $yours=$battle->getallcards();
    echo
    "<div id='ajaxDiv'>";
    while(
    $yourhand=mysql_fetch_array($yours)){
    $name=$battle->getdetails($yourhand[cardid]);
    echo
    "<form name=hand><input type=hidden name=cid value=$yourhand[ID]><input type=button name='card' value='$yourhand[ID]' onclick='ajaxFunction();'></FORM>";
    }

    if (
    $battle->count>'7'){echo"<br>You can only have 7 cards in your hand at any one time.";}
    }
    echo
    "</div>";

    ?>
    <html>
    <body>

    <script language="javascript" type="text/javascript">
    <!-- 
    //Browser Support Code
    function ajaxFunction(){
        var ajaxRequest;  // The variable that makes Ajax possible!
        
        try{
            // Opera 8.0+, Firefox, Safari
            ajaxRequest = new XMLHttpRequest();
        } catch (e){
            // Internet Explorer Browsers
            try{
                ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try{
                    ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e){
                    // Something went wrong
                    alert("Your browser broke!");
                    return false;
                }
            }
        }
        // Create a function that will receive data sent from the server
        ajaxRequest.onreadystatechange = function(){
            if(ajaxRequest.readyState == 4){
                var ajaxDisplay = document.getElementById('ajaxDiv');
                ajaxDisplay.innerHTML = ajaxRequest.responseText;
            }
        }



        ajaxRequest.open("GET", "discardcard.php", true);
        ajaxRequest.send(null); 
    }

    //-->
    </script> 


    The deleteitem.php page looks like this

    PHP Code:
    <?php
    include"cards2.php";
    $b=rand(1,100);
    echo
    "Card Discarded $b";

    $battle=new battle;
    $battle->ucardid='1';
    $battle->location='DECK';
    $battle->movecard();
    $battle->location='HAND';
    $yours=$battle->getallcards();
    echo
    "<div id='ajaxDiv'>";
    while(
    $yourhand=mysql_fetch_array($yours)){
    $name=$battle->getdetails($yourhand[cardid]);
    echo
    "<form name=hand><input type=hidden name=cid value=$yourhand[ID]><input type=button name='card' value='$yourhand[ID]' onclick='ajaxFunction();'></FORM>";
    }

    if (
    $battle->count>'7'){echo"<br>You can only have 7 cards in your hand at any one time.";}
    echo
    "</div>";

    ?>
    <html>
    <body>
    This works in that onclicking a button it deletes the item from the database with id 1 per this line:
    PHP Code:
    $battle->ucardid='1'
    What I want however is to pass a variable so that onclicking a specific button, it deletes that specific item.

    Cheers

  10. #10
    Join Date
    Jul 2008
    Posts
    102
    Thanks
    36
    Thanked 6 Times in 6 Posts

    Default

    value='$yourhand[ID]' onclick='ajaxFunction({$yourhand[ID]});'>

    then

    function ajaxFunction(CardID){
    ...

    var QString = "?card"+CardID;
    ajaxRequest.open("GET", "discardcard.php"+QString, true);


    Then in your php


    collect the value by running a $_GET['card']; this will equal the id passed

    Pass this value along to the delete function which I havent looked for but Im sure you'll be on the right track after this.


    Best of luck
    Dal
    Programmers are tools used to convert Caffeine to code

  11. The Following User Says Thank You to Dal For This Useful Post:

    clowes (08-10-2008)

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •