I have a problem with the jquery-ui pop up dialog.
if i close with default popup close button ok, but if i close with text link then pop up not close.
$(document).ready(function () {
$('a#popup').live('click', function (e) {
var page = $(this).attr("href")
var $dialog = $('<div></div>')
.html('<iframe style="border: 0px; " src="' + page + '" width="100%" height="100%"></iframe>')
.dialog({
autoOpen: false,
modal: true,
height: '500',
width: '85%',
title: "",
buttons: {
"Close": function () {
$dialog.dialog('close');
location.reload();
}
},
});
$dialog.dialog('open');
e.preventDefault();
});
});
$("#close").live("click", function (e) {
alert('hjhhh');
$dialog.dialog('close');
});
call from html
<a id="close" href="#">close popup</a>
thanks a lot before
$dialog is not on the $("#close") function scope.
Try to declare var $dialog under $(document).ready function out side of $('a#popup')
Related
I have a dojo Enhanced Grid and I'm using formatter to display a button in one of the columns
{field: '_item', name: 'Update Data', formatter: dojo.hitch(context, this.getUpdateData), width: '165px' },
getUpdateData: function(rowItem) {
var button = new dijit.form.Button({
label: '<img src="/public/img/icon_texteditor.png" height="19px" width="19px"/>',
onClick: function(){
alert('hi');
}
});
return button;
}
This works well. The button is correctly rendered and when I click on it, it correctly shows the alert dialog. What I'd like to do is show some text/label and then the button in the grid cell. I've tried creating a div in the formatter and tried adding the button to the div:
getUpdateData: function(rowItem) {
var divNode = dojo.create("div", { innerHTML: rowItem.someText });
var button = new dijit.form.Button({
label: '<img src="/public/img/icon_texteditor.png" height="19px" width="19px"/>',
onClick: function(){
alert('hi');
}
});
button.placeAt(divNode);
return divNode.innerHTML;
}
Even though it renders it correctly (where the text is shown before the button in the table) , when I click on the button nothing happens. The onClick event handler is not called.
My question is: how can show the some text+ a button in a grid cell.
This worked for me:
getUpdateData: function(rowItem) {
var cpane = new dojox.layout.ContentPane (
content: rowItem.someText;
});
var button = new dijit.form.Button({
label: '<img src="/public/img/icon_texteditor.png" height="19px" width="19px"/>',
onClick: function(){
alert('hi');
}
});
button.placeAt (cpane);
return cpane;
}
i have a magnific popup being displayed dynamically but the image is rendered after the load event so i cannot get the value of the image in the open event. is there any onload event in magnific popup?
function OpenPopup(el) {
var temp = el.innerHTML;
var mysrc = $(temp).attr("src");
var isobj = $.magnificPopup.open({
items: {
src: mysrc,
onload: 'myevent()',
},
type: 'iframe',
closeOnBgClick: false,
markup: '<div class="mfp-iframe-scaler">' +
'<div class="mfp-close"></div>' +
'<iframe class="mfp-iframe" frameborder="0" onload="myevent()"></iframe>' +
'<div class="mfp-bottom-bar">' +
'<div class="mfp-title"></div>' +
'</div>' +
'</div>',
callbacks: {
beforeOpen: function () {
console.log('Start of popup initialization');
},
elementParse: function (item) {
// Function will fire for each target element
// "item.el" is a target DOM element (if present)
// "item.src" is a source that you may modify
debugger;
console.log('Parsing content. Item object that is being parsed:', item);
},
change: function () {
console.log('Content changed');
console.log(this.content); // Direct reference to your popup element
},
resize: function () {
console.log('Popup resized');
// resize event triggers only when height is changed or layout forced
},
open: function () {
console.log('Popup is opened');
debugger;
var iframe = $.magnificPopup.instance,
t = $(iframe.currItem.el[0]);
var contents = iframe.contents();
$(contents).css('max-width', '100%');
$(contents).css('max-height', '100%');
}
}
});
Not a proper solution put i added a timed event which resizes the image once it is loaded. Had to play a lot to get the perfect time so that there is no glitch.
Here is the code:
function OpenPopup(el) {
var temp = el.innerHTML;
var mysrc = $(temp).attr("src");
var isobj = $.magnificPopup.open({
items: {
src: mysrc,
},
delegate: 'a',
type: 'iframe',
closeOnBgClick: false,
});
setTimeout(setImage, 500);
};
function setImage() {
var iframe = $('.mfp-iframe');
var contents = iframe.contents();
$(contents).find('img').attr('width', '100%');
$(contents).find('img').attr('height', '100%');
}
All,
I am trying to set a timeout on my JQuery UI Dialog but have not been able to get it to work. I read several SO posts and the docs on setTimeout() but apparently I am not implementing it correctly.
Below, is the syntax that I am using to set up my timeout, along with the dialog HTML.
Thanks
$.ajax({
type: "POST",
url: '/Dashboard/BackgroundCheck',
data: queryStr,
datatype: 'json',
success: function (data) {
if (data == true) {
$("#dialog-message").attr('title', 'Success!');
$(".js-dialog-content").html('Background Check status saved.');
$("#dialog-message").fadeIn('slow');
$("#dialog-message").dialog({
modal: true,
buttons: {
Ok: function () {
setTimeout(function() {
$(this).dialog("close");
},5000);
}
}
});
}
}
});
}
});
Dialog Box
<div id="dialog-message" title="" style="display:none">
<p>
<span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 7px 50px 0;"></span>
<span class="js-dialog-content"></span>
</p>
</div>
You should define your dialog parameters and you can use autoOpen or open it manually. please attention to this sample:
$('#dialog-message').dialog({
autoOpen: false,
resizable: false,
show: 'fade',
hide: 'fade',
height: 240,
modal: true,
dialogClass: "alert",
close: function (event, ui) { /*do somthing you want*/ },
open: function (event, ui) { setTimeout(function () { $('#dialog-message').dialog("close"); }, 2000) }
}).dialog("open");
As you can see i set the timeout in function related to open parameter.
Good Luck.
I am working on an asp.net page where I have used JQuery UI dialogue. This dialogue has a submit button. When I click the submit button dialogue closes. I want to call a Webmethod on it. If method returns ture, then I want to close it otherwise I want to keep it open with error message shown.
[Edited]
<script>
jQuery(function () {
var dlg = jQuery("#dialog").dialog({
draggable: true,
resizable: true,
show: 'Transfer',
hide: 'Transfer',
width: 320,
autoOpen: false,
minHeight: 10,
minwidth: 10,
beforeClose: function () {
$.ajax({
url: "Default.aspx/GetResult",
success: function (response) {
if (response == true) {
("#dialog").close()
}
else {
alert('asdasdds');
}
}
});
return false; //this will stop dialog box to close
}
});
dlg.parent().appendTo(jQuery("form:first"));
});
</script>
<div id="Result">
Click here for the time.</div>
<div id="dialog" style="text-align: left; display: none;">
<asp:Button ID="btnButton" runat="server" Text="Button" OnClick="btnButton_Click" />
</div>
how to do it. Please suggest.
Regards,
Asif Hameed
You can call webmethod using ajax and then act on it conditionally based on the response. Let your webmethod just return true/false and then you can check this value on the client side.
Execute this code on submit button click and do not close the dialog. Let the success handler decide whether to close it or no.
$.ajax({
url: "urlOfTheService.asmx/methodName",
success: function(response){
if(response == true){
//Code to close the dialog
}
else{
//Show the error message
}
}
});
ajax() reference: http://api.jquery.com/jQuery.ajax/
Update:
Use open event of dialog box to attach the submit handler to form and execute the above code.
jQuery(function () {
var dlg = jQuery("#dialog").dialog({
draggable: true,
resizable: true,
show: 'Transfer',
hide: 'Transfer',
width: 320,
autoOpen: false,
minHeight: 10,
minwidth: 10,
open: function(){
$(this).find('form')
.unbind('submit')
.submit(function(){
var $form = $(this);
$.ajax({
url: "urlOfTheService.asmx/methodName",
success: function(response){
if(response == true){
//Submit the form
$form.unbind('submit')[0].submit();
}
else{
//Show the error message
}
}
});
return false;
});
}
});
dlg.parent().appendTo(jQuery("form:first"));
});
I have a TemplateField in a GridView in an UpdatePanel with a button called btnDelete. Rather than the standard OnClientClick="return confirm('Are you sure?')" I'd like to use jQuery Dialog.
So far, I'm able to set the jQuery using btnDelete.Attributes["onclick"] and setting the jQuery Dialog code in the code-behind. However, it posts back to the server in all cases before I have a chance to click "Confirm" or "Cancel".
Here is the HTML it produces:
<input type="submit" rel="Are you sure?" class="action-link delete" id="ctl00_c1_gvTransfers_ctl02_btnDelete" onclick="return function() {
$('#delete-transfer-confirm').dialog({
buttons: {
'Confirm' : function() { $(this).dialog('close'); return true; },
'Cancel' : function() { $(this).dialog('close'); return false; }
}
});
$('p.message').text($(this).attr('rel'));
$('#delete-transfer-confirm').dialog('open');
};" value="Delete" name="ctl00$c1$gvTransfers$ctl02$btnDelete">
What am I doing wrong that is causing this function not to block until either button is clicked?
Conversely, the standard confirm works just fine:
<input type="submit" class="action-link delete" id="ctl00_c1_gvTransfers_ctl02_btnDelete" onclick="try{if (!window.confirm('Are you sure?')){return false;};}catch(e1){alert("Unexpected Error:\n\n" + e1.toString());return false;};" value="Delete" name="ctl00$c1$gvTransfers$ctl02$btnDelete">
Thanks,
Mark
UPDATE:
Ultimately, I had to use UseSubmitBehavior="false" to get the name="" attribute to render. Then I had to override the OnClientClick, setting the value to "return;" so the default __doPostBack() doesn't get executed. Then I was able to wire up a .live() click handler, which invokes the __doPostBack() on Confirm:
$('input.delete').live('click', function(e) {
var btnDelete = $(this);
alert($(btnDelete).attr('name'));
e.preventDefault();
$('#delete-transfer-confirm').dialog({
buttons: {
'Confirm': function() {
$(this).dialog('close');
__doPostBack($(btnDelete).attr('name'), '');
return true;
},
'Cancel': function() {
$(this).dialog('close');
return false;
}
}
});
$('p.message').text($(this).attr('rel'));
$('#delete-transfer-confirm').dialog('open');
});
Check the selected answer for this question for an example: How to implement "confirmation" dialog in Jquery UI dialog?
A couple of notes:
Don't put your onclick functionality in an onclick attribute. One of the great benefits of jQuery is that it allows you to do Unobtrusive Javascript. Instead, do something like this:
$(function() {
$('.delete').click(function(e) {
e.preventDefault() //this will stop the automatic form submission
//your functionality here
});
});
Also, make sure that your dialog is instantiated outside the click event, so that it is initialized before the first click event happens. So, something like this would be your result:
$(function() {
$("#delete-transfer-confirm").dialog({
autoOpen: false,
modal: true
});
$('.delete').click(function(e) {
e.preventDefault();
$('#delete-transfer-confirm').dialog({
buttons: {
'Confirm': function() {
$(this).dialog('close');
return true;
},
'Cancel': function() {
$(this).dialog('close');
return false;
}
}
});
$('p.message').text($(this).attr('rel'));
$('#delete-transfer-confirm').dialog('open');
});
});
That should do the trick for you.
$(document).ready(function () {
$('#btnCancel').click(function (e) {
e.preventDefault();
$("<div><span><b>Are you sure you want to cancel this order?</b></span></div>").dialog({
modal: true,
draggable: false,
resizable: false,
width: 430,
height: 150,
buttons: {
"No": function () {
$(this).dialog("destroy");
},
"Yes": function () {
$("#btnCancel").unbind();
$(this).dialog("destroy");
document.getElementById('<%= btnCancel.ClientID %>').click();
}
}
});
});
});
Then in the Page Body
<asp:button id="btnCancel" runat="server" cssclass="button_major" text="Cancel" style="float: right"
onclick="btnCancel_ClickEvent" clientidmode="Static" />