using following script, tweet window opens up but tweet event is not getting called. How can I bind
window.open to tweet window:
var TWTShare = function() {
var title = metadata.title,
url = metadata.url,
text = metadata.text,
href = "https://twitter.com/intent/tweet?url="+encodeURIComponent(url)+"&title="+encodeURIComponent(title)+"&text="+encodeURIComponent(text);
window.open(href, 'share it on twitter', 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, copyhistory=no, width='+width+', height='+height+', top='+top+', left='+left);
}
twttr.events.bind('tweet', function (event) {
console.log('tweet');
});
Related
I am new to javascript. I try counting the number of clicking times by using closure.
The code is to show how many times the user clicks on the button, but it shows nothing after clicks.
html body code:
<button id="clickme">Click me!</button>
<div id="message"></div>
js code:
window.onload = function () {
var button = document.getElementById("clickme");
button.onclick = handleClick;
};
function handleClick() {
var count = 0;
var msg = "You clicked me ";
var div = document.getElementById("message");
function clicker() {
count++;
div.innerHTML = msg + count + " times.";
}
return clicker;
}
In order to make onclick to use the clicker function returned by the function handleClick, you should invoke the handleClick function.
This type of pattern is also called IIFE (Immediately-Invoked Function Expression).
window.onload = function () {
var button = document.getElementById("clickme");
button.onclick = handleClick();
};
I want to track the conversion for links in adwords; For this i have the classic code that looks like this(don't worry about values for conversion_id and conversion_label):
<!-- Google Code for Joc Sloturi2 Conversion Page
In your html page, add the snippet and call
goog_report_conversion when someone clicks on the
chosen link or button. -->
<script type="text/javascript">
/* <![CDATA[ */
goog_snippet_vars = function() {
var w = window;
w.google_conversion_id = xxxxxxx;
w.google_conversion_label = "dsadsadsadsadadsa";
w.google_conversion_value = dsadasda;
w.google_conversion_currency = "RON";
w.google_remarketing_only = false;
}
// DO NOT CHANGE THE CODE BELOW.
goog_report_conversion = function(url) {
goog_snippet_vars();
window.google_conversion_format = "3";
var opt = new Object();
opt.onload_callback = function() {
if (typeof(url) != 'undefined') {
window.location = url;
window.open(url, '_blank')
}
}
var conv_handler = window['google_trackConversion'];
if (typeof(conv_handler) == 'function') {
conv_handler(opt);
}
}
/* ]]> */
</script>
<script type="text/javascript"
src="//www.googleadservices.com/pagead/conversion_async.js">
</script>
After that the outbound links are looking like this
Link text whatever
My problem with this is that when I click on the link it opens the link in a new tab and also in the same tab (basically it opens the link twice); Is there a way to only open the link in a new tab in the browser and also track the conversion for it?
I know this is a bit old, but I found a solution. Remove
window.location = url;
I'd like to confirm a user tweeted after clicking a Twitter Web Intent. How can I accomplish this?
Example:
Tweet
Assuming an anonymous* user clicks this link and tweets, how can I confirm this?
Ideally I'd love to get a link to the tweet.
* anonymous as in not authenticated on my site and without knowing their Twitter username
Update
This solution no longer works after Twitter updated the behaviour of the widgets. You can only track if the tweet button was clicked now, and not if the tweet was actually posted.
You can track tweets using the 'twttr.events.bind' event listener form the Twitter API. A working example of tracking tweets can be found here: http://jsfiddle.net/EZ4wu/3/
HTML:
<i class="icon-twitter-sign icon-white"></i> Tweet
JavaScript:
function reward_user( event ) {
if ( event ) {
alert( 'Tweeted' );
console.log( event );
}
}
window.twttr = (function (d,s,id) {
var t, js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return; js=d.createElement(s); js.id=id;
js.src="//platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs);
return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });
}(document, "script", "twitter-wjs"));
twttr.ready(function (twttr) {
twttr.events.bind('tweet', reward_user);
});
My previous solution is now outdated and no longer appears to work.
Try this:
twttr.events.bind('loaded', function(event) {
window.location = "http://theredirect_link.com"
});
#Niroj's answer no longer works. They updated the api, so the event listener fires immediately after user clicks the button - you have no way of checking if he actually tweeted.
If you create the window yourself (without using Twitter widgets), you can at least detect if the window was closed (either user closed it or tweeted).
Don't link the widgets api!
HTML:
<a id="twitter-intent" href="https://twitter.com/intent/tweet?url=https://www.webniraj.com/2012/09/11/twitter-api-tweet-button-callbacks/&text=Twitter+API:+Tweet+Button+Callbacks"><i class="icon-twitter-sign icon-white"></i> Tweet</a>
JS:
document.getElementById('twitter-intent').addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation(); //this should do in case you don't want to unlink twitter widgets api
var width = 575,
height = 400,
left = (screen.width - width) / 2,
top = (screen.height - height) / 2,
url = this.href,
opts = 'status=1' +
',width=' + width +
',height=' + height +
',top=' + top +
',left=' + left;
var win = window.open(url, 'twitter_share', opts);
var timer = setInterval(checkWin, 500);
function checkWin() {
if (win.closed) {
//just assume the user tweeted (he could just close the window without tweeting)
alert("Thank you for tweeting!");
clearInterval(timer);
}
}
});
I have a button that opens up a dialog containing another html file. What I would like to be able to do is pass a variable to the dialog. This is what I have.
var html = "";
var PLAN_ID = '1234';
html += "<div>"
html += 'Final'
html += "</div>"
The PLAN_ID variable is the one that I wish to push to the formFinal.html. I can populate a hidden text input on the dialog with the following code.
$(document).on('pageshow', '#FinalPostPage', function(e) {
var page = $(this);
var query = page.data("url").split("?")[1];
var planid = query.split("=")[1];
$("input[name=Title]",this).val(planid);
})
I can use this but the variable doesn't populate until after the formFinal.html page loads it seems. I need the variable to be used while the page develops. Hope this makes sense.
You could use localStorage to transfer data from this page to the other page.
When you're creating the button, add the PLAN_ID variable as a data-* attribute to the a and also create an id/class for it :
var html = "";
var PLAN_ID = '1234';
html += "<div>"
html += 'Final'
html += "</div>"
Write a click event for the button click :
$(document).on("click", '#dialog-send' ,function(e) {
//prevent default action. we dont want it to redirect. Just yet.
e.preventDefault();
//set item in localStorage.
localStorage["plan_id"] = $(this).data("planid");
//then use changePage to redirect
$.mobile.changePage(this.href, {transition: 'pop', role: 'dialog'});
});
In your pageshow event,
$(document).on('pageshow', '#FinalPostPage', function(e) {
var page = $(this);
//var query = page.data("url").split("?")[1];
//get plan id from localStorage
var planid = localStorage["plan_id"];
$("input[name=Title]",this).val(planid);
});
Hope this helps.
Folks,
I'm using Jquery UI - Tab.
I've an edit screen where the main form and tabs have been shown below. Now when I navigate from one record to another the Ajax call goes to the server to fetch new main record.
Now I want to refresh the tab below, with new record id, as well so what I've done is the following:
var jsonTabMetaData = [{"HtmlName":"Notes","Text":"Notes","Url":"../Notes.rl?moduleName=glbModuleName&moduleRecordID=glbModuleRecordID&sessionID=glbSessionID&company=glbCompanyName","Selected":false,"ModuleName":null,"ModuleRecordID":0},{"HtmlName":"AddressTel","Text":"Address & Telephone","Url":"../PhysicalAddress.rl/QuickAddress?moduleName=glbModuleName&moduleRecordID=glbModuleRecordID&sessionID=glbSessionID&company=glbCompanyName","Selected":false,"ModuleName":null,"ModuleRecordID":0},{"HtmlName":"Sendout","Text":"Send outs","Url":"../Sendouts.rl/List?moduleName=glbModuleName&moduleRecordID=glbModuleRecordID","Selected":false,"ModuleName":null,"ModuleRecordID":0},
function fnReboundTabs() {
$('#tabs a').each(function (index) {
var newUrl = jsonTabMetaData[$(this).attr("data-index")].Url;
newUrl = newUrl.replace("glbModuleRecordID", glbModuleRecordID);
newUrl = newUrl.replace("glbModuleName", glbModuleName);
newUrl = newUrl.replace("glbSessionID", glbSessionID);
newUrl = newUrl.replace("glbCompanyName", glbCompanyName);
this.href = newUrl;
});
`
if (firstTimeReboundTabs) {
firstTimeReboundTabs = false;
$("#tabs").tabs({
select: function (event, ui) {
},
cache: true,
event: '<%= (UI.Web.Helper.SessionMaster.OpenTabOnMouseOver) ? "mouseover": "click" %>',
async: false,
ajaxOptions: {
cache: false,
success: function () { },
error: function (xhr, status, index, anchor) {
$(anchor.hash).html(
"Couldn't load this tab. Should you see this error again, please notify admin.");
}
}
});
}
`
Now the problem is this:
When I navigate, the value changes in the URL, but the tab click request is opening into the new screen.
I.e. It is not working as Ajax call.
The Main screen goes and the URL open as a new URL in the browser address bar.
If I'm following this correctly, you want to change the URL of a tab's content when recordId is changed, and reload that tab without reloading the entire page.
This is possible using two methods of your tabs object:
To change the url, use the .tabs("url", index, url) where:
index = the index of the tab you are updating
url = the string of the new URL
To reload the tab's content at any time use .tabs("load", index)
index = the index of the tab you are updating.
Using these together should do what you want. I.e. when you have a new recordId do:
mytabs.tabs("url", i, 'mypage?recordId' + newRecordId)
mytabs.tabs("load", i)
The documentation is here, under the 'methods' tab: jqueryui docs
This is what I've done now:
function fnReboundTabs() {
for (var idx = 0; idx < jsonTabMetaData.length; idx++) {
var newUrl = jsonTabMetaData[idx].Url;
newUrl = newUrl.replace("glbModuleRecordID", glbModuleRecordID);
newUrl = newUrl.replace("glbModuleName", glbModuleName);
newUrl = newUrl.replace("glbSessionID", glbSessionID);
newUrl = newUrl.replace("glbCompanyName", glbCompanyName);
$("#tabs").tabs("url", idx, newUrl)
}
if (isNaN($('#tabs').tabs().tabs('option', 'selected')))
{ }
else {
$("#tabs").tabs("load", $('#tabs').tabs().tabs('option', 'selected'))
}
}
This function will then be called by when the main record has been downloaded at client side - JSON/ AJAX based.