I'm JQM newbe and I'm using it for our ASP.NET MVC 4 project. Here's a simplified version of code that I'm using:
Controller:
public ActionView ShowModel()
{
return View("ShowModel", new Model());
}
View (ShowModel.cshtml Javascript):
<script>
$('#page').bind('pageinit', function() {
$('#spanSubmit').click(function () { $('form').submit(); });
});
<script>
<form action="#Url.Action("ShowModel")">
<span id="spanSubmit">Submit</span>
</form>
After AJAX query I can't fire form submitting again also no other callbacks that were attached in pageinit callback are working.
Everything starts working when I'm adding data-ajax="false" to form tag. But I really want it to work with AJAX, so can anyone explain me what should I do.
I know that my question was asked several times but I still can't make this page work. Thanks in advance.
I needed to look more into documentation and HTML code after AJAX call. After AJAX completed JQM creates an additional page with same id. So calling $('#page').bind fails because there are two pages now with page id.
Related
So I have a form that has Laravel validation on it. Page reload is working well if there're no problems with the form such as required fields, but if validation fails, the reload page is not working. I am forcing the page to reload if the back button is clicked. Here's the code have.
<script type="text/javascript">
$(window).load(function() {
$('form').get(0).reset();
});
</script>
All fields should be blank after successful submission.
What should be the other things to do to achieve it in laravel blade file?
Have you tried location.reload(); ?
Thanks for the help.
I have done it this way:
<script>
if (!!window.performance && window.performance.navigation.type === 2) {
//navigation type 2 is accessed using back button while,
//0 is accessed using the link or redirected after validation and 1 is refresh page
window.location.reload();
}
</script>
I've made page with sidebar, which can be hidden. I added JQ mobile becouse I need swipe event for handling it on mobile devices, but JQ mobile broke the page completely.
All forms are submitted by AJAX (I found event for forms and links in G Chrome- developers) and all links also tries to load content by AJAX.
Is there any way how to disable it for whole page (some global config, not just with data-ajax=”false” which doesn't work for me at all)?
Could anyone help me fixing that? Thank you :)
After few hours browsing documentation, I've found, what I needed. I just needed to move config code before JQ Mobile script loading.
Now it works;
<script src="files/script/lib/jquery.min.js"></script>
<script type="text/javascript">
$(document).on("mobileinit", function () {
$.extend($.mobile, {autoInitializePage: false});
});
</script>
<script src="files/script/lib/jquery-mobile.min.js"></script>
So I am new to jQuery and I'm trying to set up an html page that has tabs. Each tab should show a different html page as follows:
<div id="tabs">
<div class="tabdiv tabActive">Page1</div>
<div class="tabdiv">Page2</div>
<div class="tabdiv">Page3</div>
<div class="tabdiv">Page4</div>
</div>
<div class="tabscontent" id="ajax-content">
Default text
</div>
So what I want is that when I click on page 1, page1.html will be loaded up in div.tabscontent. This is the jQuery code that I have.
$(document).ready(function() {
$("div#tabs a").click(function() {
alert(this.href);
$("#ajax-content").empty().append("Loading");
$("div#tabs div.tabdiv").removeClass('tabActive');
$(this).children('div.tabdiv').addClass('tabActive');
$.ajax({
url: this.href,
success: function(html) {
$("#ajax-content").empty().append(html);
alert("Success!");},
error: function() {
$("#ajax-content").empty().append("Didn't work");}
});
return false;
});
});
Note: 1) I have the latest jquery attached 2) I the page1.html, page2.html, etc are in the same folder as the above html file. 3) I am working locally and have tried google-chrome, firefox, and opera and they all had tabs that showed "Didn't work". Even when I reference http://www.facebook.com in the url it doesn't work. Please help me.
I put the alert in there to see if the href works and it does work. For example for page1 tab it returns `file:///u/b/user/Desktop/ajaxdemo/Page1.html'
In your case, it does not work because you're trying to access a file from user computer. It poses security risks because if javascript is able to access local files, javascript is able to steal files from client machine.
Even when I reference http://www.facebook.com in the url it doesn't
work
The reason for this is: AJAX requests are subject to the same-origin policy. Facebook is on another domain, that's why it does not work.
One more thing to keep in mind, some browsers think absolute URLs are cross-domain requests even if it's in the same domain, only relative Urls work, so avoid using absolute Urls.
To fix your issues, try deploying on a server and use relative URLs instead of absolute URLs.
i am using script tag in my MVC view and my src for Script tag is "http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js".
the issue iam facing is html buttons are not working/postingback.
If i remove script tag,everything works fine.
whts the actuals problem with my code.?
there could be number of issues, the script tag you are refereing to includes the jquery library from the CDN. One possibility could be that there is some javascript code in the view that is disabling your buttons you can verify by doing the following
1) keep the script tag (jQuery) included in the view
2) in the script section of your view (if you have else create one like)
<script>
$(function(){
$(":button").removeAttr("disabled");
});
</script>
3) so your final code will look like
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
<script>
$(function(){
$(":button").removeAttr("disabled");
});
</script>
check now if it works... if it works then it means that you have some code that is disabling the buttons and upon removal of jquery library js error would have occured that why it seems to work...
I want to load an external page (i.e. google or facebook auth) into a iframe when the user clicks a button. How would you do this using MVC3 and Razor?
This seems like an extremely trivial task, but I can’t seem to figure out what to ask Google so I get something back I can use.
You could use JQuery something like this:
<script type="text/javascript">
$(function () {
$('#myButton').click(function () {
$('#myFrame').attr('src', 'http://www.google.com/');
});
});
</script>
<iframe id="myFrame"></iframe>
<button id="myButton">
Refresh IFrame
</button>
However, you will find that some sites (such as google.com) will prevent you from doing this, as they can specify in their response header whether or not the page can be opened in an IFrame. This is to prevent 'clickjacking' and is built in to most modern browsers.