Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    Regular Coder
    Join Date
    Sep 2006
    Posts
    216
    Thanks
    9
    Thanked 0 Times in 0 Posts

    php to call javascript function

    Im not sure if this is considered a javascript or a php issue. I am trying to call a javascript function from php so that I can change a picture on the page without an event of any kind.

    I have managed to call a javascript function from within php code which I have managed using the code below:

    PHP Code:
    echo "<SCRIPT LANGUAGE='javascript'>";
    echo 
    "over_button(6);";
    echo 
    "</SCRIPT>"
    the function being called is as follows:

    Code:
    <SCRIPT LANGUAGE="JavaScript">
      //array of image status
    var teamArray = [["shirt0", 0, "Goalkeeper"],["shirt1", 0, "Defender"],["shirt2", 0, "Defender"],["shirt3", 0, 
    
    "Defender"],["shirt4", 0, "Defender"],["shirt5", 0, "Midfielder"],["shirt6", 0, "Midfielder"],["shirt7", 0, 
    
    "Midfielder"],["shirt8", 0, "Midfielder"],["shirt9", 0, "Striker"],["shirt11", 0, "Striker"]];
    
    //populate the variables with the new images
    if (document.images) {
    
    var unselect = new Image();
      unselect.src = "shirt.jpg";
    
    var unchoose = new Image();
      unchoose.src = "unsel.jpg";
    
    var select = new Image();
      select.src = "shirt1.jpg";
    
    var choose = new Image();
      choose.src = "tri.jpg";
    
    }
    
    function over_button(number) {
    if (document.images) {
    var trichoice = "tri" + num2;
    
    alert(number);
    alert(trichoice);
    
    if (teamArray[number][1] == 0)
    {
    teamArray[number][1] = 1;
             document[trichoice].src = choose.src;
    }
    }
    }
    </SCRIPT>
    However the picture doesnt become choose.src. I know the function works because it operate fine from an onclick event and the parameter passed is fine becasue the javascript popup appears. What is wrong with this?

    thank

  • #2
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,778
    Thanks
    19
    Thanked 155 Times in 146 Posts
    A couple of things:

    1) when is num2 ever declared
    2) what does this output: alert(trichoice);
    3) this syntax looks wrong: document[trichoice].src = choose.src; If you have an HTML element with an id that is the value of 'trichoice', you need to be referencing the element like this instead:

    Code:
    document.getElementById(trichoice).src = choose.src;

    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #3
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    I didn't get to look at the details, but the problem is not necessarily in the code you posted. It could also be the placement of the code in your document.

    You are callling over_button(6) while the page is loading. The <img> element holding choose.src then has to appear earlier in your document.

    Probably you should call the function after the page has loaded:

    PHP Code:
    echo "<script type=\"text/javascript\">\n";
    echo 
    "window.onload = function () {\n";
    echo 
    "over_button(6);\n";
    echo 
    "}\n";
    echo 
    "</script>\n"
    On the other hand, I'm not an expert so I might be wrong.

    Maybe you'll get better response if you could post a link to the actual page.

  • #4
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,778
    Thanks
    19
    Thanked 155 Times in 146 Posts
    You are callling over_button(6) while the page is loading. The <img> element holding choose.src then has to appear earlier in your document.

    Probably you should call the function after the page has loaded:
    Even if he calls the function onload, it seems like an exercise in futility...what is the point of swapping image sources immediately after the page loads (unless you are replacing a "loading" gif animation with the real picture, for example)...

    If you want to display tri.jpg before or immediately after the page has loaded, then just include tri.jpg in your HTML markup, and forget about dynamically changing the image, since no one is likely to see or notice the original image (in your HTML) anyway...
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #5
    Regular Coder
    Join Date
    Sep 2006
    Posts
    216
    Thanks
    9
    Thanked 0 Times in 0 Posts
    ok

    1) alert(trichoice) returns the name of the <img> element being referenced. I changed the code to read:

    Code:
    document.getElementById(trichoice).src = choose.src;
    as suggested but it didnt work.

    2) I dont think its an error in loading as the php code I posted appears after the javascript and the php calls the javascript as a function.

    3) I cannot just load choice.src initially because I only need this to be shown when something a hyperlink is clicked not every time the page is refreshed.

    Is it something to do with a variable being passed from php into a javascript function. The code I have works fine if the javascript isnt echoed from php.

  • #6
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by alex57 View Post
    The code I have works fine if the javascript isnt echoed from php.
    If it is working when you write it directly, then it should also be working when echoed from php. Recall that after the page is delivered from the server php plays no role any longer.

    What you should do is to look at the source when you let php echo the code, and compare it with the source that you know is working. There has got to be a difference.

    Still I agree with chump2877, I really don't understand the idea. If you could give us a link, maybe it would be easier for us to understand the logic.

  • #7
    Regular Coder
    Join Date
    Sep 2006
    Posts
    216
    Thanks
    9
    Thanked 0 Times in 0 Posts
    http://alexwilliams57.powweb.com/FF/...&type=AccScore

    That is the link to the page. It is for a fantasy football system. This is the team selection page. When I click on a player on the right hand side I want the player name to appear in a box - this i can do. However, the image of the cross needs to change from the cross to another image when the player is entered - this i cant do.

    The page has an iframe on the left and another on the right and variables on are passed when a player name is clicked. Quite a simple idea, but i cannot change that image when the player is entered.

  • #8
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    What confuses me is where you want to store the information about which players have been selected. I guess there basically are two methods. 1) store it at the client (JavaScript/DOM), or 2) store it on the server (session variables/database)

    Right now you have a kind of mixture. When you click on the links to the right to select players, you are calling the server. This makes it look like you want to store data on the server. On the other hand you have javascript that loads all possible images that could be selected. This suggests that you want a stand alone application not communicating with the server (at least until all players have been selected).

    Everytime you click on a link you get a new page loaded. So all the information stored in the DOM is cleared (the images selected with onclick events)

    You can make your page look and function the same way from the users viewpoint with JavaScript exclusively or with php exclusively. The question is what the data (which players have been selected) is going to be used for?

    To find what is the best approach, we must know what the goal is for the final page to be like. In other words: the user selects players and then what?

  • #9
    Regular Coder
    Join Date
    Sep 2006
    Posts
    216
    Thanks
    9
    Thanked 0 Times in 0 Posts
    When the user has selected all players they are then entered into the database. This is done using PHP and so I agree I would like to solely use this language. However, I don't think PHP can display images and it doesn't support onlcik events because these only call javascript functions. Javascript is better than PHP for manipulating images.

    I realise a hybrid solution is not favourable but I cannot see another way for the images to swap, i didn't think PHP would allow you to do this.

  • #10
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    If you have a database setup, then I would enitrely drop the javascript (at least to begin with).

    Replace the onclick's with real links (or perhaps a form) that send some GET or POST data to php.

    Hard to tell what the image swapping would look like without seeing how you retrieve the player names and how your tables in your database are set up.

    Maybe something like this
    PHP Code:
    if(there is a player for this field) {
      
    $src 'shirt.jpg';
    }
    else {
      
    $src 'unsel.jpg';  // no-shirt image
    }
    echo 
    '<img src=".'$src.'">'
    This is probably not even close to how the code should look, but you get the idea?

  • #11
    Regular Coder
    Join Date
    Sep 2006
    Posts
    216
    Thanks
    9
    Thanked 0 Times in 0 Posts
    I cannot replace the onclicks with real links because they need to be pictures. I would like to use code like you suggested for the pictures but i cannot find any tutorials about pictures and PHP. Can you suggest any links to good tutorials?

    thanks

  • #12
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by alex57 View Post
    I cannot replace the onclicks with real links because they need to be pictures.
    Images can be links:
    Code:
    <a href="link.php"><img src="image.jpg" /></a>
    vinyl-junkie has compiled a list of tutorials in the sticky section. I haven't looked at all of them, but I think there is a lot of valuable information there.
    Last edited by koyama; 02-15-2007 at 01:48 PM.

  • #13
    Regular Coder
    Join Date
    Sep 2006
    Posts
    216
    Thanks
    9
    Thanked 0 Times in 0 Posts
    I have it now so that whenever a player is selected, this code fires. Im not too sure of the syntax though.

    PHP Code:
    echo "<SCRIPT LANGUAGE='javascript'>";
    echo 
    "var = id;";
    echo 
    "id = 'tri6'";
    echo 
    "document.getElementById(id).src = tri.jpg;";
    echo 
    "</SCRIPT>"
    the elements being referenced is:

    Code:
    <img id="tri6" src="unsel.jpg" alt="deselect" onclick="over_button(6)">
    the idea could be that when the player is selected the element with the id 'tri6' becomes the image tri.jpg. This doesnt work however although in theory I think it should. Is my code incorrect?

    thanks


  •  

    Posting Permissions

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