What is wrong with resources loader? - javascript

My page contains the code
<script type="text/javascript" src="${pageContext.request.contextPath}/javascript/head.load.min.js"></script>
<script type="text/javascript">
head.load([ '${pageContext.request.contextPath}/javascript/timecookie.js',
'http://code.jquery.com/jquery-1.10.2.min.js' ],
function() {
console.log("Done loading resources");
});
</script>
<script type="text/javascript">
<!-- this fuction does not work -->
$(document).ready(function(){
$(function(){
$('button').click(function(){
console.log("running");
var url='myapp.com/mainpage.jsp?check='+this.id;
alert(url);
});
});
});
</script>
I faset that jquery (it has been loaded) does not work arter such loading. Whats wrong with resouces loader?

Could you please try with below approach:
<script type="text/javascript">
head.load([ '${pageContext.request.contextPath}/javascript/timecookie.js',
'http://code.jquery.com/jquery-1.10.2.min.js' ],
function() {
console.log("Done loading resources");
$(document).ready(function(){
$('button').click(function(){
console.log("running");
var url='myapp.com/mainpage.jsp?check='+this.id;
alert(url);
});
});
});
</script>

Related

I trying to add below script for list some products while adding this script menu bar is not working. Why?

Please explain?menu bar it is not working.the below code for listing some element.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript" src="/js/lib/dummy.js"></script>
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
$('li a').click(function (e) {
e.preventDefault();
var ullist = $(this).parent().children('ul:first');
if(ullist.is(':visible')){
ullist.hide('slow');
} else {
ullist.show('slow');
}
});
});
//]]>
</script>
The .load function does not refer to the loaded event. Standard jQuery practice is to use the document.ready event:
$(function() { // Shorthand for $(document).ready(function() ...
$('li a').click(function(e) {
e.preventDefault();
var ullist = $(this).parent().children('ul:first');
if (ullist.is(':visible')) {
ullist.hide('slow');
} else {
ullist.show('slow');
}
});
});

Script conflict Mootools Validation with jQuery Slide

Ok guys, I have the following problem I have a script to slideToggle obtained from this site, and another called formcheck.js form validation, I only load one at a time, I can avoid this conflict as I tried $.noConflict(true) without success helps the code is as follows:
<script type="text/javascript" src="js/mootools.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/lang/es.js"></script>
<script type="text/javascript" src="js/formcheck.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){ check = new FormCheck('third', {
display : {
fadeDuration : 500,
errorsLocation : 1,
indicateErrors : 1,
showErrors : 1
}
});
});
$(document).ready(function(){
$("#flip4").click(function(){
$("#panel4").slideToggle("slow");
});
});
$(document).ready(function(){
$("#flip5").click(function(){
$("#panel5").slideToggle("slow");
});
});
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>
Try this for the jQuery part:
jQuery(document).ready(function () {
jQuery("#flip4").click(function () {
jQuery("#panel4").slideToggle("slow");
});
jQuery("#flip5").click(function () {
jQuery("#panel5").slideToggle("slow");
});
jQuery("#flip").click(function () {
jQuery("#panel").slideToggle("slow");
});
});
Or do it all with Mootools:
window.addEvent('domready', function () {
check = new FormCheck('third', {
display: {
fadeDuration: 500,
errorsLocation: 1,
indicateErrors: 1,
showErrors: 1
}
});
document.id("flip4").addEvent('click', function () {
document.id("panel4").toggle();
});
document.id("flip5").addEvent('click', function () {
document.id("panel5").toggle();
});
document.id("flip").addEvent('click', function () {
document.id("panel").toggle();
});
});
If you go for Mootools effects you can use reveal() and dissolve() to hide/show also.

How to run JQuery in combination with other JS-frameworks (here: mootools)?

