We Keep Coding

Jquery trigger click event not working for a P element

Im trying to "make a para (in a div) editable and automatically show cursor in para" when clicked on edit icon. The para does becomes editable but cursor stays with the edit icon. I've read almost all answers regarding click event on SO, nothing helped.
This is my code
JS:
//Add a icon in para containing div when hover on div
$(document).on('mouseenter', '.editable', function () {
$(this).append('<i class="pull-right ml-auto edit-content-icon fa fa-pencil-square-o" aria-hidden="true"></i>')
})
//Make para content editable and show cursor in para
$(document).on('mousedown touchdown', '.edit-content-icon', function (e) {
$(this).prev('p').prop('contentEditable', 'true')
$(this).prev('p').click()
})
HTML:
<div id="some" class="editable col-md-9 col-lg-6 d-flex ">
<p class="ml-md-3 my-auto">My Para...</p>
</div>

How send a value with a href id to a modal

Im trying to make a item editor.
For example:
I have a product and I want to remove the Serial number of it.(It's all stored in a database)
So I press the minus icon I 'borrowed' thats located next to the product's name:
<i class="icon-minus"></i>
This opens a modal named 'RemoveSerialNumberModal' with a 'Are you sure' button.
This works all fine, but there are multiple products underneath each other and how can I tell the modal on what product it needs to remove the serial number? (All product have there own pair of icons).
The modal it's code is in the same file as the product list. But not in the same foreach loop.
I prefer to not use JS, but if there is no other way. It has to do.
---------------EDIT---------------
The products do have there own id ofcourse.
---------------EDIT---------------
Here is the modal:
<!-- Modal -->
<div id="RemoveSerialNumberModal" class="modal hide fade">
<div class="modal-header">
×
<h3>Update serienummers</h3>
</div>
<div class="modal-body">
<p>Selecteer het serienummer dat je wilt verwijderen.</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Sluiten</button>
<button id="RemoveSerialNumber" class="btn btn-danger eerste" type="submit">Verwijderen</button>
</div>
</div>

Use data-id attribute.
I guess in your modal you have the below html :
<input type="text" name="yourid" id="yourid" value=""/>
//triggered when modal is about to be shown
$('#RemoveSerialNumberModal').on('show.bs.modal', function(e) {
//get data-id attribute of the clicked element
var yourid = $(e.relatedTarget).data('id');
//populate the textbox
$(e.currentTarget).find('input[name="yourid"]').val(yourid);
});

Use data attribute and class names to toogle while clicking:
<a class="click" href="#RemoveSerialNumberModal" data="2121" data-toggle="modal"><i class="icon-minus"></i></a>
$('.click').click(function(){
$('.click').removeClass('clicked');
$(this).addClass('clicked');
});
$('#RemoveSerialNumberModal').on('show.bs.modal', function(e) { // triggered when showing the modal
var data = $('.clicked').attr('data');
});

Dynamic div does not work in Chrome

Last year I published this one page site: www.rofeengenharia.com.br
In the Portifolio page if you click on "Abrir" it loads a dynamic div with javascript over the Portifolio page. In Safari and Firefox it is still working, but it stopped working in Chrome (it was working in Chrome too when I published it).
Here is part of the code:
The place where the dynamic div is loaded and the link to open it (onClick):
<DIV id="projeto_selecionado" style="position:absolute; z-index:20000; background:#ffffff;">
</DIV>
<!-- OBRA 1 -->
<DIV class="view view-sixth">
<IMG width="100%" height="auto" style="float:left;" src="images/portifolio/obra01/obra01_thumb_01.jpg" alt="Obra 01" />
<DIV class="mask">
<H2>Condomínio Jardim Acapulco</H2>
<P>Manutenção executada pela ROFE no litoral sul de São Paulo.</P>
Abrir
</DIV>
</DIV><!-- view -->
And the javascript file:
function exibir_projeto01()
{
$('<div/>').addClass("newdiv")
.html('<DIV id="projeto_selecionado">\
...
...
...
</DIV><!-- container_projeto_01 -->')
.appendTo($("#projeto_selecionado"))
.hide()
.fadeIn(1000);
// Não deixa a pagina voltar para o topo quando clica no link
event.preventDefault();
}
Anyone knows how to make it work in Chrome again?

Try using jQuery - remove the inline onclick and do this instead - also you try to add something with ID #projeto_selecionado to itself
$(".info").on("click",function(e) {
e.preventDefault();
$('<div/>').addClass("newdiv")
.html('<DIV>\
...\
...\
...\
</DIV>')
.appendTo("#projeto_selecionado")
.hide()
.fadeIn(1000);
});
WITHOUT html comments!

Jquery UI progressbar not animating with asp button

I'm trying to use a jQuery UI progressbar that would show in a jQuery UI dialog when I click on an asp:Button.
The Button is declared as follow :
<asp:Button ID="Button2" runat="server" Text="Télécharger"
CausesValidation="False" onclick="Button2_Click" OnClientClick="javascript:displayDialog()"/>
The dialog is declared as follow :
<div id="dialog" title="Attente de téléchargement">
<p>Le fichier est en cours de préparation, le téléchargement devrait commencer sous peu.</p>
<div id="progressbar"></div>
</div>
And eventually the javascript :
<script type="text/javascript">
$(document).ready(function () {
$("#dialog").hide();
});
function displayDialog() {
$("#dialog").dialog();
$("#progressbar").progressbar({
value: false
});
$("#dialog").show();
}
</script>
This seems to work fine (since Both onclick and OnClientclick function are called). The code behind is executed correctly and the dialog shows too. However the animation of the progress bar doesnt work (see image below).
I don't understand what's going on. I've tried to not use show/hide but the property .css("display","none") and .css("display","block") of the $("#dialog") and the result is the same.
However If I don't hide the dialog on the $(document).ready the animation works fine. When I run this in the script tag:
$(document).ready(function () {
$("#dialog").dialog();
$("#progressbar").progressbar({
value: false
});
});
The dialog shows directly at the loading of the page like this :
which is correct (I obviously don't want it at the start but when you click on the button but still the progressbar shows correctly).

You are finding this issue because you have enclosed your progress bar within the dialog div
ERROR CODE:
<div id="dialog" title="Attente de téléchargement">
<p>Le fichier est en cours de préparation, le téléchargement devrait commencer sous peu.</p>
<div id="progressbar"></div>
</div>
Applying any changes to the Hidden elements would reflect.so better thing to do is to move the progress bar outside the dialog div.
CORRECTED CODE:
<div id="dialog" title="Attente de téléchargement">
<p>Le fichier est en cours de préparation, le téléchargement devrait commencer sous peu.</p>
</div>
<div id="progressbar"></div>
Happy Coding :)

Modal not visible in Twitter boootstrap

I am trying to display a modal on image click with the image which is clicked, but its not working.
fiddle
I am inserting the content of modal after the user clicks the image using
$("#imageModal").html(modalHtml);
$('#imageModal').modal('show');
This code might now work as I am getting the error: showModal is not defined but the same code is working on my website.
Please help find the issue.

First at the very top of your html body....directly after the <body> tag, and before any content.
Put your modal...without any img, just an empty body...
<div id="imageModal" class="modal hide fade in">
<div class="modal-header"><a class="close" data-dismiss="modal">x</a>
<h3>Select the area</h3>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
Men Topwear
Men Bottowear
Women Topwear
Women Bottomwear<br>
Close
</div>
Then later in your document, wherever you want the images...just wrap them in a <a> tags, and apply the name of the modal box to the href, and apply the data-toggle attribute... data-toggle="modal"
<a class='galleryImg' href="#imageModal" data-toggle="modal">
<img src="http://media.santabanta.com/gallery/global%20celebrities(f)/shakira/shakira-28-m.jpg" />
</a>
<a class='galleryImg' href="#imageModal" data-toggle="modal">
<img src="http://media.santabanta.com/gal/event/ramaiya-vastavaiya-sp" />
</a>
Then in your Jquery...simply find all the links with the class .galleryImg, or however you want to identify them, and apply a click handler...that passes the image, to the modal.
$('a.galleryImg').click(function (e) {
e.preventDefault();
var img = $(this).html();
$('.modal-body').html(img);
});
Heres the JSFIDDLE DEMO
UPDATE
After looking at the code you pasted....you cant do it like that, as you are outputting two click handlers, on created items. You need to do it like this...
function testAPI(){
listOfPage = ["http://media.santabanta.com/gallery/global%20celebrities(f)/shakira/shakira-28-m.jpg", "http://media.santabanta.com/gal/event/ramaiya-vastavaiya-special-screening/ramaiya-vastavaiya-special-screening-32.jpg"]
for (var i=0;i<listOfPage.length;i++){
$("#imgbox").append('<a class="galleryImg" href="#imageModal" data-toggle="modal"><img src="'+listOfPage[i]+ '"></a>');
}
}
And then sepereately have this outside of the loop....
$('body').on('click', 'a.galleryImg', function (e) {
e.preventDefault();
var img = $(this).html();
$('.modal-body').html(img);
});
Because since you are appending the items, they are dynamically created so you need to use on instead of click
But you also need to wrap it all in a $(document).ready(function()...like so
$(document).ready(function(){
//Facebook login function run/loop
function testAPI(){
listOfPage = ["http://media.santabanta.com/gallery/global%20celebrities(f)/shakira/shakira-28-m.jpg", "http://media.santabanta.com/gal/event/ramaiya-vastavaiya-special-screening/ramaiya-vastavaiya-special-screening-32.jpg"]
for (var i=0;i<listOfPage.length;i++){
$("#imgbox").append('<a class="galleryImg" href="#imageModal" data-toggle="modal"><img src="'+listOfPage[i]+ '"></a>');
}
}
//Apply click handler to dynamic links...
$('body').on('click', 'a.galleryImg', function (e) {
e.preventDefault();
var img = $(this).html();
$('.modal-body').html(img);
});
});