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 4 of 4
  1. #1
    Regular Coder
    Join Date
    Jul 2010
    Location
    Sheffield
    Posts
    822
    Thanks
    93
    Thanked 18 Times in 18 Posts

    Using PHP variable in jQuery

    I wasnt sure if this was more a jQuery or PHP question but ill post it here.

    I have a php variable ($page) whats generated by the URL e.g. ?page=home. I need to either use the php variable in jquery to load the page or my other idea was take the php out and have jquery read the link but i wasnt sure if that was possible. Any help/info on this would be great, even if its just something i can google to look up.

    My code so far
    PHP Code:
    <?php
    if (isset($_GET['page'])) {
        
    $page $_GET['page'].".php";
    }else {
        
    $page "home.php";
    }
    ?>




    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Tom Hart Design - Cheap and affordable website design, contruction and managment</title>
    <link type="text/css" href="css/main.css" rel="stylesheet" />
    <script type="text/javascript" src="js/jquery-1.5.2.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $("#body").hide();
        $('#body').load('pages/home.php');
        $("#body").fadeIn();

    $("#nav a").click(function(event) {
      event.preventDefault();
      $("#body").fadeOut();
        $('#body').load('pages/.php');
        $("#body").fadeIn();
    });
    });


    </script>
    PS: I will hide the div in the CSS i just put that the hide() for the time being.

    EDIT: What if i included into my links rel="home", rel="page2" etc, could i use that to tell jQuery which page to load?

    EDIT 2:It would also work if i could get jQuery to fadeout a div before the link redirects, is that possible?
    Last edited by tomharto; 05-03-2011 at 10:48 AM.

  • #2
    Regular Coder
    Join Date
    Apr 2011
    Posts
    286
    Thanks
    2
    Thanked 39 Times in 39 Posts
    You can just output the php variable to javascript by echoing it:
    Code:
    <?php echo $page; ?>
    Like:
    Code:
    $('#body').load('pages/<?php echo $page; ?>');
    As for fading in and out, by the looks of it you are loading a new page each time, so you would have to fadeout when a link is clicked before changing the url of the browser, then when the page loads, you have it hidden, and fade in onload.

  • #3
    Regular Coder
    Join Date
    Jul 2010
    Location
    Sheffield
    Posts
    822
    Thanks
    93
    Thanked 18 Times in 18 Posts
    Quote Originally Posted by Wojjie View Post
    As for fading in and out, by the looks of it you are loading a new page each time, so you would have to fadeout when a link is clicked before changing the url of the browser, then when the page loads, you have it hidden, and fade in onload.
    Thanks, that works . Yeah that's what i'm hoping to achieve, just gotta figure how to code it :P.

    Also my page changes before the div is faded out, i tried adding a delay but still no luck, any idea what i could do to get it to fade out fully first?

  • #4
    Regular Coder
    Join Date
    Apr 2011
    Posts
    286
    Thanks
    2
    Thanked 39 Times in 39 Posts
    You need to attach to each link, taking the URL from the link and doing a fade out first, and at the end of the fade out, you redirect the user.

    Code:
    $('a').click(function(){
       var href = this.href;
       $("#body").fadeOut( 400, function(){
          location.href = href;
       });
       return false;
    });

  • Users who have thanked Wojjie for this post:

    tomharto (05-03-2011)


  •  

    Posting Permissions

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