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
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/
Here is the code:
<span class='maincaptionsmall'>
Test
</span>
For some reasons of ajax and jquery codes in my page, I can't use HREF as Link, I mean, I can't use something like this following code:
<span class='maincaptionsmall'>Test</span>
So, How can i use jquery to get this css element maincaptionsmall and it will set it to href link ?
Even I can't use <div> too, I should use everything as <span> Please give me an example that how to use jquery to set css element as href link.
Thanks in advance
For getting .maincaptionsmall this DOM using jQuery use below code,
$('.maincaptionsmall')
and for wrapping innerText you can use wrapInner
$('.maincaptionsmall').wrapInner('');
Live Demo
Edit
You need to wrap code inside document.ready and also your document is not properly structured.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() // you are missing this
{
$('.maincaptionsmall').wrapInner('');
});
</script>
</head>
<body>
<span class='maincaptionsmall'>Test</span>
</body>
</html>
I am currently embedding a third-party javascript file directly on my page.
However, the website I'm embedding it from takes a while to respond so it stops the rendering of my site for several seconds.
I'm currently embedding it on my page on the spot where it will write some values:
<script language="javascript" type="text/javascript" src="[third-party site/file.js]"></script>
The response from the embedded script is just some JavaScript:
document.write('<div class="value">Value 1</div><div class="value">Value 2</div>');
I was thinking that after the page loads use jQuery to make an AJAX request and somehow parsing the response so I can get the values I need.
Is there be a better approach?
You can place this script inside a hidden element on the end of the body (just before </body>) and, after the page has loaded, move it to the desired location with jQuery.
<div id="hiddenElement">
<script type="text/javascript" src="[third-party site/file.js]"></script>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#hiddenElement").appendTo("#someOtherElement");
});
</script>
</body>
Another solution would be to use jQuery .getScript() to load the script in the desired location as you said and #James McDonnell said.
$(document).read(function()
{
$.getScript(/* src */)
});
This will run after the page has loaded.
$.getScript()
Perhaps this could be part of your solution. Here is a stand-alone jQuery example where a button is used to trigger a change event on a DIV. This example just shows you how to access the html content of the div and to see how to manipulate/change it. This is not a solution for you but parts of it might be useful when combined with rcdmk's and James' ideas.
<html>
<head>
<!--<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>-->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#button_test').click(function() {
$('.value').html('New stuff').change();
});
$('.value').change(function(){
$('div').each(function() {
alert($(this).html());
});
});
});
</script>
</head>
<body>
<div class="value">Value 1</div>
<div class="value">Value 2</div>
<button id="button_test">Click me</button>
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/