I have a CMS which loads articles using ajax. The article is loaded through a function with some parameters. What I need is: when someone clicks a certain link, it will redirect him to the target page AND launch the function on target page. Is it possible? To be concrete, I have function loadArticle(articleID). When I access the page, there is article list. When I launch function loadArticle, it hides div with article list and shows particular article. So I need some way to call it through link, like: <a onArticlePageLoad="loadArticle(15)" href="./articles">Title</a>
Example: on page.html I have a link which points to page2.html. On click, I need to load page2.html and execute function foo in page2.html
As mentioned by ChristianF you ll need to have an identifier on your link. I have this function:
function hashtagExecute(hashtagstring,action){
if (location.hash==hashtagstring) {
action();
}
}
/*Gets: STRING -- Beggining with '#'
* FUNCTION -- The function to be executed if the above string is present in the url
Then on the link page2 with foo execution
and onload:
window.onload =function (){
hashtagExecute("#foo",foo());
hashtagExecute("#bar",bar());
... //as many different cases you want just remember to actually have those functions :)
}
You could just have a function that executes on page2.html at the bottom of the body or onload.
As people were already saying, you will need some sort of onload event on page2. But it sounds like you want that function being called to change depending on what link was clicked on page1.
Would something like this work:
page1:
page2 case A
page2 case B
page2:
<script type="text/javascript">
window.onload = function foo(){
var case = window.location.search;
if (case == "A") {
functionA();
} else {
functionB();
}
}
</script>
Related
I want to know that how can i create a JavaScript code that must open a new page at click anywhere at website. currently i am using onload script.
<script type="text/javascript">
function open_on_entrance(url,name)
{
window.open('http://realestatepakistan.pk','Real Estate Pakistan')
}
</script>
<body onload="open_on_entrance()"></body
but onload is not effective as it opens very low number of pages. A must must open page script needed fro my web http://pkr.com.pk/.
This code will open the popup when you click anywhere on website.
<script type="text/javascript">
var shouldOpenWindow = true;
function open_on_click(url,name) {
if (shouldOpenWindow) {
window.open('http://realestatepakistan.pk','Real Estate Pakistan');
// if you want that only on first click the popup must be opened, and not on any subsequent clicks, then do this
shouldOpenWindow = !shouldOpenWindow;
}
}
</script>
<body onclick="open_on_click()"></body>
Place this code in a script tag right before your closing </body> tag that way it will load after the dom has loaded. You will notice that I removed your parameters from your function because you were not using them inside of your script. Make sure you change the values of window.open to the values you need for your script.
JavaScript:(live example)
function open_on_entrance() {
window.open('http://bytewarestudios.com','Welcome to Byteware Studios');
}
document.addEventListener("click", function() {
open_on_entrance();
});
If you decide to the add the parameters back in make sure you supply them to your function when you call it.
Example Using Parameters:
function open_on_entrance(url,name) {
window.open(url,name);
}
document.addEventListener("click", function() {
var url = 'http://bytewarestudios.com';
var name = 'Welcome to Byteware Studios';
open_on_entrance(url,name);
});
I create a web app that looks like this:
When i click the run model, i want that the form :"Dashbord", will open.
The JS code:
<script>
window.onload = function () {
function newDoc() {
window.location.href("#http://127.0.0.1:8100/#dashboard");
}
}
</script>
When The "Run Model" button onClick activate the function: newDoc().
The problem is: that in my URL path it is written: http://127.0.0.1:8100/#dashboard
but the 'Dashboard' form is not logged. it stays in the same page.
What should i do?
window.location.href is not a method, it's a property.
Try assigning it instead (also note, I removed the leading # character)...
window.location.href = "http://127.0.0.1:8100/#dashboard";
You also need to move your function outside of the window.onload event...
window.onload = function () {
}
function newDoc() {
window.location.href = "http://127.0.0.1:8100/#dashboard";
}
The onload event handler is generally only needed when you're dealing with specific elements on the page that won't be available until the page has finished loading.
By putting the newDoc within the onload event, you were effectively hiding it from being used directly by other events.
How do you make a javascript "onClick" and an html "a href" merge into one link? I want that when I click on the link the first step is the "onClick" and the second when the "onClick" is successed you redirected with the "a href" to another page.
First step: onClick="ajaxrequest('/includes/docx/boekenlijst.php', 'docgegevens')
and
Second step: a href="/Raymond_converters/docx/example.php">doc
I hope you can help me but my English is not so good. I'm sorry for that.
Using jQuery, you could try this:
<script type="text/javascript">
$(document).ready(function() {
var call_ajax = true;
$('#alink').click(function(e) {
if (call_ajax) {
e.preventDefault();
// Do AJAX
call_ajax = false;
}
}
</script>
google
It's not simple, because if you let the link do its default action i.e. redirect to its href, the AJAX request won't be triggered.
What you need to do is:
Handle the onclick and cancel the default action by having return false;
When the AJAX request is done (in its success callback method) manually redirect the user to the link href location.
Try to use jquery with a dummy callback:
<a onclick="function1()" >function</a>
function function1(someVariable,function() {
function2(someOtherVariable);
window.location="http://www.yourpage.com/";
})
function function2(someVariable, callback) {
...YUOR CODE HERE
callback();
}
Basically my app work like that :
Index.php manage call to other pages.
Each page contains 2 function onLoad() and onClose() which are redefined in each page
Index.php call the pages and execute the onLoad
Basically, i preload the page in a hidden div, i execute the predefined $.onLoad function and the i put the loaded content into a visible div
My question is only about the onLoad() scope, i want to remove code from the jquery eval seq when i change page, but i need a way to define it in the page.php file without knowing the container
The eval/seq is probably the eval queue of jquery, can't found info about that, just obtain with firebug...
In 2 words, i would like to be able to remove injected dom and script when i change context (pages)
index.php
$.onLoad = function() {}
$("#blabla").onChange(function() {
$("#data_iframe").load(chaineUrl, {}, function(responseText, textStatus, XMLHttpRequest) {
$("#data_iframe").ready(function() {
$("#data_div").children().remove();
$.onLoad();
$("#data_iframe").children().hide().appendTo($("#data_div")).show(); $("#data_iframe").children().remove();
$.onLoad = undefined;
}
});
});
page.php
<script>
$.onClose = (function(){
$('#container').blablabla();
//alert("test");
});
$.onLoad = (function(){
$('#container').blablabla();
}
</script>
The problem is that the jquery EVAL/SEQ keep growing each time a page is opened
and there are some side-effect like calling multiple time a function...
I guess its a scope problem so can you help me correct my code
(i've try with or without the $ but doesn't change anything)
just for information
<div id="data_div"></div>
<div id="data_iframe"></div>
Thanks
I usually use $(document).ready instead of onload. No need to do the "onload" trigger in load complete function. The ready function within the page.php will do the same job.
And how about direct load into data_div?
index.php
$("#blabla").onChange(function() {
$("#data_div").load(page.php);
});
page.php
<script>
$(document).ready(function() {
$('#container').blablabla();
});
</script>
I didn't try page close function before, may be it is not what you want. But you can try:
<script>
$(document).ready(function() {
$('#container').blablabla();
$(window).unbind('unload');
$(window).unload(function(){
$('#container').blablabla();
//alert("test");
})
});
</script>
So I'm trying to redirect users from html links and element id tags, to other pages with javascript. I've figured out how to do one singular redirect but having trouble writing the code for multiple links heres what I have so far:
HTML:
<head>
<script type = "text/javascript" src="script2.js"></script>
</head>
<body>
NickName
Salestax
W 3 Schools
</body>
</html>
My external script so far for just one link:
window.onload = initAll;
function initAll() {
document.getElementById("redirect").onclick = initRedirect;
}
function initRedirect() {
confirm("Go to Salestax page?");
window.location="salestax.html";
return false;
{
Do I just crank out more functions and change the location value, getElementById value and the onclick value?
A nice thing about onclick events is that if you return false it'll stop the browser from going to the link defined in the HREF. If you return true it'll keep going through with the navigation. You don't need to worry about the window.location in your function if you use this method, which will simplify things a lot. So you can just do:
Salestax
I'll prompt them if they want to continue. They click yes it'll keep going as if they clicked the link normally, they click no it'll stop them from navigating away. This way you don't have to duplicate the link's HREF in both your HTML and javascript.
You could still dynamically bind this, but if you're doing it by ID I don't really see any advantage vs just defining the onclick in the HTML.
First off, unless you're trying to prevent a user from losing changes that they've made on the current page, it's not clear why you would want to create this functionality. But at any rate, here's a standard/basic approach:
window.onload = function() {
document.getElementById("redirect").onclick = redirectConfirmation("Go to Salestax page?");
document.getElementById("redirect1").onclick = redirectConfirmation("Go to Nickname?");
};
redirectConfirmation = function(msg, urlOverride) {
return function() {
if ( confirm(msg) ) {
window.location = urlOverride || this.href || "#"
}
return false;
};
};
redirectConfirmation optionally takes a second parameter which can be used to explicitly set the url that the page is redirected to; otherwise, it will default to the URL specified by the href attribute of the anchor tag being acted upon (and if all else fails, it will fail gracefully with "#").
If you're using a common library, like jQuery, you can simplify your event registration as follows:
$(function() {
$("#redirect").click( redirectConfirmation("Go to Salestax page?") );
$("#redirect1").click( redirectConfirmation("Go to Nickname?") );
});
A far better approach would be to do something like the below - that way the logic for redirecting the user stays reasonably close to the link, and so people looking at the source wont become incredibly confused when the page takes people elsewhere.
Some link
External script:
function initRedirect(message, url)
{
confirm(message);
window.location = url;
return false;
}