Difference between button onclick and a href

Question

I'm trying to integrate SendOwl shopping cart into my application (details of the application are at the end).

To demo the problem I created a simple snippet using pure HTML / Javascript. In the head section of the HTML, I have this:

<script type="text/javascript">
    function SendOwl(url) {                 
        window.location.href=url;
    }
</script>
<script type="text/javascript" src="https://transactions.sendowl.com/assets/sendowl.js" ></script>

In the body I have this:

Example 1: Opens the checkout form in its own window (Undesired behavior):

<input type="button" onclick="SendOwl('https://transactions.sendowl.com/products/8/5C080C0F/purchase');" value="On Click" />

Screenshot 1: Notice the URL changed and it's not an overlay (compared to 2).

Example 2: Opens the checkout form in a modal window as an overlay (Desired behavior):

<a href='https://transactions.sendowl.com/products/8/5C080C0F/purchase'>a href</a>

Screenshot 2: The URL stays the same, but the form opens in an overlay.

You can also see a live demo on the SendOwl's demo page.

My application is based on GWT (SmartGWT to be precise). In my application, I call button onclick handler to invoke a Javascript that invokes the Buy Now link using JSNI call (shown below). But the Buy Now link always opens in a full window as in example 1 above.

public static native void onBuyNowClick(String url) /*-{
  $wnd.SendOwl(url);
}-*/;

I have tried $wnd.open(url) but that has the same behavior.

How do I get the first example to behave like the second but still using button onclick?

UPDATE:

The magic is in the sendowl.js script. If I remove that script, then both examples work the same way. If I could figure out how that script works, it might give some clues to make Example 1 work the same way as Example 2.

Thanks.

to open classic href in a new window you can use `target= "_blank"` — NiKoLaPrO, Mar 01 '16 at 04:28
That's not the issue here. I know how to open a link in a new window. The href example (#2) is the desired behavior. The requirement is to stay in the same window and show the checkout form in an overlay on the current window. If I may request you to head over to the SendOwl demo page (https://www.sendowl.com/demo) and click on Credit Card Demo button to see how it works. Hope that would make the requirement more clear. — DFB, Mar 01 '16 at 04:33
Hi all! I just wanted to ask, how does GWT doing now? Can I start a new project using it or it becomes deprecated? — sinedsem, Mar 01 '16 at 17:59
@KaPaHgaIII I think you should post a new question for that. It doesn't belong to this thread. — DFB, Mar 03 '16 at 10:48

score 1 · Accepted Answer · answered Mar 01 '16 at 12:17

I have resolved the issue myself by probing into the sendowl.js . That's the script which is doing all the magic.

This is my modified script that makes Example 1 work exactly like Example 2:

<script>
    function SendOwl(url) { 
        sendOwl.addLoadingImage();
        sendOwl.loadIframe ('https://transactions.sendowl.com/products/8/5C080C0F/purchase');
    }
</script>
<script src="https://transactions.sendowl.com/assets/sendowl.js"></script>

Thanks to all who replied and tried to help.

NiKoLaPrO · Answer 2 · 2016-03-01T06:14:18.660

0

All you need is:

<script type="text/javascript" src="https://transactions.sendowl.com/assets/sendowl.js" ></script>
<a href="https://transactions.sendowl.com/products/8/5C080C0F/purchase" rel="nofollow"><input type="button" value="Purchase" /></a>

https://help.sendowl.com/help/article/link/button-codes-to-sell-your-product

Works fine for me.

edited Mar 01 '16 at 06:14

answered Mar 01 '16 at 04:33

NiKoLaPrO

614
1
5
16

Actually I've tried that approach already. It makes no difference. The form just displays in the same window but not as an overlay as it does in Example 2 and also on the sendowl demo page, which I have linked to in my comments above. I'll add couple of screenshots to show the problem. Thanks for your help though. – DFB Mar 01 '16 at 04:39
@DFB figured this out, i will post answer now – NiKoLaPrO Mar 01 '16 at 04:59
I checked your jsfiddle and I think you are still not getting the issue. The a href example is working fine without rel="nofollow" and target="_blank". I'm asking why onclick (Example 1) is not working the same way. I need to use button onclick in my application. I can't use there. Hope it's more clear now. – DFB Mar 01 '16 at 05:11
rel='nofollow' has nothing to do with this issue as far as I know. But thanks for your help. – DFB Mar 01 '16 at 05:21
@DFB I will send you a screenshot, it wont work on jsfiddle – NiKoLaPrO Mar 01 '16 at 05:22
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/104953/discussion-between-nikolapro-and-dfb). – NiKoLaPrO Mar 01 '16 at 05:26
Yes, I know it doesn't work on jsfiddle either way. But if you create a simple HTML page on your local machine and open it in a browser you can see the issue. The code you have posted still uses 'a href'. I need to make it work with onclick javascript function. – DFB Mar 01 '16 at 05:41
@DFB i think there i s no way to do that, even SendOwl site use only and css (class). you can create that a looks like a button, so only way to do it is with because javascript will change location. – NiKoLaPrO Mar 01 '16 at 05:53
It's not about the button look. But inside SmartGWT even a href links behave like the onclick example. I'm trying to figure out a way to make it work in an overlay. Thanks again. – DFB Mar 01 '16 at 06:03
@DFB I don't know then :/ – NiKoLaPrO Mar 01 '16 at 06:14

score 0 · Answer 3 · edited May 23 '17 at 12:01

0

In GWT you can use a PopupPanel to display the overlay. Personally I never tried embedding a page inside a popup but you can try adding a Frame object inside the popup panel, something like this:

PopupPanel popup = new PopupPanel();
Frame frame = new Frame("http://www.yourlink.com/");
popup.setWidget(frame);
popup.setGlassEnabled(true);
popup.center();

As for the URL please check the documentation and this thread

edited May 23 '17 at 12:01

Community

1
1

answered Mar 01 '16 at 07:38

Youssef Lahoud

529
3
8

Thanks. Actually I have tried this approach in SmartGWT and it works to some extent but with some glitches. I used the modal Window of SGWT which is a similar widget to what you proposed. Some actions inside the checkout form result in javascript error when running inside the SGWT's modal Window. I have to go with that approach anyway if I don't find a cleaner solution. I'm really trying to understand the difference in my Example 1 and 2 in pure HTML/Javascript terms keeping GWT aside. – DFB Mar 01 '16 at 08:07

Difference between button onclick and a href

3 Answers3