Payment Modules Radio Buttons - Only After Refresh

[m3442a]

Hello,

 

i try to showing the payment methods with radio buttons and hidden div´s.

I have this little Script:

 

 

<script type="text/javascript">

{literal}

$(document).ready(function()

{

$("#payment").change(function()

{

if ($("#bankwire").attr("checked")) {

$("#payment_bankwire").show();

} else {

$("#payment_bankwire").hide();

}

if ($("#paypal").attr("checked")) {

$("#payment_paypal").show();

} else {

$("#payment_paypal").hide();

}

if ($("#nachnahme").attr("checked")) {

$("#payment_nachnahme").show();

} else {

$("#payment_nachnahme").hide();

}

});

});

{/literal}

</script>

 

this working only if i refresh the page on the 1-page chekout. If i make a checkout login and accept the TOS, the payment methods will to show and the buttons are active, but the function not working. I want a little div with the buttons for the module that i want ( i pay with paypal, that showing a button > next step) I refresh the page (F5) and the script working well. But why not on first time? What is my failure? Here also the script from order-payment.tpl:

 

 

<form id="payment" >

{$HOOK_PAYMENT}

<br />

<div id="payment_bankwire">

<input type="button" id="submit" class="exclusive_large" value="weiter zur Schritt 2" onClick="location.href='{$base_dir_ssl}modules/bankwire/payment.php'" title="{l s='Pay by bank wire' mod='bankwire'}" /></div>

<div id="payment_paypal"><input type="button" class="exclusive_large" value="weiter zur Schritt 2" onclick="location.href='{$base_dir_ssl}modules/paypal/payment/submit.php'" title="{l s='Pay by Paypal' mod='paypal'}" /></div>

<div id="payment_nachnahme"><input type="button" class="exclusive_large" value="Auswählen" onClick="location.href='{$base_dir_ssl}modules/cashondelivery/validation.php'" title="{l s='Pay with cash on delivery (COD)' mod='cashondelivery'}" /></div>

</form>

</div>

 

 

And one of the modules (bankwire.tpl):

 

 

<div class="payment_module">

 

<table id="paymentTable" class="std">

<tr>

<td width="20%" valign="middle" align="center">

<input type="radio" name="payment_radio" id="bankwire" /></td>

<td class="payment_option_logo" width="30%" ><img src="{$this_path}bankwire.png" alt="{l s='Pay by bank wire' mod='bankwire'}" width="150" height="40" /></td>

<td width="50%" valign="middle">

<div class="payment_option_title"><h2>Vorkasse / Überweisung</h2></div>

<div class="payment_option_delay">{l s='Pay by bank wire (order process will be longer)' mod='bankwire'}</div></td>

</tr>

</table>

</div>

 

 

The script integrated for the test in the header.tpl

 

Thanks for help

[m3442a]

Hello,

 

now try with this:

 

 

<script type="text/javascript">

{literal}

$(document).ready(function()

{

$("input[name$=payment]").click(function(){

var radio_value = $(this).val();

 

if(radio_value=='bankwire') {

 

$("#payment_nachnahme").hide('slow');

$("#payment_paypal").hide('slow');

$("#payment_bankwire").show('fast');

 

}

else if(radio_value=='paypal') {

 

$("#payment_nachnahme").hide('fast');

$("#payment_bankwire").hide('fast');

$("#payment_paypal").show('fast');

}

 

else if(radio_value=='nachnahme') {

 

$("#payment_bankwire").hide('fast');

$("#payment_paypal").hide('fast');

$("#payment_nachnahme").show('fast');

}

});

 

$("#payment_bankwire").hide();

$("#payment_paypal").hide();

$("#payment_nachnahme").hide();

});

{/literal}

</script>

 

thsi works again after refresh the page but not on first time. How can i indclude this script in the Page for working?

[l3msip]

do you have a live link we can look at? hard to diagnose otherwise

[m3442a]

http://www.******

 

Put something into cart, and go to checkout, Now you can do new regsitration and accept the TOS and then open the payment modules as radio buttons. If you click someone, nothing happens, but if you refresh the page, the script working.

Edited March 12, 2013 by m3442a (see edit history)

[m3442a]

I try copy the script into order-opc.js. is the same thing, here 2 screenshots , first not working and second working after F5.

 

I try copy the script into order-opc.js. is the same thing, here 2 screenshots , first not working and second working after F5.

[m3442a]

No one have a idea?

[l3msip]

Tried a few products, all showed out of stock or no visable checkout button.

Link me to an instock item i can actually add to cart and i will have a look

[m3442a]

Here is one of them:

 

http://www.******

 

Thank you very much

Edited March 12, 2013 by m3442a (see edit history)

[l3msip]

Maybe im being daft, but where is add to cart?

 

Im in the UK btw

 

[m3442a]

Sorry my fault you cant order from Uk. i change that, now try again please

[m3442a]

you can use *****

Edited March 12, 2013 by m3442a (see edit history)

[l3msip]

Thanks,but i still can not see any option to add a product to cart??

[m3442a]

hmm, also activated the taxes for uk. now working?

[l3msip]

Well it still doesnt show, but i had a look with chrome dev tools and removed the display:none attribute, and added a product to my cart.

 

Looking at the order page, i suspect the problem is that some of the elements are being called by ajax and so have not loaded when the event handlers are set.

 

Please try using the jquery .on method rather than the .click method, eg:

 

instead of:

 

$("input[name$=payment]").click(function(){

 

use:

 

$("input[name$=payment]").on('click',function() {

Edited March 11, 2013 by l3msip (see edit history)

[m3442a]

Hi thanks for your support. With your code the script not work anymore.

 

By the way, where is the best place to include the script? I try this in order-opc.js at the end and try before {HOOK PAYMENT} in order-payment.tpl. both works.

[l3msip]

Sorry, the .on method is for jQuery versions 1.7 and above. I see you are using 1.4.4, which is pretty old.

 

You can use the .live method instead:

 

$("input[name$=payment]").live('click',function() {

 

Or better, upgrade to a new version of jQuery (currently 1.9)

[m3442a]

Thousands thanks, now its working.....superb. I looking for that the last few days

[l3msip]

Glad to help

[ftlrs]

Hey guys

Having a similar problem.

 

Payment methods are only showing after I refresh.

 

Really not good with this stuff. Could I give some ftp info to one of you?

 

Thanks!