link onclick pass object - javascript

What i'm trying to do, is pass the object of the link to my javascript function for an ajax query so I can add a loading image next to the link while it's loading.
I thought of wrapping a div around it with the event.
Is this compliant, and will work with all browsers? It seems to work in the one's I have tested, but I only have the newer versions.
<html>
<script>
blah = function(obj){
alert(obj);
return false;
}
</script>
<body>
<div onclick="return blah(this);">work!</div>
</body>
</html>
What I need to be sure of, will doing the return false; on the parent div of the link make sure that when the link is clicked it will not go to the url?
It doesn't seem possible to pass the object of an actual href=. Maybe i'm wrong?

You are wrong. Currently you are not passing the element to your function, but your div.
You can try this:
<html>
<script>
blah = function(objId){
var linkElement = document.getElementById(objId);
var fakeHref = linkElement.getAttribute('fakehref');
alert(fakeHref);
}
</script>
<body>
<a id="link" href="javascript:blah('link');" fakehref="http://www.google.com/">work!</a>
</body>
</html>
Click here to see a working example: http://jsfiddle.net/wYu5M/

Related

jQuery DOM manipulation won't get the href attribute

Using this code, I am trying to get the href attribute of a link and make a new link of that attribute. Why my link does not work, I don't know. It shows something like this:
404 - The page cannot be found
Sorry, we cannot find the page.
It might have been removed, had its name changed, or is temporarily
unavailable.
Please check that the Web site address is spelled correctly.
Or go to our home page, and use the menus to navigate to a specific
section.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
text ="";
text +=$("#w3s").attr("href");
document.getElementById("demo").innerHTML="<a href=\'text\'>W3Schools.com</a>";
});
});
</script>
</head>
<body>
<p>W3Schools.com</p>
<button>Show href Value</button>
<p id="demo"></p>
</body>
</html>
If I use:
document.getElementById("demo").innerHTML = text;
It shows http://www.w3schools.com. Why doesn't the link go to this site?
If you're going to use jQuery to traverse and manipulate the DOM, use jQuery. If you're going to use vanilla javascript... do that. Just try not mix them! Makes things easier in the long run. Anyway, you could do something like this to set the href attribute;
$('#demo').attr('href', text);
or
document.getElementById('demo').href = text;
btw this
"<a href=\'text\'>W3Schools.com</a>"
Is totally not how you do string concatenation in javascript. Should be
'W3Schools.com'

How can I dynamically add a URL into javascript, to get a second page's div to display on the first page?

