I have disable ajax in jquery mobile mobileinit event.
but when i use $.mobile.changePage to load page, It still use ajax to load pages.
......
<script src="/Templates/js/jquery-1.8.0.js"></script>
<script>
$(document).on("mobileinit", function () {
$.mobile.ajaxEnabled = false;
});
</script>
<script src="/Templates/js/jquery.mobile-1.2.0.js"></script>
......
mobileinit works, just when i use $.mobile.changePage, it use ajax. I mean normal link isn't using ajax now, just when I call this function, ajax still be used
Had the same problem with
$.mobile.changePage( url );
with $.mobile.ajaxEnabled = false.
Had to use this instead.
window.location = url;
Related
In my _layout.cshtml I have a partial view that includes js trough requirejs.
<script data-main="/Scripts/Search" src="/Scripts/require.js"></script>
In this js file I use the following to populate a knockout vm.
$.getJSON("/Search/Index", function (data) {
self.availableCities(data.AvailableCities);
});
This works well on all pages except when my main view also has an ajax request.
<script data-main="/Scripts/Index" src="/Scripts/require.js"></script>
$.getJSON("/Property/All", function (data) {
self.properties(data);
});
Here is my require config, it is the same for the partial and the main view.
require.config({
baseUrl: "/Scripts",
paths: {
"text": "text",
"knockout": "knockout-3.3.0",
"jquery": "jquery-2.1.3.min"
},
shim: {
"jquery": { exports: "$" }
}
});
When the main page has an ajax request only this request is fired, I am not sure how to fix this. It looks like a configuration issue, tested it in both Firefox an Chrome so it does not appear to be browser specific.
It turns out having multiple <script data-main="/Scripts/Search" src="/Scripts/require.js"></script> tags in one page isn't such a bright idea.
I figured it out after some more research,
this question has a good solution if you run into a similar problem.
Basically you need one 'main.js' file and add the other page components via the require logic.
Edit:
Doing this may result in the following knockout error:
Error: You cannot apply bindings multiple times to the same element.
To fix this I have used the following binding handler:
ko.bindingHandlers.stopBinding = {
init: function () {
return { controlsDescendantBindings: true };
}
};
To enable this binding handler on containerless elements use the following:
ko.virtualElements.allowedBindings.stopBinding = true;
Apply the following binding around the partial view. To prevent the main-page from binding to the elements in the partial.
<!-- ko stopBinding: true-->
<!-- /ko -->
Finally use ko.applyBinings on the partialview like this:
ko.applyBindings(new partialViewModel(), document.getElementById("your-partial"));
I am trying to clear the session and the close the browser tab on logout link click. Please help me to do this.
Thanks in advance
You're trying to achieve two different things, one of which is a server-side concern, the other a client-side concern.
You could try splitting up these concerns, for example:
A: Using some Post/Redirect/Get laced with tab-closing javascript
Post to Logout controller method
Redirect to /LogoutSuccess
Put some javascript that closes the browser tab on body load, in the LogoutSuccess view.
B: A more client-side approach
Perform (in your javascript) a http GET to /Logout
Upon 200 OK response, execute some javascript that closes the browser tab.
Session.Abandon();
or
Session.Clean();
or
Session[".."]=null;
close windows you can use js
windows.close();
in some browser,it will pop a confirm
You can send an ajax request to to an action method which clears the session variables and in the call back, you can close the window.
<a id=logoutLink">Logout</a>
<script type="text/javascript">
$(function(){
$("#logoutLink").click(function(e){
e.preventDefault();
$.post("#Url.Action("Logout","User")",function(res){
if(res.status==="done")
{
//close the window now.
window.close();
}
});
});
});
</script>
Now in your UserController, Add the Logout action method
public class UserController : Controller
{
[HttpPost]
public ActionResult Logout()
{
Session.Abandon();
return Json(new { status="done"});
}
}
Reference:
MVC for clossing browser tab when logout
This code is from MSDN. I have added the async : false to the jQuery call as that is the key to ensure that the call flushes the Server Side session and then the window closes.
<script type="text/javascript">
$(document).ready(function () {
window.addEventListener('beforeunload',recordeCloseTime);
});
function recordeCloseTime() {
$.ajax({
type: "POST",
async: false,
url: "ServiceToClearSession.asmx/RecordCloseTime",
});
}
</script>
I'm having trouble with a dialog on Jquery Mobile. On the index page I would like to have a dialog to the terms & conditions. The dialog works, I click accept and it goes away. Then when moving to another page it pops up again, and repeatedly pop's up even after clicking accept.
<script>
$(document).bind('pageinit', function (){
$.mobile.changePage("terms.html", "pop", false, false);
});
</script>
pageinit is triggered when page a page is initialized. Because you used $(document).bind('pageinit', function (){}); this means that you are binding to all pageinit's instead of just one. Use
$("#page1").bind('pageinit', function (){
$.mobile.changePage("terms.html", "pop", false, false);
});
Where page1 is the id of your first page.
Or
$(document).bind('pageinit', function (){
if(!termsAccepted) {
$.mobile.changePage("terms.html", "pop", false, false);
}
});
The second is better if you have multiple entry points into your app (like a mobile web page) as opposed to a single entry point (like a mobile app, always starts at index.html)
Edit:
This might be even better
$(document).one('pageinit', function () {
$.mobile.changePage("terms.html", "pop", false, false);
});
I want to refresh a page without using data-ajax="false" in anchor tag and i want to show the loading spinner while linking the pages in jquerymobile.pls help me.
reloadPage (boolean, default: false)
Forces a reload of a page, even if it is already in the DOM of the
page container. Used only when the 'to' argument of changePage() is a
URL.
Source: http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/methods.html
So basically you can use $.mobile.changePage() to change pages and you can pass it the preloadPage : true option when you want to reload a URL.
Here is a quick example of how to use $.mobile.changePage() for links that have the reload class:
$(document).delegate('a.reload', 'click', function () {
$.mobile.changePage('myPage.html', { reloadPage : true });
return false;
});
The default loader in jquery mobile appears while linking to pages, by adding the following code:
$("a").click(function() {
$.mobile.showPageLoadingMsg();
//Other things you want to do
});
I am developing an asp.net mvc application and have ajax calls on my page. Here is a form which I load by ajax call to page :
The form is located in a partial view
<div id="CreateCultureArea">
<%
using (Ajax.BeginForm("CreateCulture", "Admin", new AjaxOptions() { OnSuccess = "handleCreateCulture" }))
{ %>
.....
<% } %>
</div>
Code Updated
The following script is located in a view :
Create Culture
<script type="text/javascript">
$('.CreateCulture').live('click', function (e) {
e.preventDefault();
var idval = this.id;
$.ajax({
url: "/Admin/CreateCulture",
dataType: 'html',
data: { id: idval },
success: function (mydata) {
$("#CultureContentArea").empty();
$("#CultureContentArea").empty().hide().append(mydata).fadeIn(2000);
$("form").removeData("validator");
$("form").removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse("form");
},
type: "GET"
});
return false;
})
</script>
When users click on a link with CreateCulture class, the form is loaded to page. But as I saw the requests in firebug, it calls the action multiple times. I read similar posts like mine on stackoverflow.com and most of them suggested removing repetitive "jquery.unobtrusive-ajax.min.js" calss in page, but as I saw the output page I only see on link to the "jquery.unobtrusive-ajax.min.js" script.
The problem is that #Ajax.BeginForm emits a form that has the attribute data-ajax="true". In the unobtrusive AJAX script (see the non-minified version and look for calls to asyncRequest). So by calling $.ajax yourself, you are repeating the work of #Ajax.BeginForm. Just take out your call to $.ajax and you'll see your action get called only once.
If you need to take action after the AJAX call completes, set the OnComplete property of AjaxOptions in your call to Ajax.BeginForm.
Make sure that you have not multiple .js refrence in page
<script src='/Scripts/jquery.unobtrusive-ajax.min.js'></script>
<script src="/Scripts/jquery.validate.min.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js"></script>
The problem was that I put some scripts in partial view and each time it duplicated by loading this. So I put the scripts all in on page and problem solved.