I'm using a connect with twitter button on my site, no an OAuth, but I wanted a way to accurately judge how many people pressed connect. There is a way to have a custom connect with twitter button like this. so i was thinking the button might bring you to a url to record the visit and then redirect right back to the main page. I'm not sure how or even if this idea will even work. How would I go a bout doing this?
as present on the twitter website a method like this one can enable custom signin
document.getElementById("signin-btn").onclick = function () {
T.signIn();
};
simply call a url from inside this method fto track the number of clicks to this button some thing like this.
document.getElementById("signin-btn").onclick = function () {
T.signIn();
$.get("UR_LINK");
};
now on the server side. because i dont know what tech ur r using psuedo code can be
On_Request()
{
clicked++;
saveTODataBaseClickedNumber(clicked);
}
Related
We want to have a back button in our site
but history.back in javascript does not help us.
We need this function only run on the site and if the user comes from other site, clicking the return button on the previous site should not return.
In fact, we want a return button to run on our site only.
my code is
<i class="fas fa-arrow-left"></i><span class="btn-text">Back</span>
This only works for your own made back button and won't work with the browser back button
There is two ways to achieve that: a simple but not always reliable method and a complex one but always good.
1- The simple method
You use document.referrer and ensure the domain is yours before calling history.back().
2- The complex method
You could register a JavaScript function on page load to get the first URL the internaut land which you could store using history.pushState. Before calling the back function, you could ensure this is not that page. Though, this idea is not complete as the user could probably have landed on this page twice. i.e. Home->Product->Home. I'll let you search for further code that would let you counter this problem.
This code checks the history of back button of the browser on its click event:
$('#backbtn').click(function () {
if (document.referrer.includes(window.location.hostname)) {
window.history.back();
} else {
window.location.href = "/your/path";
}
});
Title is probably a little messy. Basically what I'm trying to do is to create a custom function that will modify an object properties, then return that object, and then call a function.
A little background on what I'm doing : Trying my best with the Zendesk API to use a web widget on my webpage. Basically this web widget is configured to be a HelpCenter on startup, which then shows a button for either live chat or email, depending on the state. The main property in question here is called 'suppress' which disables one of the widget pages (chat, email & helpCenter). And my goal is to make that custom function 'suppress' 2 of the 3 widget pages so it only shows one. Then a API func called zE.activate() would open up the widget.
I know this is a lot of text, let me show you the code I've got so far :
<script>
function setChatPopOutProps(window) {
window.zESettings = {
webWidget: {
contactForm: {
suppress: true
},
helpCenter: {
suppress: true
}
}
};
return window.zESettings;
};
function chatPopOut() {
setChatPopOutProps(window);
zE.activate();
};
</script>
Now when I click on the button that has chatPopOut() assigned, the zE.activate() works since it opens up the widget, but basically the setChatPopOutProps(window) didn't seem to work.
I also tried the following :
Not returning window or window.zESettings
Putting everything under a single function by putting zE.activate() at the end of zESettings or just after the return window or window.zESettings
If you need to see the widget in action to have an idea, you can see it right here. Click on the green button on the bottom right, type anything, and you'll see the contact form button pop up. This button changes for a chat button when a live chat agent is available.
Now I know this is something that I should normally work out with Zendesk directly, which I tried, but they told me that there's nothing that can do what I'm trying to accomplish, but I really feel like this has something to do with the way I'm doing things in javascript and not the way the API is built..
Does anyone have an idea ? I would really appreciate it.
P.S. This is my 2nd post, so I apologize in advance for mistakes I probably made in this question.
Sadly, it turns out that what you are trying to accomplish just isn't possible. As the zE.settings get applied when the widget is first initialized, so there is no way to dynamically alter the widget settings without doing an action such as refreshing the page and re-initializing the widget. As far I can see from your code, I dont think you want to refresh the page everytime, and reinitialize the widget just to apply those settings that you listed above.
Struggling to understand how to achieve this, even though it's extremely commonplace across the web.
I have two modals, one is a "sign up" modal, the other is a "log in" modal. I need to be able to perform both actions via a user's Google account. I am successfully creating and logging in users via the Google API.
The trouble comes with the fact that Google's drop-in button automatically signs the user in.
On the page I have:
<div class="g-signin2" data-onsuccess="googleSignUp"></div>
And later:
<div class="g-signin2" data-onsuccess="googleLogIn"></div>
Obviously these two buttons have different onsuccess functions, but both are being called when the user is logged in. I have somewhat alleviated the problem by only actually getting the Google script on a button click:
$('a#google-login').click(function() {
$.getScript('https://apis.google.com/js/platform.js');
})
But the behaviour of this whole setup is less than ideal. Is there a common fix for this? It seems incredibly frustrating that Google automatically runs onsuccess functions if the user is logged in (eg without any user action). What's the point of having a button if it runs without user action?
So: I want to be able to log users in via Google, and also sign users up via Google, but only if the user actually clicks a button, in both cases.
You can achieve what you want by implementing Google Sign-In buttons with imperative approach. My recommendation is to use the custom buttons. That way you will get more control over the API. Check out this doc:
https://developers.google.com/identity/sign-in/web/build-button
And this video might help as well.
https://www.youtube.com/watch?v=Oy5F9h5JqEU]
Here's a sample code
https://github.com/GoogleChrome/google-sign-in
As #agektmr said I used the custom button as described in here https://developers.google.com/identity/sign-in/web/build-button
After that you can create 2 buttons and used a different callback for each one.
This is the code that I had it working with within my react component so thats why I'm referencing auth2 from the window object, but you might not need that if your using vanilla JS, This also contains some ES6 so sorry if your not using ES6, you can just convert () => {} to function () { } and let to var
// This method is from the above cited article, I have just altered it slightly so
// that you can input a success callback as a parameter rather than hard coding just one
function attachElementToCallback(element, success) {
window.auth2.attachClickHandler(element, {}, success
, (error) => {
var message = JSON.stringify(error, undefined, 2);
alert(message)
});
}
function initializeGoogleStuff() {
window.gapi.load('auth2', () => {
window.auth2 = window.gapi.auth2.init({
prompt: "select_account",
})
let signInElement = window.document.getElementById("signInButton")
if (signInElement) {
attachElementToCallback(signInElement, handleLogin)
}
let signUpElement = window.document.getElementById("signUpButton")
if (signUpElement) {
attachElementToCallback(signUpElement, (response) => console.log(response))
}
})
}
for the html (this is just copied and pasted from the above article and duplicated, they have the CSS and further instructions if you want to make it comply with googles branding guidelines (which is a must if you want them to verify your app) https://developers.google.com/identity/branding-guidelines
<div id="signInButton" class="customGPlusSignIn">
<span class="icon"></span>
<span class="buttonText">Sign In</span>
</div>
<div id="signUpButton" class="customGPlusSignIn">
<span class="icon"></span>
<span class="buttonText">Sign Up</span>
</div>
I have the 2 sets of code:
Saves the data
myapp.activeDataWorkspace.ProjectHandlerData.saveChanges();
2.Refreshes the page
window.location.reload();
is there a way to make both of these work together on one button, as currently when i click save, the browser recognizes the changes and the (are you sure you want to leave the page) message or something along those lines pops up..
cheers
This is for the HTML client, right?
Assuming that is the case:
saveChanges() is an asynchronous operation, so you'd want to do:
myapp.activeDataWorkspace.ProjectHandlerData.saveChanges().then(function () {
window.location.reload();
});
That way it will wait until it is finished saving the changes before it reloads the screen.
However, there is a smoother way to do it, at least from the user perspective it's smoother.
On the edit screen, leave the Save method out, let LightSwitch handle that. When the user clicks save, it will close the edit screen, and go back to where they were before. Using the options parameter of the showScreen method, we can change that behavior.
Change the method that calls the edit screen like this:
myapp.showEditProject(screen.Project, {
afterClosed: function (editScreen) {
myapp.showViewProject(editScreen.Project);
}
});
This way, after the edit screen is closed, and it has handled the save changes operation for you, the application will automatically navigate to the details view screen of the recently edited item.
If you are instead wanting to refresh the browse screen after adding a new entity:
myapp.showAddEditProject(null, {
beforeShown: function (addEditScreen) {
addEditScreen.Project = new myapp.Project();
},
afterClosed: function () {
screen.Projects.load();
}
});
Those two options, beforeShown and afterClosed, give you a lot of really cool abilities to influence the navigation in your application.
I have learnt that you can save from a add/edit window, and reload the main page you are going back to by doing the following:
For Example: (adding an order to an order screen)
click on your button to add the order
enter the details required.
hit your custom save button with your validation included.
before your commitChanges(); write in the following line: screen.OrderLine.OrderTable.details.refresh(); "This needs applying to your scenario"
when you return to your screen your details should have been updated (for example the total value now displays the correct value in my case)
hope this helps...
I am building a web app and I am trying to do a function where there is a popup confirm box that shows after the user has been inactive for 10 minutes. When the popup opens the user can choose to continue being logged in or not. I need this box to close down after 1 minute if they have not answered the popup. How can I do this. Everything else works fine.
This is my code:
function checkTime () {
setTimeout (function () {
var dialog = confirm ("Do you want to continue being logged in?");
if (dialog == true) {
checkTime ();
} else {
window.location = 'LOGOUT URL';
}
}, 10000);
};
You cannot do that with the native confirm() as it stops JavaScript run on that page until the user has clicked on it.
So, You have to create a plugin for confirm-box or try someone else.
And they often look better, too. :)
you can't make the confirm close itself - as a thought path my bank has the same sort of thing on their on-line banking system - quite simply if you walk away and come back, it you've been longer than 10 minutes it doesn't matter what you chose it apologizes and logs you out anyway
the dialog requires human interaction it can not be overridden for security reasons. in order to do what you are trying to you would need to use a modal solution (this can be achieved with a small amount of js and some css if you don't want to use a third party solution)
I know it's not the answer you were looking for I'm sorry but hopefully it gives you some ideas for options