Ok, so this what I have that works, for the starting code:
$(document).ready(function(){
$('.currentpagediv').load('http://theurl.com/page2/somethingsomewhere.html .secondpagedivclass');
});
What this does, is find the div on the current page, <div class="currentpagediv">, and add in the second page (http://theurl.com/page2/somethingsomewhere.html) div <div class="secondpagedivclass">
So for example, say I have a page like this:
<html>
<body>
<div class="currentpagediv">
</div>
</body>
</html>
then what my code above does is make this:
<html>
<body>
<div class="currentpagediv">
</div>
<div class="secondpagedivclass">
</div>
</body>
</html>
Which is just what I want it to do. So I have the functionality I need.
BUT, the problem is that I need the URL portion to be dynamic.
For example, the current page is always http://theurl.com/page1/[a path].html, and the new page that I need to fetch the div is always http://theurl.com/page2/[the same path].html
So basically, I need to get the URL, and change ONLY /page1/ to /page2/, while retaining this. That way I can run on all the pages of the domain and it will add the section from page2 into page1.
Like this:
Original page http://theurl.com/page1/365743668.html:
<html>
<body>
<div class="currentpagediv">
</div>
</body>
</html>
Second page http://theurl.com/page2/365743668.html:
<html>
<body>
<div class="secondpagedivclass">
</div>
</body>
</html>
NEW ORIGINAL PAGE THAT THE SCRIPT IS RUNNING ON (still http://theurl.com/page1/365743668.html):
<html>
<body>
<div class="currentpagediv">
</div>
<div class="secondpagedivclass">
[THE INFO FROM PAGE `http://theurl.com/page2/365743668.html`]
</div>
</body>
</html>
I've tried many things, but they did not work.
Here is my attempt which does not work:
function changeURL() {
var theURL = location.pathname.toString();
var newURL = theURL.replace("/page1/", "/page2/");
}
$(document).ready(function(){
$('.currentpagediv').load(changeURL() '.secondpagedivclass');
});
In the code above, I tried to:
fetch the url of current page
convert the url to a string, so I could
modify the url, and then
add the function changeURL() in place of where the URL went after .load('
Please note I want to make it work using jquery and this method (NOT ANOTHER METHOD) because I'm also trying to learn, and giving me something completely different is not going to help me learn how to do this method.
You're just missing the string concatenation operation, +.
$('.currentpagediv').load(changeURL() + ' .secondpagedivclass');
Don't forget the space before .secondpagedivclass.
The changeURL function needs to return the result:
function changeURL() {
var theURL = location.pathname;
var newURL = theURL.replace("/page1/", "/page2/");
return newURL;
}
You don't need to use .toString(), since the pathname is a string.

Passing Variables to a new page without query string

Is there a way to pass a variable from 1 page that has a popup iframe on it to the popup (iframe) on client side button click without using query strings? my variable is too big to use a query string?
Another way to ask the same question
Is there a way to pass a variable from 1 page to another page on client side button click without using query strings? my variable is too big to use a query string?
This is for use on IE 8 and higher html 5 storage will not work
If your two pages are on the same domain, you can use HTML5 LocalStorage. It's a JavaScript object that can hold strings up to around 5MB or so.
If you need to store other data than strings, you can use JSON.stringify() and JSON.parse() to convert between your datatypes and strings.
Without HTML5
You have the option to use cookies and get/set them with JavaScript, otherwise there are many LocalStorage polyfills to choose from which should be able to work in restricted environments.
You can call a function that exists on the child window from the parent and pass data from parent to child.
I apologize for this very basic example, where we pass whatever is in the variable dummy_txt from the parent window to the child window.
Parent (parent.htm)
<html>
<body>
<input id="btn" type='button' value='Open Window' />
<script>
var child_win;
document.getElementById("btn").onclick = function () {
child_win = window.open("child.htm");
dummy_txt = 'blah blah blah blah blah...'
setTimeout(function () {
child_win.document.write(dummy_txt);
// Hey, you can do child_win.my_own_function(dummy_txt)
}, 2000);
}
</script>
</body>
</html>
Child (child.htm)
<html><body></body></html>
Not the cleanest approach, but you can also do something similar to what Nabil suggested by having the child iframe call a javascript function via window.parent
var myValueFromParent = window.parent.SomeFunctionOnParentFrame();
I have used this method not to pass a value from parent to child but rather have child signal parent.
Try the following:
Main Page
<html>
<head>
<title>JS Iframe Test</title>
</head>
<body>
<iframe id="frame" src="js-test-iframe.htm"></iframe>
<br /><br />
<input type="text" id="toInject" /> <button id="send">Send To Iframe</button>
<script type="text/javascript">
document.getElementById('frame').onload = function(){
document.getElementById('frame').contentWindow.doSomething("Hi");
}
var btn = document.getElementById('send');
btn.addEventListener("click", function(){
var text = document.getElementById('toInject').value;
document.getElementById('frame').contentWindow.doSomething(text);
// window.frames[0].doSomething(text); // An alternative
}, false);
</script>
</body>
</html>
IFrame Page (js-test-iframe.htm)
<html>
<head>
<script type="text/javascript">
function doSomething(text)
{
document.getElementById('valueHere').innerHTML = text;
}
</script>
</head>
<body>
<div id="valueHere">Default Text</div>
</body>
</html>
Do keep in mind that you need to wait for the iframe to load before you manipulate or pass any variables to it. Also note that this only works if you are sourcing a page within the same domain.

Load html file passed as parameter using in jquery?

I am a newbie in jquery. I am trying to create a page, which loads the contents without reloading the page. In my test page, i have 2 links i.e. link 1 and link 2. When the default page is clicked. It just says 'Hello'. When clicked on either of link, it shoud say 'Hello link1' (if link1 is clicked), 'Hello link2' (when link2) is clicked. Link1 contents(html) is in link1.html and link2 contents is in link2.html file. Whenever either of the link is clicked, it should pass name of the link's html page as parameter.
here is what i did:
<head>
<title>Ajax Practice</title>
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function test(filename){
alert(filename);
var b = $("a").attr("title");
alert(b);
//$('#menuContents').load($(filename)).fadeIn("slow");
//$('#menuContents').load('link1.html').fadeIn("slow");
$('#menuContents').load(b).fadeIn("slow");
});
});
</script>
</head>
<body>
<div id="page-wrap">
<div id="menu">
link1
link2
</div>
<div id="menuContents">
<h1>Hello!</h1>
</div>
</div>
</body>
</html>
The problem is if i just pass the name of html file as parameter, it doesn't get read as string value instead it get's read as object. The first alert in code will give [object Object] message. I can read the text from title of the link by using .attr attribute and can load the page using .load attribute. I can also change the contents of page by directly giving html page name in .load attribute (commented out in code).
Can anyone tell how i can pass name of the html page as parameter rather than hardcoding or reading through title?
Thank you.
If you are using server side scripting such as PHP you may want to look into jQuery's $.ajax()
just remove the ready() and click() function, leave the test function alone
function test(filename){
alert(filename);
//$('#menuContents').load($(filename)).fadeIn("slow");
//$('#menuContents').load('link1.html').fadeIn("slow");
$('#menuContents').load(filename).fadeIn("slow");
}
ps. in fact when you define a function in jquery click function, the function can not be called outside, you need to define the test function in gloal, then you can call it in anywhere include a.href
There is a nice way to do this below
<html>
<head>
<title>Ajax Practice</title>
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function (e){
$('#menuContents').load($(this).attr('href')).fadeIn("slow");
e.preventDefault();
return false;
});
});
</script>
</head>
<body>
<div id="page-wrap">
<div id="menu">
link1
link2
</div>
<div id="menuContents">
<h1>Hello!</h1>
</div>
</div>
</body>
</html>
$("a").click(function test(filename){
filename is in fact the event object. Please check out http://api.jquery.com/click/
Besides, in your code:
link1
will call the function test, so you can define this function in your javascript code
function test(filename){
alert(filename)
// your code here
}
Try the example here http://jsfiddle.net/WUBsq/
There are many cleaner ways you can have, for instance:
<a class="refresh" data-title="link1.html">click here</a>
...
$(document).ready(function(){
$('a.refresh').click(function(){
var title = $(this).attr('data-title');
alert(title);
// your code here
})
})
Try here : http://jsfiddle.net/WUBsq/3/

simple javascript not working

I've been having trouble with javascript. I don't think its my code but possible some outside factor. I've tried the following code on chrome and firefox and I can't get the alert to pop up. Nothing happens when I click the link. The code below is obviously not on my site, but I'm just using it as an example as to why other parts of my javascript aren't working.
<html>
<head>
<script language="javascript">
function art() {
alert("jdsklfs");
}
</script>
</head>
<body>
<a href='#'>click</a>
</body></html>
Well, try calling it ;~)
function art() {
alert("jdsklfs");
}
window.onload = art; //<= now the function will execute on page load
or provide the href with an id (<a href='#' id='artclick'>click</a>) and assign a click handler to it on load
function art() {
alert("jdsklfs");
}
window.onload = function(){
document.getElementById('artclick').onclick = art;
}
You are not calling the art function.
Simplest, but dirtiest is to have:
click
try adding
onclick="art();"
to your anchor tag
Change the
<a href='#'>click</a>
to
click
art() isn't tied to the link in any discernible way.
Change your a tag to:
click

Categories

Resources