I am using behavior driven development with cucumber-js, and trying to write a test to follow a link, and I have the following code:
When I click "Add page"
this.When(/^I click "([^"]*)"$/, function(link, callback) {
this.browser.pressButton(link, callback);
});
Add page is a link button:
<button>Add page</button>
The idea that the zombie rest on the same page after pressing the button, is there an other way ?
The function pressButton is used to press a button the page.
For clicking a link on a page use clickLink function.
So your code should be:
this.When(/^I click "([^"]*)"$/, function(link, callback) {
this.browser.clickLink(link, callback);
});
Related
I'm working on adding a Google Sign-In Button to a website. In the docs, Google offers two options, a "basic" button:
https://developers.google.com/identity/sign-in/web/sign-in
and a "custom" button using signin2.render():
https://developers.google.com/identity/sign-in/web/build-button
The problem I'm encountering is that the two buttons exhibit different behavior. If I sign in with either button, the button's "title" changes from "Sign In" to "Signed In" to reflect the sign-in status. However, if I now refresh the page, then the basic button retains the title "Signed In", whereas the custom button changes its title back to "Sign In", suggesting (incorrectly) that the sign-in status has changed through the page refresh.
If I manually check the sign-in status post-refresh in the browser console by running:
auth = gapi.auth2.getAuthInstance()
auth.isSignedIn.get()
I get true as a return, showing that the refresh indeed did not alter the sign-in status, contrary to the change in the button's title.
So my question is: how can I get the custom button to behave like the basic button, so that its title does not change on refresh? Another (related, I assume) behavior of the basic button that I like is that the button's "onsuccess" callback gets called on each page load (if the user is signed in), whereas the custom button does not do this. So I'd also like to change this behavior on the custom button to match that of the basic button. Any suggestions would be greatly appreciated!
The parameters I'm passing to render look as follows:
function renderButton() {
gapi.signin2.render('mybutton', {
'scope': 'profile email',
'width': 125,
'height': 40,
'longtitle': false,
'theme': 'light',
'onsuccess': onSuccess,
'onfailure': onFailure
});
}
Could you provide params that you're passing to the button? Could you confirm that there aren't any errors in JS console and there aren't any 400/403/404/4xx requests?
I've tested this functionality using following code and it seems to work perfectly fine (you have to replace YOUR_CLIENT_ID with your actual client_id).
<head>
<meta name="google-signin-client_id" content="YOUR_CLIENT_ID">
</head>
<body>
<script>
function onSuccess(googleUser) {
console.log('onSuccess!');
}
function onCustomSuccess(googleUser) {
console.log('onCustomSignIn!');
}
function signOut() {
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function () {
console.log('User signed out.');
});
}
function onLoad() {
gapi.signin2.render('custom_signin_button', {
'onsuccess': onCustomSuccess
});
}
</script>
<div class="g-signin2" data-onsuccess="onSuccess"></div>
<div id="custom_signin_button"></div>
Sign out
<script src="https://apis.google.com/js/platform.js?onload=onLoad" async defer></script>
</body>
</html>
Edit:
Declaring base scope as head's meta tag is the best solution.
<meta name="google-signin-scope" content="profile email">
I am trying to update an collection in Meteor when a user clicks on a certain link. The link opens up a new tab, which is on an external site. However, I want to store this click in my database.
I have tried using e.preventDefault(), but then I can't get the link to open in a new tab. Any suggestions?
You can use a click event and use a window.location after inserting into the database.
So, it would look something like this:
Template.name.events({
'click a' : function(e) {
e.preventDefault();
// Insert data into database
Table.insert({
// data here
});
// Open new tab
window.open(url, '_blank');
}
});
You ought not to use javascript to open the new tab since this will activate the popup blocker. The best solution is to have a link, as normal, and track the link on the side:
Html:
<template name="link">
CLick
</template>
JS:
Template.link.events({
'click a#the_link': function(e,tmpl) {
MyCollection.update({_id: "the_link_id"} , {$inc { "clicks":1 } });
}
});
You can do the insertion in the server side which is secure. The window can be opened in the success of the response.
In Client
Template.name.events{(
"click .clickevent":function(e){
e.preventDefault();
Meteor.call("Methodname", datatoinsert,function(err){
if(!err)
window.open(url, '_blank');
})
}
)};
In Server
Meteor.methods({
Methodname:function(datatoinsert){
Tablename.insert({
//insert data here
})
}
});
In this way you can add event and on successful data insert you can open a window.
I hope it helps you.
i am working on a project which is based on jquery Mobile. i am a biggner in this field, so sorry for the silly question. the question is -- i have a page 'Page1' and i am using post method to fetch data from database. On success i am showing a notification to user through a notification dialog(without cancel and ok button). now what i want this success message on another page "page2", and the message should be there up to 2 sec and then disappear automatically. i have tried
function sendAddGuest(data, dialog) {
$.post("/GuestsList/AddGuest", data, function (response) { //using the post method
//alert(JSON.stringify(response));
$('.error').html("");
hideLoading();
if (response.result == 'success') { //if the process done
$.mobile.changePage('/GuestsList/Index', { dataUrl: "/GuestsList/Index", reloadPage: false, changeHash: true }); //To another page "page2"
// window.setTimeout('showToastMessage("Guest added successfully with window");',2000); //i have tried this
setTimeout(function () { showToastMessage("Guest added successfully test2"); }, 100); //and this also i want to show this message on other page "page2"
}
}
I am also beginning with Jquery Mobile, based in the toy project I am working with I would suggest the following:
Use popup from jquerymobile instead of showToast, then you could call
the .close() of the element in the settimeout function.
This is the div you create for your popup (you put it in the page 2):
<div data-role="popup" id="myPopup" class="ui-content" data-theme="e">
<p>Guest added successfully</p>
</div>
This is how you could call the function to open once in the new page (use the pageload event):
$('#myPopup').popup('open');
This is how you could call the function to close (in the same pageload event):
window.setTimeout(function(){ $('#myPopup').popup('close'); }, 2000)
Sorry I have no time to code a complete example, but I think this is the way to go.
Hope this helps!:-)
I have a few links on my site that will need to show a modal dialog when the user clicks on one of them. The modal will contain a message like: You are now leaving the "SECTION NAME" part of "SITE NAME". The user will then either accept which will allow the user to continue on with their request or cancel which will keep the user where they are.
An example of a link would be: My Interests
So as you can see the class of leaving-section would cause the link to do what I have specified above, and will also open the link in a new tab/window BUT the user must first accept that they are aware they are being taken to another part of the site.
I have looked at the docs but I haven't seen any examples where a) the dialog is created on the fly rather than hiding and showing a div and b) allowing the user to confirm and being sent to their original location i.e. the url which they clicked.
This is what I have so far:
$("#leaving-section").dialog({
resizable: false,
modal: true,
buttons: {
"I understand, take me there": function () {
$(this).dialog("close");
},
"I want to stay where I am": function () {
$(this).dialog("close");
}
}
});
$('.leaving-section').click(function (event)
{
event.preventDefault();
var $dialog = $('#leaving-section');
$dialog.dialog('open');
});
But I want to the modal to be created by jquery instead of the div being embedded in the page! Also how do I get the first button to send them off to their original destination?
Thanks to all who can help. Thanks
I just had to solve the same problem. The key to getting this to work was that the dialog must be partially initialized in the click event handler for the link you want to use the confirmation functionality with (if you want to use this for more than one link). This is because the target URL for the link must be injected into the event handler for the confirmation button click. I used a CSS class to indicate which links should have the confirmation behavior.
Here's my solution, abstracted away to be suitable for an example.
<div id="dialog" title="Confirmation Required">
Are you sure about this?
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#dialog").dialog({
autoOpen: false,
modal: true
});
});
$(".confirmLink").click(function(e) {
e.preventDefault();
var targetUrl = $(this).attr("href");
$("#dialog").dialog({
buttons : {
"Confirm" : function() {
window.location.href = targetUrl;
},
"Cancel" : function() {
$(this).dialog("close");
}
}
});
$("#dialog").dialog("open");
});
</script>
<a class="confirmLink" href="http://someLinkWhichRequiresConfirmation.com">Click here</a>
<a class="confirmLink" href="http://anotherSensitiveLink">Or, you could click here</a>
I believe that this would work for you, if you can generate your links with the CSS class (confirmLink, in my example).
I think this plugin may be help
http://jqueryui.com/demos/dialog/#modal-confirmation
Heres an example of how you can do it:
http://jsfiddle.net/yFkgR/3/
Or to do something besides cancel
http://jsfiddle.net/yFkgR/4/
You can just define your own buttons. You can style the dialog box anyway you want, i just used the default.
also to use ajax to load the html you can take a look at:
jQuery UI Dialog window loaded within AJAX style jQuery UI Tabs
There is an open option you can use to load html from a remote web page. I jquery you can create a div just be doing
$("<div>");
it will create the closing tag too. Or as suggested in the post you can also use
$('a.ajax')
I'm loading a customer info page using jQuery. There's a list of customers with a link next to it:
View
That triggers this function:
function load_customer(id) {
$("#dashboard").load('get_info/' + id);
}
That works perfectly. On the page I'm loading, I have a jQuery UI modal dialog form for adding new information.
<div id="addinfo">
<form><input type="hidden" name="customer_id" value="<?php echo $c->id; ?>" /></form>
</div>
My javascript:
$("#addinfobutton").click(function(){
$("#addinfo").dialog("open");
return false;
});
$("#addinfo").dialog({
autoOpen:false,
width:400,
height:550,
modal: true
});
When you select a customer the first time, it populates the hidden field correctly, but then it stays the same even after selecting other customers.
I thought that by loading a new customer page, the form would reset as well... but apparently it's being stored/cached somewhere. If I echo the ID anywhere else in the page, it shows correctly... just not in the "addinfo" div.
Any help/suggestions would be appreciated! Thanks!
JQuery dialog's dont reload the content for you when you open them. I tend to have an AJAX call replacing the content of the div that the dialog is on (or tweakng some values in it) when the dialog is opened.
If you want a hidden field, then I wouldn't put it within the dialog, you should be able to retrieve the value from outside the dialog.
After some more researching, it seems the dialog is being cached client-side after it's called. So to get around that, I just added the customerId to the end of the popup div's ID name... so each customer page will have a unique dialog ID.
However, if it's caching each of those dialogs, won't there be a performance loss if you open quite a few? How can you clear them without having to do a full page refresh?
I guess if the #addinfo div is updated it should capture the new content...anyway this would destroy the dialog after closing it to insure a new instance will be created:
$("#addinfobutton").click(function(){
openDialog('#addinfo');
return false;
});
function openDialog(elm) {
$(elm).dialog({
autoOpen:true,
width:400,
height:550,
modal: true,
close: function() {
$(this).dialog('destroy');
}
});
}