var gridOptions = {
columnDefs: [
{headerName: 'Connection', field: 'Applicationaccess',minWidth:350,filter:'text',filterParams:{
filterOptions:['equals','contains']
},cellClass: 'all_grid_cell conn_cell',cellRenderer:function(params){
var p=params.value;
var $wrapper_div = $("<div>",{"class":"w3-dropdown-hover"});
var $newlink=$("<a>",{"href":"javascript:void(0)","class":"link w3-white","text":p});
$newlink.appendTo($wrapper_div);
var $ediv = $("<div>",{"class":"w3-dropdown-content w3-bar-block w3-border"});
var x=['meet','meeeeet','meeeeeeeet'];
for(i=0;i<x.length;i++){
var $btn=abc(x[i]);
$btn.appendTo($ediv);
}
$ediv.appendTo($wrapper_div);
return $wrapper_div;
}}
function abc(x){
var $btn=$("<button>",{"class":" w3-bar-item w3-button","text":x});
return $btn;
}
The output in Connection looks like [Object][object]:
My target is to display a hoverable dropdown in each cell of the Connection Column.
Following the documentation I created my desired div element and returned it via the cellRenderer function
Please help
I'm not a JQuery guru... but it looks like one issue you are running into is that you are returning a JQuery object (which in this case seems to be an array) rather than an HTML element. Change return $wrapper_div; to return $wrapper_div[0]; and it should work.
Here is an example showing the difference of what gets returned:
console.log("HTML Element:\n", $("<div>",{"class":"w3-dropdown-hover"})[0])
console.log("JQuery Object:\n", $("<div>",{"class":"w3-dropdown-hover"}))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Yep return $wrapper_div[0], because it's a jQuery DOM object you are returning and not a normal DOM object.
jQuery Dom object and HTML DOM object are different read the jQuery documentation. You will understand why you can use it as an array and why you return the first element.
Secondly why are you using $ in your variable names? This is not PHP you need not use $.
In jQuery $ is a special keyword which is associated to a special $ function which deals with selectors and accessing jQuery DOM objects. The $ is an alias for the jQuery () overloaded function.
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'm new in jQuery and i'm trying to give an object which triggers a function and gets its parent's ID. I have HTML:
<tr id="9"><td>First</td><td class="edit"></td><td class="delete" onclick="DeleteMaster(this)"></td></tr>
And jQuery function:
function DeleteMaster(f){
var master = f.parent().attr('id');
alert (master);
}
But i'm getting an error:
Uncaught TypeError: Object # has no method 'parent'
What's wrong?
You're passing in the DOM element, you need to convert this to a jQuery object:
function DeleteMaster(f){
var master = $(f).parent().attr('id');
alert (master);
}
BUT
You shouldn't declare onclick handlers like that. It's bad practice and can lead to hassle if you want to change it in the future. The standard jQuery way of doing things is:
// Wait for DOM to become ready
$(function() {
// This replaces your "onclick" and "DeleteMaster" function
$(".delete").on("click", function() {
// Now you can access that <td> by calling $(this)
var master = $(this).parent().attr("id");
});
});
That way, you don't have to add code into your HTML markup.
It is because f is not jquery object. You should use $(f) .Try this:
function DeleteMaster(f){
var master = $(f).parent().attr('id');
alert (master);
}
Demo
I have been able to get the DataGrid to do evertyhing I want except one thing. I am trying to bind the onRowClick event to a regular javascript function that will do something. I am using Dojo 1.7.2 so the connect(object,event,method) does not work. I tried using the new on(object,event...) to no avail. What am I doing wrong?
In between tags but below changeValue()[A function I wrote and known working] and the dojo.require... In other words, the very last thing in the block. I know something is wrong with the syntax of the on method but can not figure out what.
var ngrid = dijit.byId('grid');
dojo.on(ngrid,"onRowClick",changeValue());
Fix for your code; as i believe the function you'd want to bind is the actual changeValue and not what it might return, try this
dijit.byId('grid').connect("onRowClick", changeValue)
.on makes some magic to the prefixed *on*Something so try with .connect instead. Best practice is to register the listener via the object itself so it will get disconnected as grid is destroyed. Above does the call as an extension to the grid object so you should not pass the grid reference as first parameter.
This is the correct syntax with the on method
you have to remove the 'on' part of the event's name string
var ngrid = dijit.byId('grid');
dojo.on(ngrid,"rowClick",changeValue());
Similar to #mschr's answer, here is also how to get the data associated with the row clicked.
dojo.connect(grid, "onRowClick", function(e) {
var dataItem = grid.selection.getSelected();
// call you change method here with dataItem
});
and an example
http://jsfiddle.net/cswing/T27hv/
Assign the jsid ="mygrid" attribute to your Datagrid .
Pass your jsid in the dojo connect you don't have to do dijit.byId().
dojo.connect(mygrid, "onRowClick", changeValue);
Is it inadvisable to add methods to a JQuery element?
eg:
var b = $("#uniqueID");
b.someMethod = function(){};
Update
Just to clarify, I am working on a JS-driven app that is binding JSON data to local JS objects that encapsulate the business logic for manipulating the actual underlying DOM elements. The objects currently store a reference to their associated HTML element/s. I was thinking that I could, in effect, merge a specific instance of a jquery element with it's logic by taking that reference add adding the methods required.
Well, there's nothing inherently wrong with it. It is, however, pretty pointless. For example:
$('body').someMethod = function(){};
console.log($('body').someMethod); // undefined
You are attaching the new function only to that selection, not to all selections of that element.
What you should do instead is to add a new function to jQuery.fn, which is a shortcut for jQuery.prototype:
jQuery.fn.someMethod = function() {
if (this[0].nodeName == 'body') {
// do your function
}
return this; // preserve chaining
};
The problem is that your function would be quite transient. A further requery and it will be gone. You can extend the jQuery object itself by $.fn.someMethod = function() {} and this method will be available for all queries.
$.fn.someMethod = function() {}
var b = $("body");
b.someMethod();
Or you can create a jQuery plugin. You can define a plugin this way:
$.fn.someMethod = function(options) {
# ...
});
Call it using $('body').someMethod();
I'm authoring a plugin, and the plugin needs to do something like aggregate a set of jQuery objects. How does one do this?
For example:
<p><a>...</a></p>
<p><a>...</a></p>
With
(function( $ )
{
$.fn.myfunc = function( settings )
{
};
})(jQuery);
Within the context of the plugin invoked with $('p').myfunc(), how would I return all the elements, for example? The elements I'm returning will not necessarily be contained or near the elements selected, as this is just an example.
jQuery also accepts an array, so you can build your own node stack and create a jQuery object out of it.
Example:
(function( $ )
{
$.fn.myfunc = function( settings )
{
var stack = [];
stack.concat(this.find('a').toArray());
stack.concat($('a.hot-links').toArray());
return $($.unique(stack));
};
})(jQuery);
Or simply:
return this.find('a'); // as return result of plugin
Also, look at .pushStack(), which lets you add elements to an already existing jQuery object.