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/
Related
Open JavaScript:- this code isn't editable as it is locked by the Host! So also I can't add any selector inside it!
But I can add another code outside of it. Like:- <ex ex="ex">Open JavaScript</ex>
So, I want to create a <script src="/javascript.js"></script> by fetching the URL from Open JavaScript.
They also didn't allow PHP there, otherwise I could do it myself. There is only one way to do it via JavaScript.
And I don't want to add the script inside <head> tags! It should be in the footer (<div class="body-footer"> Here </div>). There are not only one JavaScript link in the page, there are so many JavaScript links. So also I can't use $("a[href$='.js']");. Its became more tougher for me.
So how can I do this using JavaScript or jQuery?
Here is my implementation, where <script> tag is added before <a> with value of href.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var hrefValue = $("div#test a").attr("href");
$("div#test a").before("<script src='"+hrefValue+"'><\/script>");
console.log($("#test").html());
});
});
</script>
</style>
</head>
<body>
<div id="test">
Open JavaScript
</div>
</br></br>
<button>CLICK it, to add href value of anchor tag to newly created sibling element</button>
</body>
</html>
Having two simple htmls, on click of any href in first html, redirect to second html and do something on all obj of class 'clazz':
first html:
<body>
<a class="link" id="1" href="display.html" >flower 1</a>
<a class="link" id="2" href="display.html" >flower 2</a>
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<script src="js/script.js"></script>
</body>
second:
<body>
<img class ="clazz" id="1" src="https://">
<img class ="clazz" id="2" src="https://">
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<script src="js/script.js"></script>
</body>
js:
$(document).ready(function() {
$('.link').on('click', function( event )
{
$(".clazz").each(function() {
alert("hey");
});
});
});
Although the code is simple, something weird happens..
The .each on clazz is never invoked. When moving the .each section out of link.onClick - it shows the alerts so I assume the problem is not unrecognized class 'clazz' of the second html in the js. What else could it be?
Even though you have the same javascript file js/script.js in both html.
each page/html request will call each javascript file differently.
In your first html you have
a.link which will be invoked on click but don't have a.class.
`a.class === undefined` //in your 1st html
In the second html
you have a.class but you do not have a.link. So your javascript in the second html is unable to register click event on a.link.
`a.link === undefined` //in your 2nd html
If you want to only execute your code on link click instead of the default link action (which is 'going to another page') you need to add one line of code - a call to preventDefault().
$('.link').on('click', function( event )
{
event.preventDefault();
// your other code
});
https://api.jquery.com/event.preventdefault/
I'm trying to call a simple javascript function which hides or shows a particular div in Sharepoint. I have added the Script Editor web part with the function in there, but the anchor tags have the href removed whenever I save. Below is the code as I enter it.
Javascript:
<script type="text/javascript" charset="utf-8">
function toggleDiv(divId) {
$("#"+divId).toggle();
}
</script>
HTML:
Show Answer 1
After I save, Sharepoint tells me that certain elements deemed "unsafe" by sharepoint would be removed. When it reloads, it removes the href as shown below:
<a>Show Answer 1</a>
Any ideas how I could get this simple function to work?
Thanks,
Jordan
If you have multiple answer you can create a simple script like this (i notice you are using jQuery)
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('a').click(function(){
$('#' + $(this).data('answer')).toggle();
});
});
</script>
and the HTML:
<a data-answer="answer1">Show answer 1</a>
<a data-answer="answer2">Show answer 2</a>
...
<div id="answer1" style="display:none">Here answer 1</div>
<div id="answer2" style="display:none">Here answer 2</div>
UPDATE: Added the ready function so the script will be run only when the page load completely
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.
The following code is a test piece. Normally the href in the Link would point to "http://www.google.com/", but the attr should change it to reference "http://maps.google.com" BUT, the reference is not changing. Can anyone tell me why it is not working? Thanks
<html>
<head>
<script type="text/javascript">
$("a#changeme").attr('href',
'http:\/\/maps.google.com/');
</script>
</head>
<body>
<div class="content">
<p>Link to <a href="http://www.google.com/"
id="changeme">Google</a>
in the content...</p>
</div>
</body>
</html>
jQuery is not loaded.
If it was, you would have to wrap it in a $(document).ready handler.
This can be done without jQuery.
Code:
window.onload = function() {
document.getElementById("changeme").href = 'http://maps.google.com/';
};
The onload handler is not exactely equal to the DOMContentLoaded handler, but it has a better support, and may be preferred here. Alternatively, you can move the <srcipt> block to the end of the <body>, and then use the method without any onload handlers:
<body>
<div class="content">
<p>Link to Google
in the content...</p>
</div>
<script type="text/javascript">
// This code is placed after the element, so the reference does exist now.
// In the head, the same code will throw an error, because the body doesn't
// even exist.
document.getElementById("changeme").href = 'http://maps.google.com/';
</script>
</body>
The script is in the header so it's executed before the other content has been loaded (if jQuery is even active, seeing no reference to it). You should put it in a function and then call it later on (e.g. through onload or a timer). I could as well think of a security feature in the browser, to keep sites from manipulating links right before you click on them.
Here is the code for the correct jQuery way to do this (using the document ready).
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#changeme").attr('href', 'http:\/\/maps.google.com/');
});
</script>
</head>
<body>
<div class="content">
<p>Link to <a id="changeme" href="http://www.google.com/">Google</a>
in the contenttest...</p>
</div>
</body>
</html>