I would like to solve the following problem: Given a link on a Web page, I would like to replace the content of a specified div element with the content of a div element of another page. Say, just load the text "Stand on the shoulders of giants" from the Google Scholar page into my existing div element.
Up to date, if implemented the following example:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
Click me
<div id="myid">Text to be replaced</div>
<script type="text/javascript">
$("a").click(function() {
$.get(this.href, function(data) {
$("#myid").replaceWith($(data).find("#fb-root"));
});
previous_page = location.href;
window.history.pushState({page: $(this).index()}, $(this).html(), $(this).attr('href'));
return false;
});
window.onpopstate = function(event) {
location.reload();
}
</script>
</body>
</html>
I've included window.history in order to change the URL in the location bar, and to allow the user to restore the previous state of the Web page without the new content.
Now, I have two issues:
The replacement of the <code>div</code> element seems not to work, since the entire page from WhatIsMyIP is loaded.
While using Chrome, the entire page gets reloaded again and again right from the beginning. I think, the event window.onpopstate is triggered continuously.
Thank for any help!
You could combine a click and a $.load on a hyperlink:
$('a').click(function(e){
$('#myid').load($(this).attr('href'));
e.preventDefault(); //needed to prevent navigation!
});
If you want a special element within the page, you can append any selector. Example:
$('#myid').load($(this).attr('href') + ' div');
This will append all divs of the requested page.
Regarding your first issue
Try this
$('#myid').load(this.href + ' #fb-root');
instead of this
$.get(this.href, function(data) {
$("#myid").replaceWith($(data).find("#fb-root"));
});
Try to add event.preventDefault() before return false;
If I understand you correctly, you just want to replace the content of a specified div element on page1 (in this case div element with ID "myid") with the content of a div element from page2 (page2 is http://www.whatsmyip.org/).
Hope this might help:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
Click me
<div id="myid">Text to be replaced</div>
<script type="text/javascript">
$("a").click(function() {
$.get(this.href, function(data) {
var target_element_id_page2 = "element_id_page2";
var target_element_type_page2 = "div";
var respond= $('<div>' + data + '</div>');//You forgot this... It won't work unless you use it...
var target_element = respond.find( target_element_type_page2 + '#'+ target_element_id_page2 )[0]; //There "might" be more div elements with the same id: that's why you specify index
var container = document.getElementById( "myid");
container.innerHTML = target_element.innerText;
}, "html");
</script>
</body>
</html>
I took out window.history.pushState and window.onpopstate to better answer your question without any errors these two codes might give. If you put these back it should work perfectly. Althought I do not understand why you're using " previous_page = location.href; ". previous_page is not declared and you are not using it afterwards. Correct me if I am wrong...
Related
Is it possible to click a button to open the same page in a new tab and reveal a hidden div that wasn't seen in the parent?
Currently I have a div called replacediv, that is being replaced with Replacement Text below when users click on the button...But it is being replaced in the parent. For my purpose, I would like to load this same page in a new tab, with the page content and the Replacement Text showing instead of the hidden replacediv.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#replacediv").replaceWith("<span class='style'>Replacement Text</span>");
});
});
</script>
<div id="replacediv"></div>
if you want the content of $("#replacediv") and the span in the same page not replacing one another you do this:
$(document).ready(function(){
$("#replacediv").before("<span style="display:none;" class='style'>Replacement Text</span>");
$("button").click(function(){
$(".style").show();
});
});
I think one way to do it, is when you open the page and add a URL-parameter, which causes the page to render differently, e.g. to replace some text on it, with the Text in the URL-parameter. e.g.
On your page, you define something like this:
$(document).ready(function(){
$("button").click(function(){
window.open(window.location.href + '?replace=Replacement%20Text', '_blank');
});
});
Additionally you need something like this (still in the same page, but active, only when called with a parameter)
$(document).ready(function(){
$("button").click(function(){
window.open(window.location.href + '?replace=Replacement%20Text', '_blank');
});
var arr = location.href.match(/replace=([^&]+)/)
var replace = arr[1];
if (replace != '') {
$("#replacediv").replaceWith("<span class='style'>" + replace + "</span>");
}
});
This version will leave your button still clickable. If you rather do not want a button, you need to ask for the URL parameter earlier and don't render your button in the first place. That is up to you.
Does it go in the right direction? Hope that helps.
Hi I'm trying to load an element from a webpage via ID.
My code reads the url from the 'href' attribute of the tag and then loads the page. I'm stripping the document anchor.
This script works but won't discard the surround elements and loads the entire page.
<script type="text/javascript">
$(function() {
var a_href = $('#pycom').attr('href').split('#');
$('div#pop-up').load(a_href[0] + '#synopsis');
});
</script>
<body>
<a id="pycom" href="content/documentation/CommandsPython/ls.html#hFlags">ls</a>
</body>
http://help.autodesk.com/cloudhelp/2015/ENU/Maya-Tech-Docs/CommandsPython/ls.html
The above link exists locally on my server (XAMPP) as per the 'html' code above.
Below is the element I would like to extract.
<p id="synopsis">
<code>
xform([objects...],
[absolute=<i>boolean</i>],
[boundingBox=<i>boolean</i>],
.....
.....
</code>
Thanks
Jamie
At first get your page, and then inside the
content find your element with id named 'synopsis' as below:
var a_href = $('#pycom').attr('href').split('#');
$("div#pop-up").load(a_href[0] + " #synopsis" );
It should work, but before that check whether your browser supports mixed content. If your url contains http inside https then browser may not support, In that case you have to disallow the checking in the browser.
Thanks.
OK solved. I was using jQuery 2.4.1 which apparently has a bug that is supposed to be fixed.. but appears to be not?? see here http://bugs.jquery.com/ticket/14773
I am instead using jQuery 1.11.3
below is my final code:
<script type="text/javascript" src="content/scripts/jquery-1.11.3.js"></script>
<script type="text/javascript">
$(function() {
var moveLeft = -10;
var moveDown = 10;
$('a#pycom').hover(function(e) {
var a_href = $(this).attr('href').split('#');
$('#pop-up').load(a_href[0] + ' #synopsis');
$('div#pop-up').show().css('top', e.pageY + moveDown).css('left', ((e.width/100)*1) + moveLeft);
}, function() {
$('div#pop-up').hide();
});
});
</script>
The following method using .get also works exactly the same except gives the benefit of being able to process the returned string in the callback.. in this case the trailing section of the requested selected element... very nice stuff.
$('a#pycom').hover(function(e) {
var a_href = $(this).attr('href').split('#');
$.get(a_href[0], function(response) {
$('#pop-up').html($(response).filter('#synopsis').html().split('<br>')[0]);
});
});
Now owning jQuery like a BOSS!!
Thank you to all those who helped out.
Chur!
J
You should not give any space in the URL. There is a space before ' #synopsis'.
$('div#pop-up').load(a_href[0] + '#synopsis');
I am a new to programming. I like to ask that how can I retrieve the value of the <a> or text
that is hyperlinked and post it to the next page(abc.php). All of the hyperlinked $row['a'] will go to abc.php and process the data based
on the hyperlinked $row['a'] that is clicked. For now, I keep getting undefined, <a> contains
nothing?!
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function(event) {
alert("As you can see, the link no longer took you to jquery.com");
var a = $(this).attr('a');
alert(a);
event.preventDefault();
});
});
</script>
echo "<td>"."<a href='abc.php'>".$row['a']."</a></td>";
To retrieve the content of a element you need to use $(this).text() as #Rodion suggested.
The next step will be to send that data through to abc.php by the use of query string: abc.php?ref=[...].
Consider the following Javascript code:
$(document).ready(function() {
$("a").click(function(event) {
var text = $(this).text();
alert("As you can see, the link no longer took you to jquery.com");
alert(text);
window.location.href = window.location.href + '?ref=' + text;
event.preventDefault();
});
});
It retrieves the text of the a element from the Document Object Model and then adds it to the query string of the location referenced by the link.
The last thing to do in here is to prevent the browser from instantly following the reference in href attribute of the a element: that is the plain abc.php. You can achieve this by adding the onclick attribute with return false;:
echo "<td>"."<a href='abc.php' onclick='return false;'>".$row['a']."</a></td>";
You tried to get an attribute a for the link.
If you need to get link text, use $(this).text()
var a = $(this).text();
alert(a);
You can pass text to the next page by get parameters, for example:
echo "<td>"."<a href='abc.php?text=".$row['a']."'>".$row['a']."</a></td>";
or on the client-side using window.location.href=""
I want to disable right click link and i found this code:
<script type="text/javascript" language="javascript">
$(document).ready(function()
{
$('body').on('contextmenu', 'a', function(e){ return false; });
});
</script>
I want to add on a specific domain. something like this code (adfly fullpage script)
<script type="text/javascript">
var ad5fly_id = 4484512;
var ad5fly_advert = 'int';
var domains = ['depositfiles.com', 'rapidshare.com'];
</script>
<script src="https://cdn.adf.ly/js/link-converter.js"></script>
Basically, I dont want visitor to right click on my ad5fly link because they can bypass it easily. im talking about this: http://ad5f.ly/4484512/www.google.com : they can copy it and copy only the google link . then i wont earn any. help me guys.
thanks !!
sorry for my bad english
This is what you might be looking for
<script type="text/javascript">
$(document).load(function(){
$('body').on('contextmenu', 'a[href*=ad5f]', function(e){
e.preventDefault();
//or return false; does the same
});
});
</script>
If the anchor have a href which contains ad5f somewhere, then the contextmenu will be prevented.
Update:
I've added to be on LOAD instead of READY because if on ready, it might trigger before the link-converter.js ended doing it's thing (swapping urls) and the selector might fail.
Haven't tested this, but this is the solution from this thread here:
Disabling right click on images using jquery
$('body').bind('contextmenu', function(e) {
return false;
});
If that doesn't work, you could also try attaching the function you document or window instead.
You could iterate through the domains and cancel the right-click menu on page load.
var domains = ['depositfiles.com', 'rapidshare.com'];
for (var i = domains.length - 1; i >= 0; i--) {
$('body').on('contextmenu', 'a[href*="'+domains[i]+'"]', function(e){ return false });
};
index.php
<html>
<head>
<title>My Title</title>
<script type="text/javascript">
function getLink(data) {
document.getElementById("box").innerHTML="This is "+data;
}
</script>
</head>
<body>
Home<br />
Profile<br />
Message<br />
Setting<br />
<hr />
<div id="box"></div>
</body>
</html>
Output
Home
Profile
Message
Setting
This is Home
As the code says my Div contents updated when i click any of the link but the problem is that when user goes back by clicking Back Button of Browser the content of my Div donot changes.
I want that either user Goes Back, Goes Forward or he directly puts the path in the address bar www.*****/index.php#profile the content of my Div should be change.
Note
I used document.location.hash to get the value of hash like this :
<head>
<script>
var hashValue=document.location.hash;
alert(hashValue);
</script>
</head>
but it works only when user goes back and then refresh the page
Plz help me how can i achieve this :(
You need to use hashchange event:
function hash_changed() {
var data = document.location.hash.substr(1);
var box = document.getElementById("box");
if (data) {
// inner page
box.innerHTML="This is " + data;
}
else {
// homepage
box.innerHTML = "";
}
}
window.onhashchange = function () {
hash_changed();
};
window.onload = function () {
hash_changed();
};
Also when you are using hashchange event, there is
no need to set onclick for your links:
Home
Profile
Message
Setting
When user click on a link, the hash automatically changes (with href attribute of link),
and hashchange event get fired.
Check DEMO here.
First Time
When a user come to your page for the first time with a hash:
http://fiddle.jshell.net/B8C8s/9/show/#message
We must show the wanted page (message here), so we must run hash_changed() function
we declare above, at first time. For this, we must wait for DOM ready or window.onload.
Check the HTML5 history API. It allows you to work with the browser history
HTML5 history api
$(window).on('hashchange', function() {
alert(location.hash);
});
or window.onhashchange event if you don't want to use jQuery
If you're going to be using AJAX, you'll really want to look into using jQuery instead of raw javascript unless your intention is educational. jQuery is just a mainstay of the web now.
If you must use those hashes...
Use jQuery Special Events, and use the hashchange event:
<a href='#home'>Home</a>
Script:
$(window).on('hashchange', function() {
$('#box').html("This is "+event.fragment);
});
However, for your scenario...
You don't need to use those # values at all as you're passing the values in your function arguments anyway according to the code you provided, just do this:
Home<br />
Alternatively (and preferably, as you're using AJAX according to the tags) you can use jQuery and its builtin selector click events which use Event Listeners:
<a href='javascript:void();' class='divLink' id='home'>Home</a><br/>
Script is this easy:
$('.divLink').click(function(){
$('#box').html("This is "+$(this).id());
}