Im converting a website in blazor,
i have a page where at the end ther's this javascript
(function ($) {
"use strict";
$(document).ready(function () {
$('#slider-range').slider({
..... more
How can i call it in blazor?
I did not find a solution that works
Thanx
Yes it can work, the problem is blazor does not understand $ jquery selector, you need to replace it with document in .js script for it to work.
for example,
change $('#slider-range').slider({ to document.getElementById('#slider-range').slider({ then this line will work and same for everyplace where $ is present. And just remove it from function definition like this (function () {
Related
In my project every page loads a cdn jquery script. some use $ and some use jquery. and now I have to use my new script file 'myNewScript.js' in every page.
If I write my function like $(function (){}) it gives error on some pages like
$ is not function
and if I write function like this jquery(function (){}) then it also give error on other page like
jquery is not a function.
I want to know can we use both $ and jquery as variable . like in same script file say 'myNewScript.js' I want to write $(function (){}) and jquery(function (){}).
Every thing is dependent on each other so I can't reverse the loading of the script. I can't think of any solution...
jQuery should always be available using the name jQuery (note the uppercase Q). So use that:
jQuery(function (){})
You can also wrap your code in an IIFE if you would like to refer to jQuery as $ while dealing with the uncertainty whether the global $ actually refers to it:
(function ($) {
$(function () {
// on ready stuff
});
})(jQuery);
Define jQuery locally for yourself by looking for both variables.
var myJquery = jquery || $;
I've encountered a strange problem with my chrome app i'm developing at the moment.
I want to use the "knob" extension to use it for a alarm-clock slider (to set the time)
This wouldn't be a really difficult matter, wouldn't it be for the restrictions and strange issues found while programming a chrome app.
In my index.html file I included the jquery library and the knob extension. And that is where the problems started. Somehow, my scripts only can use the Id's of elements that are above them. So when I include the tags between the tags, nothing executes, if I put them after the first tags they only work with the things that are in this div container. thats why I put the script just before the tag. That works well for "normal" javascript usability. But because I have a that referes to a jquery function (for the knob) the jquery library should be already loaded before the function gets executed (if not, it just doesn't work). I tried to get a workaround by using these posibilities:
document.onload=test();
function test(){
$(function() {
$(".dial").knob();
});
}
document.onload=test();
$(function test() {
$(".dial").knob();
});
}
document.onload=$(function() {
$(".dial").knob();
});
}
well.... It didn't work. I also tried window.onload, with the same reuslt. does someone have a solution? It would be of great help.
Thank you,
neissen
Try like this:
$(function() { //document ready function
function test(){ //inside the ready function
$(".dial").knob();
}
test(); // and call the function here
});
Your Problems:
jQuery may not be loaded but you used some vanilla JS to handle jQuery, which will cause errors.
May be related to global and local.
For the external scripts, functions are only fired locally, which means the global object which contains the html won't be able to be accessed.
To make a global function and a jQuery library - JS:
if ("undefined" === typeof jQuery) {throw new Error("This library requires jQuery"); }
$(function() {
window.myFunction = function() {
doSomething();
}
doSomething();
})
Works calling from HTML - HTML:
<script>
$(function() {
doSomething();
})
</script>
Above is the safest way to approach a jQuery library. The $(function() {... part means exactly the same as $( document ).ready(function() {..., execute if loaded and ready, ensures the browser knows how to deal with all the functions used.
I am using AJAxsolr framework for building my search UI.
I have an index file which is an html file. This file has all the necessary script imports that import the javascript files. I have a javascript file script1.js which has a function as follows:
function myfunction(){
//Do the necessary stuff
}
I have another js file mywidget.js which is my custom widget. It has the following function:
(function ($) {
AjaxSolr.MyWidget = AjaxSolr.AbstractTextWidget.extend({
init: function(){
}
// and other functions
}
});
I want to call the function myfunction() in script1.js from the mywidget.js file. I tried the $.getScript() function but couldn't get to call the function.
Can someone help me on this please?
Thank you!
You need to load the script1.js file before the mywidget.js file (ie. place one before the other in the HTML).
From there you should be able to call myFunction with no problems.
If after this you're still having issues, you can use $.fn.myFunction() to extend jQuery's prototype. In essence by doing this you'll be adding functionality to jQuery.
Take a look at this site:
http://www.magiskecirkel.no/
It says $ is not a function, although jQuery is loaded.
I know I have asked this question before, and it was fixed, but now apparently the problem is back... So sorry for re-posting, and thanks for all help.
For some reason, the last line of your jQuery file is the following:
jQuery.noConflict();
See jQuery.noConflict for what this does.
To get around it, you can use the following way of doing document ready:
jQuery(document).ready(function($) {
// use jQuery with the $ symbol
});
Alternatively, remove that line from jQuery.js if you can.
In global.js, can you change this line:
$(document).ready( function($) {
to:
$(document).ready( function() {
The error I get is on the line $(document).ready( function($) { You don't need the $ in the function call.
use jQuery noConflict() when using with other libraries
$.noConflict();
jQuery(document).ready(function($) {
// Code that uses jQuery's $ can follow here.
});
I'm writing my own Drupal 7 module, and like to use JQuery in it.
$('#field').toggle();
But I'm getting this error:
TypeError: Property '$' of object [object DOMWindow] is not a function
It seems that JQuery is not loaded. Otherwise $ should be defined.
Though I actually include it in the header:
<script type="text/javascript" src="http://rockfinder.de/misc/jquery.js?v=1.4.4"></script>
Do I have to do anything else to activate JQuery in Drupal? Is $ being overwritten by Drupal?
That's the website: http://rockfinder.orgapage.de
From the Drupal 7 upgrade guide:
Javascript should be made compatible
with other libraries than jQuery by
adding a small wrapper around your
existing code:
(function ($) {
// Original JavaScript code.
})(jQuery);
The $ global will no longer refer to
the jquery object. However, with this
construction, the local variable $
will refer to jquery, allowing your
code to access jQuery through $
anyway, while the code will not
conflict with other libraries that use
the $ global.
You can also just use the 'jQuery' variable instead of the $ variable in your code.
According to Firebug, your jQuery file is being loaded:
But the $ is being overwritten by something else:
What you should do is encapsulate the use of the $ variable with a function that invokes itself using the jQuery object as it's first actual argument:
(function ($) {
// in this function, you can use the $ which refers to the jQuery object
}(jQuery));
Chances are your script is not initialized this way, you'll have to use Drupal.behaviors.YOURTHEMENAME
(function ($) {
Drupal.behaviors.YOURTHEMENAME = {
attach: function(context, settings) {
/*Add your js code here*/
alert('Code');
}
};
})(jQuery);
"$ is not a function" is a very common error that you may face while working with jQuery. You can try any answers of given below:
(function($){
//your can write your code here with $ prefix
})(jQuery);
OR
jQuery(document).ready(function($){
//Write your code here
});
Basically this will allow our code to run and use the $ shortcut for JQuery.
You can create the separate file for js and than add js file using the following:
drupal_add_js('path', 'module_name');