Will be displaying a jquery popup many times through out my project. I would like to populate the label inside the div with a different message each time so for eg...
var popUpMessageSave = "You have successfully saved.";
loadPopUp(popUpMessageSave);
var popUpMessageFail = "You have failed to save.";
loadPopUp(popUpMessageFail);
not sure how to populate the label each time??
<div style="display: none;">
<div id="saveDialogSingleFeature" title="Save Complete">
<input type="text" title="Name" value=""/>
<label></label>
</div>
</div>
function loadPopUp(popUpMessage) {
$("#saveDialogSingleFeature").dialog({
width: "auto",
height: "auto",
position: { my: "top", at: "bottom", of: $("header") },
show: { effect: "slideDown" },
hide: true,
closeOnEscape: true
}).parent().appendTo("form:first");
//clear label and add new
$('input:text').next('label').html("");
$(this).next('label').html(popUpMessage);
setTimeout(function () {
$("#saveDialogSingleFeature").dialog('close')
}, 5000);
}
UPDATE
Added an ID to the DIV and add empty and append to the loadPopUpMessage()
$("#popUpLabel").empty();
$("#popUpLabel").append("some Text");
<input type="text" id="popUpLabel" value=""/>
Related
I'm unable to create a alert box with having a link that you can click on to open up the link. This message should popup as a alert with the word "System Form" being a url link to click on it and how to make "System Form" underlined url in a alert message?:
Example Alert message: "Please complete System Form and get a signature approval before attaching the form."
You can not modify the system alert message, but you can use jQuery to make your own alerts, that can contain icons and hyperlinks. Try below snippet, please modify css as per your need.
$(document).ready(function(){
$('#btnTest').click(function(){
ShowCustomDialog();
});
});
function ShowCustomDialog()
{
ShowDialogBox('Warning',' Record updated successfully.','Ok','', 'GoToAssetList',null);
}
function ShowDialogBox(title, content, btn1text, btn2text, functionText, parameterList) {
var btn1css;
var btn2css;
if (btn1text == '') {
btn1css = "hidecss";
} else {
btn1css = "showcss";
}
if (btn2text == '') {
btn2css = "hidecss";
} else {
btn2css = "showcss";
}
$("#lblMessage").html(content);
$("#dialog").dialog({
resizable: false,
title: title,
modal: true,
width: '400px',
height: 'auto',
bgiframe: false,
hide: { effect: 'scale', duration: 400 },
buttons: [
{
text: btn1text,
"class": btn1css,
click: function () {
$("#dialog").dialog('close');
}
},
{
text: btn2text,
"class": btn2css,
click: function () {
$("#dialog").dialog('close');
}
}
]
});
}
.showcss{ display:block;}
.hidecss{ display:none;}
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.11.4/themes/black-tie/jquery-ui.css">
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<body>
<input type="button" id ="btnTest" value="Test"/>
<div id="dialog" title="Alert message" style="display: none">
<div class="ui-dialog-content ui-widget-content">
<p>
<span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0"></span>
<label id="lblMessage">
</label>
</p>
</div>
</div>
</body>
There is no way to insert a hyperlink in a javascript alert. It would be a better idea to use a confirm dialog like this:
var goToSystemForm = confirm('Please complete System Form and get a signature approval before attaching the form. Would you like to be directed there now?');
if (goToSystemForm){
window.location.href = 'https://www.stackoverflow.com';
}
else{
//do something else or nothing?
}
Asked a similar question here and I received a satisfactory answer for the container box, but as it gets smaller, as you can see, the buttons still each jump to new line as the container "shrinks" to be replaced by another.
This is also true for the "incoming" box but it's not very noticeable and I imagine whatever the answer here is, it'll solve both.
I'd like it to look as if it's a totally smooth transition with nothing breaking:
As you can see the old "divs" break rank while the input doesn't seem to care all that much.
For what it's worth, they're both floats and the code looks like this: (incomplete but you get the idea)
<div class="box-padder">
<div class="step-container">
<div class="step step-1">
<h1 class="box-header">ENTER YOUR ZIP CODE</h1>
<input autocomplete="on" class="input" id="zip" maxlength="5" placeholder="Enter Zip Code" type="tel" value="83406" />
<div class="tcenter">
<div class="next first-next">NEXT <span class="gte">›</span></div>
</div>
</div>
<div class="step step-2">
<h1 class="box-header">FULL NAME</h1>
<input autocomplete="on" class="input" id="full_name" placeholder="Your Full Name" type="text" value="a b" />
<div class="tcenter">
<div class="back">BACK <span class="gte">‹</span></div>
<div class="next">NEXT <span class="gte">›</span></div>
</div>
</div>
Here's the (messy) code governing the transitions:
if (!window.animating && window.step < window.MAXSTEP) {
window.animating = true;
// Necessary for smooth transition; needs work
$('.step-' + window.step).css('float', 'left')
$('.step-' + window.step).css('width', '310px')
$('.step-' + window.step).css('overflow', 'hidden')
$('.step-' + (window.step + 1)).css('float', 'right')
// Start decreasing font size
$('.step-' + window.step).find('.box-header').animate({
'font-size': '9px'
}, sliderSpeedUp, function() {})
// Undo the changes please. For some reason you have to use animate. If you can figure out why,
// tell me because I have no f clue
$($('.step-' + window.step).find('.box-header')[0]).animate({ 'font-size': '23px', 'color': 'maroon' }, 250, function() {})
// Slide boxes
$('.step-' + window.step).slideLeftHide(sliderSpeedUp, function() {
// Buttons
setButtons();
window.animating = false;
});
$('.step-' + (window.step + 1)).slideLeftShow(sliderSpeedDown, function() {
// Buttons
setButtons();
setTimeout(function() {
window.animating = false;
}, 250);
window.step++;
});
}
Here's the sliders I got from this answer:
jQuery.fn.slideLeftHide = function(speed, callback) {
this.animate({
width: "hide",
paddingLeft: "hide",
paddingRight: "hide",
marginLeft: "hide",
marginRight: "hide"
}, speed, callback);
}
jQuery.fn.slideLeftShow = function(speed, callback) {
this.animate({
width: "show",
paddingLeft: "show",
paddingRight: "show",
marginLeft: "show",
marginRight: "show"
}, speed, callback);
}
I want to show a confirm dialog menu, when user clicks DELETE button.
But button doesn't trigger my script. After triggering JavaScript, if user chose OK, script must go to the action. Else, if user clicks the CANCEL, nothing should happen.
Here is the JavaScript code;
<script type="text/javascript">
$(document).ready(function () {
$(".confirmDialog").on("click", function (e) {
// e.preventDefault(); use this or return false
var url = $(this).attr('href');
$("#dialog-confirm").dialog({
autoOpen: false,
resizable: false,
height: 170,
width: 350,
show: { effect: 'drop', direction: "up" },
modal: true,
draggable: true,
buttons: {
"OK": function () {
$(this).dialog("close");
window.location = url;
}, "Cancel": function () {
$(this).dialog("close");
}
}
});
$("#dialog-confirm").dialog('open');
return false;
});
});
</script>
Here is MVC codes;
<div style="text-align: right; font-weight: bold; font-size: larger; color: red;">
<tr>
<td>#Html.ActionLink("Delete", "Your-Action", new { #class = "confirmDialog" })</td>
</tr>
</div>
<div id="dialog-confirm" style="display: none">
<p>
<span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>
Are you sure ?
</p>
</div>
The Overload of Actionlink which you are using expects 3rd parameter as objectroutes not htmlattributes.
Correct actionlink as shown:
#Html.ActionLink("Delete", "Your-Action", new{} ,new { #class = "confirmDialog" })
OR
#Html.ActionLink("Delete", "Your-Action", null ,new { #class = "confirmDialog" })
The rest of your code is just fine..!!
What is the syntax for adding a helper function to FancyBox’s FancyApps2 close button that would turn it into a submit button?
I need to add the following:
input type="submit"
name="whereto"
value=""
Current FancyBox Function
$(function () {
$(".fancybox_iframe").fancybox({
type: 'iframe',
padding: 0,
scrolling: 'no',
width: 840,
minHeight: 150,
height: 615,
closeBtn: true,
helpers: { overlay: { closeClick: false, opacity: .5} },
afterShow: function () { $("a.fancybox-close").attr("title", null); },
afterClose: function () {
parent.close_field('notice');
parent.closeiframe_redirect('index.php');
}
});
});
You can make use of afterShow method of it:
afterShow: function () {
var input = $('<input />', {
type : "submit",
name : "whereto",
value : ""
});
$("a.fancybox-close").replaceWith(input);
},
Can you use an hidden submit button and jquery's trigger method?
http://jsfiddle.net/B6KE6/
<a class="fancybox" href="http://fancyapps.com/fancybox/demo/1_b.jpg">
<img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/>
</a>
<form style='display: none;' action='#?hey-it-works' method='get'>
<input type='submit' class='fancysubmit' name='whereto' value='' />
</form>
<script type='text/javascript'>
$(document).ready(function() {
$(".fancybox").fancybox({
padding: 0,
scrolling: 'no',
width: 840,
minHeight: 150,
height: 615,
closeBtn: true,
helpers: { overlay: { closeClick: false, opacity: 0.5} },
afterShow: function () { $("a.fancybox-close").attr("title", null); },
afterClose : function() {
$(".fancysubmit").trigger('click');
return;
}
});
});
</script>
Make a submit button somewhere else, and then on afterClose use jQuery trigger to trigger the button.
I have the following markup:
<div data-id="1" data-name="Product 1">Product 1 Delete</div><br />
<div data-id="2" data-name="Product 2">Product 2 Delete</div><br />
<div data-id="3" data-name="Product 3">Product 3 Delete</div><br />
<div data-id="4" data-name="Product 4">Product 4 Delete</div><br />
<div id="delete-product" title="Delete product?">
<p>
<span
class="ui-icon ui-icon-alert"
style="float:left; margin:0 7px 20px 0;">
</span>
This product will be permanently deleted and cannot be recovered. Are you sure?
</p>
</div>
I have the following script jQuery UI:
$(function () {
$("#delete-product").dialog({
autoOpen: false,
resizable: false,
height: 140,
modal: true,
buttons: {
"Delete": function () {
$(this).dialog("close");
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
$("a[id^='delete']").each(function () {
$(this).click(function () {
$("#delete-product").dialog('open');
return false;
});
});
});
How do I pass a value to the Delete function so I can display it in the dialogue box? I thought about setting a global variable but that's a bit icky.
I don't mind if I just get a reference to the <a> tag that raised the click event. From there I can work out the rest.
You can use the .data() API in jQuery.
$(function () {
$("#delete-product").dialog({
autoOpen: false,
resizable: false,
height: 140,
modal: true,
buttons: {
"Delete": function () {
var id = $(this).data('item-id');
//Do something with the id
$(this).dialog("close");
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
$("a[id^='delete']").each(function () {
$(this).click(function () {
var id = $(this).parent().attr('data-id');
$("#delete-snapshot").data('item-id', id).dialog('open');
return false;
});
});
})
EDIT: Just noticed that ID's missmatch for the dialog. But the problem is in the code I copied from your question.