www.webdeveloper.com
Results 1 to 8 of 8

Thread: Some kind of PHP link?

  1. #1
    Join Date
    Dec 2010
    Posts
    10

    Some kind of PHP link?

    How do I load a PHP page with Javascript?
    I don't know how to really phrase the question but for my website I have a Javascript script that turns a category into a drop down of the products we have in our database.

    example:

    HID Kits
    HID Flashlights
    ETC
    ETC

    Then when clicked:
    HID KITS
    -1
    -2
    -3
    HID Flashlights
    ETC
    ETC

    However, I am trying to get it to have the drop down BUT link to a product page that has the products of the category on it. I have the pages built and I have had the categories go to the product pages but I can't figure out how to have BOTH the drop down and the link to the product page....

    Here is the code that are the links for the categories...

    echo "<div style='border:1px solid white;background-color:".$PastelColorPick."'><a href='javascript: show_abc(".'"'.$t.'"'.")' class='c' style='color:black;'> <p style='width:200px;height:25px;font-family:arial;text-align:left;font-weight:bold;color:black;font-size:14px;'> $t <span style='font-family:arial;font-weight:none;font-size:12px;'> ($count) </span> </p></a>";

    And here is what I was playing around with (a mix of both the link code and the drop down code):

    echo "<div style='border:1px solid white;background-color:".$PastelColorPick."'>
    <a href='javascript: show_abc(".'"'.$t.'"'.")' class='c' style='color:black;'>
    <p style='width:200px;height:25px;font-family:arial;text-align:left;font-weight:bold;color:black;font-size:14px;'> <a href='http://www.hidcountry.com/Products/$pl' class='c1' style='display:none;' name='$cat' id='$id_code'> $t <span style='font-family:arial;font-weight:none;font-size:12px;'> ($count) </span> </p></a>";

    Any help would be greatly appreciated!
    Thanks

  2. #2
    Join Date
    Mar 2010
    Posts
    701
    You will probably have to use AJax (part of Javascript)

  3. #3
    Join Date
    Dec 2010
    Location
    Knoxville, Tn
    Posts
    22
    You can load a page (whether it's PHP or HTML doesn't matter) like this:

    Code:
    window.location = "http://www.yourdomain.com/yourpage";
    Does the drop down menu need to be displayed onmouseover or onclick? Your code appears to be revealing the drop down onclick, but that might be awkward from a usability standpoint (one click opens the menu, the next click redirects the window).

  4. #4
    Join Date
    Dec 2010
    Posts
    10
    The drop down needs to happen when it is clicked so onclick. I need it to be like this:

    1 click opens the menu AND opens the "Products Page" on the right in the content area.

    So when someone clicks "HID Flashlights" it drops down with the types we offer and the links to their pages but also opens the product page "HID Flashlights" to the right in the content area which displays all of the flashlights that are in the drop down.

    Thanks for the help guys! This code is jumbled from the last web developer and I'm here to try to fix it but I'm not too familiar with Ajax...

  5. #5
    Join Date
    Dec 2010
    Location
    Knoxville, Tn
    Posts
    22
    If you aren't familiar with AJAX, I recommend using a library like jQuery to do the heavy lifting. You can load jQuery remotely from Google by adding this to your document:

    Code:
    <script src="http://www.google.com/jsapi"></script>
    <script>
    	google.load("jquery", "1.4.4");
    
    </script>
    Then loading a page into your content area on the right is pretty easy. Let's say the container for your content on the right is a div with an ID of "mainContent"; you could load a page called "flashlights.php" like this:

    Code:
    $("#mainContent").load("flashlights.php");
    
    If you want something to happen once that page is loaded, you could add a callback function, like this:
    
    $("#mainContent").load("flashlights.php", function(){
    	alert('Page had been loaded!');
    });

  6. #6
    Join Date
    Dec 2010
    Posts
    10
    I like this JQuery stuff but I'm not sure how to take implement it into my script. I'm not sure where I would put

    $("#mainContent").load("http://www.hidcountry.com/Products/$pl");

    If I want the links to load a page from the categories in my database...

    I just want my link to load a page that is linked to the name of the category and have a drop down function at the same time...

  7. #7
    Join Date
    Dec 2010
    Location
    Knoxville, Tn
    Posts
    22
    You need a mechanism that returns only the content that you want to load inside of div#mainContent. Although I recommend leaving pages like http://www.hidcountry.com/Products/t...flashlight.php intact for SEO purposes, you need a way to get the product content without the rest of the page template (so you might set up something like http://www.hidcountry.com/load-produ...flashlight.php). Visiting this URL should load only the contents of div#mainContent in the browser.

    Then clicking on any one of the sub links (like 4500 LM HID Flashlight (50w)) will call a function that contains the jQuery code.

    Code:
    Change:
    <a href='http://www.hidcountry.com/Products/50w_hid_flashlight.php' class='c1' style='display:none;' name='HID Flashlights' id='50w-hidfl'>
    
    To:
    <a onclick='loadContent('50w_hid_flashlight.php');' class='c1' style='display:none;' name='HID Flashlights' id='50w-hidfl'>
    
    Then your function could be:
    
    function loadContent(target){
    	$("#mainContent").load("http://www.hidcountry.com/load-products/"+target);
    }
    NOTE: Removing the "href" part of the "a" tag will prevent the browser from turning the cursor into a pointer on hover, so I recommend adding "cursorointer;" to the CSS for those links. Also, JavaScript does not like IDs with dashes or those that start with numbers (id='50w-hidfl', for example). This might work if you're only using the ID as a CSS hook, but it might break if you try to reference it with JavaScript.

  8. #8
    Join Date
    Dec 2010
    Posts
    10
    Ok I kinda follow what you're saying. However, since the last time I posted on here I created a JQuery dropdown menu navigation bar. Go check it out (www.hidcountry.com). Ok now I need to make it so when someone clicks the HID Kits it drops down with other products but also loads the HID Kits product page in the mainContent area. I have the page set up so the index page has the content in a mainContent div and the sidebar nav is in it's own file so how do I do this?

    I think you're on the right track with your last post about it, I just need to double check. Do I just create a page that is essentially blank around the edges but not the mainContent area?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles