I have the following script:
$("#border-radius").click(function(){
var value = $("#border-radius").attr("value");
$("div.editable").click(function () {
mySQLinsert(value, '2', this.id)
$(this).css({
"-webkit-border-radius": value
});
});
});
Basically, the "#border-radius" ID is to a text input. You type in a value, click the textbox (can't figure out a way around this) and then click the div with the class "editable" and it will apply the style "-webkit-border-radius" (I know its not cross-browser), to that DIV.
The mySQLinsert function uses Ajax to send the value of the mySQLinsert function to a mySQL database using a php page (nothing fancy).
Issue: When I click the child div (div inside of a div) it also applies this value to the parent object, and runs the mySQLinsert function and stored it in the database
I need to be able to select both the parent, and the child individually depending on which one is clicked.
You can use stopPropagation() to prevent the click bubbling up to its parent element.
$("#border-radius").click(function(){
var value = $("#border-radius").attr("value");
$("div.editable").click(function (e) {
// Note the parameter e passed in the function above
e.stopPropagation();
mySQLinsert(value, '2', this.id)
$(this).css({"-webkit-border-radius": value});
});
});
Related
I have links on a table to edit or delete elements, that elements can be filtered. I filtered and get the result using ajax and get functions. After that I added (display) the result on the table using inner.html, the issue here is that after filtering the links on the elements not work, cause a have the dojo function like this
dojo.ready(function(){
dojo.query(".delete-link").onclick(function(el){
var rowToDelete = dojo.attr(this,"name");
if(confirm("Really delete?")){
.......
}
});
I need to trigger the event after filtering, any idea?
(I'm assuming that you're using Dojo <= 1.5 here.)
The quick answer is that you need to extract the code in your dojo.ready into a separate function, and call that function at the end of your Ajax call's load() callback. For example, make a function like this:
var attachDeleteEvents = function()
dojo.query(".delete-link").onclick(function(el){
var rowToDelete = dojo.attr(this,"name");
if(confirm("Really delete?")){
.......
}
});
};
Then you call this function both in dojo.ready and when your Ajax call completes:
dojo.ready(function() { attachDeleteEvents(); });
....
var filter = function(someFilter) {
dojo.xhrGet({
url: "some/url.html?filter=someFilter",
handleAs: "text",
load: function(newRows) {
getTableBody().innerHTML = newRows;
attachDeleteEvents();
}
});
};
That was the quick answer. Another thing that you may want to look into is event delegation. What happens in the code above is that every row gets an onclick event handler. You could just as well have a single event handler on the table itself. That would mean there would be no need to reattach event handlers to the new rows when you filter the table.
In recent versions of Dojo, you could get some help from dojo/on - something along the lines of:
require(["dojo/on"], function(on) {
on(document.getElementById("theTableBody"), "a:click", function(evt) {...});
This would be a single event handler on the whole table body, but your event listener would only be called for clicks on the <a> element.
Because (I'm assuming) you're using 1.5 or below, you'll have to do it a bit differently. We'll still only get one event listener for the whole table body, but we have to make sure we only act on clicks on the <a> (or a child element) ourselves.
dojo.connect(tableBody, "click", function(evt) {
var a = null, name = null;
// Bubble up the DOM to find the actual link element (which
// has the data attribute), because the evt.target may be a
// child element (e.g. the span). We also guard against
// bubbling beyond the table body itself.
for(a = evt.target;
a != tableBody && a.nodeName !== "A";
a = a.parentNode);
name = dojo.attr(a, "data-yourapp-name");
if(name && confirm("Really delete " + name + "?")) {
alert("Will delete " + name);
}
});
Example: http://fiddle.jshell.net/qCZhs/1/
By Default when we enter a value inside a cell in Handsontable and the press Enter key or go to another cell or other part of the page, the value we have already entered into the cell will be committed automatically (after validation).
But I have a new requirement now. I want to manually commit the changes form outside of Handsontable (e.g. with calling a JavaScript function).
The real story is that I have rendered dropdown control inside some cells in Handsontable. When the user enters a number in a cell without pressing Enter key; and then clicks on the dropdown control in another cell; I do not have access to their new entered value.
I am going to commit their former changes when they click on the dropdown.
Any Idea?
Update:
I created a jsFiddle and did my best to keep it as simple as possible. http://jsfiddle.net/mortezasoft/3c2mN/3/
If you change the Maserati word to something else and without pressing Enter choose an option in dropdown, you can still see the name Maserati is shown as an alert dialog.
<div id="example"></div>
var data = [
["", "Maserati"],
["", ""],
];
$('#example').handsontable({
data: data,
minSpareRows: 1,
colHeaders: true,
contextMenu: true,
cells: function (row, col, prop) {
var cellProperties = {};
if (col===0 && row===0) {
cellProperties.renderer = selectBoxRenderer;
cellProperties.readOnly =true;
}
return cellProperties;
}
});
function selectBoxRenderer(instance, td, row, col, prop, value, cellProperties) {
var $select = $("<select><option></option> <option>Show the name</option></select>");
var $td = $(td);
$select.on('mousedown', function (event) {
event.stopPropagation(); //prevent selection quirk
});
$td.empty().append($select);
$select.change(function () {
//Default value is Maserati but we are gonna change it.
alert($('#example').handsontable('getData')[0][1]);
});
}
You can add instance.destroyEditor() to the mousedown handler on $select. This will commit the changes on first click, but will also require another click to open the select menu.
$select.on('mousedown', function (event) {
event.stopPropagation(); //prevent selection quirk
instance.destroyEditor();
});
The reason behind second click problem is that instance.destroyEditor() re-renders the table, which causes the original select element to be destroyed, so the click event cannot take effect.
To solve this, add
if ($td.find('select').length!=0) return;
at the beginning of the renderer. This way existing select elements will not be overwritten when re-rendering.
I'm using the .each method with the .getJSON method to print out objects in a JSON file. This works fine, however I am unable to add a click function to an element that has been printed out. I am trying to bind a function to the div with 'click' ID.
var loadData = function () {
$.getJSON("profiles2.json", function (data) {
var html = [];
html.push("<div id='click'>Click here</div>");
$.each(data.profiles, function (firstIndex, firstLevel) {
html.push("<h2>" + firstLevel.profileGroup + "</h2>");
});
$("#data").html(html.join(''));
});
};
$(document).ready(function () {
loadData();
$("#click").click(function () {
console.log('clicked');
});
});
$.getJSON() (like other Ajax methods) is asynchronous, so it returns immediately before the results have come back. So your loadData() method also returns immediately and you then try to bind a handler to an element not yet added.
Move the .click(...) binding into the callback of $.getJSON(), after adding the element(s), and it will work.
Alternatively, use a delegated event handler:
$("#data").on("click", "#click", function() {
console.log('clicked');
});
...which actually binds the handler to the parent element that does exist at the time. When a click occurs it then tests whether it was on an element that matched the selector in the second parameter.
And as an aside, don't bind click handlers to divs unless you don't care about people who are physically unable to (or simply choose not to) use a mouse or other pointing device. Use anchor elements (styled as you see fit) so that they're "click"-accessible via the keyboard and the mouse.
$.getJSON is an asynchronous call and probably hasn't finished by the time you are trying to bind to the element that it injects into your DOM. Put your binding inside the $.getJSON call after you append the element to the page at the bottom.
I have a button named [Filter] that I'm trying to call the grid search modal on click. I have yet been able to find the call that the search button uses inline.
It uses <span class="ui-icon ui-icon-search"></span> classes for the search icon/button.
So something like
$('.filter').live('click', function (event) {
$('ui-icon-search').trigger('click');
});
Edit, found it.
$('.filter-grid').live('click', function (event) {
$("#search_products").click();
});
Was calling the parent div id on click and not the span.
Found it.
$('.filter-grid').live('click', function (event) { $("#search_products").click(); });
Was calling the parent div id on click and not the span.
In the jqgrid, when i click the first column value, i want to open as iFRAME window. if i use showlink or link formatter, its posted and redirect to the another page. how to create first column value as iframe window.
Thanks in avance..
One method is to use a link to the same page in your format options:
formatoptions: {baseLinkUrl: '#', showAction: '', addParam: ''}
Then after the grid is rendered - for example, in the loadComplete event - set up a click event handler for when a link is clicked:
jQuery('.ui-jqgrid-btable a', '#container').each(function()
{
jQuery(this).unbind('click');
jQuery(this).click(function(){
var link = jQuery(this).attr('href');
var equalPosition = link.indexOf('='); // Get the position of '='
var id = link.substring(equalPosition + 1); // Split the string and get the number.
// Your iframe code here...
return true;
});
This code simply parses out the link, gets the ID, and then lets to do whatever you want with that ID . So for example, you could load content into a new iFrame.
#container is optional, but you could use this as a div that contains the jqGrid div, if you have multiple grids on the same page and need to differentiate them.