I want to perform two tasks on click on a single link. For example, clicking on an coupon link should take the user to the merchant's website on a new page and the page where the link was clicked should display the coupon code. This is similar to what happens in Coupondunia etc...
Right now I have a single link, if I click it, it opens a new page, but does not perform the second action that I mentioned earlier, could you please provide me any insights?
I am using ASP.net MVC
TestLink
You have to use JavaScript for this. With straight HTML clicking a link will only perform one action: issuing a GET request to the specified URL. To pop your dialog, you need only add an event handler to the link's click event that will show that dialog. Something along the lines of:
$('#MyLink').on('click', function () {
// show dialog
});
The default action, requesting the URL, will happen regardless, unless you stop it with either evt.preventDefault() or by returning false. As a result, you don't need to add anything special in that regard.
However, bear in mind, that unless the link has a target attribute, it will load in the same browser tab/window, meaning that by the time your dialog displays, the entire page view would have changed to the new URL. As a result, you should ensure that the link opens in a new tab/window, by adding target="_blank" (or a more specific target) to your anchor tag.
#alok...hey brother...are u asking for something like this ...that i mentioned below...let me know...if it is what you are asking for or not...
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>DemoButton</title>
</head>
<body>
<input id ="Demo_Btn" type="button" value="click" onclick="test1(), test2()"/>
<script type="text/javascript">
function test1() {
//define your test1 here...
}
function test2() {
//define your test2 here...
}
</script>
Related
<html>
<body>
<a href="javascript:helloWorld()" >Hello world</a>
<script type="text/javascript">
function helloWorld(){
console.log("Hello world");
return true;
}
</script>
</body>
</html>
If open this page in firefox(not happening in chrome) and click on the link, I will get back new empty page, with "true" as a content. Why is this happening? Is this a expected behaviour or a bug. Although I was able to fix it by replacing it with helloWorld();void(0);.
This is expected behaviour.
The javascript: URL scheme is designed so you can generate content from JavaScript and have it rendered as a new page.
Using it to trigger effects on the current page is a hack.
If you want to trigger events on the current page then use a click event listener instead (and use a button instead of a link if you aren't going to have a fail-state of "visiting another page").
When the browser navigates to a javascript: URI, the code is evaluated and it's return value (the return value of the last expression) is used: If it's undefined, the the browser doesn't navigate, else the browser navigates to a page with the content of the conversion of that value to a string.
Since helloWorld() returns true and it's the last expression in your code, the browser creates a page with "true" as its content. void(0) returns undefined, so it doesn't navigate.
I recommend not using hyperlinks for triggering actions. That's not what they were made for. From the HTML standard:
[Hyperlinks] are links to other resources that are generally exposed to the user by the user agent so that the user can cause the user agent to navigate to those resources, e.g. to visit them in a browser or download them.
That's not what you're doing. Use the <button> element instead and style it like a link.
I am new to protractor and would like to test if a link is working.
I understand trying to get the element id but what should i expect that the link equals?
Also has anyone got any good documentation on example protractor tests?
I have been through this http://angular.github.io/protractor/#/tutorial which was helpful but i need more example of possible tests I could do.
i have this so far:
it('should redirect to the correct page', function(){
element(by.id('signmein').click();
expect(browser.driver.getCurrentUrl()).toEqual("http://localhost:8080/web/tfgm_customer/my-account");
});
would like to test if a link is working
This is a bit broad - it could mean the link to have an appropriate hrefattribute, or that after clicking a link there should be a new page opened.
To check the href attribute, use getAttribute():
expect(element(by.id('myLink')).getAttribute('href')).toEqual('http://myUrl.com');
To click the link use click(), to check the current URL, use getCurrentUrl():
element(by.id('myLink').click();
expect(browser.getCurrentUrl()).toEqual("http://myUrl.com");
Note that if there is a non-angular page opened after the click, you need to play around with ignoreSynchronization flag, see:
Non-angular page opened after a click
If the link is opened in a new tab, you need to switch to that window, check the URL and then switch back to the main window:
element(by.id('myLink')).click().then(function () {
browser.getAllWindowHandles().then(function (handles) {
browser.switchTo().window(handles[handles.length - 1]).then(function () {
expect(browser.getCurrentUrl()).toEqual("http://myUrl.com");
});
// switch back to the main window
browser.switchTo().window(handles[0]);
});
});
I have a link
click me
when a user click the link "click me", the new link page will be redirected and do something at the server side. The problem, if a user click the back button on the browser, it will go back to the old link. If the user click the link "click me", the new link page will be opened and processing at the server side will do again. How to prevent this situation? That is even a user go back to the old page, the new link cannot be clicked anymore
Generate a unique id on the link, like therequest.do?id=1234, and log 1234 to a database so that the request cannot be run again.
User goes to mypage.do, server generates id 1234 and logs to database as unprocessed.
User clicks link to therequest.do?id=1234
Server does processing, and marks id 1234 as processed.
User clicks back button.
User clicks link again.
Server checks and sees request 1234 is already processed, so generates an error message on the screen: request has already been processed.
You could try creating a new window and that would prevent end user from being able to go back however, you would need to create visited state to make the button disappear in the CSS.
click me
Other then that in pure HTML there is no way to stop a user from hitting the back button on a standard link.
You can do this with Javascript. Here's example code that shows one way to do it:
<html>
<body>
click me
<script>
var first = true;
function f() {
if ( first ) {
first = false;
window.open('http://www.google.com');
}
}
</script>
</body>
</html>
Alternatively, you could get rid of the global state variable and just disable or hide the link once it's clicked.
I have created a HTML link (<a>) using the Extjs BoxComponent and it works just fine. But instead of having a fixed URL associated with the link, I want to be able to update the href property when the user clicks the link.
In the code below the href is updated when the user cliks the link and I can verify this using FireBug on the HTML element. But the new page opening is missing my addition to the href.
Question:
Is it too late to modify the href on onClick or is it because I am modifying the href in the wrong way?
Code:
xtype: 'box',
html: 'Link to google',
listeners: {
render: function (c) {
c.getEl().on(
'click',
function() {
this.el.child('a', true).href = 'www.google.com/#q=' + some_dynamic_value;
},
c,
{ stopEvent: false }
);
}
}
Looks like this can work by using the mousedown event, instead of the click event.
Check out: http://jsfiddle.net/sadkinson/rF5TQ/15/
Its possible that by the time the click has happened changing the URL within it is too late. Is it not possible that whatrever causes your link to need updating can be done when that is changed rather than waiting till the user has clicked the link?
I would imagine a number of browsers would ignore this, simply because it would be an efficient way of being malicious. Putting a link to say "google" and then redirecting you to some virus ridden site etc, as even the most sensible user looking to see where a link would take them would see google until it was too late.
I'm trying to focus an existing tab when the content reloads. The usual window methods don't seem to work.
Here's whats happening: On page_1 I have a link like...
Go to my other page
If the tab doesn't exist, when the link is clicked it opens a new tab and takes focus. (Perfect)
If you then go back to page_1 and click the link again, it reloads the content in the existing tab (perfect) but doesn't focus (crap). I've tried the usual window.focus, $(window).focus methods on load with page_2 without luck.
Any recommendations?
It is impossible.
The following appears to work in IE8 and FF13:
<script type="text/javascript">
// Stupid script to force focus to an existing tab when the link is clicked.
// And yes, we do need to open it twice.
function openHelp(a) {
var tab = window.open(a.href, a.target);
tab.close();
tab = window.open(a.href, a.target);
return false;
}
</script>
Help
There is a workaround to this. Use javascript to open a window in a new tab, store a reference to that tab, and when you want to focus it; close it first and then re-open it.
if (window.existingWindow != null)
try { window.existingWindow.close(); } catch (e) { };
window.existingWindow = window.open("/your/url", "yourTabName");
We use a similar approach to opening the preview pane of the current page you're working on in our service called Handcraft where the above works as expected (we wanted the new window to always focus).
Without using a framework you can put a script block at the bottom of your page that will run once the page loads. Because it is after your HTML you can be assured that the HTML is refers to is actually available.
The script can set the focus to the element you want.