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
Related
This is just a test of something I'm trying to accomplish here that is probably incredibly simple but is racking my brain. I've reviewed some of the closest matches already available here, but I wasn't able to make any of them work.
I'm trying to load content into a div using a button, like so:
<div class="load-container">
<button class="load-first">Load First</button>
</div>
<script type="text/javascript">
$(".load-first").click(function() { $(".load-container").load("/test-1.html"); });
$(".load-second").click(function() { $(".load-container").load("/test-2.html"); });
$(".load-third").click(function() { $(".load-container").load("/test-3.html"); });
</script>
And this actually works on the first try, but then, when "/test-1.html" loads, the next button doesn't work. This is what is in /test-1.html file:
This is the first one.<br>
<button class="load-second">Load Second</button>
Clicking the second button should load the next bit of content but it does nothing. Is the problem that the button is inside of the destination container div? I need a container div with buttons inside that can load new content in this way.
Because at the time the page is loaded, the "load-second" button was not there yet, thus the click() event was not registered to the button that is yet to come via the load() content, you need to attach your event after your buttons are created in the DOM, try the following:
<div class="load-container">
<button class="load-first">Load First</button>
</div>
<script type="text/javascript">
$(".load-first").click(function() {
$(".load-container").load("/test-1.html", function(){
// now load-second button is available, register the click handler
$(".load-second").click(function() {
$(".load-container").load("/test-2.html", function(){
// now load-third button is available, register the click handler
$(".load-third").click(function() { $(".load-container").load("/test-3.html"); });
});
});
});
});
</script>
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.
How can I change the visibility of a control with jQuery? I have a control that its visible property to false (not css).
When I used show() function for it nothing happened, it seems that hide() and show() methods are for css set of a control, not visible property.
You can't do this with jQuery, visible="false" in asp.net means the control isn't rendered into the page. If you want the control to go to the client, you need to do style="display: none;" so it's actually in the HTML, otherwise there's literally nothing for the client to show, since the element wasn't in the HTML your server sent.
If you remove the visible attribute and add the style attribute you can then use jQuery to show it, like this:
$("#elementID").show();
Old Answer (before patrick's catch)
To change visibility, you need to use .css(), like this:
$("#elem").css('visibility', 'visible');
Unless you need to have the element occupy page space though, use display: none; instead of visibility: hidden; in your CSS, then just do:
$("#elem").show();
The .show() and .hide() functions deal with display instead of visibility, like most of the jQuery functions :)
.show() and .hide() modify the css display rule. I think you want:
$(selector).css('visibility', 'hidden'); // Hide element
$(selector).css('visibility', 'visible'); // Show element
Here's some code I use to deal with this.
First we show the element, which will typically set the display type to "block" via .show() function, and then set the CSS rule to "visible":
jQuery( '.element' ).show().css( 'visibility', 'visible' );
Or, assuming that the class that is hiding the element is called hidden, such as in Twitter Bootstrap, toggleClass() can be useful:
jQuery( '.element' ).toggleClass( 'hidden' );
Lastly, if you want to chain functions, perhaps with fancy with a fading effect, you can do it like so:
jQuery( '.element' ).css( 'visibility', 'visible' ).fadeIn( 5000 );
It's been more than 10 years and not sure if anyone still finding this question or answer relevant.
But a quick workaround is just to wrap the asp control within a html container
<div id="myElement" style="display: inline-block">
<asp:TextBox ID="textBox1" runat="server"></asp:TextBox>
</div>
Whenever the Javascript Event is triggered, if it needs to be an event by the asp control, just wrap the asp control around the div container.
<div id="testG">
<asp:Button ID="Button2" runat="server" CssClass="btn" Text="Activate" />
</div>
The jQuery Code is below:
$(document).ready(function () {
$("#testG").click(function () {
$("#myElement").css("display", "none");
});
});
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 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>