SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,381
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    [Code Check] What's wrong with this Javascript in the PHP?

    I'm trying to create a Javascript button inside PHP that will write innerHTML to a span to overwrite the CSS to change a div from display:none to display:block. (Got that?) So far I just can't get the syntax right. At this point in the code, the div (in red) is correctly hidden but the button does not react at all; it doesn't call the function in a way that writes the span contents. The variables are being filled in via a MySQL table. I included commented-out examples above each code so you know what content I'm expecting.

    Code:
    while ($arrayArtSizeTOC = mysql_fetch_array($sqlArtSizeTOC)) { 
    
        $qtyTOC = htmlspecialchars($arrayArtSizeTOC['SUM(article_size)']);
    		if ($qtyTOC == '') {$qtyTOC = '0';}
    
    /* Initially hide the detail reports with CSS, the id built of the $i and $ed_i variables to be unique so the span, button, and function all relate */
    // <style type="text/css">#displaym1ta { display:none; }</style>
    		echo "<style type='text/css'>#displaym" . $i . $ed_i . " { display:none; }</style>";
    
    // A unique-ID span in which to write innerHTML to overwrite the above CSS and show the div.
    // <span id="showm1ta"></span>
    		echo "<span id='showm" . $i . $ed_i . "'></span>"; 
    
    // The function to call that overwrites the CSS and shows the hidden div
    //<script>function showm1ta() {
    		echo "<script>function showm" . $i . $ed_i . "() \{";
    /* document.getElementById('showm1ta').innerHTML = '<style type="text/css">#displaym1ta{display:block;}</style>'}</script>
    */
    		echo "document.getElementById('showm" . $i . $ed_i . "').innerHTML = '<style type=\"text/css\">#displaym" . $i . $ed_i . "\{display:block;\}</style>'\}</script>";
    
    // The button to call the function
    		echo "&nbsp;<input type='button' class='button50' value='Breakdown' onclick='showm" . $i . $ed_i . "()'><br>";
    // create div to house all the detail reports
    		echo"<div id='displaym" . $i . $ed_i . "' style='clear:left; float:left; padding: 0 4em; background-color:#eee;'>";
    		echo"<p>TOC article: <strong>". $qtyTOC . "</strong> pages.</p>";
    	}
    Steve Husting

  2. #2
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    England
    Posts
    698
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    My first step to debug this would be to open the browser console (Firebug if you have it and are using Firefox) and check for errors. It will usually highlight whether you have an error in the syntax or whether it's just not firing. Also consider putting in an alert("1") message (or similar) at stages around the code so that alert boxes pop up when the JS gets to certain points.

  3. #3
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,381
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    So far the only change I'm pretty sure of is to remove the back-slashes from { and }.

    There are no errors in the console.

    I did do an echo of the values inserted in the variables, and they show fine. I think I need to put the backslashes, single- and double-quotes in the right places.
    Steve Husting

  4. #4
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    England
    Posts
    698
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    To be honest, I would rewrite portions purely because I'm a bit of a stickler for using particular quotes in particular places. For example, I would always use echo 'string'; rather than echo "string"; and I would also always put <script type="text/javascript"> rather than <script type='text/javascript'>. But that's me.

    To be honest, there's far too little for me to go on, personally. But if you put an alert() in the section that you expect to fire when you click the button, and it still doesn't fire, then your button looks to be the one at fault. Maybe it's not correctly bound to the event that you are trying to fire?

    Try using http://jsfiddle.net/ with the raw JS that is generated (plus the HTML) and let's take a look at it in a way that we can fiddle with and see if we can get it working

  5. #5
    SitePoint Evangelist
    Join Date
    Oct 2005
    Location
    Michigan, USA
    Posts
    434
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    There are a few things to fix here. First, as Steve said, don't escape the curly braces.

    Second, you're getting the wrong element.
    document.getElementById('showm" . $i . $ed_i . "')
    <div id='displaym" . $i . $ed_i . "'

    Finally, you don't want to set innerHTML. That is the contents of the div (your paragraph). Instead you'd want something like
    document.getElementById().style.display = "block";

    Let us know how that works out.

    [ edit: Ha! I see that Steve I referenced was you! ]
    - Robert

  6. #6
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,381
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Here is the present version of the code, incorporating your suggestions, QMonkey:

    Code:
    /* Initially hide the reports in the Div with CSS, the id is built of the $i, $ed_i, and $url variables to be unique so that the div, button and function all relate. */
    		echo "<style type='text/css'>#displaym" . $i . $ed_i . $url ." { display:none; }</style>";
    
    // The function to call that overwrites the CSS and shows the hidden div
    		echo "<script>function showk" . $i . $ed_i . $url . "() {";
    		echo "document.getElementById(#displaym" . $i . $ed_i . $url . ").style.display = 'block';</script>";
    
    // The button to call the function
    		echo "&nbsp;<input type='button' class='button50' value='Article Breakdown' onclick='showk" . $i . $ed_i . $url . "()'><br>";
    // create div to house all the output for this record
    		echo"<div id='displaym" . $i . $ed_i . $url . "' style='clear:left; float:left; padding: 0 4em; background-color:#eee;'>";
    		echo"<p><strong>". $qtyTOC . "</strong> pages, 'TOC' section</p>";
    	}
    I am getting errors in the Google console now, and the button does not show the div contents. Errors:
    Uncaught SyntaxError: Unexpected token ILLEGAL
    Uncaught ReferenceError: [value] is not defined <== [value] = output value of " . $i . $ed_i . $url . "

    Unfortunately, the line referenced is all the lines in the loop; they are all on one line in Google.

    I don't know whether the '#' belongs here or not, but the errors appear with and without it:
    getElementById(#displaym"
    Steve Husting

  7. #7
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,381
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Here is the present version of the code, incorporating your suggestions, QMonkey:

    Code:
    /* Initially hide the reports in the Div with CSS, the id built of the $i, $ed_i, and $url variables to be unique so that the div, button and function all relate */
    		echo "<style type='text/css'>#displaym" . $i . $ed_i . $url ." { display:none; }</style>";
    
    // The function to call that overwrites the CSS and shows the hidden div
    		echo "<script>function showk" . $i . $ed_i . $url . "() {";
    		echo "document.getElementById(#displaym" . $i . $ed_i . $url . ").style.display = 'block';</script>";
    
    // The button to call the function
    		echo "&nbsp;<input type='button' class='button50' value='Article Breakdown' onclick='showk" . $i . $ed_i . $url . "()'><br>";
    // create div to house all the output for this record
    		echo"<div id='displaym" . $i . $ed_i . $url . "' style='clear:left; float:left; padding: 0 4em; background-color:#eee;'>";
    		echo"<p><strong>". $qtyTOC . "</strong> pages, 'TOC' section</p>";
    	}
    I get two errors in the Google console:

    Uncaught SyntaxError: Unexpected end of input
    Uncaught ReferenceError: [value] is not defined <== [value] = output of " . $i . $ed_i . $url . "

    Unfortunately, the line referenced contains the entire loop on one line.

    Also, I don't know whether I need the '#' in getElementById(#displaym" I get the Google errors either way.
    Steve Husting

  8. #8
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    England
    Posts
    698
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    If the console is reporting this in the error:
    " . $i . $ed_i . $url . "
    That means that the code hasn't been parsed properly. Most likely down to incorrect quotes somewhere along the line. Also, put some \n characters in (in PHP you'll need to use "\n" and not '\n') to force some linebreaks for readability if you need it

  9. #9
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,381
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    The actual value is being output in the log. I hid them with the [value] tag for confidentiality reasons on this site.
    Steve Husting

  10. #10
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    England
    Posts
    698
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Oh, I see, so that line is not the line in the log! In which case it sounds like you're missing quotes.

    This line:
    Code JavaScript:
    document.getElementById(#displaym" . $i . $ed_i . $url . ").style.display = 'block';

    Translates to:
    Code JavaScript:
    document.getElementById(#displaymvalue).style.display = 'block';
    Correct?

    It should be:
    Code JavaScript:
    document.getElementById('displaymvalue').style.display = 'block';
    I believe!

    So I'd change the line in PHP to be:
    Code JavaScript:
    document.getElementById('displaym" . $i . $ed_i . $url . "').style.display = 'block';
    I think will sort that one for you. You're correct, you shouldn't need the # as you've already specified that you're looking for an ID

  11. #11
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,381
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    That did it, plus a missing end curly brace. Now it all works!

    Thank you very much for sharing your expertise!

  12. #12
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    England
    Posts
    698
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Expertise? JS not really my thing, but glad to have pointed you in the right direction and happy you sorted it


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
  •