I am working on this javascript code and when is goes in the head and I refresh it goes to a 404 page.
Please can someone help.
<script type="text/javascript">
function recordOutboundLink(link, category, action) {
try {
var myTracker = _gat._getTrackerByName();
_gaq.push(['myTracker._trackEvent', category, action]);
setTimeout('document.location = "' + link.href + '"', 100)
} catch (err) { }
}
$(document).ready(function () { $('#myid').click(recordOutboundLink(this, 'regular xxxxx', 'xxxx.example.com')); });
</script>
You're trying to register the result of recordOutboundLink() as a click handler, causing the function to run first, evaluating window.href as the page to redirect to. The value of window.href is typically undefined, so the browser will try to redirect to http://undefined or something similar.
Instead, you should only execute the function when something is clicked, like so:
$(document).ready(function () {
$('#myid').click(function() {
recordOutboundLink(this, 'regular xxxxx', 'http://xxxx.example.com');
return false;
});
I believe the Google docs mention something like this:
tada click me
Edit
Your locations should always be absolute, i.e. start with http://, https:// or simply //.
You need to pass the complete url to the method, ie, with the http:// part
so either use:
.click(recordOutboundLink(this, 'regular xxxxx', 'http://xxxx.example.com'))
or
.click(recordOutboundLink(this, 'regular xxxxx', '//xxxx.example.com'))
Related
I want to change the href attritube of link on this part of the code
I'm using this code to change the href attribute
$('a').attr('href', function() {
return this.href + update.response;
});
I tried to make a variable in this function
function update(response) {
$('#response').html(JSON.stringify(response.quoteText));
var okay = $('.author').html(JSON.stringify(response.quoteAuthor));
}
But I can't seem to access it from outside scope.
Basically I want to link to Wikipedia author page by adding the $('.author') name at the end of link.
Added the update.response to the end of link but I get undefined
CodePen Link
Just update the href at the point you get your response.
eg.
http://codepen.io/anon/pen/rrJYbJ
var a = $('a'),
wiki = a.attr('href');
function update(response) {
$('#response').html(JSON.stringify(response.quoteText));
$('.author').html(JSON.stringify(response.quoteAuthor));
a.attr('href',wiki + response.quoteAuthor);
}
Where is response coming from?
did you declare it as a global variable? eg var response;
if so then just place this code:
$('a').attr('href', function() {
return this.href + response; // you dont need update.response just response
});
after wherever you're calling update();
There's some erros in your code:
Where response came from?
You should update link href after receive data from api.
You can try to alter your code like this:
And js:
function update(response) {
$('#response').html(JSON.stringify(response.quoteText));
$('.author').html(JSON.stringify(response.quoteAuthor));
$('a').each( function () {
var newHref = $(this).data('data-base-href')+response.quoteAuthor;
$(this).attr('href',newHref );
});
}
Ok, so I need some insight into working with History.js and jQuery.
I have it set up and working (just not quite as you'd expect).
What I have is as follows:
$(function() {
var History = window.History;
if ( !History.enabled ) {
return false;
}
// Capture all the links to push their url to the history stack and trigger the StateChange Event
$('.ajax-link').click(function(e) {
e.preventDefault();
var url = this.href; //Tells us which page to load
var id = $(this).data('passid'); //Pass ID -- the ID in which to save in our state object
e.preventDefault();
console.log('url: '+url+' id:'+id);
History.pushState({ 'passid' : id }, $(this).text(), url);
});
History.Adapter.bind(window, 'statechange', function() {
console.log('state changed');
var State = History.getState(),
id = State.data.editid; //the ID passed, if available
$.get(State.url,
{ id: State.data.passid },
function(response) {
$('#subContent').fadeOut(200, function(){
var newContent = $(response).find('#subContent').html();
$('#subContent').html(newContent);
var scripts = $('script');
scripts.each(function(i) {
jQuery.globalEval($(this).text());
});
$('#subContent').fadeIn(200);
});
});
});
}); //end dom ready
It works as you'd expect as far as changing the url, passing the ID, changing the content. My question is this:
If I press back/forward on my browser a couple times the subContent section will basically fadeIn/fadeOut multiple times.
Any insight is appreciated. Thanks
===================================================
Edit: The problem was in my calling all of my <script> and Eval them on each statechange. By adding a class="no-reload" to the history controlling script tag I was able to do:
var scripts = $('script').not('.no-reload');
This got rid of the problem and it now works as intended. Figure I will leave this here in case anyone else runs into the same issue as I did.
The problem was in my calling of all of my <script> and Eval them on each statechange. By adding a class="no-reload" to the history controlling script tag I was able to do:
var scripts = $('script').not('.no-reload');
This got rid of the problem and it now works as intended. Figure I will leave this here in case anyone else runs into the same issue as I did.
I have a function that loads content into a div with Jquery. I'm trying to add to my function, the ability to set the height of the div to fit the content that I'm loading to it. I've tried several variations of the height() function and I've looked around at other people's code, but t I don't think I really understand how to incorporate that to my particular. Here's the function. It also has some code to update the URL. contentarea is the div where everything gets loaded and the div that needs resizing.
//Jquery loader
function getHash() {
return window.location.hash
}
$("a").on("click", function (e) {
var page = this.href.replace("#", "") + ".html",
hash = $(this).prop("hash");
$('#contentarea').load(page, function () {
if (page.match("home.html")) {
history.pushState('', document.title, window.location.pathname);
}
else {
location.hash = hash;
}
});
e.preventDefault();
});'
Any help would be appreciated!
UPDATE: I updated the code with your help, but it's not really working. I figured I would add a div called content inside of contentarea, and use a callback function. What am I doing wrong?
'
$('#contentarea').load(page, function () {
if (page.match("home.html")) {
history.pushState('', document.title, window.location.pathname);
} else {
location.hash = hash;
}
}, function () {
$('#contentarea').height($('#content').height());
});
'
The documentation of the .load() provide a callback when the function is completed
JQuery doc
$('#contentarea').load(page, function(){},function(){})
The second function is called when the funciton load is completed.
You need to call callback function after content is loaded.
jQuery('#contentarea').load('externalpage.php', function() {
jQuery('#contentarea').height(jQuery('#content').height());
});
This should be quite simple but I'll be darned if I can work it out. Just trying to get a div to display while my ajax is processing and then hide once done (I've put a sleep in there purely to test its working as locally it loads so fast I'm not sure if its working or not)!
The html page has this code in the script: -
$(document).ready(function(){
$("#loadingGIF").ajaxStart(function () {
$(this).show();
});
$("#loadingGIF").ajaxStop(function () {
window.setTimeout(partB,5000)
$(this).hide();
});
function partB(){
//just because
}
var scenarioID = ${testScenarioInstance.id}
var myData = ${results as JSON}
populateFormData(myData, scenarioID);
});
There is then a div in my page like so (which I can see in the source of the page just hidden): -
<div id="loadingGIF" ><img src='${application.contextPath}/images/spinner.gif' height="50" width="50"></div>
The ready code then goes off and calls this: -
function populateFormData(results, scenarioID) {
$table = $('#formList')
for(var i in results){
var formIDX = (results[i]["forms_idx"])
var formID = (results[i]["form_id"])
appendSubTable(formIDX, scenarioID, $table, formID);
}
}
Which references this multiple times calling several AJAX posts: -
function appendSubTable(formIDX, scenarioID, $table, formID) {
var $subTable = $table.find("#" + formIDX).find('td:eq(1)').find("div").find("table")
var url = "**Trust me this bits OK ;) **"
$.post(url, {
formIDX : formIDX, scenarioID : scenarioID, formID :formID
}, function(data) {
$subTable.append(data)
}).fail(function() {
});
}
Any pointers gratefully received...
Interestingly I bunged some alerts into my ajaxstart and stop and neither show up ever so I'm missing something obvious :S When I check the console in firefox I can see that all my POSTs are completing....
You should probably add the Ajaxstart and stop global event handlers to the document node like this
$(document).ajaxStart(function () {
$("#loadingGIF").show();
});
I realized my problem, I needed to register the ajaxstart and stop to the document not the div!
So instead of this: -
$("#loadingGIF").ajaxStart(function () {
$(this).show();
});
I now have: -
$(document).ajaxStart(function () {
$("#loadingGIF").show();
});
I assume this is because its the document that the ajax is running against not the div although my understanding there may not be 100% accurate at least this works so please tell me if I've misunderstood this! :)
#jbl, thanks for this pointer I did this to also leave the notification on screen for a few more moments just to make sure everything is loaded.
I'm no javascript wiz, but am a bit puzzled as to how this is working in three major browsers, but not Safari... is there something wrong with this code? Basically I'm just using this in conjunction with a php/mysql callback at the given url to track link clicks.
Drupal.behaviors.NodeDownloadCounter = function() {
$('a.ndc-link').click(function() {
$.post('http://www.pixeledmemories.com/node-download-counter/log/' + this.name);
return true;
});
};
Using Drupal behaviors here instead of
$(document).ready(function() {
(correct Drupal method) but I've tried it both ways and it doesn't make a difference.
I've also tried removing "return true", but with no effect.
Okay, further testing reveals that having the click trigger an alert DOES work in Safari:
$('a.ndc-link').click(function() {
alert('testing (ignore)');
$.post('http://www.pixeledmemories.com/node-download-counter/log/' + this.name);
return true;
});
But still nothing being logged to mysql. Here is my callback function:
function node_download_counter_log($nid)
{
global $user;
$timestamp = time();
$title = db_result(db_query("SELECT title FROM {node} WHERE nid = %d", $nid));
db_query("INSERT INTO {node_download_counter} (nid, title, download_count, last_download, last_uid) VALUES (%d, '%s', %d, %d, %d)
ON DUPLICATE KEY UPDATE download_count=download_count+1, last_download = %d, last_uid = %d", $nid, $title, 1, $timestamp, $user->uid, $timestamp, $user->uid);
db_query("INSERT INTO {node_download_counter_log} (nid, title, uid, timestamp) VALUES (%d, '%s', %d, %d)", $nid, $title, $user->uid, $timestamp);
}
Sounds like the problem is the browser is changing the page before the data post can be finished. You can try adding return false to see if it starts working then. If it does, you are going to need to add a short delay before following the link.
UPDATE:
Since it works try adding the following before "return true;"
if(jQuery.browser.safari){
setTimeout("window.location.href= '"+this.href+"'",500);
return false;
}
Okay, based on our conversation on comments above, try
$('a.ndc-link').click(function() {
var href = this.href;
$.post('http://www.pixeledmemories.com/node-download-counter/log/' + this.name,
function() {
window.location.href = href;
}
);
return false;
});
Firs,t you have to be careful not to attach your handler more than once to each 'a.ndc-link', one way to do it is to tag the elements with a custom class.
Drupal.behaviors.NodeDownloadCounter = function() {
$('a.ndc-link:not(.node-download-counter-processed)').addClass('node-download-counter-processed').click(function(event) {
// ...
});
};
One reason I see for this not to work is that, because it closes the page to open the link target, Safari will cancel the $.post request before it is actually sent to the server. Returning false and calling event.preventDefault (event being the first argument of your event handler) should prevent this from happening but will also prevent the browser to actually load the link's target. One way to solve this is to defer the page change until the POST request is complete.
Drupal.behaviors.NodeDownloadCounter = function() {
$('a.ndc-link:not(.node-download-counter-processed)').addClass('node-download-counter-processed').click(function(event) {
var link = this;
event.preventDefault();
$.post('http://www.pixeledmemories.com/node-download-counter/log/' + this.name, function() {
window.location.href = link.href;
});
return false;
});
};
But this will only works if there is no error in the POST request.
A better solution would be to hijack the server-side handler for the link target to add the click logging and then call the original handler.