I have a LinkButton inside a data list. When I click on this LinkButton, I want to open a modal window and load another html page in it.
Can you guys please help me with this?
You should check out a jQuery plugin like Thickbox, which I've used to do exactly what you've described.
check ModalPopupExtender....It's a component of Ajax Control toolkit.
First download it from from CodePlex ....and when you add reference the *Binary.dll to your project...you can use it within your pages.
I have always been a big fan of YUI, they have great documentation and Examples showing how to set things up. [ i love jQuery too ].
Look at YUI's Container Objects. They have very slick skinable Modal Panels:
http://developer.yahoo.com/yui/container/panel/
Here is a simple example:
http://developer.yahoo.com/yui/examples/container/panel-loading.html
Server Side
button.Attributes.Add("click", "popModal");
Client Side
<script>
function popModal(e) {
// Initialize the temporary Panel to display while waiting for external content to load
var SavingPanel =
new YAHOO.widget.Panel("wait",
{ width: "240px",
fixedcenter: true,
close: false,
draggable: false,
zindex: 1000,
modal: true,
visible: true
}
);
SavingPanel.setHeader("Saving, please wait...");
SavingPanel.setBody('<img src="http://l.yimg.com/a/i/us/per/gr/gp/rel_interstitial_loading.gif" />');
SavingPanel.render(document.body);
}
</script>
Related
I have a bit of ASP code that I'm trying to show/hide via Magnific Popup, by passing it a div from the page as a source.
Insert New Record
<div id="import-popup" class="white-popup mfp-hide">
<span>Proposal to Import:</span>
<asp:TextBox ID="txtPropNum" runat="server" />
<asp:Button ID="btnImport" runat="server" Text="Import" OnClick="btnImport_Click" />
</div>
JS:
$(document).ready(function () {
$('.open-popup-link').magnificPopup({
type: 'inline',
midClick: true // Allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source in href.
});
})
The div displays and hides perfectly fine. I can't seem to get the asp:Button id="btnImport" to actually fire it's function (which right now is a MsgBox to display the contents of the asp:TextBox) though. In fact, I don't even see a post/get request being logged in my web console.
The button however, works fine when not located inside that div, and the TextBox is even accessible from code behind as well, so I know my actual click function is working. Any ideas what might be going on? Is Magnific somehow preventing a postback?
If you are using the latest version of .magnificPopup then you can use the new prependTo method, and sent the .net form ID when setting it up.
$('.popup-with-form').magnificPopup({
type: 'inline',
preloader: false,
focus: '#name',
prependTo: $('#form1'),
The only solution I could find for this (as I didn't see any options in the API) was to modify the core code (yuck!).
I changed the line:
// add everything to DOM
mfp.bgOverlay.add(mfp.wrap).prependTo( document.body );
to:
// add everything to DOM
mfp.bgOverlay.add(mfp.wrap).prependTo( $('#form1') );
where form1 is the ID of my form element.
I wound up moving my popup's content to it's own page, then invoking magnific through the iframe type, as below:
JS:
$(document).ready(function () {
$('.open-popup-link').magnificPopup({
type: 'iframe',
iframe: {
markup: '<div class="mfp-iframe-scaler" style="width:100px; height:100px;">'+
'<div class="mfp-close"></div>' +
'<div class="custom-mfp-border">'+
'<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>' +
'</div>'+
'</div>'
},
midClick: true // Allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source in href.
});
})
Parent Page:
Insert New Record
Then my child page is essentially just the <div> I posted in the question.
adding prependTo: $('#form1')
worked for me! using VS 2010
I'm looking for alternative ways of solving a problem. We're using ElFinder for browsing files, and we want to allow the user to change the access rights to a file element through the right-click context menu ("Change permissions"). The solution I have come up with so far is to load a server side ASP.NET usercontrol in a jQuery modal dialog window. This user control will contain the logic needed to add / remove user access to the selected element.
The jQuery Dialog script looks like this (slightly changed for readability), where DisplayItemAccessConfig() is the method that's called from the context menu:
<!-- access control script -->
<script type="text/javascript" charset="utf-8">
function DisplayItemAccessConfig() {
$.getJSON('AccessRights.ashx', function (data) {
var itemName = data["itemName"];
/* set new title (JUST FOR TESTING) */
$(dialog).dialog('option', 'title', itemName);
/* open modal dialog --> */
$(dialog).dialog('open');
});
}
$(function () {
$("#dialog").dialog({
autoOpen: false,
modal: true,
buttons: {
"Ok": function () { $(this).dialog("close"); },
"Cancel": function () { $(this).dialog("close"); }
},
open: function (type, data) {
$(this).parent().appendTo("form");
}
});
});
</script>
Challenge 1: find a way to reload the user control each time the jQuery popup is displayed - this is to retrieve the current access settings for the selected element. Now it loads when the page is first loaded, since it's just a div element containing an update panel with a placeholder for my usercontrol and visibility set to none. Anyone have any tips here?
Challenge 2: While I am trying to figure that one out I thought it could be worth while asking for other opinions. Is there a better way of solving this? Should I use a pure jQuery with HTML and call server side .ashx methods to retrieve data, instead of an ASP.NET usercontrol?
You can do this by creating a hidden button on inside the uploadpanel and then trigger it like this:
__doPostBack('<%= Button.ClientID %>','');
Personally I would drop the UpdatePanel and go for jQuery AJAX calls to update the content of the dialog window, but this depends on the complexity of your user control. Hard to say without seeing more of your code.
I have jQuery UI dialog with ASP.NET. I wrap a list of check boxes in the dialog. Since, it's an "Edit page", some of the checkboxes are already checked
because the data fetched from datatbase when page is first loaded.
I have no problem when I click on the link to open dialog, and everything works as expected. However, if I don't click on the link to open dialog, those checkboxes
values will not be picked up from code-behind when form is submitted back. I understand because jQuery UI dialog append "div" to HTML body outside of the "form"
element when the page is loaded.
//I'm trying to append dialog-dept to form on document ready like this but not yet working
$("#dialog-dept").parent().appendTo($("form:first"));
How do I make jQuery UI dialog part of "form" tag required by ASP.NET page when page first loaded?
Because there are many other fields on the page not just those checkbox. Sometime,
there might be no need to open dialog to select any checkbox.
The code below works well only if I click on the link to open the dialog.
$(document).ready(function() {
// Dialog Link
$('#dialog_link_dept').click(function() {
$('#dialog-dept').dialog('open');
return false;
});
// Launch Dialog
$('#dialog-dept').dialog({
autoOpen: false,
width: 700,
modal: true,
open: function(type, data) {
$(this).parent().appendTo("form");
}
});
});
</script>
You can move it into the <form> immediately upon creation, even if it's autoOpen: false, like this:
$('#dialog-dept').dialog({
autoOpen: false,
width: 700,
modal: true
}).parent().appendTo("form");
I guess this way form modal dialog:
$("#dialog-dept").dialog({ height: 300, width: 250, modal: true,appendTo:"form", title: "Title", show: { effect: "fade", duration: 500 }, hide: { effect: "fold", duration: 500} });
and work fine for me
On my page I got the following user control:
<div class="editFormDialog" style="display: none; font-size: 12px;">
<mm:Form ID="editUC" ShowCreateButton="false" ShowEditButton="true" runat="server" />
</div>
This UC has a public property that takes a DataSet, and updates some fields in the UC.
So when I push a button on my page, it calls this property on the UC, and the UC gets updated with data from the DataSet.
So far so good. The problem arise when I want the UC to be a jQuery UI Dialog.
First I create the dialog:
$(document).ready(function() {
$('.editFormDialog').dialog({
autoOpen: false,
height: 700,
width: 780,
modal: true,
bgiframe: true,
title: 'Rediger',
open: function(type, data) {
$(this).parent().appendTo("form");
$(this).css('display', 'block');
}
});
});
And I wan't it to open on a button push (this is not an ASP.NET button, plain HTML):
$('#btnEdit').live('click', function() {
$('.editFormDialog').dialog('open');
});
The dialog opens, but the UC does not contain the correct data.
When the page loads, the UC is updated with default data. Then the user clicks a button, and the data changes but the UC isn't updated. It still contains the default data. Thats the problem.
Do you have any idea why?
Help will be much appreciated!
I found the solution for this issue. It turns out that when you append to the form, you need to make sure this snippet of code is inside jquery document ready:
$("#dialog1").parent().appendTo($("form:first"));
So the whole thing should look like this:
jQuery(document).ready(function() {
$("#<%=myFamilyGrid.ClientID %>").tablesorter({
sortList: [[0, 1]]
})
.tablesorterPager({ container: $("#pager") });
$("#dialog1").dialog({
modal: true,
height: 370,
width: "350px",
autoOpen: false,
bgiframe: false,
zIndex: 3999
});
$("#dialog1").parent().appendTo($("form:first"));
});
Hope this helps!
Exactly what happens when you "call the property" (I would assume you mean it's a method)? Does the page perform a postback? If that's the case, maybe the postback is getting blocked somehow when you mix jQuery into the scenario?
Since you are using Update Panels, how are you injecting the call to the javascript in the page? I ask, because there's only one way that work properly on partial postbacks: ScriptManager.RegisterStartupScript(). That allows javascript code to act as if the page was loaded. Of course any other onload javascript may be called too, which may result in the behavior you are seeing.
So,
make sure that your javascript is injected with the script manager.
make sure only the bits of javascript that you want to execute
after a partial postback are
executed
There is also the possibility of turning your UC in a ajax control with a web service to change the datasource. No more partial postbacks then, which usually improve the responsiveness of the page.
I want to show a loading image before the content of the whole page is loaded. How to achieve this? I'm working in ASP.NET.
Thank you.
NLV
You would need to use Javascript to accomplish this. My preference is jQuery. jQuery has a function that executes when the page is fully loaded, so you could set your main content div to have a css property display:none, and then when the DOM is ready, you could use jQuery to show the content:
$(document).ready(function() {
$("#myContent").css("display", "block");
});
You should initially have the image showing in your HTML, and then hide it when the page loads, like this:
Javascript:
window.onload = function() {
document.getElementById('loadingImageIDHere').style.display = 'none';
};
EDIT: The OP tagged this question as 'javascript', NOT 'jquery'!!
My personal preference is to have a loading image displayed on every page in advance and then use jQuery to hide the image once the page has loaded. It's up to you whether you want to use $(document).ready or $(window).load.
// assumes you already have a DIV#preloader container on your page centered with a loading image inside
// of it
$(document).ready(function() {
$("#preloader").hide();
});
$(window).load(function() {
$("#preloader").hide();
});