Develop Reference

HTML Dynamic Popup box

In my jsp I have a for each loop (spring mvc)
<c:forEach items="${ce}" var="contractEntitlement">
<c:if test="${contractHeader.id == contractEntitlement.chId}" >
<tr>
TD's to show each fields ....
<td>
<div class="center">
Confirm Dialog
</div>
<div id="dialog-confirm" class="hide">
<div class="alert alert-info bigger-110">
These items will be permanently deleted and cannot be recovered.
</div>
<div class="space-6"></div>
<p class="bigger-110 bolder center grey">
Are you sure?
</p>
</div><!-- #dialog-confirm -->
</td>
</tr>
</c:if>
</c:forEach>
Each record will have a button for deletion. My jquery is:
$( "#id-btn-dialog2" ).on('click', function(e) {
e.preventDefault();
var href = ($(this).attr('href'));
alert(href);
$( "#dialog-confirm" ).removeClass('hide').dialog({
resizable: false,
width: '320',
modal: true,
buttons: [
{
"class" : "btn btn-danger btn-minier",
click: function() {
$( this ).dialog( "close" );
window.location = href;
}
}
,
{
"class" : "btn btn-minier",
click: function() {
$( this ).dialog( "close" );
}
}
]
});
});
This works only for the 1st record but when I click the rest it just redirects to page w/o passing jquery. I tried changing based on this stackoverflow question:
Passing data to a jQuery UI Dialog
$( 'a[href*="/view/viewcontract/update/ce/${contractEntitlement.id}"]' ).on('click', function(e) {
But with this, even the 1st record does not pass in the jquery anymore. Any idea how to make my jquery more dynamic?

As mentioned, need unique id's in order for this to work. On jquery when DOM is ready:
var i=0;
$('.testing').each(function(){ // testing is the class name
i++;
var newID='id-btn-dialog2'+i; // increment the id +1 (unique)
$(this).attr('id',newID); // Assign the new id
$(this).val(i);
});
Now that we have unique id's. Need to get the id of the button clicked and popup message box. In jquery :
$('a.testing').on('click', function(e) {
var id = $(this).attr('id');
var href = $(this).attr('href');
alert(href);
e.preventDefault();
$( "#dialog-confirm" ).removeClass('hide').dialog({
resizable: false,
width: '320',
modal: true,
buttons: [
{
"class" : "btn btn-danger btn-minier",
click: function() {
$( this ).dialog( "close" );
window.location = href;
}
}
,
{
"class" : "btn btn-minier",
click: function() {
$( this ).dialog( "close" );
}
}
]
});
});
This one worked and able to fix my issue. jsp above is the same except:
Confirm Dialog
adding in class "testing".

jQuery ("#dialog").dialog('close') not working with button on separate view

I have an ASP.NET view in an MVC project in which I am trying to create a pop-up dialog to create data. There is another view that gets loaded and that view has a button with the id "btncancel_create". I cannot get that button to close the dialog. I am using jQuery 2.1.3 and jQuery UI 1.11.4.
Here is the code for the button:
<input type="button" value="Cancel" id="btncancel_create" />
And here is the view:
$(document).ready(function () {
//alert("Document is ready");
var url = "";
$("#dialog-create").dialog({
title: 'Create User',
autoOpen: false,
resizable: false,
width: 400,
show: { effect: 'drop', direction: "up" },
modal: true,
draggable: true,
open: function (event, ui) {
$(".ui-dialog-titlebar-close").hide();
$(this).load(url);
}
});
$("#lnkCreate").on("click", function (e) {
url = $(this).attr('href');
$("#dialog-create").dialog('open');
return false;
});
//$("#btncancel_create").on("click", function (e) {
// $("#dialog-create").dialog("close");
// return false;
//});
$("#dialog-create").button("#btncancel_create").click(function (e) {
alert("btncancel_create was clicked");
$("#dialog-create").dialog('close');
return false;
});
});
<div id="dialog-create" style="display: none"></div>
<p>#Html.ActionLink("Create New", "Create", null, new { id = "lnkCreate" })</p>
As you can see, I tried something else which didn't work, which is commented out. The uncommented button click function does return the alert, but does not close the dialog. Thanks in advance for your help, and please let me know if you need any more information.

Instead of
$("#btncancel_create").on("click", function (e) {...
(in my commented out code above)
it should be
$(document).on("click", "#btncancel_create", function (e) {....
I found the answer here: Turning live() into on() in jQuery.

trigger jquery event from id created in javascript

I have jquery event in html, this will be triggered when i press the button from the same html(id of the button is used to trigger jquery). Now I have dynamically created button from javascript(another file) code in the same page. When i press button created from js (with the same id) Jquery is not responding. Please help.
The code looks as below.
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "blind",
duration: 1000
}
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
});
HTML button:
<td width="171" ><div>
<input type="button" id="opener" value="SelDimn"> </div></td>
JS button:
var cell6 = row.insertCell(5);
var element5 = document.createElement("input");
element5.type = "button";
element5.setAttribute('id', 'opener');
element5.name = 'opener';
element5.value = 'SelDimn';
cell6.appendChild(element5);

You need to use event delegation
$(document).on('click', "#opener", function () {
$("#dialog").dialog("open");
});
Also note that ID of an element must be unique, so if there are more than 1 button with the said ID then that is invalid, so you will need to use class attribute to group the similar buttons
In that case change it to element5.setAttribute('id', 'opener'); to element5.className = 'opener';
then
$(document).on('click', ".opener", function () {
$("#dialog").dialog("open");
});
Also the dom node creation can be simplified as
var cell6 = row.insertCell(5);
$('<input />', {
type = 'button',
'class': 'opener',
name: 'opener',
value: 'SelDimn'
}).appendTo(cell6)

Automatic scroll up after poping jQuery modal

I have jQuery modal popping after user clicks on a icon in the list. List can be huge, so user must scroll down to see full list.
When I click on the icon, modal pops in middle of that screen, and then my browser scrolls up to top of the page.
How can I prevent browser from scrolling up?
HTML
<div class="lista">
<table class="table3">
<tbody>
<?php
foreach ($predmeti as $obj){
?>
<tr>
<td><img src="link">
</tr>
<?php
}
?>
</tbody>
</table>
</div>
js / jQuery
function popModal(){
$( "#foo" ).dialog({
open: function ( event, ui) { /* some code */ },
resizable: false,
height:230,
width: 230,
modal: true,
buttons: {
"Change": function() { /* some code */},
"Close": function() {
$( this ).dialog( "close" );
}
}
});
}
And I have foo div block to show data.

Found out 2 ways of fixing this.
1st:
Added event.preventDefault(); to the popModal(); function.
2nd:
Added onclick = "popModal(); return false;" to the HTML part of calling function.
Credit goes to morodeer.
Hope this helps someone else.

As you have <a href="#">, it jumps to # anchor. To prevent it in jQuery, you should put return false; in the end of onclick event, which is in your case function popModal().
So this code should work:
function popModal(){
$( "#foo" ).dialog({
open: function ( event, ui) { /* some code */ },
resizable: false,
height:230,
width: 230,
modal: true,
buttons: {
"Change": function() { /* some code */},
"Close": function() {
$( this ).dialog( "close" );
}
}
});
return false;
}
For plain JS implementation of preventing default action (like jumping to anchor) just google for event.preventDefault .

javascript/jQuery: how to use var from click event in jQuery dialog?

Using jQuery dialog to open a modal box to confirm e.g. to delete a specific user from friends. I would like to use the friends name in the modal box (currently I print it with php in the name-tag of the link and use jQuery to get it from there).
//create the html for the modal box
var dialog_html_ignore = $('<div id="dialog-confirm" title="Ignore Friend Request?"><p>Some text... ignore [put the name here], ...?</p></div>')
//set up the jQuery dialog
var dialog_ignore=$( dialog_html_ignore ).dialog({
autoOpen:false,
resizable: false,
modal: true,
buttons: {
"No": function() {
$( this ).dialog( "close" );
},
"Yes": function() {
window.location.href = targetUrl;
}
}
});
//open the dialog on click event
$('.click_ignore').click(function() {
window.fName = $(this).attr("name");
alert(fName); /* this gives me the right username */
dialog_ignore.dialog('open');
return false;
});
How/what is the best way to use the username variable actually as a part of the text (in the html of the modal box)??
Any help is highly appreciated, thank you in advance!! :)

Try this:
var dialog_html_ignore = $('<div id="dialog-confirm" title="Ignore Friend Request?"><p>Some text... ignore <span class="name"></span>, ...?</p></div>')
$('.click_ignore').click(function() {
window.fName = $(this).attr("name");
$(".name", dialog_html_ignore).text(fName);
dialog_ignore.dialog('open');
return false;
});
Example fiddle

Use the following code in your click event,
dialog_html_ignore.attr("name", fname);
In dialog box you can access like this
dialog_html_ignore.attr("name");

I would write the dialog HTML as actual HTML in the page, not as a string to be parsed by $. Then, I would select it by ID and dialog-ify it so it is hidden at once.
I'd also include an empty <span id='ignore-dialog-fname'></span> in the dialog HTML and then select by ID to set its textContent/innerText to fname.
<script>
$(function() {
//set up the jQuery dialog
var dialog_ignore=$("#dialog-confirm").dialog({
autoOpen:false,
resizable: false,
modal: true,
buttons: {
"No": function() {
$( this ).dialog( "close" );
},
"Yes": function() {
window.location.href = targetUrl;
}
}
});
//open the dialog on click event
$('.click_ignore').click(function() {
window.fName = $(this).attr("name");
$("#ignore-dialog-fname").text(fName);
dialog_ignore.dialog('open');
return false;
});
});
</script>
<div id="dialog-confirm" title="Ignore Friend Request?">
<p>Some text... ignore <span id='ignore-dialog-fname'></span>, ...?</p>
</div>