jQuery n00b

[orydian]

Hi guys,

Totally new to jQuery and I'm stuck. Trying to get mulitple things to happen when <a class='ppfm'></a> is clicked to show the user an animated loading .gif while PayPal takes an age to load the next page. This makes sense logically, but for some reason doesn't work...

jQuery:

Code:

$(function() {
$('a.ppfm').click(function() {
$('this').css('background','#FF0000');
$('this').sibling('.buy').hide();
$('this').sibling('.wait').show();
$('this').parent('.form').submit(); return false;
});
});

css:

Code:

.wait {display:none;}

simplified page:

Code:

<form class='form' action="paypal" method="post">
<input><input><input>
<a href="#" class='ppfm'><span class='buy'>Buy</span>
<span class='wait'><img src='/images/wait.gif' width='30' height='30' alt=""></span>
</a>
</form>

<form class='form' action="paypal" method="post">
<input><input><input>
<a href="#" class='ppfm'><span class='buy'>Buy</span>
<span class='wait'><img src='/images/wait.gif' width='30' height='30' alt=""></span>
</a>
</form>

<form class='form' action="paypal" method="post">
<input><input><input>
<a href="#" class='ppfm'><span class='buy'>Buy</span>
<span class='wait'><img src='/images/wait.gif' width='30' height='30' alt=""></span>
</a>
</form>

Now, this works...

$(function() {
$('a.ppfm').click(function() {
$('this').css('background','#FF0000');
$('.buy').hide();
$('.wait').show();
$('.form').submit(); return false;
});
});

...but it obviously hides/shows all spans and submits all forms. I've tried a million different ways of doing it including .find() .next() and nothing seems to work apart from duplicating everything with multiple versions of the jQuery/css/page code for ppfm1, ppfm2, buy1, buy2, etc. That's fine, but it's a lot of extra code for something that should be easy to simplify based on 'this'.

Any help very much appreciated.

ory.




 

[Charisma Bypass]

hide the wait on document ready

[orydian]

hide the wait on document ready

The styling is more complex for wait than I have shown, so it's already in the css.

Would hiding it in the jQuery have any other advantages?

ory.

[samhs]

Try the code below, noting the lack of ' around this. First up, .buy and .wait are both children of the event object (<a>) so sibling wouldn't have returned them (and see the note below too), and secondly you don't really need to use the class to find the form - just look for the form!

Code:

$(function() {
  $('a.ppfm').click(function() {
       $(this).css('background','#FF0000');
       $(this).find('.buy').hide();
       $(this).find('.wait').show();
       $(this).parent('form').submit(); return false;
   });
});

A side note: Without checking the API I can't remember if sibling will only find tags common to the one you already have selected - ie. not <span>s if you have an <a> selected, but assume not unless the API ref says so - may save you some headache in the future.

hth

[orydian]

Sam, you're an absolute star. 

Works a treat. Thanks very much indeed.

Re: your notes, I may have child and sibling mixed up then. I think the form class was left over from when I did them separately (form1, form2, etc).

Thanks again.

ory.

[orydian]

I've now simplified it to this, which replaces the whole <a> with a <span> and uses .not(); to keep it to one instance.

jQuery:

Code:

$(function() {
  $('a.ppfm').click(function() {
       $('a.ppfm').not(this).show();
       $('.wait').not(this).hide();
       $(this).hide();
       $(this).next('.wait').show();
       $(this).parent('form').submit(); return false;
   });
});

HTML:

Code:

<form class='form' action="paypal" method="post">
<input><input><input>
<a href="#" class='ppfm'>Buy</a>
<span class='wait'><img src='/images/wait.gif' width='30' height='30' alt=""></span>
</form>

ory.