Jquery Alert Box not working correctly

JavaScript
1

Hi,

I’m trying to show an alert box when anything is selected from a select box but the alert message disappears before anyone can “confirm” It appears for only a second or so then refreshes the page without allowing the select change.

here is the code:

[code]

[/code]
2

then that change event likely submits the form.

without further knowledge of your code there is nothing more to say.

1 Like
3

Here’s the code I’m trying to use it with:

[code]<?php if($this->getCurrencyCount() > 1): ?>

<?php echo $this->__('') ?>
<?php endif; ?> [/code]
4

bingo … (ok, not a submit, but a reload)

onchange="window.location.href=this.value"
5

How can fix it?

6

Remove the select onchange handler?

If you could provide some working code (i.e. not PHP, but HTML) that we can run, it’ll be easier to help.

7

Here some html from the page:

[code]

[/code]

It has a lot more options. Does that help?

8

Well you are redirecting on change, which obviously means that you are leaving the current page. In terms of UX (and good manners in general), I’d suggest only to change the location when the user explicitly confirms the selection by clicking a button or something, like e.g.

<select class="dropdown" name="currency-selector" id="currency-selector">
  <option class="label" value="http://example.com/foo">Afghan Afghani</option>
  <option class="label" value="http://example.com/bar">Albanian Lek</option>
</select>
<button id="confirm">Confirm redirect</button>

var currency = document.getElementById('currency-selector');
var confirm = document.getElementById('confirm');

confirm.addEventListener('click', function() {
  window.location.href = currency.value;
});

Otherwise the user might be a bit surprised where the redirect is coming from – in fact, you didn’t take it into account yourself. They might even suspect some vicious script running and leave instantly (I would).

9

@m3g4p0p

What I’m trying to do is display a message to the customer if they switch currency that during checkout all charges will be in US dollar.

10

But as noted above, this won’t work if you’re simultaneously redirecting to another page. Maybe you could use a confirm instead of an alert, and redirect if the user accepts, like

var currency = document.getElementById('currency-selector');
var confirmed = confirm('During checkout all charges will be in US dollar');

if (confirmed) window.location.href = currency.value;

This way the user is getting the message, and still has a chance to return to the select without having to use the back button.

1 Like
11

@m3g4p0p

I’ll try it out, but actually they don’t get redirected anywhere, the page just refreshes with the new currency showing. Thank you

12

I tried it out and the confirm box keeps showing over and over. It might not be possible. Is there anyway to show a popup after the page refreshes?

13

Ah okay… so you’re generating a new page on the server with the new currency? In this case you could send another POST parameter informing the backend that it should include an according message in the page.

Then there’s something going wrong indeed… if you show us the code, we can certainly help you sort that out. :-)

Apart from the backend solution, another way would be to set some value of the session storage accordingly, like

var currency = document.getElementById('currency-selector');
var showMessage = sessionStorage.showMessage;

if (showMessage) {
  alert('During checkout all charges will be in US dollar');
  sessionStorage.showMessage = false;
}

currency.addEventListener('change', function() {
  sessionStorage.showMessage = true;
  window.location.href = currency.value;
});

But again, I’d strongly suggest to ask the user to confirm this, even if it’s just a refresh, or an (almost) identical page for that matter.

14

@m3g4p0p

That works great! I don’t think they need to confirm because I’m going to explain more plus they can switch back very easily.

Thank you very much

1 Like
15

Hopefully only for debugging purposes as that is the only use that now has - it displays additional debugging options in some browsers and can also be turned off completely.

16

@felgall

What do you mean? Is there something i’m not aware of here. : ),

@m3g4p0p

Got one little problem I just noticed. On every page view the alert pops up.

17

On one browser alerts look like this: alert(‘check the box below to turn off JavaScript’);

note the extra checkbox.

In other browsers alert looks like this: alert(‘2’);

again with an extra debugging checkbox.

If you want alerts for something other than debugging then create your own modal dialogs or use one such as https://www.sitepoint.com/creating-nice-alerts-sweetalert/

18

@felgall

I didn’t know they had those kinds of alerts.I’m going to see if I can get the sweetalerts hooked up.

Thanks

19

@felgall How would you get the Sweetalert to work with then currency selector?

20

Got got the sweetalert working but it still pops up on each page load. How can I get it to not do that?