views:

202

answers:

1

Hi,

I've got two Jquery functions that I can get to work fine alone on the page, but not when I have them both in at the same time. I'm unable to see what I might be doing wrong as I've got similar code working well on other pages.

First function:

$(document).ready(function()
{
   $("#add-questions").click(function() {$("#extra-questions").fadeIn(800);});
});

Second function:

$(document).ready(function()
{
   if($PHPTRIGGER == true)
   {
      $("#pop-text").html("Message sent.");
      $("#pop").show();
      setTimeout(function() {$("#pop").animate( {height: "hide", opacity: "hide"}, "medium");}, 4000);
   }
});

The "$PHPTRIGGER" is a php variable I'm passing to Jquery (StackOverflow doesn't allow me to put in real php so I've marked it like that).

I've tried putting both functions inside the same "document-ready", tried swapping order, but they just don't work together.

Any thoughts?

Thanks.

UPDATE:

It's the first function that fails to respond to the click event. It only works after the second function has been performed (which is linked to a form submission). Still wondering why this is so.

FINAL UPDATE:

Resolved the problem with Firebug. Had to initialise the PHPTRIGGER passed via PHP with a blank value or the first function fails. It's kind of funny actually because that function doesn't take in any PHP. Basically, a (strict) syntax error in the second function caused the first function to fail, while the second function itself was working fine.

+1  A: 

They work for me when I put them into a test page:

  • #pop hides after 4 seconds.
  • #pop-text reads "Message sent."
  • When I click #add-questions, the #extra-questions div fades in (assuming an initial display:none)

If you wanted something other than that, you probably just went bleary-eyed looking at your own code (maybe you wanted #pop in both places instead of #pop in one and #pop-text in another?)

Other things you might try: run in Chrome and check the JS console for errors (in case your current debugger isn't showing you an error and execution is merely halting). Check your HTML to make sure the referenced ids do exist. Check your CSS to ensure your initial values are correct. Make sure your $PHPTRIGGER variable is getting passed correctly.

Let us know if you have more information or find anything out.

Plynx
Plynx, thanks for taking the time to test is out.
Tom
No problem--firebug is awesome and it has a JQuery plugin too--but I still keep Chrome around as a secondary debugger because sometimes one catches something the other doesn't. In my experience, when something just seems "not to go" in Javascript, it's because of a simple bug somewhere that most of the time the debugger will tell you right away.
Plynx