-1

I'm working on a website that uses a textbox and does something with what the user submits.

On my index page where I use no PHP (all HTML), Javascript tabs that I would like to use work perfectly fine. However, after the user types something in and submits, the next loaded page has PHP. The PHP page calls a function to print the HTML, but even if this page is the exact same as the previous index page, the tabs don't work at all.

...
<article id="navtabs" class="grid col-full">
    <h2>Tabs</h2>
    <div class="">
        <ul class="tabs clearfix">
            <li><a href="#tab1">First</a></li>
            <li><a href="#tab2">Second</a></li>
            <li><a href="#tab3">Third</a></li>
        </ul>
        <div class="tab_container">
            <article id="tab1" class="tab_content">
                <p>Lorem ipsum dolor sit amet</p>
            </article>

            <article id="tab2" class="tab_content">
                <h6>Heading</h6>
                <p>Lorem ipsum dolor sit amet</p>
            </article>

            <article id="tab3" class="tab_content">
                <h6>Heading</h6>
                <p>Lorem ipsum dolor sit amet</p>
            </article>
         </div>
      </div>
</article>
...

The Javascript code in my scripts.js file looks like this:

$(document).ready(function() {
...

//TABS
var tabContents = $(".tab_content").hide(), 
    tabs = $("ul.tabs li");

tabs.first().addClass("active").show();
tabContents.first().show();

tabs.click(function() {
    var $this = $(this), 
        activeTab = $this.find('a').attr('href');

    if(!$this.hasClass('active')){
        $this.addClass('active').siblings().removeClass('active');
        tabContents.hide().filter(activeTab).fadeIn();
    }
    return false;
}); 
...
});

Any ideas why this would work when using HTML only but not when put inside a PHP function?

Edit for clarification: In the version that works it's simply plain HTML. In the version that doesn't I'm doing an echo of the HTML. This is the version that fails.

SuperXero
  • 43
  • 9

2 Answers2

1

If the HTML is right and the javascript is right and is loaded then it makes no difference whether the HTML came from a static file or was generated with PHP. The browser still sees it as just HTML (the PHP is server-side so the browser never sees that) and it is in the browser that the javascript runs.

Which leaves us with the following possibilities:

  1. THe HTML generated via PHP is different in some way (I know you say it isn't, but double check)
  2. The javascript file is not being loaded the second time

THis is assuming you are loading a whole page generated with PHP - if you start adding bits ysing ajax requests then the situation changes as you tab code is set up in document ready and only sees the page as it is then.

Adam
  • 6,539
  • 3
  • 39
  • 65
  • Was thinking the same when I read this. It would be good to understand the process in which the script is being echoed. – TriniBoy Apr 19 '14 at 11:12
  • It's the exact same HTML. I tried taking the original page and simply encasing it in PHP and using an echo to print it, and it failed to work then. I assume the javascript file is being loaded, as I changed nothing inside the HTML. And yes, the whole page is with PHP (just a simple echo). – SuperXero Apr 19 '14 at 11:14
  • Do you mean you have copied the entire HTML into a string which you then echo with PHP? Could be problems around quotation marks then. You need to check that the *generated* HTML matches (i.e. load the page, do `view source` in the browser (often on the right-click menu) and compare those HTML sources for the two pages. – Adam Apr 19 '14 at 11:31
0

Simple answer.

Any ideas why this would work when using HTML only but not when put inside a PHP function?

They both are very different. While Javascript is client side coding, PHP is server-side coding.

You should really understand the difference between them. Also the syntax differs.

Amit Joki
  • 58,320
  • 7
  • 77
  • 95