Develop Reference

Cell Rendering issue in ag-grid

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.

Jquery callback function variables always local?

Why cant i set the $('#temizle').innerHTML to string 'Temizlendi';
The code blow just doesnt work. But in the line before end i can set it. I'm confused.
$('#temizle').click(function(){
$.post('OdbcConnection.php',
{islem: 'Temizle'},
function(data, status){
if(status == 'success'){
alert(status);
$('#temizle').innerHTML = 'Temizlendi';
}else{
this.innerHTML = 'Hata Var';
}
});
//this.innerHTML = 'Temizlendi';
});

The short answer is because innerHTML is a native DOM node method, not a jQuery method, therefore calling it on a jQuery object such as $('#temizle') does nothing but set a new innerHTML property in the jQuery object. It works outside of your $.post call because this inherits a native DOM node, not a jQuery object.
Try using the $.html() method instead of innerHTML:
$('#temizle').html('Temizlendi');
Alternatively, outside of the scope of your $.post could also be re-written from this.innerHTML to $(this).html(), as wrapping this would convert it into a jQuery object.
If you absolutely have to use innerHTML rather than the jQuery method, as mentioned in other answers you can also get a DOM node from a jQuery object by using the get() method or accessing the node at the 0 index of the jQuery object:
$( '#temizle' ).get(0).innerHTML = 'Foo';
$( '#temizle' )[0].innerHTML = 'Bar';
Although that would sort of defeat the purpose of using jQuery.
Another thing to remember is that the value of this depends on the current scope, so this will not be equal to your element when it is called inside of your $.post. To get around this, you could cache your element outside of the scope of your post call so you can easily refer back to it within the callback:
$('#temizle').click(function(){
var $el = $( this );
$.post('OdbcConnection.php',
{islem: 'Temizle'},
function(data, status){
if(status == 'success'){
alert(status);
$el.html( 'Temizlendi' );
}else{
$el.html( 'Hata Var' );
}
});
//$el.html( 'Temizlendi' );
});
To get a better understanding of this, I'd highly recommend checking out the MDN reference on it here.

Is alert(status) getting called? If not this simply means your POST request failed.
If it indeed fails, check if the path to the php file is right. What you have now is a relative path, maybe you need to turn it to an absolute one,
ie.: change 'OdbcConnection.php' to '/OdbcConnection.php' or '/{SOME_FOLDER}/OdbcConnection.php'

first you have to write
$('#temizle').html('Temizlendi') //not $('#temizle').innerHTML='Temizlendi'
or you can use
$('#temizle')[0].innerHTML ='Temizlendi'
second:you used
this.innerHTML = 'Hata Var';
but "this" is for function not for $('#temizle') element

When you use $('#temizle').InnerHTML, you're calling the method innerHTML, which belongs to DOM objects, but not the jQuery objects. In this case you should use the html() method of jQuery:
$('#temizle')html('Temizlendi');

Access "this" in Fuel UX placard onAccept function

I have several Fuel UX placards on a page, with a single jQuery selector to initialize them all. I need to write a custom onAccept function to handle placard confirmation.
It seems like I should be able to access $(this) from within the onAccept to access the element being initialized, but it just points to the window object.
How can I go about accessing the current element in a placard onAccept function?
Here's my code for reference:
$(".select-user-placard").placard({explicit: true, onAccept: function (helpers) {
DMSC.UpdateUser(DMSC.SelectedForm.Id, $(this).data("field-type"), helpers.value);
}});
I need to call this function passing a parameter that is retrieved from a data-attribute on the element, but I'm not sure how I can access the current element without the use of this.

I guess I was kind of thrown by the no access to this and I couldn't think of the obvious solution:
$(".select-user-placard").each(function (index, element) {
var $element = $(element);
$element.placard({explicit: true, onAccept: function (helpers) {
DMSC.UpdateUser(DMSC.SelectedForm.Id, $element.data("field-type"), helpers.value);
}});
});
Instead of calling placard on the jQuery selector, I iterate over each using jQuery's each and just use the jQuery iterator to select that element's data.

Referencing Ajax-Loaded Element in JS Object Instance

How do you reference an element that doesn't exist yet from within a JavaScript object instance?
var Dynamic = function(el) {
this.$instance = $(el);
}
var dynamicInstance = new Dynamic('#dynamic');
Since the #dynamic element is loaded via Ajax, the script doesn't see it when dynamicInstance is created and can't reference it.
If it helps solve the issue, I could also reference the element from inside the object without passing it in when it's created -- but am still unclear on how to make the object aware of the element.

If you want to keep things decoupled you can accept a callback function as a parameter and call it once the new element is loaded and appended to the dom
function doAjaxCall(callback) {
$.ajax({
success : function(response) {
//Logic to create the new element based on response
callback();
}
});
}
doAjaxCall(function() {
var dynamic = new Dynamic('#dynamic');
});
In that way you keep everything decoupled while avoiding the race condition created by ajax calls.

How can I create functions in jQuery and call it on event and pass variable to it?

$(".addcart").click(function(){
$("input[name='items']:checked").each(function() {
//doing something
});
});
I'm trying to create a common class onclick of which I'm doing something. Is there a way I can make "items" a variable, I mean Can I pass checkbox name to this event.

Try this and see if it works out:
$("input[name='items']:checked").each(function() {
alert(this.attr("name"));
});
I think I've used like this somewhere.
[EDIT]
The thing with this is that jQuery passes the current item to the foreach as the context of the variable.

Use bind instead of click
$(".addcart").bind("click", {name: "items"}, function(event){
$("input[name='" + event.data.name + "']:checked").each(function() {
//doing something
});
});
edit:
"How can I create functions in jQuery
and call it on event and pass variable
to it"
That will still be the same procedure. Use bind to attach an event handler, pass it an object with the needed stuff for your function. In your event handler call your function and pass it the object from event.data
$(".addcart").bind("click", {foo: "hello world"}, function(event) {
DoSomethingOnClick(event.data);
});
function DoSomethingOnClick(obj) {
obj = obj || {};
if (obj.hasOwnProperty('foo'))
alert(obj["foo"]);
else
alert("no foo here");
}

You know that all checked items will have a name of items, so that's not very interesting, but maybe you want to retrieve the value of each of the items:
$(".addcart").click(function(){
$("input[name='items']:checked").each(function() {
// To access an attribute of this item use the form $(this).attr(...)
alert( this.value );
});
});
The above uses this to access the element being iterated over. Take a look at the properties of a DOM element to see what properties of this you can access.
You can create a jQuery object out of this using the form $(this) then you can use .attr() to access the attributes of this. For example to get the class/es of this you can use either this.className or $(this).attr("class").
It is faster to directly access the DOM element's properties. But for some more complex manipulations it is good to know that $(this) is also available.