SitePoint Sponsor

User Tag List

Results 1 to 25 of 25
  1. #1
    SitePoint Addict
    Join Date
    May 2007
    Location
    West Coast
    Posts
    339
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need Help on Jquery Accordion

    can't figure out why it doesn't work on a php site (still in development )


    Code:
    gowestwebdesign.com/demos/jQuery-accordion-w-validation/

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,118
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    PHP has nothing to do with it, as PHP doesn't make it to the browser. We can't help you unless we can see what you are working on.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Addict
    Join Date
    May 2007
    Location
    West Coast
    Posts
    339
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well, it is actually not working on any site. I used their demo and it doesn't work in FF or IE. I was thinking maybe google apis are down or they are being blocked

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,118
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    It works on the demo site that you linked to—for me at least. Does it work for you? If not, what browser are you using?
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Addict
    Join Date
    May 2007
    Location
    West Coast
    Posts
    339
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it works on the demo site but when you paste the code and scripts into a dreamweaver and upload it, it does not work. I hope I am not missing something so simple.

    Code:
    www.eastwestinsure.com/Form-Jquery.html

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,118
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Most of your JS links are bombing out, such as http://www.eastwestinsure.com/js/jquery.dimensions.js and http://www.eastwestinsure.com/js/jquery.accordion.js. You need to load those onto your server and make sure the links to them are correct. You are also linking to scripts on the demo site, and those links are being redirected to a dead end, presumably because the original site doesn't want you hotlinking, which is quite reasonable. So, download all the scripts you need, place them on your own server, and make sure the links to them are correct.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  7. #7
    SitePoint Addict
    Join Date
    May 2007
    Location
    West Coast
    Posts
    339
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think there is a problem with the way it is linking. in the header php I have this under the javascript files

    Code:
      <script type="text/javascript" src="<?=$a?>js/ui.accordion.js"></script>
    some files are working and others not. Even if I direct link though it does not work.

    Does it matter if I am 2 directories deep vs 1?

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,118
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by lukkas View Post
    Does it matter if I am 2 directories deep vs 1?
    No, not at all. Just make sure the link is actually right. Try hard coding the full URL.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  9. #9
    SitePoint Addict
    Join Date
    May 2007
    Location
    West Coast
    Posts
    339
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I did that too. I just don't get it. You think the js in the header.php is trying to initiate before body.php is loaded ?
    That's the only thing I can think of since hard coding or direct url linking did not work for my page. Although, it works when the full page (instead of header.php,nav.php, body.php) is loaded. How could that be solved?

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,118
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by lukkas View Post
    You think the js in the header.php is trying to initiate before body.php is loaded ?
    The page is constructed on the server from all the PHP bits, and the full page is sent to the browser, so I really don't think that's the issue. Are the scripts actually on your server, and if so, where are they?

    it works when the full page (instead of header.php,nav.php, body.php) is loaded.
    Could you elaborate on that? Is there a test page you can show us?

    You still have links pointing to the demo site, which just won't work. The links to all scripts should be to scripts on your server (except perhaps the jQuery library link, which could also point to the Google version or even the version on the jQuery site ... though often these days the recommendation is just to have it on your own server.)
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  11. #11
    SitePoint Addict
    Join Date
    May 2007
    Location
    West Coast
    Posts
    339
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am using another page instead of the one you posted which has all direct links. I don't want the url posted in the forum.
    unless it can be deleted more than 30 minutes later, then I'll send it to you. Are you a moderator and able to do that?

    I really do appreciate all the help. I hope to share some more solutions I have for others too.

    I looked at other forums for the same issue and some said it was a conflict with css but I've looked into that as well checking or commenting out the fieldset, label, input fields. Also, the form CSS loads last in the header.

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,118
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by lukkas View Post
    I am using another page instead of the one you posted which has all direct links.
    Could you just update the one you linked to, at least for testing purposes?

    I am a moderator, but will be signing off shortly (it's nearly 2am here). Anyhow, best not to post links you don't want public. An alternative is to set up a test page at a site like CodePen or jsFiddle.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  13. #13
    SitePoint Addict
    Join Date
    May 2007
    Location
    West Coast
    Posts
    339
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it works when the full page (instead of header.php,nav.php, body.php) is loaded.
    Could you elaborate on that? Is there a test page you can show us?
    the page that does work is Form-Jquery2.html but that page has a different css and body layout.

    If it helps, my page or javascript accordion doesn't collapse upon loading when it should. It shows the full form instead of 1 part. Maybe I should have said that earlier.

    sent you a PM with url

  14. #14
    SitePoint Addict
    Join Date
    May 2007
    Location
    West Coast
    Posts
    339
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The script does not activate or recognize a field being required. I moved the initiate js part to the body and no difference.
    wow, this is a toughie and lots of hours wasted trying to figure this out.

  15. #15
    SitePoint Addict
    Join Date
    May 2007
    Location
    West Coast
    Posts
    339
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ralph, I was toying around with it earlier and pt them direct links to js files. no matter where I put them, they don't activate the accordion. I can click on them in the live source code and the js files are there.

  16. #16
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,118
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    How did you get the code? Is there a package to download? The original seems to have files that you don't have on your site, like

    jquery.form.js
    jquery.validate.js

    You've just got to make sure you have all the scripts needed to make it run. If all else fails, just copy each script from the original example and make sure they are all on your server. You page is still giving a few file missing errors, such as jquery.min.map (which isn't a proper file anyway). Not sure if that is needed for this to work, but something to address anyhow. (Looks like that might be linked to from inside one of the scripts, as I can't see it in the HTML).
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  17. #17
    SitePoint Addict
    Join Date
    May 2007
    Location
    West Coast
    Posts
    339
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have had jquery.validate.js in the header section for a while.

    On submit/Form-Jquery3.html has the minimal files hosted on same server and works as it should.
    I have all the js files it has and some css files for the custom page. I cut it down to a basic css file just for the body and still no go for js loading or collapsing.

    The difference I noticed is:
    1 .) the doctype of Jquery3, and
    2.) that all the html code is all on
    one page vs. my semi wordpress php page that has separate loading header, top, nav, body, footer php files.

    doctype change made no difference when I swapped it into the other page.
    I changed all div names and form names to match it too. It has to be the loading sequence.

  18. #18
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,118
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    When things are going badly like this, I tend to go back to the original and see if I can construct that from its pieces first. Then, step by step, I modify the code to suit my purpose, checking that it still works at every step. It's time consuming, but saves all this pain of wondering where to start to find the problem.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  19. #19
    SitePoint Addict
    Join Date
    May 2007
    Location
    West Coast
    Posts
    339
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes I did that as well. I think this is beyond my skills as my php files are in include files. So this is a jquery being included in a php file which after searching, tons of other folks had problems too. You can load I as straight html and it works same code broken into include files will not work. My fault and2 days for not knowing how to explain.


    AussieJohn mentions it here: sitepoint.com/forums/showthread.php?843425-Help-with-jQuery-not-being-recognized-on-PHP-page
    That overflow site mentions:

    Code:
     window.onload=initialize;
    
    that will execute on the browser triggering that event - as you load in via jquery that event has long passed. Simply change that line to:
    
    initialize();
    but I don't have this in my accordion file. So, it is a js edit, just where is the question.

  20. #20
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,118
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    I'm sure that PHP is not the issue here. You just want the page to load with everything in the right place. Remember that the links in the include files should be geared to the page they will end up on, rather than to the location of the include file. When the content of the include file is placed on the accordion page, the links need to point from that page to the resources. That might be the issue.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  21. #21
    SitePoint Addict
    Join Date
    May 2007
    Location
    West Coast
    Posts
    339
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have tested them multiple times by clicking on the links from view source. As of now, there are no more broken links. They are the same path as the straight html page but with a different result. The css jquery menu works while the accordion form does not work on this php includes site (header, footer, body, nav, )
    On a different site the same code, but all straight html works with the jquery menu and accordion menu together.
    This new site with PHP include files with jquery in 2 areas is only working on the menu.

  22. #22
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,118
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Perhaps pm me both links so I can compare.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  23. #23
    SitePoint Addict
    Join Date
    May 2007
    Location
    West Coast
    Posts
    339
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I found the issue. We are kind of trained to look at problems at the top of the code. It was 2 javascripts at the bottom, totally unnecessary
    Code:
    <!-- Included JS Files (Compressed) -->
      <script src="../../javascripts/foundation.min.js"></script>
      
      <!-- Initialize JS Plugins -->
      <script src="../../javascripts/app.js"></script>

    This solved another responsive menu too

  24. #24
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,118
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Glad you sorted it. It feels good to find the problem yourself.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  25. #25
    SitePoint Addict
    Join Date
    May 2007
    Location
    West Coast
    Posts
    339
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you bet. That's exactly what I thought. 2 out of 3 is not bad for me. With all the scripts I have to remember to look at the footer area.


Bookmarks

Posting Permissions

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