I have ajax tabs that load external files
see demo here please bottom of the page
http://www.php-help.ro/examples/mootools_fancy_tabs/
they work perfect but my external file has additional 1 javascript file and inline javascript
example :
<script type="text/javascript">
window.addEvent('load', function(){
/*something here*/
});
</script>
on tab load any request to script tag is removed , I dont see anywhere in the file itself that
evalScripts: is set to false , I also added it in right after
url:this.tabs[key].get('href'),
I setup the file on Jsfidle but seems like ajax can load only internal files
http://jsfiddle.net/PUsBg/16/
if anyone could help me out just to be able to load my own script within the ajax tab.
Thank you!
This is probably the result of parsing the request, with the javascript being thrown out in the process. If you include javascript within a CDATA-section, it should not be parsed and still be included:
<script type="text/javascript">
/* <![CDATA[ */
window.addEvent('load', function(){
/*something here*/
});
/* ]]> */
</script>
Related
I am facing an issue with my script that uses the jQuery .load() method. The script is designed to load the content from a URL into a specific element on my page when a user clicks on a nav link. However, I am receiving the error message "TypeError: $(...).load is not a function." and I am not sure why this is happening.
Here is my script:
<script>
$(document).ready(function() {
// Add click event listener to all nav links
$(document).on('click', '.nav-link', function(event) {
event.preventDefault();
// Get the URL of the clicked link
var url = $(this).attr('href');
// Load the content from the URL into the content-column
$('#content-column').load(url);
});
});
</script>
I have made sure that I am using the latest version of jQuery and that it is properly included in my HTML file.
If anyone has any experience with this issue or knows how to resolve it, I would greatly appreciate your help.
Thank you!
Currently all scripts I have tried either result in a redirect to the actual url or the script works for one click and then stops working after that.
Is there a simple way (or what could be the simplest way) to include a html-code fragment, which is stored in a text file, into a page code?
E.g. the text file fragment.txt contains this:
<b><i>External text</i></b>
And the page code should include this fragment "on the fly". (Without php ...?)
The Javascript approach seems to be the preferred one. But with the examples below you possibly can get problems with cross origin requests (localhost to internet and vice versa) or you can have security problems when including external scripts which are not served via HTTPS.
An inline solution without any external libraries would be:
<!DOCTYPE html>
<html>
<body>
<div id="textcontent"></div>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
document.getElementById('textcontent').innerText = xhttp.responseText;
};
xhttp.open("GET", "content.txt", true);
xhttp.send();
</script>
</body>
</html>
Here you need a file content.txt in the same folder as the HTML file. The text file is loaded via AJAX and then put into the div with the id textcontent. Error handlings are not included in the example above. Details about XMLHttpRequest you can find at http://www.w3schools.com/xml/xml_http.asp.
EDIT:
As VKK mentioned in another answer, you need to put the files on a server to test it, otherwise you get Cross-Origin-Errors like XMLHttpRequest cannot load file:///D:/content.txt. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
You need to use Javascript to do this (or perhaps an iframe which I would avoid). I'd recommend using the JQuery framework. It provides a very simply DOM method (load) that allows you to load the contents of another file into an HTML element. This is really intended for AJAX calls, but it would work in your use case as well. The fragment.txt would need to be in the same server directory as the html page (if it's in a different directory just add on a path).
The load method is wrapped in the $(document).ready event handler since you can only access/edit the contents element after the DOM (a representation of the page) has been loaded.
Most browsers don't support local AJAX calls (the load method uses AJAX) - typically the HTML and txt files would be uploaded to a server and then the html file would be accesed on the client. Firefox does support local AJAX though, so if you want to test it locally use Firefox.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script>
$(document).ready(function() {
$("#contents").load("fragment.txt");
});
</script>
</head>
<body>
<div id="contents"></div>
</body>
</html>
With javascript. I use it.
Example:
<!DOCTYPE html>
<html>
<script src="http://www.w3schools.com/lib/w3data.js"></script>
<body>
<div w3-include-html="content.html"></div>
<script>
w3IncludeHTML();
</script>
</body>
</html>
Good Morning comunity, im really new on this coding so iam sorry if this question is too noob.
I want a DIV PA load automatically a php file when i open the web page, please i dont want to load with any interval, just load instant when open web.
I tried this code but im sure it is not working
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function)()
{
$('#apDiv3').load('xFile.php');
}
);
</script>
Thank you in advance for your time!!
Have you checked the result with a debugger like Firefox's Firebug? Check the network communication to see if the ajax request was completed successfully.
Also, you can try to a callback function to see if the code was executed successfully:
$( "#result" ).load( "ajax/test.html", function() {
alert( "Load was performed." );
});
if you don't get the expected output, it might be a problem on the server-side.
Also... are you sure you are using this exact code? I don't think you should close the brackets after function
$(document).ready(function)
this is how you do it:
$(document).ready(function() {
....
Ok So I have a div that loads some data and makes the entire page load slowly. Fortunately this data can wait and I would like to load it last. I've seen the other posts like this but need a bit more help getting it to work as I am fairly inexperienced.
So for example I have:
<div id="stuff">
<?php Some PHP Here ?>
</div>
Now I have
$(window).load(function () {
$('#stuff').load('');
});
A few questions...Do I create an empty div and then fill it with the data or can I have the data in there and then specify that to load last, which would be preferred if possible.
I understand I can have a webpage loaded like $('#stuff').load('stuff.php'); but I use a variable inside the div so how would I pass it to that load function and into the php page?
I just don't know how to pass variables up to the javascript everytime that div is loaded as it's in a while loop.
Thanks for the help.
Because javascript processes on client side and PHP runs on server side, you cannot do PHP operations on HTML that have already been loaded (page has already been sent from server to client, so it is not reachable by PHP anymore).
Bacause of this fact you are going to need javascript AJAX for this.
Because you are beginner I suggest you use an ajax function from jQuery javascript framework for this matter. It works the same as javascript function and handles many operations automatically.
As you correctly presumed, you can first display your empty div and then, ... after page is fully loaded, you can call your ajax.
This ajax basically asks PHP script to provide loaded page with data that will be displayed in specified html element.
Code should look like this:
Include this to your PHP file with content that you load:
<script type="text/javascript">http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js</script> <!--loads jquery framework-->
<script type="text/javascript">
$(document).ready(function() {
//when page is loaded
$.ajax({
url: "ajax.php" //script with your data selection
}).done(function(data) { //when ajax call success
$("#ajax-element").html(data); //insert data returned from ajax.php into div with id ajax-element
});
});
</script>
<div id="ajax-element"></div>
This is PHP ajax file that will return data for you (just echo everything that you want to have in your "ajax-element" div, for example:
<?php
echo "some text";
?>
For more info you can find jquery AJAX specification here.
I am using CKEditor in my web app and new to it. It seems my js file isn't downloading with CKEditor, how to include external js files in CKEditor ?
Configuration related js needs to be in config.js
All plugin related files go in the plugins plugins/[plugin_name]/plugin.js
You'll need to add them to the config using extraPlugins config.extraPlugins: 'plugin',
If you want to do something else you can just load another .js
for example:
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="customcode.js"></script></code>
in customcode.js you can put your eventhandling and overrides
CKEDITOR.on( 'instanceReady', function( ev )
{
alert("CKEditor is loaded");
});