On clicking the links am sending the ajax call to get the response, am able to get the correct response but the script tag inside the response page is not working. how to make it run
This is HTML PAGE
<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="css/global.css">
<script type="text/javascript" src="js/ajaxgetter.js"></script>
<script type="text/javascript" src="js/mootools.js"></script>
</HEAD>
<BODY>
<h1>ajax block container</h1>
<div id="container">
<div id="tab_wrapper">
<ul id="tab_list" >
<li>
Number 1
</li>
<li>
Number 2
<br/><br/><br/>
</li>
</ul>
</div>
<br/><br/><br/><br/><br/><br/>
<div id="content_tab">
</div>
</div>
</BODY>
</HTML>
The javascript code
function ajaxenabled(url,param,id)
{
var page_request = false
if (window.XMLHttpRequest){
page_request = new XMLHttpRequest()
}
else if (window.ActiveXObject){
try{
page_request = new ActiveXObject("MSXML2.XMLHTTP")
}
catch (e){
try {
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false;
page_request.onreadystatechange=function(){
if(param!=null)
{
loadpage(page_request, param,id);
}
if(param==null)
{
loadpage(page_request,'',id);
}
}
page_request.open('GET', url, true);
page_request.send(null);
}
function loadpage(page_request,param,id){
var getblock=document.getElementById(id);
if(page_request.status==200) {
getblock.style.display='block';
getblock.innerHTML=page_request.responseText;
if(param!=null)
{
//alert("showed");
}
}
}
Response Page " firstelement.html "
<h1>First Element having ajax call</h1>
<script type="text/javascript">
alert("testing the simple function");
</script>
The Alert present inside Script tab inside the firstelement.html is not triggered ,
You should move that script from inside the HTML file to a .js file and call that script after you have successfully finished the ajax call.
Your HTML file will be:
<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="css/global.css">
<script type="text/javascript" src="js/ajaxgetter.js"></script>
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/YOUR_SCRIPT_FILE_HERE.js"></script>
</HEAD>
<BODY>
<h1>ajax block container</h1>
.
.
.
You will of course move the
<script type="text/javascript">
alert("testing the simple function");
</script>
into a .js file you place inside the "js" directory. Remember to do it as a method you can call so the .js file will have something like this
function afterAjaxSuccess(){
alert("testing the simple function");
}
and then in your html file you update your loadpage method like this:
function loadpage(page_request,param,id){
var getblock=document.getElementById(id);
if(page_request.status==200) {
getblock.style.display='block';
getblock.innerHTML=page_request.responseText;
afterAjaxSuccess(); //updated line here
if(param!=null)
{
//alert("showed");
}
}
}
and your HTML page becomes
<h1>First Element having ajax call</h1>
without any script
I just use mootools Request.HTML it will evaluate all the script tags in the returned page and replace the html in an element if the update is set in the options.
Related
When I load this page the script is not loading for some reason. What am I doing wrong here?
<html>
<head>
<title>hi</title>
<script language="JScript.Compact">
var script = document.createElement('script');
script.onload = function() {
alert("Script loaded and ready");
};
script.src = "http://192.168.1.106/js/min.js";
document.getElementsByTagName('head')[0].appendChild(script);
</script>
</head>
</html>
I think it is working but the alert doesn't get triggered because the script you refer to isn't loaded. Try it like this:
<!DOCTYPE html>
<html>
<head>
<link media="screen" href="style.css">
</head>
<body>
<p>…</p>
<img src="file.jpg" alt="" />
<script src="responsive-nav.min.js">
<script>
window.onload = function () {
console.log('Document loaded.');
function init();
function dosomething();
}
</script>
</body>
</html>
<script language="JScript.Compact">
The language attribute is obsolete, but browsers still support it.
Since you set it to an unrecognised language, browsers don't know how to execute it, so they ignore it.
Remove the language attribute.
I have index.php in which I would like when the user clicks the button "Click" it to redirect to "newpage.php" but also for another page "Click.php" to be loaded into the div "content" within the newly loaded "newpage.php".
Similarly I would like for when "Click Also" is clicked for the user to be redirected to the same page "newpage.php" but a different page "ClickAlso.php" to be loaded into the same div "content".
index.php
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(document).on('click', '.clickme', function() {
window.location.replace("newpage.php");
});
$(document).on('click', '.clickmealso', function() {
window.location.replace("newpage.php");
});
});
</script>
</head>
<body>
<div>
<button class="clickme">Click</button>
<button class="clickmealso">Click Also</button>
</div>
</body>
</html>
newpage.php
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(document).ready(function() {});
</script>
</head>
<body>
<div id="content">
</div>
</body>
</html>
Try this solution:
index.php
change your document ready event to redirect to newpage.php using url params. For this example I used a parameter named 'page'.
$(document).ready(function() {
$(document).on('click', '.clickme', function() {
window.location = ("newpage.php?page=click");
});
$(document).on('click', '.clickmealso', function() {
window.location = ("newpage.php?page=clickAlso");
});
});
newpage.php
Define what happens once the page is accessed. This is where things get a bit more interesting. Each time this page (newpage.php) loads, it looks for the parameter 'page' in the URL and extracts its value. The parameter's value is then assigned to a variable I called $pageToGet.
After that we check whether the value is equal to 'click' or 'clickAlso' and we display the content accordingly using require.
<?php
$pageToGet = $_GET['page'];
?>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
</head>
<body>
<div id="content">
<?php
if ($pageToGet == 'click') {
require('Click.php');
} elseif($pageToGet == 'clickAlso') {
require('ClickAlso.php');
}
?>
</div>
</body>
</html>
Be sure to have your files: Click.php and ClickAlso.php in the same directory for this to work.
Good Luck
I trying to navigate between 3 pages which contain the same header and footer but each page has different content.
I want to load different contents html on hash change.
The problem is that when I click on the same page again, the content.html loaded again.
How can I use the content without loading the html again and again, using java script/html/jquery?
Code example:
Navigationbar.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Navigation Bar</title>
<link rel="stylesheet" type="text/css" href="css/navigationbar.css">
</head>
<body>
<nav>
<img id="navigation-bar-logo" class="logo" src='images/flybryceLogo.png'>
<ul class="navigation-bar-ul">
<li class="navigation-bar-li"><a id="navigation-bar-contact-page-tab" href="#contact.html">CONTACT</a></li>
<li class="navigation-bar-li"><a id="navigation-bar-about-us-page-tab" href="#aboutus.html">ABOUT US</a></li>
<li class="navigation-bar-li"><a id="navigation-bar-home-page-tab" href="#home.html">HOME</a></li>
</ul>
</nav>
</body>
</html>
initial.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>One Page Test</title>
<link rel="stylesheet" type="text/css" href="css/homepage.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<div id="main-container" class="main-container">
<div id="header" class="header">
</div>
<div id="content" class="content"></div>
<div id="footer" class="bot"></div>
</div>
<script>
document.onreadystatechange = function(){
if (document.readyState == 'complete') {
window.onhashchange=hash_change;
window.onload=hash_change;
if(window.location.hash==''){
//default hash
window.location.replace('#home.html');
}
//load the header
$("#header").load("fragments/navigationbar.html");
//load the footer
$("#footer").load("fragments/footer.html");
}
}
function hash_change()
{
//get the new hash
var newHashCode = window.location.hash.substring(1);
if (newHashCode === "home.html"){
$("#content").load("home.html");
} else if (newHashCode === "aboutus.html") {
$("#content").load("aboutus.html");
} else if (newHashCode === "contact.html"){
$("#content").load("contact.html");
}
}
</script>
</body>
</html>
A longer but suitable solution would be to build a content cache on your own.
For example asking to the server just once the html and then setting it to the $('#content') element. You can use this helper function.
var contentsCache = {};
var getAndCache = function(url, callback) {
var cachedContents = contentsCache[url];
if (!cachedContents) {
$.get(url, function(serverContents) {
cachedContents = serverContents;
contentsCache[url] = cachedContents;
callback(cachedContents);
});
} else {
callback(cachedContents);
}
};
And then replace the $('#content').load calls by calls to this new asynchronous way.
function hash_change()
{
var fillContentCb = function(s) {
$('#content').html(s);
};
//get the new hash
var newHashCode = window.location.hash.substring(1);
if (newHashCode === "home.html"){
getAndCache("home.html", fillContentCb);
} else if (newHashCode === "aboutus.html") {
getAndCache("aboutus.html", fillContentCb);
} else if (newHashCode === "contact.html"){
getAndCache("content.html", fillContentCb);
}
}
As suggested in some comments, consider using native HTML navigation instead. Another suggestion is to use a client-side JS framework which supports routing if this application is likely to grow.
Add an if condition that checks whether the current hash location matches with the one that's been clicked on, and if it does just return. You'd have to store it in a global JS variable, and set it every time you navigate.
I have a Javascript file named loader.js which contains a function called initialize(). I want to call this function via jQuery. This is my HTML file:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="loader.js" ></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(document).on("click", ".link", function(e) {
e.preventDefault();
var a= $(this).text();
window.initialize= function{
};
initialize(a);
});
});
</script>
</head>
<body >
<h1>welcome to my website </h1>
link1
link2
<div id="main">
</div>
</body>
</html>
This is loader.js:
function initialize(a) {
$('#main').html= a;
}
I do not know what is wrong with this script, I have debug it jquery is working fine but funtion is not working correctly.
also I want that whenever the function is clicked again the div should be refreshed for example first it contain link1 but when link2 is clicked link1 should be removed inside the div how can i accomplish this task????
thanks in advance
You're not including the loader script. Add <script src='loader.js'></script> before the jQuery code.
The code in loader.js should be inside a jQuery(document).ready callback since it's now using jquery (the html method).
Also as #jiihoo pointed out you should use $('#main').html(a); instead of $('#main').html = a;.
You should change to code of loader.js to this.
function initialize(a) {
$('#main').html(a);
}
Heres the whole thing you could do.
Html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> </script>
<script src="loader.js"></script>
</head>
<body >
<h1>welcome to my website </h1>
link1
link2
<div id="main"></div>
</body>
</html>
Loader.js
jQuery(document).ready(function() {
jQuery(document).on("click", ".link", function(e) {
e.preventDefault();
var a = $(this).text();
initialize(a);
});
});
function initialize(a) {
$('#main').html(a);
}
Below is the code I have been working on,
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-tagsinput.css" rel="stylesheet">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-tagsinput.min.js"></script>
<script>
var request;
function sendInfo(){
var v=document.main.io.value;
var url="myjsp.jsp?val="+v;
if(window.XMLHttpRequest){
request=new XMLHttpRequest();
}
else if(window.ActiveXObject){
request=new ActiveXObject("Microsoft.XMLHTTP");
}
try{
request.onreadystatechange=getInfo;
request.open("GET",url,true);
request.send();
}catch(e){
alert("Unable to connect to server");
}
}
function getInfo(){
if(request.readyState==4){
var m=request.responseText;
document.getElementById('sam').innerHTML=m;
}
}
</script>
</head>
<body>
<form name="main">
<input type="text" name="io" onkeyup="sendInfo()" data-role="tagsinput"/>
</form>
<div id="sam">
</div>
</body>
I have not included the "myjsp.jsp" file as I'm sure that nothing is wrong with it.
If I create the textbox as follows,
<input type="text" name="io" onkeyup="sendInfo()"/>
then the function "sendInfo()" is called but if I add "data-role='tagsinput'" as,
<input type="text" name="io" onkeyup="sendInfo()" data-role="tagsinput"/>
then the function "sendInfo()" is not called.
I have to write data-role="tagsinput" for generating the bootstrap tags, but I also want the function "sendInfo()" to execute.
Any suggestions on this situation??
Thanks in advance.
you can add the event listener with javascript:
window.attachEvent = function(){
document.querySelector("input[data-role='tagsinput']").onkeyup(function(){
sendInfo();
});
};
window.addEventListener("load", attachEvent);
to make sure for accessibility of your function, define it in window context:
window.sendInfo=function sendInfo(){/.../}
and you can also try body onload attribute:
<body onload="attachEvent();">...</body>