11 replies to this topic

[pantufas_online]

Hello...
so, i've made the button to disapear when clicked, but the clickable area still's there...

does anybody have idea of how can i make that area to stop be clickable??

thanks

[npn2531]

If you have 2.3 installed you have the required JQuery and even the spinner.gif allready installed.

Add this to the stylesheet:

.hide_msg{
display: none;
}

Enclose the button with a div, and add another div near (above it , below, etc) like so:

<div id="order_submitted" class="hide_msg">
<p>This image will spin until the page refreshes</p>
<p class="align_center"><?php echo tep_image('ext/jquery/bxGallery/spinner.gif'); ?></p>
</div>
<div id="confirm">
<?php echo tep_draw_button(IMAGE_BUTTON_CONFIRM_ORDER, 'check', null, 'primary'); ?>
</div>

Add this javscript snippet to the page

<script type="text/javascript">
$(document).ready(function(){
$('#confirm').click(function(){
$('#confirm').hide();
$('#order_submitted').removeClass('hide_msg');
}) 
})
</script>

You can see a more detailed description and a demo here:

www dot css-oscommerce dot com/prevent-double-order-submissions-with-jquery/

Edited by npn2531, 12 August 2011, 20:28.

[pantufas_online]

Hi
Thanks sooo much

[pantufas_online]

Hi again...

i've just seen your post with attention now, and i have a problem...

my version is 2.2

thanks...

[Roaddoctor]

pantufas_online, on 13 August 2011, 01:16, said:

Hi again...

i've just seen your post with attention now, and i have a problem...

my version is 2.2

thanks...

use this

http://addons.oscommerce.com/info/5654/v,22

[npn2531]

If you don't wish to use the above contribution, you can install JQuery on 2.2. All you need to do is upload the JQuery file and reference it. You can also get that spinner file by going to
http://demo.oscommerce.com/ext/jquery/bxGallery/spinner.gif

You can get the JQuery file from the JQuery site or by downloading it from here:

http://demo.oscommerce.com/ext/jquery/ui/jquery-ui-1.8.6.min.js
(just cut and paste everything into a file called 'jquery-ui-1.8.6.min.js'

If you load the JQuery file into the includes folder your reference would be:
script type="text/javascript" src="includes/jquery-ui-1.8.6.min.js"></script>

[pantufas_online]

nothing works
let me try to explain what am i doing, maybe with this code above you will understand better my problem and nothing works

so i have this, i'm working in my header.php, where i tell that if i'm the account the logoff button appears, but if i'm in the create account page the button is not visible (so far so good ), but then area to click "logoff" still's there, what's missing in my code to make it desappear for completely when it's not suposed to...

was i clear...it's a bit complicated to my

<?php if (tep_session_is_registered('customer_id')) { 

 $acc_link = tep_href_link('account.php');
 $acc_title = HEADER_TITLE_MY_ACCOUNT;
 $acc_logoff = tep_href_link('logoff.php');
 $acc_title_logoff= HEADER_TITLE_LOGOFF;
} else { 
 $acc_link = tep_href_link('create_account.php');
 $acc_title = HEADER_TITLE_CREATE_ACCOUNT;
} 
?>                                                           
                    <td <?php echo $item_menu_04;?> nowrap="nowrap" onClick="document.location='<?php echo $acc_link;?>'"><a><?php echo $acc_title;?></a></td>
                    <td class="menu_separator"><?php echo tep_image(DIR_WS_IMAGES.'menu_separator.gif')?></td>                    
                    <td <?php echo $item_menu_06;?> nowrap="nowrap" onClick="document.location='<?php echo tep_href_link('contact_us.php')?>'"><a><?php echo BOX_INFORMATION_CONTACT?></a></td>
                   <td class="menu_separator"><?php echo tep_image(DIR_WS_IMAGES.'menu_separator.gif')?></td>                    
                    <td <?php echo $item_menu_07;?> nowrap="nowrap" onClick="document.location='<?php echo $acc_logoff;?>'"><a><?php echo $acc_title_logoff;?></a></td>                     

thanks for yor help a pacience

[MrPhil]

Note that it is very poor interface design to change a layout depending on whether you want to enable some control (e.g., a button) at some point. It confuses users to see the page layout jumping around. The best thing to do here is to disable the button function, and gray-out the button so that it's obviously not working, but is still there (and visible).

[npn2531]

I would disagree that it is 'very poor' interface. That sounds a bit hyberbolic. If you press a submit button. esp for submitting a credit card number and the button is replaced with a spinning gif and a message such as 'please wait while your credit card is processed', it can be quite reassuring that 1) you successfully submitted the number and something is happening and 2) you are not going to accidentally be charged twice.

Graying out the button in fact could be confusing, as it would not really provide confidence, (however fake javascript the switch to a spinner is),
that something happened, not like a message that you can read.

Edited by npn2531, 14 August 2011, 17:41.

[MrPhil]

It is generally poor practice to change the layout of a page, depending on what state it's in. The OP sounds like they were trying to make a button completely vanish once it had been clicked, which is not good. Better to disable it and gray it out to show that it's no longer active. I have no complaint with adding some kind of "spinner" or other device to reassure the user that some action is in progress, so long as the button is disabled in some way. Some people will continue to click the button even with a spinner. Disabling + gray out is just as good in my book, but either way, the button needs to be disabled. What would be best depends on whether that button's function will be restored while still on this page (it shouldn't if someone makes a purchase), or if the button should stay dead even if the user can stay on the page after the activity has completed. Generally, I would reserve a "spinner" for an action which will, when done, restore the button to an active state. If the button should not be pressed again while on this page, I would gray it out. If the action is fairly short-lived, a spinner could be reasonable, but I would not leaving it spinning after the action is complete, even if the button is to be left disabled while this page is up.

[npn2531]

Sounds like we are talking about different things.

[pantufas_online]

thanks any way...

but i decided to remove that button...