Simple Modal Popup not displaying after searching JQGrid Results - javascript

Below is my
fiddle
HTML:
<table id="grid"></table>
I have an edit button and delete button in my JqGrid.
What my problem is, whenever a search happened in jQGrid, after clearing the values in searchbox, i am not getting any action when i am clicking on edit button and delete button.
Can someone suggest me what is the issue here?
Thanks,

You need event delegation here as buttons are generated dynamically,
$('#grid').on('click','.editbtn',function(){
alert('edit clicked here');
});
$('#grid').on('click','.delbtn',function(){
alert('delete clicked here');
});
Fiddle Demo
Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.

Related

Jquery off('click') on('click') bind and unbind

I have some buttons (Datatable button to export data) I need to prevent direct data download for that I am implementing OTP so when user first click on button its hows user a dialog box where he/she need to put OTP then if OTP matches then I need to remove .off("click"); method so that buttons can work again. on document ready I add this event like below
$(".dt-buttons button").each(function(){
$(this).off("click");
});
Now how can i remove this .off("click"); so buttons can work again like default
I suggest the use of common class with event delegation on() instead of detaching/attaching the event every time, you could give your button a common class example click_event and remove/add class as you want like :
$(".dt-buttons button").each(function(){
$(this).removeClass("click_event");
});
//When you want to attach the event
$('your_selector').addClass("click_event");
Hopefully this will attach the normal behavior again on your element
$("Your_selectors").on('click', function(){
$(this).trigger('click');
});

How to prioritize Nested JavaScript events?

I have an edit button inside a table cell.
The table cell event has an "click" event, And the edit button who is inside a cell has another click event set to it.
Is there a way to prioritize the button event over the table cell event?
I tried using a different z-index for the button, but it didn't work.
The button cannot go outside the the table as its closest tr holds id data which is crucial for the proper event to function.
You can call event.stopPropagation() as part of the click handler for the button, to prevent the click event from bubbling up to the table cell. Documentation: http://api.jquery.com/event.stopPropagation/
Inside the click handler on the button, you just need to call event.stopPropagation().
element.onclick= function(event) {
// ...
event.stopPropagation();
// ...
}
Look into a tutorial on bubbling and capturing events, such as http://javascript.info/tutorial/bubbling-and-capturing

How to select check box without selecting the whole row (see body)?

Say, I have an html:
<div class="row">
<input type="checkbox">
</div>
When user clicks on the whole row, it becomes highlighted (selected class added by an onClick event). I attach onClick event to elements with class .row.
When user clicks on checkbox (which is inside .row), this checkbox becomes selected. But row should not be highlighted.
Is it possible to exclude the area of the checkbox from the area of the .row for an onClick event?
UPDATE
Here is what I have now: http://jsfiddle.net/saAGU/
I don't want class to be toggled when I click exactly on checkbox.
UPDATE 2
Here is the working solution with jQuery for future use: http://jsfiddle.net/saAGU/2/
Yes, it's possible. The right way to do it is putting a onclick event on the checkbox, capture the event and stop its propagation.
Something like this:
function checkboxClick (e) {
e.stopPropagation();
}
Please tell me if it worked
add click event to every checkbox and stop its propogation .this should work -
e.stopPropagation in event handler for checkbox click
http://jsfiddle.net/saAGU/3/
If you capture the event, and look at the event.toElement, you can see if they clicked on the .row or something else.
http://jsfiddle.net/saAGU/1/
$('.row').click(function(event){
if (event.toElement !== this) // Did the user click on the row directly?
return;
$(this).toggleClass('selected');
});

How can I find out where a click event gets caught?

I am working on a very complex website and i have a piece of HTML on the page inside which no button is clickable. I think the click event gets caught somewhere so that the click handlers of the buttons do not fire.
How can I find out where those click events gets caught?
Add a click event listener to the document, and see what's catching the event:
document.addEventListener('click',function(e){
console.log(e.target);
})
Just check the event.target of the click event to see where it is.
There should be a document.click() or document.live("click",...) handler somewhere in the javascript included in the page, which returns false.

Checkbox not working before using script

I was asked to mark as checked the checkbox on the table line click, the script below is working but now when I click directly on the checkbox, it doesn't work, works only if I click the table line.
I have this html:
<tr class="linha_tela" id="4">
<td>Profile</td>
<td>Clientes</td>
<td>
<input type="checkbox" checked="checked" id="controller_4" name="controllers[]" value="4" />
</td>
</tr>
And this is my script:
$('.linha_tela').click(function(){
var checkbox = $(this).find(':checkbox');
checkbox.attr('checked', !checkbox.attr('checked'));
});
Thanks
What's happening is that the checkbox is toggling when you click on it, then the event handler is triggered causing it to become unchecked. This is basically occurring instantaneously, which is why it appears to just not work at all.
Try this:
$('.linha_tela').click(function(event) {
if (!$(event.target).is(':checkbox')) {
var checkbox = $(this).find(':checkbox');
checkbox.attr('checked', !checkbox.attr('checked'));
}
});
Edit: Here's a jsfiddle demo of it working.
This is happening because the checkbox is in the table row, so when you are clicking it, it's changing it's status (because that's what checkboxes do).
Then the click is bubbling up to your tr, and running the script, which is changing it status back.
you need to check the event target, and if it's not an input, do your thing, if it is, then don't.
here's the modified script:
$('.linha_tela').click(function(event) {
if (event.target.nodeName != 'INPUT') {
var checkbox = $(this).find(':checkbox');
checkbox.attr('checked', !checkbox.attr('checked'));
}
});
and a link to a jsfiddle to try it out:
http://jsfiddle.net/yDEyC/
$(":checkbox").click(function(event) {
event.stopPropagation();
});
This should work.
Here is a jsfiddle that demonstrates your code scenario:
http://jsfiddle.net/sAfTT/
The problem you're running into is a common one with events in HTML. When events are fired, they are fired on every element to which they can be applied in order from closest to furthest away. This is called bubbling(theres also capturing which works in reverse). http://www.quirksmode.org/js/events_order.html
So, in reality, when you are clicking on the checkbox, you are also clicking on the row, so the handler call looks like this.(assuming the box is unchecked to start with. reverse check/uncheck as applicable)
Checkbox clicked: check the box
Can I bubble up? Yes
Row clicked. Is there an event handler? Yes
Fire event handler (yours). This determines if the checkbox is checked. It is.
Because the box is checked, uncheck it.
Can I bubble up? Yes
Table Clicked. Is there an event handler? no
Document Clicked. Is there an event handler? No.
you can attach an event handler to the checkbox directly to prevent bubbling
$(':checkbox').click(function(e){
e.preventDefault();
e.stopPropagation();
})​
edit: I could never get the prevent default to work just right in jsfiddle, but the concept provided by the other answers work nicely too.

Categories