I have multiple jquery files in my project. I am using facebox using jquery1.4.2 but i need prototype and scriptacolous scripts too. I have used jQuery.noconflict(); in my code but its not working.
this is the url http://mlep.com/~avalon/wordpress/ideas-and-insights/case-studies/.
it should be in this manner of arrangement,
load other libraries and other non-jQuery scripts
load jQuery library.
call jQuery.noConflict.
load jQuery plugins
other jQuery stuff or codes..
codes like this,
<script type="text/javascript" src="http://mlep.com/~avalon/wordpress/wp-content/themes/twentyten/facebox/jquery14.js"></script>
<script type="text/javascript">
var ang = jQuery.noConflict();
</script>
<script type="text/javascript" src="http://mlep.com/~avalon/wordpress/wp-content/themes/twentyten/facebox/facebox.js"></script>
<script type="text/javascript">
// other jQuery Codes here...
</script>
Related
I have my php page loaded with hash, and the page is with jquery plugin dataTable,
plugin is loaded but not working, if i reload page, then it is working. ..but not working with jquery ajax loaded with hash.
PHP page contain following script loaded:
<link rel="stylesheet" media="screen" href="lib/datatables/css/vpad.css" />
<script type="text/javascript" src="js/jquery.dataTables.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#example').dataTable( {
"sPaginationType": "full_numbers"
} );
} );
</script>
ok do some thing like this
place this code in your ajax loaded page ....
<script type="text/javascript">
$('#example').dataTable( {
"sPaginationType": "full_numbers"
} );
</script>
this is because data table not working in live loaded pages. there are other many ways to do this but this is simple and easy
100% works
I have a page, php and javascript. Sometimes, the javascript files do not load, then my page will work properly.
I have include 5 javascript file (jQuery plug-in), i want to know:
how can i improve javasccript loader?
how can i reload the scriptfile if the script files do not loaded properly?
I have checked when the php page takes more than 10 sec to load the page will be broken.
Thank you
Tip #1:
Have the Javascript files load at the end of your page.
Javascript does not need to be send over HTTP so soon, as it's use is only for dynamic changes after the page is loaded.
Move:
<script type="text/javascript" src='src/jquery_1.7.min.js' ></script>
<!-- fancybox -->
<!--<script type="text/javascript" src="src/jquery.mousewheel.js"></script>-->
<script type="text/javascript" src="src/jquery.fancybox.js?v=2.0.6"></script>
<script type="text/javascript" src="helpers/jquery.fancybox-buttons.js?v=1.0.2"></script>
<script type="text/javascript" src="helpers/jquery.fancybox-thumbs.js?v=1.0.2"></script>
<script type="text/javascript" src="helpers/jquery.fancybox-media.js?v=1.0.0"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-16476667-10']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
function fireWhenReady() {
if (typeof function1 != 'undefined') {
function1();
}
else {
setTimeout(fireWhenReady, 100);
}
}
$(document).ready(fireWhenReady);
</script>
to the bottom of the page.
Tip #2:
In addition, try and maintain your Javascript code in two versions:
Sandbox: Your version of the code which is divided nicely into modules.
Release: The website's version of the code which is placed all into one Javascript file and minified using something like YUI Compressor. This reduces the file size and increases load speed by decreasing the amount of HTTP requests accordingly.
Tip #3:
Replace:
<script type="text/javascript" src='src/jquery_1.7.min.js' ></script>
with:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
Most users today have the Google API version of jQuery cached so this loads much faster than having to load your version on hand.
Enjoy and good luck!
Well the code looks neat.
But I would place the $(document).ready() script in the <head> and group css and javascript loading together.
Looking at the comments and guessing the problem you might be having, I think your scenario is:
You are setting a JavaScript variable in PHP, and using it. All your script is dependent on this variable, and so you need to load that in head
Things are not executing in order, due to latency.
If above is correct then I think following might work
Go ahead with JavaScript in head and have a namespace declared, like var MyBook; MyBook.chapterId = <%= echo $chapter-id %>. But then move all your other code as last script file before the ending of the body tag.
Additionally, load the $(document).ready(function() {}), and use the MyBook.chapterId there. You might use it now for an AJAX call or have a function to load the chapters, and pass this variable to that function
I am using Ajax link to update div in my view page. Example : I have 2 ctp file say view1.ctp and
view2.ctp, I want to update the div in the view1.ctp using the ajax call in view2.ctp. Can anybody
give me the hint to resolve this issue
Thanks in advance
Pushpa
you can use jQuery for a better approach.
eg:
<script type="text/javascript">
$.get('view2.ctp', function(data) {
$('#divview1').html(data);
});
</script>
and in view1.ctp
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
function loadData(){
$.get('view2.ctp', function(data) {
$('#divview1').html(data);
});
}
</script>
</head>
<body>
<div id="divview1"></div> Load data from view2.ctp
</body>
</html>
if you don't want to use jQuery you can use XMLHttpRequest, but jQuery is way more easier to use.
I have a php iFrame inside an html page. I have to do it this way because its a 3rd party site. I am trying to call the some url vals with $_GET[] but its not working. Then I figured out its a path problem.
How can I call the url vars from a php iFrame in html?
Thanks
Php is server side, but to manage you frames you need something like javascipt which works on client side. I'm affraid that you mix those two things.
http://www.tek-tips.com/viewthread.cfm?qid=1281918&page=6
<script type="text/javascript" language="javascript">
<!--
function refreshIframe(){
var iframeid = "sessionlog";
var h = parent.window.getElementById(iframeid).src;
parent.window.getElementById(iframeid).src = h;
}
//-->
</script>
Plus you need code which performs redirect:
<SCRIPT language="JavaScript">
<!--
window.location="http://someplace.com";
//-->
</SCRIPT>
Stupid question, but does anyone know how to load google's jquery from an external script so it doesnt clunk up my header? In other words, I want to take the code below (probably starting at the google.load stuff and save it inside another file to include in my header. I want to keep my view source pretty :)
<script src="http://www.google.com/jsapi?key=MySeCretKeyHere" type="text/javascript"></script>
<script type="text/javascript">google.load("jquery", "1.4.0");google.load("jqueryui", "1.7.2");
google.setOnLoadCallback(function(){ $(document).ready(function(){
//onload stuff goes here
});});
</script>
Just as you say:
load.js:
google.load("jquery", "1.4.0");google.load("jqueryui", "1.7.2");
google.setOnLoadCallback(function(){ $(document).ready(function(){
//onload stuff goes here
});});
html:
<script src="http://www.google.com/jsapi?key=MySeCretKeyHere" type="text/javascript"></script>
<script src="load.js" type="text/javascript"></script>