I have two functions that i want to perform on a page. The first being some jQuery that slowly fades in my site upon loading. The second is some javascript for an auto scrolling div. The problem I am having is getting them to both work on the same page. Separately they work fine. The code looks as below:
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"</script>
<script type="text/javascript" src="mootools-core-1.3.1-full-nocompat.js"></script>
<script type="text/javascript" src="mootools-1.3.1.1-more.js"></script>
<script type="text/javascript" src="scrollGallery.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
var scrollGalleryObj = new scrollGallery({
start:0,
autoScroll: true
});
});
</script>
<script>
$(document).ready(function(){
if (document.images){
$('#container').hide();
$(window).load(function(){
$.fx.speeds._default = 1000;
$("#container").delay(500).fadeIn(2000);
});
}
});
</script>
</head>
Anyone any suggestions as to what I am doing wrong. I am still learning javascript so it might stand out as glaringly obvious to folks on here, in which case i apologise for my newby question in advance!
As your comments seem to have filled up I'll put this here
You will need to use jQuery.noConflict() as you have 2 conflicting javascript libraries in mootools and jquery
As well as this, as IMSoP has pointed out, you will need to only use one DOMReady event and put all your code into one wrapper something like this (not tested)
<script type="text/javascript">
window.addEvent('domready', function() {
var scrollGalleryObj = new scrollGallery({
start:0,
autoScroll: true
});
var j = jQuery.noConflict();
if (document.images){
j('#container').hide();
j(window).load(function(){
j.fx.speeds._default = 1000;
j("#container").delay(500).fadeIn(2000);
});
}
});
</script>
So, something like
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){
var scrollGalleryObj = new scrollGallery({
start:0,
autoScroll: true
});
if (document.images){
jQuery('#container').hide();
jQuery(window).load(function(){
jQuery.fx.speeds._default = 1000;
jQuery("#container").delay(500).fadeIn(2000);
});
}
});
</script>
should work then? - I have definitely not tested it!
Here's another option for you as per Dave Walsh's blog here http://davidwalsh.name/jquery-mootools
Try this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"</script>
<script>
//no conflict jquery
jQuery.noConflict();
// jquery stuff
(function($) {
if (document.images){
$('#container').hide();
$(window).load(function(){
$.fx.speeds._default = 1000;
$("#container").delay(500).fadeIn(2000);
});
}
})(jQuery);
</script>
<script type="text/javascript" src="mootools-core-1.3.1-full-nocompat.js"></script>
<script type="text/javascript" src="mootools-1.3.1.1-more.js"></script>
<script type="text/javascript" src="scrollGallery.js"></script>
<script type="text/javascript">
// moo stuff
window.addEvent('domready', function() {
var scrollGalleryObj = new scrollGallery({
start:0,
autoScroll: true
});
});
</script>
This link will help you.
When we are using two framework of javascript for Jquery we can use JQuery instead of $.
Even you can try this code:
<script type="text/javascript">
var $j = jQuery.noConflict();
jQuery(document).ready(function(){
var scrollGalleryObj = new scrollGallery({
start:0,
autoScroll: true
});
if (document.images){
$j('#container').hide();
$j(window).load(function(){
$j.fx.speeds._default = 1000;
$j("#container").delay(500).fadeIn(2000);
});
}
});
</script>

Loading a page in a div via clicking a link not working in Safari

The following way of loading a page in a div via clicking a link works with all browsers but with Safari.
Can anyone please give me a clue on what is Safari choking on?
Thanks a lot!
<script type="text/javascript">
$(document).ready(function(){
$("#fs").click(function(eventt){
$("#adiv").html('<div id="destiny"></div>');
fs();
});
})
function fs() {
$("#destiny").load("mypage.php", {}, function(){ });
}
</script>
Click me
<div id="adiv"></div>
I think it would work better when you replace .html with below code
.ajaxComplete(function(event, XMLHttpRequest, ajaxOptions) {
});
Old code
<script type="text/javascript">
$(document).ready(function(){
$("#fs").click(function(event){
$("#content").html('<div id="content"></div>');
fs();
});
})
function Diensten() {
$("#content").load("test.php", {}, function(){ });
}
</script>
New Code
<script type="text/javascript">
$(document).ready(function(){
$("#Diensten").click(function(event){
$("#content").ajaxComplete(function(event, XMLHttpRequest, ajaxOptions) {
});('<div id="content"></div>');
Diensten();
});
})
function Diensten() {
$("#content").load("diensten.php", {}, function(){ });
}
</script>
Have you tried simplifying your code to
$(document).ready(function(){
$("#fs").click(fs);
function fs() {
$("#adiv").html('<div id="destiny"></div>');
$("#destiny").load("mypage.php");
}
});

Calling a jQuery function on MouseOver and MouseOut

I have the following code:
<script src="http://code.jquery.com/jquery-1.5.js" type="text/javascript">
$(function() {
$('.webPanel').mouseover(function(){
$('.webPanel').animate({'width': '350px'}, 100);
});
});
</script>
Which doesn't work. As you could probably tell, it's supposed to expand the .webPanel div to 350px on mouseover, but nothing happens.
How can I get this thing to work? I don't understand why it isn't working!
Thank you
You need a separate script inclusion for jquery:
<script src="http://code.jquery.com/jquery-1.5.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('.webPanel').mouseover(function(){
$('.webPanel').animate({'width': '350px'}, 100);
});
});
</script>
<script src="http://code.jquery.com/jquery-1.5.js" type="text/javascript"></script>
<script>
//you script
</script>
And how about hover function
<script src="http://code.jquery.com/jquery-1.5.js" type="text/javascript"></script>
<script>
$(function() {
$('.webPanel').hover(
function(){
$('.webPanel').animate({'width': '350px'}, 100);
},
function (){
$('.webPanel').animate({'width': '500px'}, 100);
}
});
});
</script>
I wrote your script in jsfiddle and it works great.
Please, see the code here.
I think that your problem is due to the code you wrote between the script tags.
Regards.
your function need to be in separate script tag:
<script type="text/javascript"> // this missing
$(function() {
$('.webPanel').mouseover(function(){
$('.webPanel').animate({'width': '350px'}, 100);
});
});
</script> // this missing

Categories

Resources