sorry for the basic question!
I currently have a website and I need a feature where the content of a div is replaced when a user clicks on a hyperlink
I've achieved this using the following:
Click here
<script type="text/javascript"><!--
function ReplaceContentInContainer(id,content) {
var container = document.getElementById(id);
container.innerHTML = content;
}
</script>
However, I have 2 quick questions - the in the div once the button has been clicked is written as a string in the JS - is it possible to pass in a HTML file that has this text?
I need to make it so that the new text has a new URL - is this possible? (e.g. once a user has clicked on the button, the text is displayed and a new direct URL is available)
I'm assuming you mean something like this:
$('#my-link').on('click', function() {
$('#my-div').load('/file_to_load.html');
$(this).attr('href', "new_url");
});
If you can provide a bit more clarity, I'll refine my answer!
Here's how this works.
jQuery looks for the dom element with the id #my-link, then on click the function block is fired. jQUery $.load will load the content of that url into the div with the id my-div, then change the href attribute of $(this), "this" being the button to "new_url".
Related
I have a form on sharepoint, that whenever a person fills that form, it will create a new page with the text added on the form.
I wanted to send an email using JavaScript and HTML with the copy of the various texts.
I have the id of the text and when i create the javascript code, it does not work.
HTML
<a onclick="javascript:sendEmailJobs()" class="mailto"></a>
JavaScript
function sendEmailJobs(){
var JobCodePost = document.getElementById("RichHtmlFieldJobPostCodeJob").body;
window.location.href = "mailto:?subject=Job Offer &body=" + body;
}
The id of said text is this:
<SharepointWebControls:NoteField ID="RichHtmlFieldJobPostCodeJob" FieldName="JobPostCode" runat="server"/>
Am i doing something wrong?
Document elements don't have a "body" attribute, they have innerHTML and innerText. So your function should look like this:
function sendEmailJobs(){
var JobCodePost = document.getElementById("RichHtmlFieldJobPostCodeJob").innerText;
window.location.href = "mailto:?subject=Job Offer &body=" + JobCodePost;
}
Second thing is to verify that you are indeed selecting the correct element. Third thing is to point out that you can't use innerHTML because even if you get everything else right, mailto: links don't support formatted text.
i have a question regarding changing URL of anchor tags based on HREF.
What i do to select all anchor tags is like this:
var anchortags = document.querySelectorAll("a[href*='secureloan.asim.no']");
With this i select all anchor tags that refers to secureloan.asim.no
What i want also is to CHANGE the links when user click on it (i want to remove a parameter)
example of URL can be:
Example URL:www.secureloan.asim.no/oasis/index.html#/no/asim?lang=nb-no&product=lev&lanekilde=&campaigncode(etc....).
i want to remove "lanekilde=" from the parameter. im using this code:
String(document.location.href).replace("&lanekilde=", "");
This gives me right URL but how do i change it for all users on website when they click on it.
Code ive made til now:
var anchortags= document.querySelectorAll("a[href*='secureloan.remember.no']");
String(document.location.href).replace("&lanekilde=", "");
thank you :)
PS: NO Jquery please!
PS: im using tag manager if anyone has a idea of different way
You just need to iterate over the nodeset and change each one in turn:
var anchortags = document.querySelectorAll("a[href*='secureloan.asim.no']");
anchortags.forEach(function(tag) {
tag.href = tag.href.replace('&lanekilde=', '');
});
Is there a way to get document property values into html script in text area.
for example:
I have a drop down which have values like "google","yahoo","Facebook"
and my html script may be like
< SpotfireControl id="a23e53a498af447294614ec708f50ede" /> A href="http://www.Document propety value.com/">.
So if you select google in drop down ,the above html script will change to
< SpotfireControl id="a23e53a498af447294614ec708f50ede" /> A href="http://www.google.com/">
I want to see this dropdown and link in one text area.
much appreciated
If your tag is as follows:
<a id="mylink" href="">
Then you can set the href like so:
document.getElementById("mylink").href = "https://google.com";
If your select has an id="myselect", you can get the value like so:
document.getElementById("myselect").value
Now you can set your link:
var site = document.getElementById("myselect").value;
document.getElementById("mylink").href = "https://"+site+".com";
Now, you want this to happen when you change the drop-down (select) option, so you'll need to add an event listener for when it changes.
document.getElementById("myselect").addEventListener("change",
function() {
var site = document.getElementById("myselect").value;
document.getElementById("mylink").href = "https://"+site+".com";
}
}
Do note that your event listener can only be added after the selector and the link have loaded (so the code needs to be afterwards). If you've never used JavaScript before, you should note that you need <script type="text/javascript"> and </script> tags to enclose it.
I would like to modify one tag using javascript. I have a textbox to introduce a postcode and a button to find car parks near the position. The HTML tag is the following:
<script src="http://en.parkopedia.co.uk/js/embeds/mapView.js" data-Location="http://en.parkopedia.co.uk/parking/ST84JF/" data-options="l=0&tc=0&zc=1&country=UK&ts[]=4&ts[]=3&ts[]=2" data-size="750:400" type="text/javascript"></script>
I have two questions:
Can I modify the data-location to add the text write inside the textbox to search in that location?
Can I activate the script only when the button is clicked using javascript or jquery? The main problem here is that the should be inside the HTML code and I don't know how to put it inside the javascript file.
Code updated:
function find(){
$("script[id=script_map]").remove()
var search = document.getElementById('box_txt').value ;
$("<script />", {
"src":"http://en.parkopedia.co.uk/js/embeds/mapView.js",
"data-location":"http://en.parkopedia.co.uk/parking/" + search,
"data-options":"l=0&tc=0&zc=1&country=UK&ts[]=4&ts[]=3&ts[]=2",
"data-size":"750:400",
"id":"script_map",
"type":"text/javascript"
}).appendTo("#divId")
}
Try modifying data-location of script element before appending script element to body at click event of button element . Could alternatively use $.getScript() to retrieve script from external source
$("button").click(function() {
var val = $("input").val();
// Can I activate the script only when the button is clicked
$("<script />", {
"src":"http://en.parkopedia.co.uk/js/embeds/mapView.js",
// Can I modify the data-location to add the text write inside the textbox
// to search in that location?
"data-location":"http://en.parkopedia.co.uk/parking/ST84JF/" + val,
"data-options":"l=0&tc=0&zc=1&country=UK&ts[]=4&ts[]=3&ts[]=2",
"data-size":"750:400",
"type":"text/javascript"
}).appendTo("body")
})
Yes the data-location is simply a custom attribute i believe so just use
document.getElementById("SCRIPTTAGID").setAttribute("data-location", "newValue");
As far as activating the script to execute when a button is pressed you will need to encapse it in a function then call the function in the onClick event of the button.
Interesting (and rather complex) issue here...
What I have is a page with two iframes and a set of links at the top, each contained inside a div with an image background. What I want is for the contents of both iframes to change (to two separate html documents) when the link is clicked, and for the background image of the link's parent div to also change. I also, however, want the parent div to automatically change back to the original class when a different link is clicked (i.e. I have two classes, 'active' and 'waiting'. When a link is clicked (and its contents subsequently displayed in the iframes) I want it to switch to class 'active'. At all other times, though, (including after a different link might be clicked and become active) I want it to go back to using the 'waiting' class.)
Here's my current code / markup:
Javascript:
function changeFrame(link) {
$('#first iframe').src=link.href;
$('#second iframe').src= (Here would be the second link, not sure how to define that)
link.ParentNode.addclass("activebutton");
HTML:
<div class="waitingbutton">
<a href="yes.html" (Somewhere here would be the second link for the second iframe) class="waitingbutton" onclick="changeFrame(this);
return false;">Button Text</a>
</div>
(After this come four more divs, each identical bar Button Text and links)
As I suspect you can tell, I'm really just guessing here. Still not hugely familiar with Javascript, hoping someone can help me out.
You seem to be using jQuery.
Here's an ugly way to do it; but it works:
Button Text
And your JavaScript:
function changeFrame(link) {
$('#first iframe').attr("src", $(link).attr('href'));
$('#second iframe').attr("src", $(link).attr('secondary-href'));
return false;
}
Note that it'd be more idiomatic jQuery to do this without any onClick handlers, but simply initialise it all in your <head>/<script> from the beginning:
<script type="text/javascript">
$(function() {
$("a.iframe-link").click(function(event) {
$("#first iframe").attr("src", $(link).attr("href"));
$("#second iframe").attr("src", $(link).attr("secondary-href"));
// Whatever used to be the activebutton, make it 'waitingbutton', and remove
// the 'activebutton' class.
$(".activebutton").
addClass("waitingbutton").
removeClass("activebutton");
// Remove .waitingbutton from this, add .activebutton.
$(this).removeClass("waitingbutton").addClass("activebutton");
// Don't allow the link's default action (to follow the href in the normal
// way).
event.preventDefault();
});
});
</script>
Then later:
<a class="iframe-link waitingbutton" href="yes.html" second-href="whatever.html">Hello!</a>