I need to load a file in div on click of another div :
My code so far :
<div id="load_home">HOME </div>
<div id="content"></div>
<script>
$(document).ready(function(){
$("#load_home").click(function(){
$("#content").load('code.html');
});
});
</script>
You can use javascript inside the click function to get the HTML file content and attach to the content div like this
<div id="load_home">HOME </div>
<div id ="content"></div>
<script>
$(document).ready(function(){
$("#load_home").click(function(){
document.getElementById('content').innerHTML = loadContent();
});
});
function loadContent(){
var xmlhttp = new XMLHttpRequest();
var pathToFile = 'code.html';
xmlhttp.open("GET", pathToFile , false);
xmlhttp.send();
return xmlhttp.responseText;
}
</script>
Notice that pathToFile variable holds the actual path of the html file you want to render.
Related
I have this Javscript fade effect when opening the page, for example admin.php.
<body>
<script>
document.body.className = 'fade';
</script>
...html code...
<script>
document.addEventListener("DOMContentLoaded", function(e) {
document.body.className = '';
});
</script>
</body>
The problem is I can't figure it out how to run this script only when comming from login.php page.
For clarification, it's an effect when opening page it's white and then in about 1sec the page becomes visible, creating fade effect.
Pass along a variable in the query string. For example, link to it with admin.php?coming_from_login=1.
Then in your PHP file:
<?php if (isset($_GET['coming_from_login']) && $_GET['coming_from_login'] == '1'): ?>
<script>
document.addEventListener("DOMContentLoaded", function(e) {
document.body.className = '';
});
</script>
<?php endif; ?>
You can make use of document.referrer:
<body>
<script>
const referrerPage = document.referrer.replace(location.origin, ""); // Remove the origin to leave just the page
if (referrerPage === "/login.php") {
document.body.className = 'fade';
document.addEventListener("DOMContentLoaded", function (e) {
document.body.className = '';
});
}
</script>
...html code...
</body>
I want adding and running external javascript file in new window.open() , so I tested the solution in Running Javascript in new window.open , but this solution doesn't work.
My code is here :
<input type="button" value="Open a window" onclick="openWindow();">
<script type="text/javascript">
function openWindow()
{
//Open a new window :
var win = window.open("");
//Create script tag :
var script = document.createElement('script');
//Add external javascript file in src attribut of script tag :
script.src = "script.js";
//Append script tag to the new window :
win.document.head.appendChild(script);
}
</script>
The content of external javascript file called script.js is :
alert("It works !");
When you click the button, a new window is opened, but the external javascript file added is not executed.
So how to run the external javascript file added in new window opened ?
Use document.write
const win = window.open('')
win.document.open()
const html = `
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"><\/script>
</head>
<body>
<h1>Test</h1>
<script>alert($('h1').text())<\/script>
</body>
</html>
`
win.document.write(html)
win.document.close()
Try this
<script type="text/javascript">
function openWindow()
{
//Open a new window :
var win = window.open("");
//Create script tag :
var script = document.createElement('script'),
div = document.createElement('div');
//Add external javascript file in src attribut of script tag :
script.src = "https://cdnjs.cloudflare.com/ajax/libs/preact/8.3.1/preact.min.js";
script.type = "application/javascript";
script.defer = true;
div.appendChild(script);
win.document.body.appendChild(div);
}
</script>
In the new window open developer console and type preact you will see output like {h: ƒ, createElement: ƒ, cloneElement: ƒ, Component: ƒ, render: ƒ, …}
I'm having a problem changing the string content of a particular DIV tag when using AJAX.
For some reason I can change string content when using an onclick function. This works;
<div id="demo">Will change on click? </div>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Yes, Successfully changes" ;
}
</script>
However this does not;
<div id="demo2">Will this change?</div>
<script>
window.onload = function() {
document.getElementById("demo2").innerHTML = "Yes, Successfully changes" ;
}
</script>
Both approaches work on the page itself, but import that page using AJAX, and only the onclick method works. This issue persists when trying both JavaScript and JQuery. What am I missing?
Try registering an event handler using jQuery's .ajaxcomplete http://api.jquery.com/ajaxcomplete/ . This event gets fired when an AJAX request finishes which is probably what you are looking for.
User the following way to update the content using Ajax
<div id="demo">Let AJAX change this text</div>
<button type="button" onclick="loadDoc()">Try it</button>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("demo").innerHTML = xhttp.responseText;
}
}
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
</script>
Go to following link for more ajax examples.
Ajax Examples
<script>
$(document).ready(function(){
$.ajax({
url: "ajax_info.txt"
}).done(function( data ) {
$("#demo").html(data);
});
});
</script>
on ready function you can call ajax and change the content
Use jquery ready function and call your function inside ready function.
like this :
$(document).ready(function(){
myFunction();
});
/* jQuery Onload String Replace OR jQuery Onload String Change */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var strNewString = $('body').html().replace(/\On hold/g,'Processing');
$('body').html(strNewString);
});
</script>
I'm creating a script like twitter in which user just provide an id and all his/her tweets get loaded on site where the script inserted.
What I've done is
User should copy this code to load my widget
<a class="getStarted" data-getStartedID="123456789">Get Started App ID</a>
<script>
!function(d,s,id){
var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
if(!d.getElementById(id)){
js=d.createElement(s);
js.id=id;
js.src=p+"://localhost/practices/js_practice/siteOpen.js";
fjs.parentNode.insertBefore(js,fjs);
}}(document,"script","getStarted-C");
My siteOpen.js is as below :
!function(d){
var a = d.getElementsByClassName('getStarted');
var x = document.getElementsByClassName("getStarted")[0].getAttribute("data-getStartedID");
var r = new XMLHttpRequest();
var appID = x;
r.open("POST", "openwebIndex.php", true);
r.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
r.setRequestHeader("Content-length", appID.length);
r.setRequestHeader("Connection", "close");
r.onreadystatechange = function () {
if (r.readyState != 4 || r.status != 200) return;
if(r.responseText.trim()==1){
return '<p>output to be draw on where script is pasted</p>';
if(console)console.info('Valid appID');
}
};
r.send('appID='+appID);
}(document);
i don't know what to do to send the response and load/draw my widget on user's website.
My response will be in html elements.
Please suggest me what should i do. I just stuck at this point.
EDIT
I'm getting object HTMLScriptElement when I alert js variable.
Just trying adding the html code in the body tag.
users html file
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
<script src="widget.js"></script>
Your widget.js
// var appId = d.getElementsByClassName('getStarted');
// process the app id and make the output here
var output = "<div>This is the content of the widget</div>";
document.body.innerHTML += output;
This will show the content in the users html file. If you have cross domain issue, use JSONP for resolving that.
I am using a PHP Simple HTML DOM Parser to save a website as a htm file. I then use jQuery to extract a div from the file and put it into a div. I want to create a
Previous and Next button but the problem I have is that to do this I have to change the URL so the parser can get the page. I would really appreciate if you can help. Below is the code I am using.
<?php
include( 'site/simple_html_dom.php');
$html=file_get_html( 'http://roosterteeth.com/home.php?page=1');
$html->save('site/rtnews.htm')
?>
<script type="text/javascript" src="site/jquery.js"></script>
<script type="text/javascript">
$('document').ready(function() {
$('#wrap').click(function (event){
event.preventDefault();
});
$("#wrap").load('site/rtnews.htm #postsArea');
});
</script>
</head>
<body>
<div id="wrap">
</div>
</body>
You will have to create a new php file for this and make an AJAX request to that file. I assume you have already realised that you cannot make a cross-domain request due to CORS.
Here is your new php file, let's call it proxy.php. It will proxy the request, responding with the page that is passed to it via GET :
<?php
include( 'site/simple_html_dom.php');
$html=file_get_html( 'http://roosterteeth.com/home.php?page=' . $_GET["page"]);
echo $html;
?>
Your new JavaScript;
$('document').ready(function() {
var $wrap = $('#wrap'),
page = 1;
$('#next').on('click', function () {
getPage(++page);
});
$('#prev').on('click', function () {
getPage(--page);
});
var getPage = function (page) {
$wrap.load('proxy.php?page=' + page + ' #postsArea');
};
getPage(page);
});