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
Related
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".
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)"
Say I have the following link:
<a onclick="confirmDelete()" href="delete.do&xyz">Delete user</a>
and the following is the confirmDelete function:
function confirmDelete()
{
if(!confirm("delete user?"))
{
return false;
} else
{
return true;
}
}
Basically when click on link, it checks whether the user select ok or cancel and then perform based on it.
Problem: I have got hundreds of similar links on my platform and we decide to turn all the javascript alerts to jquery dialog.
I used the following to somehow override the alert:
$(function(){
window.confirm = function(message) {
$('#overrideAlert').text(message).dialog({
resizable: false,
modal: true,
buttons: {
"Ok": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
};
});
It works fine and the alert comes up as a jquery dialog but the issue is because of the fact that it is not possible to return something from a handler like dialog, I am not sure how to tell my button in the filed, that the user selected ok or cancel.
Basically I m not sure how to link them all together.
Please help
The issue is because of javascript asynchronous nature . As you are using jQuery . could try following method .
$('a[onclick="confirmDelete()"]')
.attr('onclick','')
.click( function(){
var anch = this,
message = "delete user?";
$('#overrideAlert').text(message).dialog({
resizable: false,
modal: true,
buttons: {
"Ok": function() {
$( this ).dialog( "close" );
alert( "window.location=" + anch.href );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
return false ;
});
I made jsfiddle http://jsfiddle.net/wB389/
Maybe like so:
"Ok": function() {
window.location=deleteURL;
$( this ).dialog( "close" );
},
It's probably a little more complicated that that since you use relative url's but you can get the current url using window.location.protocol + window.location.port + window.location. window.location.host + window.location.pathname
i have below function in my jsp which create and opens the dialog. There is textbox in this dalog. What i want is when i enter on this dialogue
CreateCustomer button should be licked
function createCustomerDialog(){
$("#createCustomerDialog").dialog( {
title : ""Create Customer,
buttons : {
'CreateCustomer' : function() {
},
'Cancel': function() {
$( this ).dialog( "close" );
}
}
});
$("#createCustomerDialog").dialog("open");
}
i tried this but dnot working
$('.ui-dialog-buttonpane > button:last').focus();
On dialog input's onKeyPress event check for a keycode == 13 (ENTER key), when this code is reached just click your button.
$("#yourInputId").keypress(function (e) {
if (e.keyCode == 13)
$("#yourButtonId").click();
});
May be you should use .click() method instead .focus() in this code:
$('.ui-dialog-buttonpane > button:last').focus();
And I think you should try button:first selector, because CreateCustomer button will first.
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Delete all items": function() {
$( this ).dialog( "close" );
alert('Delete all items clicked');
},
Cancel: function() {
$( this ).dialog( "close" );
alert('Cancel clicked');
}
}
});
And in browser console try this:
$('.ui-dialog-buttonpane button:first').click();