I need to load modal in specific div instead of root. I have noticed that one method called "getContainer". Can someone help me to show me the correct usage of 'getContainer' method? This is a specific usage question about ant.design
For example. If you have block div with id="test", you can use this code for put Modal into this container:
<div id="test">div for mounting modal</div>
<Modal
title="test window"
visible={showNewMessageModal}
getContainer={() => document.getElementById("modal-wrapper")}
>
modal content
</Modal>
Related
I am creating a MVC application in which on the Left Side Menu will load first time when the user Login into the application and on click of any of the Menu Option only Right side Content will display(Will Call the Action Method).
I have achieved it using Partial Views. Is it good to create whole application on Partial Views or is there any other way to achieve this?
Looks like you want to load the page for which the link is clicked, in an asynchronous way. You can do that using jQuery ajax methods.
So first, mark your links with a css class name so we can use that as the jQuery selector to wire up the ajaxfied load behavior. You should also has a content page to which we will load the result of the ajax call.
<div>
<div id="leftPane">
About
Contact
Index
<div>
<div id="rightPane">
</div>
</div>
Now you can listen to the click event on those link, use jQuery load method to get the content of those action method and update the rightPane's innerHtml
$(function(){
$("a.alink").click(function(e){
e.preventDefault();
$("#rightPane").load($(this).attr("href"));
});
});
With proper css, you can keep the leftPane to the left side of the container and rightPane to the right side of that.
I am having an issue with Bootstrap Modal, you know when we call a modal, the page where we called it is disabled (it turns gray) and you can only type/click on the modal right? On my part though, both the main page and the modal is disabled so I can't click nor close my modal after I called it. I can fix it by making the data-backdrop property to false but that removes the effect both on my modal and the page.
Default Modal:
data-backdrop = "false"
I think the reason for this is because the content of my modal is a partial view, and the modal is called from a partial view also. To help you imagine: I have 3 pages
1. Index.cshtml(main page)
2. SearchResult.cshtml (partial view)
3. Edit.cshtl (partial view)
Index is where my search criteria bar, when Go is clicked, SearchResult partial view is called at the center of the page, then when I click edit, the modal popup.
My assumption is that the backdrop also disables my SearchResult so my whole page become disabled. I am not really sure though. I hope you can help me figure this out. Thank you!
Do you have an example of your code? I am guessing without looking that your div that you are populating with the modal content is inside the div(s) with the rest of your page content. If this is the case, try moving the modal div out of any nested tags so that it stands on its own.
I.E.
`<div id="PageContent"></div>
<div id="ModalContent"></div>`
I put this code on my document ready , to catch when that element is adding to the page and I remove his css attribute position to relative:
$('body').on('DOMNodeInserted', '.modal-backdrop', function () {
$(this).css('position','relative');
});
Can Any one explain how to refresh a parent page from child page in C#
We have a requirement like, we have a textbox followed by image popup button , If we click on Image popup button it will open one popup which has a textbox in it.
If we add some text in that and click on the save button , The parent page textbox has to be updated.
It's updating only when we manually refresh the page.We want a requirement like we have to updated it without any manual refresh.
Does any one know this?
Is it a "real popup"--literally a new window? Or is it a simulated popup with an HTML Element? If the latter--you need some Javascript. You can do this without reloading the page with jQuery by:
PARENT PAGE:
<textarea id="parent-textbox"></textarea>
CHILD POPUP:
<textarea id="child-textbox">This is some content I'd type in the popup</textarea>
<button onclick="$('#parent-textbox').val($('#child-textbox').val())">Click Me To Copy</button>
After it copies, you can close your popup and see the results--no page refresh required. Add jQuery to your site with:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
For info on how to integrate jQuery into your site (it's very easy), see
http://encosia.com/3-reasons-why-you-should-let-google-host-jquery-for-you/
try this (javascript):
window.top.reload()
I have partial view renders itself inside a JQuery popup.
<div id="enumsDialog" class="dialog">
#Html.Action("List", "Enumeration")
</div>
In this view, I have an action link to another view.
The question is there a way to let the second view renders in the same popup? I mean keep the rendering partially and without closing the popup.
I read about Ajax.BeginForm(), but it causes a redirecting to the second view.
You can render the first action inside an IFRAME.
Then you can render the new one with a simple #Html.Action and it will render in the same IFRAME.
I am trying to get a simple jQuery UI dialog to work in an ASP.Net project. I have some buttons inside the dialog's <div>, but they weren't posting back. Upon closer inspection, for whatever reason when making the <div> a panel it moves it in the DOM so that it is the last tag before </body>. This would all be fine and dandy except for it also moves it outside of the <form> tag which is needed so that the buttons can do a postback.
What is the purpose of this behavior and how can I override it?
An example is here: http://jsbin.com/olumu4/
Looking at Firebug though I get this:
alt text http://img80.imageshack.us/img80/9049/dialog.png
This is a common problem with jQuery/ASP.NET.
After you assign your modal like this
$(".modal-window").dialog({
modal: true
});
do this
$(".modal-window").parent().appendTo($("form:first"));
If you have more than one modal on a page, I've found it doesn't work as expected, so in that case when you call the open method on the modal, do this:
$('.modal-window').dialog('open').parent().appendTo($('form:first'));
If you want to have it auto-open. You can append it right after the model is assigned.
$(".modal-window").dialog({
modal: true
}).parent().appendTo($('form:first'));
Hope this helps,
Marko
I have had this problem before, an option is to setup an even on the $(form).submit that appends what is in the dialog to the form.