How to load another domain content inside a div? - javascript

I have a <div id="content">. I want to load the content from http://vietduc24h.com into my div:
<html>
<head>
<script type="text/javascript">
$(document).ready(function()
{
$("#content").attr("src","http://vietduc24h.com");
})
</script>
</head>
<body>
<div id="content"></div>
</body>
</html
I don't want to use an iframe. How can I do this?

You need to think about CORS in this aspect. The code you need to have is:
<script type="text/javascript">
$(document).ready(function()
{
$("#content").load("http://vietduc24h.com");
})
</script>
When your domain is not inside vietduc24h.com, you might get some security exception. In order to avoid that, you can host a local proxy here. In PHP, we do this way (url.php):
<?php
$url = file_get_contents(urlencode($_GET["url"]));
echo $url;
?>
And in the script, you need to modify this way:
<script type="text/javascript">
$(document).ready(function()
{
$("#content").load("proxy.php?url=http://vietduc24h.com");
})
</script>

Try this code with the jQuery Load function:
$('#content').load('http://vietduc24h.com', function() {
alert('Load was performed.');
});
If you encounter in security issues because of the Cross-Origin-Resource-Sharing policy than you have to use a proxy in your server code.

Try this:
$("#content").html('<object data="http://vietduc24h.com">');
Taken from this answer.

Related

I was writing simple code in JQuery in brackets but '$' shows undefined

I tried everything mentioned in this forum, Tried newer versions of jQuery Checked every spelling spent two hours to find out the problem but got no result.
Move Jquery to the <head>. If not, you could try
(function($) {
$(function() {
$('h1').click(function() {
$(this).css('background-color', '#ff0000')
})
});
})(jQuery);
This will make sure your Global jQuery variable is bound to the "$".
(function($) {
$(function() {
$('h1').click(function() {
$(this).css('background-color', '#ff0000')
})
});
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Hello World</h1>
You could also load the script externally. I often find this to work better with jQuery.
You need to include jQuery before using it. Move the <script> tags that defined after footer into <head> before script that you try to run.
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('h1').click(function() {
$(this).css('background-color', '#ff0000')
});
});
</script>
</head>
<body>
<h1>Click Me</h1>
</body>
Check if your file is REALLY loaded
Add a new file, and only import jQuery from googleapi. Then, go to your browser's developer tools (F12), abd in console try to execure '$'. If it's not throwing an error, go to 4. If it is throwing an error, go to 3.
Check your internet connection to googleapi: Open the jQuery file in your browser, and check if it is loaded properly.
Try add 'refer' to your script tag like this:
If error still occurs, feel free to comment below.
Insert your script file/code just below the jQuery library file link
<h1>Heading</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function() {
jQuery('h1').click(function() {
jQuery(this).css('background-color', '#ff0000')
})
})
</script>
It happened because jQuery is not properly installed to be sure before coding run the code below. If it gives you alert message "jQuery is installed correctly" you are good to go.
<head>
<title>JQuery</title>
<script src="jquery-3.2.1.min.js"></script>
</head>
<body>
<script type="text/javascript">
if(typeof jQuery=="undefined"){
alert("jQuery is not installed ")
}else {
alert("jQuery is installed correctly")
}
</script>
</body>

JQuery Very simple POST not work

I'm trying to simply POST something using JQuery. when the element is clicked, I want the page redirect to the php file and echo out the POST value.
Html file
<html>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div onclick="posttest();" >hi there</div>
<script>
function posttest(){
var txt="hi";
$.post("testpost.php", {testVar: txt},function(){
window.location.href = "testpostphp.php";
});
}
</script>
</html>
PHP file
<?php
var_dump($POST["testVar"]);
?>
There is $_POST variables in PHP, not $POST.
Try this:
$.post("testpost.php", {testVar: txt}, function(response){
console.log(response);
});

(JS) calling external .js function with <script> tag

