PHP creating dynamic jquery head script

#1
scottybrannan

Posted 18 July 2011 - 10:00 AM

Newbie

Members
4 posts

Hi All,

I am new to PHP/MySQL and i am making a maintenance screen that i can use to easily create web pages. My maintenance screen lists all the pages with thier titles and some other attributes in a tabular format. onclick of a table row i want the jquery to take the user to another location passing in the page reference. This is not a problem if i hard code the script in the <head> of the page. When i want to make it dynamic using a query even though the code in the source looks identical it doesnt seem to like it, i am hoping it is something simple. See below, Example 1 works fine Example 2 it doesn't like:

EXAMPLE 1:

echo "<script type='text/javascript'src='js/jquery.js'></script>

          <script>$(document).ready(function(){

          $('tr1').click(function(){

              window.location = 'www.google.co.uk';

              })

          });

         </script>";

EXAMPLE 2:

echo "<script type='text/javascript'src='js/jquery.js'></script>

          <script>$(document).ready(function(){";


/*== for each page output the attributes ==*/

while ($record = mysqli_fetch_array($query, MYSQLI_ASSOC)) { 

       echo "$('#tr$record['pageRef']').click(function(){

                   window.location = 'www.google.co.uk';

               })";

    echo    "});

         </script>";

I am using Google Chrome. Let me know if you need any more information.

Thanks

Scott

#2
BlaineSch

Posted 19 July 2011 - 10:12 AM

Writes binary right handed and hex left handed

Members
2,448 posts

Without seeing the output I'll assume the variable isn't being escaped.

echo "$('#tr{$record['pageRef']}').click(function(){";

also note that this is an AWFUL way to do anything with JavaScript.

If you want each tr to link to a different URL you don't want to make dynamic JS for each one. Avoid it.
Example:

<!DOCTYPE HTML>
<html>
    <head>
        <title>JS Test</title>
        <style type="text/css">
            tr.over td {
                background-color: #c3c3c3;
            }
        </style>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('tr').bind({
                    click: function() {
                        window.location = $(this).attr('rel');
                    },
                    mouseover: function() {
                        $(this).addClass('over');
                    },
                    mouseout: function() {
                        $(this).removeClass('over');
                    }
                });
            });
        </script>
    </head>
    <body>
        <table>
            <tbody>
                <tr rel="http://www.codecall.net">
                    <td>Hello</td>
                    <td>World</td>
                </tr>
                <tr rel="http://www.BlaineSch.com">
                    <td>Hello</td>
                    <td>World</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

Google - I'm Feeling Lucky | Youtube Classes! | BlaineSch's Project Blog

Posted Image

#3
scottybrannan

Posted 19 July 2011 - 10:36 AM

Newbie

Members
4 posts

Thanks BlaineSch,

The first example you have given still doesn't work for me. When i click the tr nothing happens. However when I hardcode all of the script without any dynamic content in one echo string it works fine. The reason i want to build the script dynamically is because i want the URL's that are called to be dynamic so it calls a URL passing in a URL parameter of a reference number for example.

Why is it bad practice to build dynamic javascript? Sorry i am new to this.

Thanks again!

Scott

#4
scottybrannan

Posted 19 July 2011 - 01:20 PM

Newbie

Members
4 posts

Hi BlaineSch,

I thought i had replied to this before but i dont think it worked. Thanks for your reply but the first code sample still didnt fix the problem i was having, not sure why. It still returns nothing when i click, as i said before this problem is only present when i split the script into different echo'd strings rather than one big hard coded script. The reason i am using dynamic JS is because the URLs i want to use are unique to the contents of each table row, so when clicked will take the user to a page passing in a URL parameter which will then show records related to that reference number. Is there a better way to do this?

Thanks Again!

Scott

#5
BlaineSch

Posted 19 July 2011 - 01:30 PM

Writes binary right handed and hex left handed

Members
2,448 posts

My second example shows how to use one function that links tr's dynamically.

Post up your code and output and I can help you debug it.

Google - I'm Feeling Lucky | Youtube Classes! | BlaineSch's Project Blog

Posted Image

#6
scottybrannan

Posted 21 July 2011 - 11:50 AM

Newbie

Members
4 posts

Thanks BlaineSch,

I figured out the problem, at runtime the dynamic jQuery script was all being built on one line. Once i formatted this using \n it worked correctly. I have now moved away from coding the page like this and instead used the example you provided where the head script is static and the links in the rel tags are dynamic. Thanks so much for your help!

Regards,

Scott

#7
BlaineSch

Posted 22 July 2011 - 11:19 AM

Writes binary right handed and hex left handed

Members
2,448 posts

I'm glad it worked out.

It's not bad to write all your js out on one line, as long as you can read it on the server which is usually the case. If this is what you are doing you can use a tool to format it so you can glance at the output faster.

Online javascript beautifier