I'm trying to properly close a modal when if I press the x button.
At first i tried doing this in the main index.cshtml page
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
#Html.Partial("Create")
</div>
</div>
and when closing the modal in my create page i had this
<button type="button" class="close" data-dismiss="modal">×</button>
And the modal closed properly but this was a popup from the main screen.
Although it technically worked I wanted the screen to be a bit bigger. So I tried doing this in the index.cshtml page.
#Html.ActionLink("Create new link", "Create")
The create screen still has the same design with the inline class of "modal-content" but the close button doesn't seem to work. I wasn't sure if it was because the ActionLink part is treating it as a brand new page since most links i looked online seem to say include the "data-dismiss="modal"" part and everything is fine.
If I do another actionlink back to the main page that completely refreshes the page and that isn't what I want because it refreshes the data that the user currently has. There's dropdown lists, query results and filtering done.
Is there a way to treat a modal page like a cshtml page properly so that I can close it without completely refreshing the entire page? Or am I going about this problem the wrong way.
Using Html.ActionLink, literally just drops a static a tag to the page. When you click on that, the entire browser view is changed to the new URL. In this context, "closing the modal" doesn't make sense, because there's no modal. You're just display the response from an action that just happens to be the content from a partial view.
Related
im trying out the HTMX lib and so far i like it alot. something that i cant quite get my head around is handling full page reloads.
Links
<a class="nav-link" href="#" hx-get="/api/?action=feed" hx-target="#app" hx-swap="innerHTML" hx-push-url="/#/feed">Feed</a>
<a class="nav-link" href="#" hx-get="/api/?action=profile" hx-target="#app" hx-swap="innerHTML" hx-push-url="/#/profile">Profile</a>
its quite nice in that it loads the content in my required div, and applies a /#/link into my url bar and browser history.
But when i reload the page on any of the urls /#/profile or /#/feed the page reloads to its default state not including the content thats designated on the /#/profile or /#/feed pages.
If i just use a url of /profile or /feed, i get a 404 error as expected.
Everything is amazing, am i doing something wrong?
For full page loads you would need to either:
Render the content server side
Use htmx with the load trigger to load the content on page load. You can find an example of that here https://htmx.org/attributes/hx-trigger/
In the second case you still need to be able to determine the type of page being loaded server side to render the appropriate div. Something like this:
<div hx-get="/api/?action=feed" hx-trigger="load" hx-target="#app" hx-swap="innerHTML"></div>
I am working on a legacy application that is being rewritten using Aurelia, the application has a bunch of static html in a tblHelp that needs to be displayed. I am using innerhtml.bind on a div in my view to databind the stored static HTML into the view. Each record is essentially a document complete with a full table of contents that links to other divs within the document (Bookmarks).
Something like:
<div id="toc">
<h1>Table of Contents</h1>
<ul>
<li>Section 1<li>
<li>Section 2<li>
</ul>
</div>
<div id="section1">
<h2>Section 1</h2>
<p>Paragraph Text...</p>
<p>Back to Table of Contents</p>
</div>
<div id="section2">
<h2>Section 2</h2>
<p>Paragraph Text...</p>
<p>Back to Table of Contents</p>
</div>
When I display the resulting page in my Aurelia view and click on the links, rather than moving to the proper Div on the current page, it seems to be attempting to route to an unknown route and ends up returning to the home page (that is my unknown route behavior). How do I make the Aurelia Router know that I am just moving around the same page and do not require it to route to another page?
I think you need to change your <div id= to <a id= which is the correct syntax for anchors. Hopefully Aurelia will recognize them as legitimate anchors when formatted correctly.
Also, since an anchor tag shouldn't wrap the whole content, you'll just open and close it at the top of the div. You can even leave the divs there but should not duplicate the id.
Update:
That being said, I created a GistRun that actually demonstrates that Aurelia should be able to handle the <div id= anchor targets. So, I'm not exactly sure why you're having problems.
Maybe this GistRun or the more standard <a id= approach will help you.
I am working in CakePHP 2.3.6. Here I am using Bootstrap's modal plugin. There are contents in the modal, which are coming from another page, using ajax. So, when I click on a link, the modal window appears with that content, from that page, loaded by ajax.
Now, what I want is, when the modal window appears, there will be a slider/gallery/slideshow, to navigate through all other contents. I mean, I want that my users will click on a link, modal window will appear with the content, the user will see the content, then there will be a navigator(like Carousel plugin), to navigate through other contents, if the user clicks on "prev/next", "prev/next" content will come from that page, using ajax.
I mean, I want a combination of Bootstrap's Modal Plugin & Carousel Plugin, Carousel Plugin in Modal Plugin, where the contents will come from another page, using ajax.
My modal plugin is :
.
.
.
<?php echo $this->Html->link('Name',array('controller'=>'controllers','action'=>'action',$id),array('data-toggle'=>'modal','data-target'=>'.modal'));?>
.
.
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="customLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content"></div>
</div>
</div>
So, here, content(s) are coming from action action and page, using Ajax. But, I don't find any way to add the Carousel Plugin(or like) here. I thought Carousel Plugin supports Ajax content loading, but I didn't find that.
So, what should I do here ? Can anyone help me ?
Thanks
Is there an easy durandal way to clear the view and put a loading or please wait... on the screen so the user gets some feedback to know that it is working until the ajax content loads?
Right now when I click on a something that navigates to a child route and that child route loads a module that has to do a lot of stuff in activate(), it does not switch the nav or clear the screen or give any feedback to the user that it is working and I see them clicking many times over and over and getting frustrated, then just about when they want to give up, the page loads in fine.
I would like to make this default functionality for my app and not have to do something special in every module or on every page, is that possible?
Thanks.
Have you tried to use router.isNavigating? Original Durandal template contains a spinner like this:
<div class="loader pull-right" data-bind="css: { active: router.isNavigating }">
<i class="icon-spinner icon-2x icon-spin"></i>
</div>
A large percentage of the time, what you're looking for can be obtained very simply via:
<div data-bind="compose:ActiveVm">
<div class="text-center" style="margin : 75px">
<i class="fa fa-spinner fa-spin"></i>
</div>
</div>
The inner div can be any arbitrary markup which will display while the viewmodel is going through activation.
Note that this currently only displays the placeholder content the first time this dom section is composed. If you have a section of your application which is being updated via an observable viewmodel + compose approach, you could use the approach here:
Durandal: Showing a 'LOADING...' during composition
For anyone visiting from the future, this issue might be worth checking out in case native support for this is desired:
https://github.com/BlueSpire/Durandal/issues/414
I have a modal window using jqmodal. I need a button within that modal to load a different page in the modal. I have this functioning in all browsers except safari.
JS
<script language="javascript">
function shipCalc() {
$('.jqmWindow').load("/ash/shop/shipping.php");
}
</script>
HTML
<form name="form9" id="form9" method="post">
Zip: <input type="text" size="5" name="zip">
<a href="#" id="submitbtn" onclick= "shipCalc();" >zip</a>
</form>
KEEP IN MIND! The class .jqmWindow is a modal window using the jqmodal jquery plugin. It is NOT just a div on a page. I am using the method .load() to change what has been loaded in the modal window after it has popped up. The html shown above is inside the page that is originally loaded in the modal. I am having trouble understanding why this works in all browsers besides safari. I posted earlier and got some responses that weren't quite addressing the real problem here, which is that I can not use the .load() method to load anything into my modal window in safari. (Ive stripped some non-important information regarding future modifications I will make to further make this suite the needs of the site, just to keep this nice and simple to understand...)
function shipCalc() needed to be on both the initial page AND the page that gets loaded into the modal for safari to load everything properly. All other browsers did not require that. All is working now, so I figured I would post my own answer in case anyone was ever searching for something similar!