i'm looking to call a function cookiefix() which is located inside main.js and source is linked at the bottom of my html.
echo '<body>';
if(!isset($_COOKIE['clicked'])) {
if(!isset($_COOKIE['count'])) {
echo '<script type="text/javascript">cookiefix();</script>';
echo '<script type="text/javascript">'
, 'document.cookie="count=1";'
, '</script>' ; } }
I was using body onload="" and it worked fine, I know this probably sounds like an uber newby question but i've been searched for the last hour or so and nothing is working.
<script src="js/main.js" type="text/javascript">cookiefix();</script>
I've also tried linking to the source document, didn't work either..
huge thanks to anyone who has a moment
EDIT: If this isn't possible, is there an alternative to 'onload' for anything but ? I was having header issues with cookies and calling it from onload
Try to attach an onload event listener to the <script> tag.
Such as:
<script src="js/main.js" type="text/javascript" onload="cookiefix();"></script>
cookiefix() will be fired once the script has been successfully loaded.
Separate them, order is important:
<script src="js/main.js" type="text/javascript"></script>
<script type="text/javascript">cookiefix();</script>
Add to seperate JS file and include in page.
JS:
(function(){
window.onload = cookiefix;
})();

how Javascript call to a function of a external file?

i made a html page with this coding
<html>
<head>
<script src="../a.js">
var u=document.URL; var i='t4527878445'; m_web(u,i);
</script>
</head>
<body>
</body>
</html>
In a.js i have this code
function m_web(u,i) {
alert('l');
alert('u');
}
but my webpage is unable to call this function which is coded in an external file. i am not getting any alert with this. i don't know what is problem. plz tell me simple solution for this.
thanx in advance
A single <script> tag can link to an external resource using the src attribute OR contain inline JavaScript code, but it can't do both at the same time. If you specify a src attribute any content between the <script src="foo.js"> tag and the </script> tag is ignored.
Since you want to load the external JS file, and then execute some JavaScript code, you'll need two separate tags to do so:
<script src="../a.js"></script>
<script>
// your code
</script>
plz write your code like below
<script src="../a.js"></script> </script>
//^^^^^^^^^^^^^^^^^^ first close script tag of linked js file
<script type="text/javascript">// then call your inline jscode
var u=document.URL; var i='t4527878445'; m_web(u,i);
</script>
Try
you are not closing script tag
<script src="../a.js"></script>
^//added closing script tag
<script>
var u=document.URL; var i='t4527878445'; m_web(u,i);
</script>
to alert what you pass use
function m_web(u,i) {
alert(i);
alert(u);
}

jquery show/hide not working on wordpress

I have a site i'm working on http://trueproperty.org/ and on the front page i have two divs, one is #excerpt and the other is #content. #content is filled using
<?php the_excerpt(); ?> <button id="readmore">Continue Reading...</button>
and #excerpt is filled using
<?php the_content(); ?> .
content is set to display:none. now i use this code to display #content and hide #excerpt when the user clicks continue reading, it works in jsbin, but not on the actual site, and i cant figure it out :/.
<script type="text/javascript">
$(document).ready(function(){
$("#readmore").click(function(){
$('#content').show('slow');
$('#excerpt').hide('fast');
});
});
</script>
It doesn't seem like you reference the Jquery library before you actually use the jQuery object. Try placing the code after the:
<script type='text/javascript' src='http://trueproperty.org/wp-includes/js/jquery/jquery.js?ver=1.7.1' />
You are loading two files that uses $ as alias ..
The following works:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#readmore").click(function(){
jQuery('#content').show('slow');
jQuery('#excerpt').hide('fast');
});
});
</script>
But it would be better to look for the conflict issue and use jQuery.noConflict
Place this code at the end of Head tag.
<script type="text/javascript">
$(document).ready(function(){
$("#readmore").click(function(){
$('#content').show('slow');
$('#excerpt').hide('fast');
});
});
</script>

Categories

Resources