I have the following code at the end of one of my Views:
#section Scripts {
<script type="text/JavaScript">
$(document).ready(function () {
alert("!!!");
});
</script>
}
What ever I do, I can't get it to fire. I have checked and further up in the code JQuery is included. Using the suggestion here I changed my code to the following to confirm that jquery was correctly loaded. This gives the 'Yeah!' alert when loading the page.
#section Scripts {
<script type="text/JavaScript">
window.onload = function () {
if (window.jQuery) {
// jQuery is loaded
alert("Yeah!");
} else {
// jQuery is not loaded
alert("Doesn't Work");
}
}
</script>
}
The end of the source in my page looks like:
<script src="/Scripts/jquery-1.9.1.js"></script>
<script src="/Scripts/jquery-ui-1.8.24.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/breakpoints.js"></script>
<script src="/Plugins/jquery-unveil/jquery.unveil.js"></script>
<script src="/Plugins/jquery-fademenu/jquery.fademenu.js"></script>
<script src="/Plugins/jquery-block-ui/jqueryblockui.js"></script>
<script src="/Plugins/jquery-slimscroll/jquery.slimscroll.js"></script>
<script src="/Plugins/bootstrap-select2/select2.js"></script>
<script src="/Plugins/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<script src="/Plugins/dropzone/dropzone.js"></script>
<script src="/Scripts/core.js"></script>
<script type="text/JavaScript">
$(document).ready(function () {
alert("!!!");
});
</script>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Chrome","requestId":"6301d560dc274f4ea5ec24b8e0c2a19f"}
</script>
<script type="text/javascript" src="http://localhost:50280/1cd42285f06243669b1fd5837f1f05c3/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
</html>
I can't work out where I am going wrong...
if this coode works properly
window.onload = function () {
if (window.jQuery) {
// jQuery is loaded
alert("Yeah!");
} else {
// jQuery is not loaded
alert("Doesn't Work");
}
}
and this code doesn't :
$(document).ready(function () {
alert("!!!");
});
your likely problem is that there is a conflict with the dollar sign $
I would type out jQuery instead of using the dollar sign , or of course you can do something like this:
var j = jQuery.noConflict();
then you can do use the j where you used to use $
OR... there is simply just an error in the console that you still have not responded about , if that is the case I will update answer
EDIT::
The reasons that you code was not executing was because javascript is weird in the sense that if there is an error anywhere in the block of javascript code then nothing below it will be executed. That is why I asked if there were any console error's. Checking the console is the first step to solving any javascript error.
remove #section Scripts block put script block only and try... if not then remove all js use only jquery and try it will definatly. now add one by one script and find one which is conflicting. .
Related
for SEO reasons I try to descent js to footer in a big website make with prototype and jquery.
I try to encapsulate the jquery and prototype propertyes in the body to run after in footer I keep the variables and functions to make interactions.
with jquery works fine but i have problems with prototype.
here the idea in psedocode
<html>
<head>
<script type="text/javascript">
var domReadyQueue = []; // this var encapsule all js in the page
</script>
</head>
<body>
some Div and other tricks
<script type="text/javascript">
//<![CDATA[
domReadyQueue.push(function ($) {
new RegionUpdater('country', 'region', 'region_id', <?php echo $this->helper('directory')->getRegionJson() ?>);
})
//]]>
</script>
some Div and other tricks
<script type="text/javascript">
//<![CDATA[
var loginForm;
domReadyQueue.push(function($){
loginForm = new VarienForm('login-form', true);
$('login-email').observe('keypress', bindLoginPost); //here is the error
$('login-password').observe('keypress', bindLoginPost);
})
function bindLoginPost(evt){
if (evt.keyCode == Event.KEY_RETURN) {
loginForm.submit();
}
}
function onepageLogin(button)
{
if(loginForm.validator && loginForm.validator.validate()){
button.disabled = true;
loginForm.submit();
}
}
//]]>
</script>
some Div and other tricks
<script type="text/javascript" src="http://prototype.js"></script>
<script type="text/javascript" src="http://jquery.js"></script>
<script type="text/javascript">
jQuery(function(){
while (domReadyQueue.length) {
domReadyQueue.shift()(jQuery);
}
});
</script>
</body>
</html>
in console the error say
console error Uncaught TypeError: $(...).observe is not a function
exist a way to call prototype code with jquery?
exist a way in prototype to encapsulate? i can use this var to jquery and use other to prototype.
Maybe another idea to put jquery anf prototype in the footer? with a less impact in the rest of code?
the website have millons of lines, and works, change or re-thinks all is very complicate.
I can't seem to get my javascript to work on my page, the same code works on another page, but not the one i'm using currently. the code is:
<script type="text/javascript">
function codeAddress() {
var $scores = $("#usersload");
setInterval(function () {
$scores.load("users.php #usersload");
}, 15000);
}
window.onload = codeAddress;
</script>
The above code should refresh a div on the page every 15 seconds, when the page loads, but does nothing, but on my other page it does what its suppose to.
if you need more code from my page let me know, but if you can help, thanks in advance!
Javascript on page:
<script>var init = [];</script>
<!-- Get jQuery from Google CDN -->
<!--[if !IE]> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- <![endif]-->
<!--[if lte IE 9]>
<script type="text/javascript"> window.jQuery || document.write('<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">'+"<"+"/script>"); </script>
<![endif]-->
<!-- Pixel Admin's javascripts -->
<script type="text/javascript" src="assets/javascripts/bootstrap.min.js?parameter=1"></script>
<script type="text/javascript" src="assets/javascripts/pixel-admin.min.js?parameter=1"></script>
<script type="text/javascript">
init.push(function () {
// Javascript code here
});
window.PixelAdmin.start(init);
</script>
<script type="text/javascript">
function codeAddress() {
var $scores = $("#usersload");
setInterval(function () {
$scores.load("users.php #usersload");
}, 15000);
}
window.onload = codeAddress;
</script>
Could it be possible.
Have you added jQuery to the page yet, before this script block ofcourse.
The simplest way to do so..
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
Tried this on y page and this works
<script type="text/javascript">
function call(){
var $scores = $("#usersload");
$.post('user.php',{blankpost:''}, function(result){
$scores.html(result);
});
}
function codeAddress() {
setInterval( function(){
call();
}, 1000);
}
window.onload = codeAddress();
</script>
the blank post is ust to post something on the page, and just display the result
On the last line of your code, you have:
window.onload = codeAddress;
With that being said, shouldn't you still have to pass it an empty parameter such as the following?
window.onload = codeAddress();
My html file has various functions which requires two different jquery versions. In the head section I have them loaded like this:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript">
var $jq16 = $.noConflict(true);
</script>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript">
var $jq21 = $.noConflict(true);
</script>
I mostly need to use jquery-2.1.0.min.js so in all my scripts I've replaced every single $ with $jq21.
For instance, if I ony include jquery-2.1.0 in my page and leave out v1.6, then the following script works fine. But when I include v1.6, and switch $ to $jq21, and also include the noConflict code, this script doesn't work:
<script>
$jq21('#form-signup_v1').validate({
submit: {
settings: {
inputContainer: '.field'
},
callback: {
onBeforeSubmit: function (node) {
myBeforeSubmitFunction(':D', ':)', node);
},
onSubmit: function (node) {
console.log('#' + node.id + ' has a submit override.');
//node.submit();
}
}
},
debug: true
});
function myBeforeSubmitFunction(a, b, node) {
document.getElementById("form-signup_v1").submit();
console.log(a, b);
$jq21(node).find('input:not([type="submit"]), select, textarea').attr('readonly', 'true');
$jq21(node).append('<div class="ui active loader"></div>');
}
</script>
Every $ on the page is switched to $jq21 and the scripts won't work.
Any ideas? Thank you.
I got this script:
<script>
$(document).ready(function () {
$('a[#href^= ""] img').parent().click(function () {
var linkz = $(this).attr("href");
if(linkz.toLowerCase().indexOf("http: //www.website.com") >= 0) {
window.open($(this).attr("href"));
return false;
} else {
window.open("http://www.website.com/p/img.html?img=" + $(this).attr("href "));
return false;
}
});
});
</script>
To open all images in a new page passing the image url in the new link. but i'm getting
TypeError: $ is not a function.
I've tried to add jQuery(document) instead of the $(document) but then i got the
$('a[#href^=""] img') TypeError: $ is not a function
here.
Either you didn't include jQuery, or else you ran noConflict() and it released control of $.
http://api.jquery.com/jQuery.noConflict/
If you used noConflict, you just need to use jQuery() throughout, including jQuery('a[#href^=""] img').
It looks like you're not including jQuery correctly as the browser doesn't know what $ is. Make sure you include something like this in <head> to include jQuery:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
you havent added the jquery add this at <head></head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
if you are testing locally , and you have a llow bandwith , then download the script one time **
http://code.jquery.com/jquery-1.9.1.min.js **to your folder and
use <script src="jquery-1.9.1.min.js"></script>
Try this;
<script language="JavaScript" type="text/javascript" src="jquery/jquery.js"></script>
<script>
jQuery.noConflict();
(function ($) {
function readyFn() {
// Set your code here!!
}
$(document).ready(readyFn);
})(jQuery);
</script>
Or in your case:
<script language="JavaScript" type="text/javascript" src="jquery/jquery.js"></script>
<script>
jQuery.noConflict();
(function ($) {
function readyFn() {
$('a[#href^= ""] img').parent().click(function () {
var linkz = $(this).attr("href");
if(linkz.toLowerCase().indexOf("http: //www.website.com") >= 0) {
window.open($(this).attr("href"));
return false;
} else {
window.open("http://www.website.com/p/img.html?img=" + $(this).attr("href"));
return false;
}
});
}
$(document).ready(readyFn);
})(jQuery);
</script>
i have following lines included at the bottom of my index.php:
<script type="text/javascript" language="javascript" src="class/jquery-1.4.3.min.js"> </script>
<script type="text/javascript" language="javascript" src="class/jquery.nivo.slider.pack.js"></script>
<script type='text/javascript' language='javascript'>
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
problem lies in $(window).load ...
index.php's body is updated onload through ajax call which delivers div#slider upon matching. this makes it nivoSlider() not executing. do you have any trick to make this thing work. i do prefer non-jquery way around it, but at the end of the day anything helps.
many thanks
WEBPAGE IS HERE
Add the call in the callback for the AJAX load.
$('.something').load( 'http://www.example.com/foo', function() {
$(this).find('#slider').nivoSlider();
});
Example using your code (for body):
$(function() { // run on document ready, not window load
$('#content').load( 'page.php?c=2&limit=5', function() {
$(this).find('#slider').nivoSlider();
});
});
For link:
<!-- updates links like so -->
<a class='nav' href='page.php?category=art&limit=5&c=1'>art</a>
// in the same document ready function
$('a.nav').click( function() {
var $link = $(this);
$('#content').load( $link.attr('href'), function() {
$(this).find('#slider').nivoSlider();
$link.addClass('selected'); // instead of setting bg directly to #828282;
});
return false; // to prevent normal link behavior
});
Would you not want to use $(document) rather than $(window)?
$(window).load(function() {
$('#slider').nivoSlider();
});
or shorthand
$(function() {
$('#slider').nivoSlider();
});