Integrating JQuery into php file

Question

I am trying to tweak a website so users will be able to swipe through the photo galleries on their mobile devices. I tried doing this by using JQuery. The website was not written by me, so I can't really explain the choices the previous programmer made regarding their code.

Currently, users can change pictures by clicking (tapping) on the current picture. The code for this is found in a php file called home.php. This is it:

<?php 
...
$main_content .= "\n        <div class='main_image'>
        <a href='$next_slideURL' style='display:block'>
            <img src='$root/$item_path/$slideFile' alt='$slideCaption from $projectTitle\n [xxxxxxxxxxxxx]' style='max-width:832px; max-height:500px' title='$projectTitle: $slideCaption. \nclick for next slide ($next_slideCaption). '></a>
    </div>\n";
...
?>

To add swiping capabilities, I added the following code right after the one above:

echo "<script type='text/javascript'>";
    echo "(function(){
        $(\"div.main_image\").on(\"swipeleft\", swipeleftHandler);
        $(\"div.main_image\").on(\"swiperight\", swiperightHandler);

        function swipeleftHandler(event){
            $.mobile.changePage(\"$next_slideURL\", {transition: \"slideleft\", changeHash: false});
        }

        function swiperightHandler(event){
            $.mobile.changePage(\"$previous_slideURL\", {transition: \"slideright\", changeHash: false});
        }
    });";
    echo "</script>";

While I'm not sure exactly why this isn't working, I have a few possible reasons (which might all be true unfortunately).

1) Since the div class='main_image' is done as a variable declaration, the JQuery line "div.main_image" doesn't have a reference (i.e. it doesn't know what main_image is). I'm not sure why the div is created as a variable declaration ($main_content keeps being added on throughout the php file, and in the end it's echoed along with a bunch of other variables).

2) I need to include the following code for JQuery but I have it in the wrong place:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

right now I have it in the header section of index.html file. Is this wrong?

3) I've never used JQuery before, so any number of things might be wrong about the short script I wrote.

Sorry about the long post, I'm not sure how to explain this in a simpler way.

I'd appreciate it if anyone could help me either with this approach, or propose a different one.

Cheers!

Do not write echo '<script>... just close php tag ?> and write down like in html file: <script>.... — Sergey
– Sergey, Commented Aug 20, 2013 at 10:17
I wonder why you print the html content by echo. You should embed your php script in html content rather than put every thing in php. — user612827
– user612827, Commented Aug 20, 2013 at 10:18
As I mentioned, I didn't write the website, so I had no say in the coding decisions. The author of the website wrote it as one php file and I'm trying to just tweak it as opposed to rewrite it. — user2699231
– user2699231, Commented Aug 20, 2013 at 11:03

Rohan Kumar · Accepted Answer · 2013-08-20 10:44:27Z

2

Use $ while writting ready function

<?php
    echo "$(function(){
    // ---^--- use $ here
        ....
    ....";
    echo "</script>";
?>

If $ conflicts then your can use jQuery like,

Full Code:

<?php
    echo "<script type='text/javascript'>";
    echo "jQuery(function(){
        jQuery('div.main_image').on('swipeleft', swipeleftHandler);
        jQuery('div.main_image').on('swiperight', swiperightHandler);
        function swipeleftHandler(event){
            $.mobile.changePage('".$next_slideURL."', {transition: 'slideleft', changeHash: false});
        }

        function swiperightHandler(event){
            $.mobile.changePage('".$previous_slideURL."', {transition: 'slideright', changeHash: false});
        }
    });";
    echo "</script>";
?>

edited Aug 20, 2013 at 10:44

answered Aug 20, 2013 at 10:16

Rohan Kumar

40.7k11 gold badges81 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user2699231 Over a year ago

If I insert the $ the website doesn't load anymore.

Rohan Kumar Over a year ago

@user2699231 test the above I've changed my answer.

user2699231 Over a year ago

The website loads, but the script doesn't work (i.e. the photos don't change with a swipe).

Gerben Jacobs · Accepted Answer · 2013-08-20 10:20:57Z

0

Looks like you need to put your javascript in the $main_content variable, like the other code. But to be honest you should seperate your javascript from the html/php.

answered Aug 20, 2013 at 10:20

Gerben Jacobs

4,6134 gold badges36 silver badges56 bronze badges

Comments

Tushar Gupta - curioustushar · Accepted Answer · 2013-08-20 10:45:20Z

0

Best way is to break out of php tags

and change this (function () to $(function ()

<?php
 //php code
?>
<script type='text/javascript'>
$(function () {
    $("div.main_image").on("swipeleft", swipeleftHandler);
    $("div.main_image").on("swiperight", swiperightHandler);

    function swipeleftHandler(event) {
        $.mobile.changePage("$next_slideURL", {
            transition: "slideleft",
            changeHash: false
        });
    }

    function swiperightHandler(event) {
        $.mobile.changePage("$previous_slideURL", {
            transition: "slideright",
            changeHash: false
        });
    }
}); 
</script>;
<?php
//php code
?>

edited Aug 20, 2013 at 10:45

answered Aug 20, 2013 at 10:21

Tushar Gupta - curioustushar

57.2k24 gold badges106 silver badges110 bronze badges

1 Comment

user2699231 Over a year ago

I can't take it out of the php tags, since I'm implementing my code in an if/elseif statement.

Collectives™ on Stack Overflow

Integrating JQuery into php file

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related