When trying to use 'Edit in Canvas' function in Umbraco I see the following error message:
Umbraco Canvas requires an ASP.Net form to function properly. Live
editing has been turned off.
To enable canvas editing you must ensure your page includes a form set to runat=server
<form id="form1" runat="server">
...
</form>
Related
In Visual Studio, I've created a default MVC app with login.
I would now like to change the login so that instead of going to a page, it appears as a popup.
The reason for this is that the user will be part way through the checkout steps, and I don't want to lose the position or state.
Is there an example of how to do this?
Here is a video tutorial I found: http://www.youtube.com/watch?v=RokXgBFSvp8
And a non video version illustrating similar thing: http://www.codeproject.com/Articles/315535/How-to-render-MVC-View-on-a-Modal-Popup-Window
You can use jQuery load function...
Here is the modal body
<div class="modal-body">
<div id="login-div"></div>
</div>
here is the jQuery which has the login form id "#loginFor"
$(document).ready(function () {
$('#login-div').load('/Account/Login?ReturnUrl=WhereYouWanttoGo #loginForm');
});
I am having trouble with only firefox. My page shows a tree structure that is loaded via ajax as the user clicks on the nodes they want to expand. The problem I'm having with firefox, and only firefox, is that it will expand the nodes on the first page load. But after that firefox caches it weird and the node header, not children, of the ajax request gets carried over to the new page. This is an issue because the node's header that is carried over contains information that determines if the node has retrieved it's children.
<div class="node topbar"
<input type="hidden" id="foo" name="hasretrievedchildren" value="1"/>
...
</div>
It should be as it is on the first page load.
<div class="node topbar"
<input type="hidden" id="foo" name="hasretrievedchildren" value="0"/>
...
</div>
My Javascript checks for a nonzero value on that input to do the AJAX call.
Is this a bfcache issue?
I'm lead to believe it's not because I added
window.onunload = function();
to the js file and in a script tag and neither fixed it which this article
https://developer.mozilla.org/en-US/docs/Using_Firefox_1.5_caching
says should invalidate the bfcache.
I'm using asp.net MVC 4 and I tried using the MVCdonutcaching to set this page and partial views to not cache. But that didn't work either.
Maybe it's the bfcache, maybe it's not.
I had to face the same problem some time ago. The browser caches were causing some strange behaviour on our forms, and it was affecting the expected results of the page.
Someway to solve itSomething you can do in order to make the program load always the correct value (assuming you are loading it from ) is to initialize the value through your Javascript.
If you use JQuery, you should use:
<script type="text/javascript">
$(document).ready(){
//Assign your items values here
}
<script>
You can also use the onload handler in JS.
Hope this helps.
I was able to solve the problem. Firefox caches all form data even hidden inputs. Since I was using a hidden field to store the flag that enabled the AJAX request it would reload the form data with the flag set. I moved it to a custom attribute and it works exactly as it should.
I have a master layout looking somehow like this
<html>
<head>
...
</head>
<body>
<section data-role="page" data-theme="d">
<section data-role="content">
#RenderBody()
</section>
...
#Scripts.Render("~/bundles/jquery.mobile")
</section>
</body>
</html>
And I have a couple of controllers and templates pushing some code into content section of master layout.
When i click on a link:
Some order
the ajax loader is shown, the url changes, but all I see is the broken markup of the original page. If I inspect the code I will see that there are two page sections in the DOM (which means that the target page is successfully injected but isn't shown).
If I refresh page I will see the target page.
So what's wrong? Why can't I get the fancy JQM page transitions? thank you.
Add the data-ajax='false' on the links who were responsible for redirect you to another page.
JQuery Mobile uses AJAX navigation unless you tell it otherwise. The ASP.NET redirects have no problem to normal requests, but cause issues with AJAX. So my answer in this case is to turn off AJAX. For that, all you have to do is add the attribute data-ajax='false' to the tag.
In my case, an easy solution could be (as changing each Html.ActionLink/Url.Action is time consuming), adding this at the end of the _Layout.cshtml (just before closing of the 'body' tag).
$(document).on('pageinit', function() {
$('a').each(function() {
$(this).attr("data-ajax", "false");
});
});
That would be fine assuming you don't want jQuery mobile to use any Ajax with links too.
You can go ahead and use Ajax in most circumstances and only turn it off selectively where it can cause a problem.
I have a "normal" link in my jqm page like this:
<a href="http://www.mysite.com/mobile/page.php?attribute=value">
And if I click it it won't properly refresh taking into account the attribute value and loading everything that's needed for it dynamically based on the attribute value. I understand that this is due to the fact that jqm tries to do an ajax call like mentioned here:
When you use pageChange an Ajax request will be made to that url and it will be
loaded only the content inside the div with data-role="page". So everything you
have out of this element will be ignored (JS and CSS).
So, I found out in the docs that I should use $.mobile.ajaxEnabled=false; or rel=external on links or target=_blank on the link.
Strange thing though for me is that only when I set the target=_blank property to my links will this truly happen. So, am wondering if someone had this kind of a problem and how did you solve it? The thing is, I would like to refrain myself form using target=_blank as it opens a new tab in my browser (as expected, but this is not nice from users' POV).
jqm version I use is 1.2
This question now at the top of google search results, so figured I'd answer:
Use the data-ajax attribute and set it to false to force reload upon clicking a link:
data-ajax="false"
use it like:
<a href="/" data-ajax="false">
<img id="mainLogo" src="logo.svg" width="215" />
</a>
And then your link will force reload the page!
Linking without Ajax
Links that point to other domains or that have rel="external",
data-ajax="false" or target attributes will not be loaded with Ajax.
Instead, these links will cause a full page refresh with no animated
transition. Both attributes (rel="external" and data-ajax="false")
have the same effect, but a different semantic meaning: rel="external"
should be used when linking to another site or domain, while
data-ajax="false" is useful for simply opting a page within your
domain from being loaded via Ajax. Because of security restrictions,
the framework always opts links to external domains out of the Ajax
behavior.
Parts taken from https://stackoverflow.com/a/22951472
Make function for the onclick event of the link.See the below code example.Hope this helps!
<script type="text/javascript">
function loadPage(url){
document.location.href = url;
}
<script/>
<a href="#" onClick="loadPage('http://www.mysite.com/mobile/page.php?attribute=value');">
I've got an ASPX page rendering a search ascx page which in turn will fill a grid on the main ASPX page.
Aside that, I've also got an ascx page which uploads files, like this:
<form method="post" action="<%= Url.Action("UploadFile") %>" enctype="multipart/form-data">
<fieldset>
<input type="file" name="file" id="file" />
<%=Html.ButtonSubmit("Upload") %>
</fieldset></form>
Here's the problem: imagine I have searched for a single entry to be displayed on the grid. The grid displays this single entry and after wards, I upload a file and press the button "Upload". The whole page gets posted and the content in the grid is lost, now displaying all the results available.
What could I do to prevent this from happening, maintaining the grid state (we're not using ViewState) or otherwise not posting back the whole page but only the ascx with the file upload?
Note: I'm new to MVC.
Your partial view is rendered inside your HTML... this results in a single "static" HTML-file without the option to submit and reload only parts of it.
I can imagine two ways to solve your problem:
1) Place your upload-formular inside an HTML-iFrame... now only this iFrame will reload on submit. Problem: Communication between parent and child-frame to have the uploaded data available, depending on what kind of action you would like to have after uploading.
2) Use jQuery/AJAX to make a javascript-based submit (http://api.jquery.com/jQuery.post/) and refresh your page content dynamically with jQuery/JavaScript. This would be my prefered way but needs some more knowledge about jQuery/JavaScript.
BTW: jQuery is nearly a must-have for any asp.net mvc application ;-)
Welcome to MVC :-)