I use aspnetmvcturbolinks in own project but, the jquery api that written in body is undefined. I move js files to head of layout .
$(document).on('keyup', 'input[name=keyword]', function () {
alert(this.attr("name"));
return false;
});
in this above code attr api is undefind!! what is solution?
thanks.
It's because you have to pass this to jQuery to use jQuery methods...
$(this).attr("name")
... else it looks into the object and returns undefined
Related
new to writing a function in jquery, just testing the waters.
I have this just to to demo:
(function ( $ ) {
$.fn.update_notifications = function( options ) {
// This is the easiest way to have default options.
var settings = $.extend({
// These are the defaults.
user_id: 0,
}, options );
alert('test');
};
}( jQuery ));
Which I include in a JS file included before the tag. What I want to know, is how to actually call it inside my html?
I was thinking something like:
<script type="text/javascript">
jQuery.update_notifications({
user_id: 1
});
</script>
But that tells me "jQuery.update_notifications is not a function"
You want to call it on selected element like this:
$("some_element").update_notifications();
You can find more here at the official documentation.
No, the function is not part of the jquery object, but of its fn child object
$.fn.update_notifications();
However, it doesnt make sense to add something to the jquery prototype if youre not doing sth jqueryobjectbased
To fix the issue you simply need to change $.fn.update_notifications to $.update_notifications. The $.fn namespace is used for attaching functions to instances of jQuery objects.
(function($) {
$.update_notifications = function(options) {
var settings = $.extend({
user_id: 0,
}, options);
console.log('test');
};
}(jQuery));
jQuery.update_notifications({
user_id: 1
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
That being said, your example is a little redundant as you've just wrapped the existing $.extend() function without adding any real logic - although I assume this is a work in progress.
If your function has nothing to do with any DOM elements, i would suggest you not to pollute jQuery. You can very well declare this function some where else (page, separate JS file etc.).
But if you still want to do this, you can try these
$.update_notifications();
or
$(window).update_notifications();
or
$(document).update_notifications();
Why are you exactly extending the Jquery object?
Usually, lacking a valid reason to do so you would simply write a function inside your script.
Let's assume you have a valid reason and proceed:
Once you bind your function to $ or better create object like $.custom and bind the function (and rest of custom things you wanna bind to Jquery) you can use it like a normal function - only prefix it with $.custom
Not sure I understand your question but are you searching how to run that function from HTML other than using jquery?
Are you asking for an example like this?
<p id="onThis" onclick="$.custom.yourFunctionName()">Click me.</p>
That is obtrusive JS code and is not best practice when dealing with Jquery.
You wanna bind that function to element with on or click handler when document is ready:
$(document).ready( function() {
$('#onThis').on('click', function here);
// OR //
$('#onThis').click(function here);
});
If there is no reason to bind it to jQuery, don't do it you are only implying to someone reading your code something that doesn't exist ;)
I got this JQuery code:
file: code.js
jQuery(function(){
function renderSVG(){
//Something
};
});
File: index.html
<script>
function mostrarOdonto() {
renderSVG();
};
</script>
But i got a problem here:
http://i.gyazo.com/9550a64fc16c7570107706fb2162d84f.png in renderSVG() inside mostrarOdonto()
"Uncaught ReferenceError: renderSvg is not defined"
I tried $renderSVG(); but doesnot work. Anyone can help me?
Thanks so much!
PD: Sorry bad english
That is caused by javascript closures. It is local within the jQuery call and not accessible outside. You can read more about it here: MDN Documentation
You can declare objects outside of the jQuery function call to have it available globally. i.e.:
function RenderSVG(){
//Do Stuff
}
jQuery(function(){
RenderSVG();
});
This ensures that it is accessible outside the jquery scope
or if you really need it within jQuery you can go the route of a jQuery Plugin a la: jQuery docs
Example:
(function( $ ) {
$.fn.renderSVG = function( options ) {
//Do Stuff with canvas since it would be referenced in this.
};
}( jQuery ));
Then you can call it like: $('#mycanvas').renderSVG({/*options*/});
Update 1:
You have to ensure when your code is called after loading jQuery and any plugins.
in your <head> tag
you should put <script src=".../jquery.min.js"> or whatever your file for jquery is called
followed by any plugin scripts ...src="jquery.svg.js", then you put your code:
<script>
function RenderSVG(){
}
//And most important is that you call it after it is ready. In this example
//I use jQuery(window).load you can also use jQuery(document).ready
jQuery(window).load(function(){
RenderSVG();
});
</script>
if it still doesn't work you have to ensure the library for the svg methods aren't doing something weird. To be sure we would have to know the library you are using.
The function renderSVG() is a local function,since it is inside jQuery(function(){ }. It is valid only in that scope , So it is not accessible via other scopes. So try it like this.
<script>
jQuery(function(){
function mostrarOdonto() {
renderSVG();
};
};
</script>
You can Do it in this way JSFIDDLE LINK
HTML:
<input type="button" value="go" onclick=" mostrarOdonto();">
Scripts:
$.renderSVG = function() {
alert("I am calling form jquery");
};
$(document).ready(function() {
alert("function is ready to use now");
});
function mostrarOdonto() {
$.renderSVG();
};
This should work as per your requirement. The Jquery part can go into your Code.js file.
I think could help you it's simple and straight forward
$(document).ready(function() {
mostrarOdonto();
});
function renderSVG() {
alert("Testing purpose only");
};
function mostrarOdonto() {
renderSVG();
};
Im creating a theme for wordpress and I need to use some jQuery. Ive found bits of code online and ive made a few bits myself. However, when using jQuery provided by wordpress it is in noConflict mode and instead of using $ it is set to "jQuery". That is fine but I dont want to have to modify all my code and any code I find online to use "jQuery" instead of $.
So it tells me that by placeing function ($) at the end you are able to use the $ as the jQuery alias, but only in that functions scope. That is fine, but I was hoping that it would work and pass through to the functions I call from inside that scope. That is where my problem is. How can I make the jQuery code that uses $ inside my "resizeandcenter" function work.
jQuery('.artworklist > li > a > img').load(function ($){
resizeitems('artworklist');
});
This is my function that I want to be able to use the $ inside as I dont want to have to modify all my code / and any code I find online.
function resizeitems(elementname){
//Do some jquery stuff using $
}
Perhaps there is an alternative way to do what I am doing or I am doing it wrong?
EDIT:
My function "resizeitems" is on its own in a js file thats included in my page header.
The other code, the jQuery code in my first code block is at the bottom of the page in a script block.
So im a bit unsure about the answer saying to wrap my function?
You can wrap your entire code in a self executing closure (or an on ready/load closure) like this
(function ($) {
// do your stuff here
}(jQuery));
Then you can use $ within that closure
Here is an example on jsfiddle for you
window.addEventListener("load", function () {
(function ($jq) {
$jq("body").append($jq("<div>").text("hello"));
}(jQuery));
}, false);
Here is an example using jquery's ready event listener
jQuery(document).ready(function() {
(function ($jq) {
$jq("body").append($jq("<div>").text("hello"));
}(jQuery));
});
On jsfiddle
Or a further alternative in jquery, mostly syntax change, as suggested by #Mathletics
jQuery(function($jq) {
$jq("body").append($jq("<div>").text("hello"));
});
On jsfiddle
You need to pass jQuery into the top-level closure containing your code. Usually this is inside the $(document).ready() call. A basic example looks like this:
jQuery(function($) {
function resizeitems(elementname){
//Do some jquery stuff using $
}
$('.artworklist > li > a > img').load(function (){
resizeitems('artworklist');
});
});
jQuery is now aliased to $ inside of that closure.
All what matter is scope here. If your other functions are in some other scope you can just remap global jQuery to $ in that scope, so that you don't have to change the code.
var $ = jQuery;
You can even set it in global scope, but you may affect other usage of $ on the page if it was used for something else:
window.$ = jQuery;
I am going to wrap some of my functions in a nice manner and for this I want to go with jQuery approach. Like jQuery having a lots of methods
$.parseJson()
$.ajax()
$("div").text("hey my testing");
and both methods are present in a same jQuery file. But while reading about how to make a jquery plugin, its specified that you don't need to create multiple functions inside a same plugin. Instead pass an argument which contains the method name as string.
So, Is that the below snippet is correct or do i need to make some corrections in it.
<script type="text/javascript">
(function ($) {
$.fn.testMethod1 = function () {
return $(this).each(function () { });
};
$.fn.testMethod2 = function () {
return $(this).each(function () { });
};
$.test = function () {
return "testresult"
};
})(jQuery);
$("div1").testMethod1();
$("div2").testMethod2();
$.test();
//Is that needed to be replace in a different way like
$("div1").myPlugin("testMethod1");
$("div1").myPlugin("testMethod2");
$("div1").myPlugin("test");
</script>
The second way is preferred because it conserves namespace in the jQuery object.
Read the official jQuery doc for this: Plugins/Authoring
Have you try using jquery boilerplate. It is a good point to start study jQuery plugin development. It's provide a safe and(seem to be) a good solution to create a plugin. They use your second way to call a method.
I am writing the a generic function for my website using jquery which would be used over the entire site for displaying a success/error message. I decided to make it a plugin.
A simple form of the plugin is given below:
; (function ($) {
jQuery.FlashMessage=function(msg){
alert(msg);
}
})(jQuery);
I wanted to know whether it is a good practice to define plugins in the jquery namespace or should it defined under $.fn.XXXX ..or am i overthinking and it doesn't matter it at all.
You add those functions to jQuery.fn which should be run on selected elements, e.g. $('div').yourFunction().
If you want a "generic" function, like $.ajax(), then you should add it to the jQuery object, like you already do. But I would use $ inside the function:
(function ($) {
$.FlashMessage=function(msg){
alert(msg);
}
})(jQuery);
So it depends on what kind of functionality you want.
jQuery.fn is equivalent to jQuery.prototype
with jQuery.fn.FlashMessage you can do
jQuery.fn.FlashMessage=function(){
return this.each(function(){
//do some thing
});
});
//use like this, your chaining is secured
jQuery('#someElement').FlashMessage().DoSomeThingElse().SomethingMore();
if you are concerned is modifying only one element than why to use jQuery.FlashMessage, do it like myNameSpace.FlashMessage
Typically plugins on the fn namspace return a jQuery object to maintain chainability. Also they are applied to jQuery.prototype so all jQuery objects can call it.
Check out this page for a very good overview on plugin authoring: http://docs.jquery.com/Plugins/Authoring