Develop Reference

Ui-grid with uib-popover as a cellTemplate

I'm trying to use a uib-popover from ui-bootstrap in the ui-grid, but when I click in the popover, the "click" events goes to my grid. I set a Plunker with this problem: https://next.plnkr.co/plunk/aFbYIYsKAD3puSt6
The first column (Name) is the one with the cellTemplate.
If you click in the icon, a popover will appear, and the grid doesn't allow you to click in the Input that I put there, only if you click in the Label, but even so, it's still pretty buggy.

I fixed it.
It was pretty simple actually, you just need to set the "allowCellFocus" to false in the colDef of the grid
Updated Plunker:
https://next.plnkr.co/plunk/FSZXUViAhu8CMWaT

Regarding Pixel Art Maker toggle () and remove ()

I need help regarding Pixel Art Maker.
where I added two extra features toggle () and remove () .
The problem is, when I insert numbers to draw grid, and click submit button, in first attempt , it draw the grid. But after clicking the toggle button or remove button , in my second attempt to draw grid, the submit button doesn't work and I can't able to draw grid.
Here is the link.
https://codepen.io/sofianayak55/pen/dKEaPw
Please go through this link, avoid the styling part, I will do it later Kindly go through the JavaScript and jQuery section.
Thank you.

Update your remove function.
$(".clearGrid" ).click(function() {
$("#pixelCanvas").html("");
});
You have used $("#pixelCanvas").remove() which is actually removing #pixelCanvas table. So next time it is not getting bind. You just need to clear only its html part.

Javascript event on form add fields

I've got a rails app using bootstrap with a form page that has the option to add additional form fields. The tutorial from this Railscast episode heavily influenced this form page add fields feature. I have a need to watch the add fields so that I can hide a warning panel in the new well created. Here is the code that will not work(in coffeescript):
$('#classifications_forms').on 'change', (event) ->
container = $('.classifications_form').last()
$('#premium-divide', container).hide()
Here is the code in jquery:
$('#classifications_forms').on('change', function(event) {
var container;
container = $('.classifications_form').last();
return $('#premium-divide', container).hide();
});
I have tried an on click event for the add fields button, but it's late in the event watching as it will not hide the panel. If I hit the button a second time, it will hide the panel on the previously created well, so I know the code was working to hide the panel. My thinking is to hide the panel on the last well created, and I thought that a change on #classifications_forms would give me the event needed to hide the last well, but I guess its missing something on the event. What is missing above?
Here is a jsfiddle demonstrating the problem.

Because I was using bootstrap, I found a class to apply to the panel which took care of my problem:
.hidden

Gridster, wrong placement while adding widget

I'm using Gridster for one of my first Javascript projects and I've run into a problem.
When I add a widget to my grid, it doesn't go where I want, here is a jsfiddle of a sample of my project.
$('#blockDroite').droppable({
drop: function(e) {
gridster.add_widget('<li class="widget"><div class="delete">X</div></li>', 1, 1);
}
});
When I drag and drop in a drop zone, a widget is created, but not at the correct position. Rather, it's placing it outside of the grid. When I move it manually it goes in the grid. When you add a new widget you can see it's behind the first one if you place it in the first column and row.
Question
What can I do to fix this?

Ok I solved my problem, just forgot to add the "gridster class" to my ul. This "gridster class" is defined in the "jquery.gridster.css"
<div id="blockDroite" class="gridster">Drop zone

Javascript tooltip only appears on second hover

I am using jQuery and Twitter Bootstrap, and want to have a tooltip appear when hovering over a link. However, the tooltip doesn't appear the first time I hover over a link, but if I move the mouse away and back on, it works every time for that link.
I have several of these on the page:
Full Name
I've created a jsFiddle to demonstrate: jsFiddle. Any help would be appreciated - thanks in advance!

What's happening is that you're instantiating the plug-in on the element when you mouseover it the first time, and then the plug-in works as expected on subsequent mouseovers on that element.
Using the configuration suggested in the docs works (see fiddle):
JavaScript:
// tooltip demo
$('div').tooltip({
selector: "a[data-toggle=tooltip]"
})
HTML:
<div style="text-align: center; width: 100%; margin-top: 50px;">
Full Name <p/><p/>
Full Name<p/>
Full Name<p/>
Full Name<p/>
Full Name
</div>

.tooltip() functions initiates the tooltip effect on the link, not show the tooltip
Explanation:
When the $(this).tooltip() is triggered on the first hover, it instantiate the plugin first. Then finally on the second hover you get the tooltip.
Solution:
Add this on your code:
$(function() {
$("a").tooltip();
});
Solution (JSFiddle)

I had the same issue with a tooltip on a button. It turned out that the tooltip didn't show because the button was disabled the first time. There was code FOLLOWING the attempted to show the tooltip that checked some other values and enabled the button. After the first "run" the button was enabled so on the second and subsequent events the tooltip did/does show. I simply moved the "enable" code before the code that attempts to show the tooltip and my problem was solved.

I think it would be cleaner if you let JQuery handle the mouseover event, and put all your codes inside $(document).ready
Similar issues and solution can be found here:
Jquery onmouseover triggers on second event