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".
Related
I want to show the confirmation window for the user who want to delete the data from database.
And I use this confirm() function to achieve this:
var str = document.getElementById("myHiddenDiv").innerHTML;
if (confirm(str))
{
$.ajax(...
<div id="myHiddenDiv" style="display: none;"><strong>Dont delete this</strong>
<br />
...
</div>
However it prints the html attribute in the windows confirmation such as the tag of <strong> and <br/>. I don't want that. How to do that?
Get the text from selected div like
var str = document.getElementById("myHiddenDiv").innerText;
Or you can also getting text with
var str = document.getElementById("myHiddenDiv").textContent;
I recommend using a modal window to this, http://jqueryui.com/dialog/#modal-confirmation.
<script>
$(function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Delete all items": function() {
$( this ).dialog( "close" );
//$.ajax(...
},
Cancel: function() {
$( this ).dialog( "close" );
//$.ajax(...
}
}
});
});
</script>
I have a html button
<input class="showOptions" type="button" style="width:100%" value="<%= (PRCDMU) %>" onclick="programSelector(this.value)" />
That calls some JavaScript
function programSelector(value){
var origin = document.getElementById('origin').value();
if(origin === ""){
$( "#popup" ).dialog( "open" );
}
if(origin === "Product Specification"){
url = 'http://brmappsvr:7018/Enquiries/CMENPROC.rpgle?ProductCode=' + value;
window.location.href = url;
}elseif(origin === "Future Requirements Forecast")
url = 'http://brmappsvr:7018/Enquiries/CMENPRF.rpgle?ProductCode=' + value;
window.location.href = url;
}
However a part of this process is a pop up in Jquery.
$(".showOptions").click(function(){
var $self = this.value;
$( "#popup" ).dialog({
modal: true,
width: 465,
draggable: true,
buttons: {
"Product Specification": function() {
window.location.href = 'http://brmappsvr:7018/Enquiries/CMENPROC.rpgle?ProductCode=' + $self;
$( this ).dialog( "close" );
},
"Future Requirements Forecast": function() { //cancel
window.location.href = 'http://brmappsvr:7018/Enquiries/CMENPRF.rpgle?ProductCode=' + $self;
$( this ).dialog( "close" );
}
}
});
});
The issue I have is that the popup is appearing regarless, whereas It is only meant to appear depending on the contents of the origin variable, if it's empty the pop up should work
EDIT:
origin is displayed on a html page.
<div align="left">Please click on the<strong> Product Code</strong>, to use it within the <div class="style1" id="origin"><%= (origin) %> program. </div></div>
Syntax Error in .value()
It should be
var origin = document.getElementById('origin').value;
Instead Of
var origin = document.getElementById('origin').value();
You have attached both onclick and click events on the same button:
take out this code from click event and add autoOpen to false;
$( "#popup" ).dialog({
autoOpen: false,
modal: true,
width: 465,
draggable: true,
buttons: {
"Product Specification": function() {
window.location.href = 'http://brmappsvr:7018/Enquiries/CMENPROC.rpgle?ProductCode=' + $self;
$( this ).dialog( "close" );
},
"Future Requirements Forecast": function() { //cancel
window.location.href = 'http://brmappsvr:7018/Enquiries/CMENPRF.rpgle?ProductCode=' + $self;
$( this ).dialog( "close" );
}
}
});
$(".showOptions").click(function(){
//based on the value open the dialog.
}
and remove this onclick="programSelector(this.value)"
I am trying to create a wizard-like experience with 5 jQuery Dialog modals. I want to fire a new modal from the first one that opens the second, but closes the first. The same with third, the fourth, and the fifth.
I can open the modals nested inside the other modals just fine, but the previous one doesn't close when the next one opens. In the end, I have 5 windows open on top of each other.
Here is the code I am using to open two of the 5 modals(the rest will go in order using the same logic:
<script>
$(function() {
$( "#modal_1" ).dialog({position:['middle',60],
open: function(event, ui) {
dialogClass: 'ui-widget-shadow',
modal: true,
autoOpen: false,
width: '950px',
close: function(ev, ui) {$(this).close();}
});
$( ".modal_1open" ).click(function() {
$( "#modal_1" ).dialog( "open" );
return false;
});
$( ".btnNext" ).click(function(){
$('.ui-dialog-content').dialog( "close" );
})
});
</script>
<script>
$(function() {
$( "#modal_2" ).dialog({position:['middle',60],
open: function(event, ui) {
dialogClass: 'ui-widget-shadow',
modal: true,
autoOpen: false,
width: '950px',
close: function(ev, ui) {$(this).close();}
});
$( ".modal_2open" ).click(function() {
$( "#modal_2" ).dialog( "open" );
return false;
});
$( ".btnNext" ).click(function(){
$('.ui-dialog-content').dialog( "close" );
})
});
</script>
Here is an example of the html:
<a class="button btnNext">Continue</a> <!--this is the button inside the modal that is supposed to fire the next modal-->
<div style="display:none" id="modal_1" title="Login">
<!--#include file="modal_1.asp"-->
</div>
<div style="display:none;" id="modal_2" title="Page Two Title">
<!--#include file="modal_2.asp"-->
</div>
I think I can bind the close function with an opening of the next, but I don't know how. Any help??
I diet your code to clue and did some test.
IMO you had missassigned options.
close: is for event handler, not button.
Use buttons field for define buttons. when click close your dialog and open next one...
$(this).dialog("close");
$("#modal_2").dialog("open");
My simple version below:
$(function() {
$("#modal_1").dialog({
modal: true,
autoOpen: true,
buttons: [{text: "Next",click: function() {
$(this).dialog("close");
$("#modal_2").dialog("open");
}
}]
});
$("#modal_2").dialog({
modal: true,
autoOpen: false,
buttons: [{text: "Next",click: function() {
$(this).dialog("close");
$("#modal_1").dialog("open");
}}]
});
});
I tested it here:
http://jsfiddle.net/JmgKS/8/
I want to be able to change the title of my modal and the buttons on run time.
currently I have this
I have actions either approval or Deny
var recButton = actions =='approval' ? 'Approve' : 'Deny';
$("#dialog").dialog(
{
modal : true,
buttons : {
'update all' : function() {
// window.location.reload();
// $( this ).dialog( "close" );
//do something here
},
Cancel : function() {
$(this).dialog("close");
}
}
}); //dialog
});
I also tried to do this for button
$("#dialog").dialog(
{
modal : true,
buttons : {
recButton : function() { ...
but in modal it didn't translate well and just said recButton instead of the variable value. Also I need to change title too.
Update: got title working by simply title:
Hey Autolycus: try this man: working demo http://jsfiddle.net/C4A9b/10/
Please use firebug to check the element id / class:
$('.ui-dialog-title').html("HULK is awesome"); should do the trick.
Hope it helps :)
code
$(document).ready(function() {
$('#theLink').click(function(){
$( "#forgot-dialog" ).dialog( "open" );
});
$( "#forgot-dialog" ).dialog({
modal: true,
autoOpen: false,
height: 255,
width: 300,
buttons: {
"ChangeTitle": function() {
alert("Title before cahnge ==> " + $('.ui-dialog-title').html());
$('.ui-dialog-title').html("HULK is awesome");
// document.forms["forgotform"].submit();
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
});
});
OR
var formname = "form_name_here";
$("#ui-dialog-title-"+formname).innerHTML = "Hulk is awesome title";
Below Image show before and After.
Image before clicking changetitle button
After clicking change title
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>