I have a below anchor as below
<a onclick="return getFile('/log/sample.log');" href="/log/sample.log" target="_blank"> sample.log </a>
Because at my server, the log directory in href may be not correct. So the function "getFile" would change the href to the correct one after asking the server.
The first click always failed since the link was not correct, then after AJAX process in getFile was finished and the correct href was given, the clicks later on was ok.
The problem is how I forcefully let html wait ever at the first click until the href is changed, then do the query on the server.
Thanks in advance.
I guess my current way could be not in the correct direction by using "onclick" to implement the idea.
You want something like this
$(function() {
//assume you tagged all anchors you want to do this for with class=adjustlink
$('a.adjustlink').click(function(e) {
var thisAnchor = $(this); //save reference for later use
//this will either be true (see below) or undefined (falsy)
if(thisAnchor.data('myapp.linkHasBeenTested')) {
return; //continue on
}
// Stop the link from being navigated (the default for this event)
e.preventDefault();
//I'm assuming this is fetched as text but could just as well be JSON or anything else
$.get('/LinkAdjustment/', thisAnchor.attr('href')).done(function(result) {
thisAnchor.attr('href', result); //set the href
thisAnchor.data('myapp.linkHasBeenTested', true);
thisAnchor.trigger('click');
});
});
});
As an interesting side-note. You might be attempting to do something similar to the way REST is intended to be done. You might consider, first fetching a resource that will tell you up-front what the correct links are.
I would recomend setting the href to # initially. And in your getFile, set the href to the correct value and then programatically click the 'a' on success of your ajax
You will need to find the element to do this. It can either be done by setting an id and then using document.getElementById(), or would be easier to do do this using Jquery selectors, and it even has a .click() you can call after.
If you want persist with this flow make your ajax call synchronous, it will forcibly wait.
But this flow is not suggested, I would have rather updated these hrefs on page load or would have set a default url to my server page, which would then redirect to right log file
Related
I have this JQuery code working however I need to know whether how to actually get the URL executed from the tags selected.
$("link, script, style, a, img").each(function () {
$(this).load(function () {
// get the URL and log it
console.log("Intercepted HTTP Event");
});
});
First thing I need to do it to get the actual URL during the load.
Next thing I may need to do is to actually catch before the load event happens, I mean before an image or link is loaded for example. Also, I need to modify the URL of the event that will be executed, for example, img tag has src="/somewhere/image.png" I mean, this will cause a GET /somewhere/image.png I may need to change it to GET/otherplace/image.png
Any ideas how to achive any of these?
$(this).load() will fire after the contents of the element have been loaded. So you may be able to grab the URL by doing $(this).attr("src") or $(this).attr("href"), but it's already too late to stop the HTTP requests from going out.
AFAIK, with modern browsers, there's no way for JavaScript to prevent assets from being loaded in the first place. At best, you may be able to change images and stylesheets after the page has been loaded, by changing the src attributes. If you do this, make sure that $(this).load() doesn't go into an infinite loop. (<a> links are less of a problem. Nothing is loaded, so just change the href attribute.)
.attr('src')
http://api.jquery.com/attr/
One way to approach this problem would be to have some dummy links/hidden controls with the source of your external resource and once the page loads you go through all such controls and then create the respective html elements, update the src attribute and then append it to the dom.
Dummy Controls:
<input type="hidden" source="/my/source/a.jpg" nodeType="img" class="specialControls"/>
<input type="hidden" source="/my/source/1.js" nodeType="script" class="specialControls" />
and the javascript
$(document).ready(function()
{
$(".specialControls").each(function(){
var elementType=$(this).attr("nodeType");
$('<'+elementType+'/>').attr('src', $(this).attr("source"))
.insertAfter($(this))
});
});
Hope this helps.
I was having many problems trying to find the reason of why my ajax function was not working on Safari, Chrome and sometimes Firefox, but worked very well on IE. I made a little change, and everything start working perfect (in every browser), but I still dont know why, and I want to find out the main reason of this.
I had an Ajax function respuestas() which insert some data on a database. This function is called by some links like this: <a onclick="respuestas()" href="link.html">LINk </a>. So when I click on the link, the function takes the proper information and inserts it on the database and then go to link.html. Again, this only worked for IE.
I insert an alert(xml.responseText) to see the response that i was having. Safari, fireforx and chrome returns an empty alert.
I was tired of changing pages everytime I wanted to test my function, so I add a button calling my function (without going to another webpage) and IT WORKED!. Now, I have something like this: <a onclick="respuestas()" href="#">LINK </a> and put window.location.href="link.html" inside my ajax function, so the change of pages occur after the ajax response is completed, and it is working very well.
But I do not entirely understand why this works and the other way does not.
This because the link element has also it's default listener. So, to prevent any extra action on click, you should prevent default action. The simple way to do this is to return false on click.
<a onclick="respuestas(this); return false;" href="link.html">LINk</a>
And your respuestas in easiest way should be like this:
function respuestas(link) {
/* do what you need here */
window.location.href = link.href;
}
This is pretty primitive, but I believe you'll get the idea.
What's happening here is that your browser was navigating to the next page before repusetas() was able to execute. In order to ensure that your script is going to fire before the browser follows the link, you need to take control of the click event. In jQuery it works like this:
$('a').bind( 'click', function( event ){
event.preventDefault();
repuestas();
var href = $(this).attr('href');
window.location.href = href;
});
Try this Jquery code
function respuestas()
{
$.ajax({
type: "post",
url: "insert.php?data="+data,
success : function(data){
window.location.href="link.html";
},
error : function(){
alert("Could not ");
}
});
}
Let's say, in website, I want to display the notice message block whenever people click any of the link at my website more than x number of times. Is that possible to count with javascript and display the notice message block ? And can we count the refresh times also ? Or can it be only done with server side language like php ? Please kindly suggest. Thank you.
With Regards,
To do something when any link is clicked is best done with JQuery's live:
Description: Attach a handler to the
event for all elements which match the
current selector, now and in the
future.
$('a').live('click', function() {
// Live handler called.
});
Even if you add more links in run time, this will take care of it.
For counting refreshes I would do it with ajax calls on window.load event, or if you want to use new tech - store it locally with Html5. :-)
You can do that on the client. However, this will be limited to the browser. The simplest will be to store this information in cookies on the client. For instance with jQuery you could simply intercept clicks like that:
$("a").click(function() {
var clickedUrl = $(this).attr('href');
// Here you update the cookie for the count of clicks for that A URL
});
I would either count page refreshes serverside or probably call an ajax function to update the count when the page loads.
If you want to count clicks you may need to bind an event to each link and then for each indivisual button store the number of clicks in global variables...
You could register each click event on the document by using:
$(document).click(function()
{
// Check the number in the cookie and add another
// click to the cookie
});
Then you could use the jQuery cookie plugin to store that value and check it each time there is a click (in the function above).
here's the cookie plugin: https://github.com/carhartl/jquery-cookie
I threw together a quick example. If you're not worried about doing this from page to page then you don't need cookies, just store it in a variable:
http://www.webdesignandseo.net/jquery/clickcount/
I have a piece of code in jQuery that I use to get the contents of an iFrame after you click a link and once the content is completed loading. It works, but I have a problem with it repeating - at least I think that is what it is doing, but I can't figure out why or how.
jQuery JS:
$(".pageSaveButton").bind("click",function(){
var theID = $(this).attr("rel");
$("#fileuploadframe").load(function(){
var response = $("#fileuploadframe").contents().find("html").html();
$.post("siteCreator.script.php",
{action:"savePage",html:response, id: theID},
function(data){
alert(data);
});
});
});
HTML Links ( one of many ):
<a href="templates/1000/files/index.php?pg=0&preview=false"
target="fileuploadframe" class="pageSaveButton" rel="0">Home</a>
So when you click the link, the page that is linked to is opened into the iframe, then the JS fires and waits for the content to finish loading and then grabs the iframe's content and sends it to a PHP script to save to a file. I have a problem where when you click multiple links in a row to save multiple files, the content of all the previous files are overwritten with the current file you have clicked on. I have checked my PHP and am pretty positive the fault is with the JS.
I have noticed that - since I have the PHP's return value alerted - that I get multiple alert boxes. If it is the first link you have clicked on since the main page loaded - then it is fine, but when you click on a second link you get the alert for each of the previous pages you clicked on in addition to the expected alert for the current page.
I hope I have explained well, please let me know if I need to explain better - I really need help resolving this. :) (and if you think the php script is relevant, I can post it - but it only prints out the $_POST variables to let me know what page info is being sent for debugging purposes.)
Thanks ahead of time,
Key
From jQuery .load() documentation I think you need to change your script to:
$(".pageSaveButton").bind("click",function(){
var theID = $(this).attr("rel");
var lnk = $(this).attr("href");//LINK TO LOAD
$("#fileuploadframe").load(lnk,
function(){
//EXECUTE AFTER LOAD IS COMPLETE
var response = $("#fileuploadframe").contents().find("html").html();
$.post("siteCreator.script.php",
{
action:"savePage",
html:response,
id: theID
},
function(data){alert(data);}
);
});
});
As for the multiple responses, you can use something like blockui to disable any further clicks till the .post call returns.
This is because the line
$("#fileuploadframe").load(function(){
Gets executed every time you press a link. Only add the loadhandler to the iframe on document.ready.
If a user has the ability via your UI to click multiple links that trigger this function, then you are going to run into this problem no matter what since you use the single iframe. I would suggest creating an iframe per save process, that why the rendering of one will not affect the other.
I'm trying to make my site respond correctly to the back button. I've saved that hash of what I want it to do, but I don't know the hook for jQuery to be able to tell when the hash changes. It's not .ready(), because the page doesn't reload. What do I use?
Edit for a bit of clarity:
I'm using an iframe, so I can't tell when someone clicks a link. It's on the same subdomain, so i'm able to see it's filepath, and am saving it so you can bookmark. Unfortunately by saving it as a hash, my back button now fails to reload, which fails to reload the iframe, so my back button is essentially broken. If there was a way to tell when the URI changes, I could check it against the iframe address and change it if they don't match.
All I need is a way to check if the URI has changed. Is there a .change() for the URI? Something along those lines?
You can try History Event plugin.
After the document is ready, you examine the hash and alter the page appropriately.
I don't know the hook for jQuery to be able to tell when the hash changes
You can intercept your hash anchors' click events and respond appropriately as opposed to waiting for a "the hash has changed" event (which doesn't exist).
Some approaches create a "the hash has changed" event by inspecting window.location.hash on a timer.
Ben 'the cowboy' Alman wrote a cross platform plugin for hash changes
http://benalman.com/news/2010/07/jquery-hashchange-event-v13/
I dont know if your using it inside of the iframe or what, but if you were to use it outside the iframe it would be like
$(function(){
$(window).hashchange(function(){
//Insert event to be triggered on has change.
changeIframeContent(window.location.hash);
})
})
You should have a look at the solution of Ben Nadel which is in binding events to non-DOM objects.
There is'nt a buitin way to watch for hash changes, in firefox you could use watch method, but as far as I know it isnt default, so you can hack it writing something like (see below)
function setWatchHashChanges(functionObject)
{
if(window.location.watch)
{
window.location.watch('hash', function(e){functionObject(e);return e;});
} else {
if(!setWatchHasnChanges.hash)
{
setWatchHasnChanges.hash = window.locaton.hash;
} else {
setInterval(function(){
if(setWatchHasnChanges.hash!== window.locaton.hash)
{
setWatchHasnChanges.hash = window.locaton.hash;
functionObject(setWatchHasnChanges.hash);
}
}, 100);
}
}