jQuery Mobile causes Access Denied in jQuery - jquery-mobile

I'm following this tutorial on adding mobile features to an ASP.Net MVC 4 application.
When I launch the application (causing the Login page to be loaded), I get Access denied at the following point in jQuery 1.7.2 (also reproduced with 1.7.1)
if ( elem.parentNode ) { // Access denied here, Line 6081
elem.parentNode.removeChild( elem );
}
Walking down the call stack, I see the following in jquery.mobile-1.1.0.js (there are a few other methods on the call stack as well)
// Called from .initializePage:
if ( !$pages.length ) {
$pages = $( "body" ).wrapInner( "<div data-" + $.mobile.ns + "role='page'></div>" ).children( 0 ); // Called from here, Line 7475
}
// First method in jquery.mobile:
if( $.mobile.autoInitializePage ){
$.mobile.initializePage(); // Called from here, Line 7541
}
If I comment out jquery.mobile from my application, it works as it did previously:
// _Layout.cshtml:
<script src="#Url.Content("~/Scripts/jquery-1.7.2.js")" type="text/javascript"></script>
#*<script src="#Url.Content("~/Scripts/jquery.mobile-1.1.0.js")" type="text/javascript"></script>*#
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.19.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
All JavaScript files are being served via the built-in VS2010 web server from the main project's domain.
UPDATE
Upon further inspection, I realize this is what jQuery Mobile is doing when the error happens:
// find and enhance the pages in the dom and transition to the first page.
// if no pages are found, create one with body's inner html
$pages = $( "body" ).wrapInner( "<div data-" + $.mobile.ns + "role='page'></div>" ).children( 0 );
What's happening to cause jquery.mobile to fail?

It turns out that there was a reference to a third party script on the page (Comodo SSL validation) that certainly did not need to be on a mobile version of the page. jQuery Mobile tried to manipulate the related DOM, causing the error.

Thank you for pointing me in the right direction. I've been searching for days why the popup method (JQuery Mobile) didn't work on an .aspx page. Visual Studio automatically initializes the page with a scriptmanager.
The solution was to comment out the following line in the Asp:Scriptmanager tag, since it is conflicting with the JQuery reference in the head of the page:
<asp:ScriptReference Name="jquery" />

Related

Intel XDK jquery mobile go back to previous sub page

I am using Intel XDK with jquery mobile and I am trying to override the hardware back button because it is not working. I am not sure how much of my code I can post. I do have a complicated app though. I have three html files. With an index.html with links (hrefs) to page one and page two. In index.html I have this code
script src="intelxdk.js"></script>
<script src="cordova.js"></script>
<script src="xhr.js"></script>
<script src="js/jquery.min.js"></script> <!-- jQuery v2.1.1 -->
<script src="jqm/jquery.mobile-min.js"></script> <!-- jQuery Mobile 1.4.2 -->
<script type="text/javascript">
/* Intel native bridge is available */
var onBackKeyDown = function() {
$.mobile.goBack();
}
var onDeviceReady = function() {
intel.xdk.device.hideSplashScreen();
intel.xdk.display.useViewport;
intel.xdk.device.addVirtualPage();
document.addEventListener("intel.xdk.device.hardware.back", onBackKeyDown, false);
};
document.addEventListener("intel.xdk.device.ready",onDeviceReady,false);
</script>
On page one and page two currently I have about ten subpages each (more to come) and I definitely want to back able to go back to the previous subpage. I have done kind of a lot of work with jquery mobile so far and I hope I don't have to switch to App Framework just to get the back button to work. Thanks for any help, let me know if you need any more html code or JS.

errors when using jQuery Booklet plugin with multiple jQuery libraries

I'm trying to put the jQuery Booklet plugin on a site that uses the 1.3.2 library - I can't remove this reference or upgrade. I have successfully used noConflict in the past with other plugins that require a newer version of jQuery on this site.
When I test locally and include the 1.3.2 reference, Firebug console tells me:
but the book still loads correctly and functions. Not sure what that error means. When I put the code onto my development site, the images in the book appear one stacked on top of the other, navigation buttons are missing, and I see an error in the Firebug console that says
TypeError: p2.offset(...) is undefined
[Break On This Error]
p2.offset().left + pWidth - hoverFullWidth,
In IE it tells me:
SCRIPT5007: Unable to get property 'left' of undefined or null reference
jquery.booklet.latest.js, line 1205 character 2
This is the code in question, part of jquery.booklet.latest.js
p3.draggable({
axis: "x",
containment: [
target.offset().left,
0,
p2.offset().left + pWidth - hoverFullWidth,
pHeight
],
Something isn't loading correctly. The scripts look like this in my page in my development environment:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js" type="text/javascript"></script>
<script src="/wcsstore/CVWEB/images/home/js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="/wcsstore/CVWEB/images/home/js/jquery.booklet.latest.js" type="text/javascript"></script>
<link href="/opencms/opencms/CVWEB/css/jquery.booklet.latest.css" type="text/css" rel="stylesheet" media="screen, projection, tv" />
<script type="text/javascript">
var $j = jQuery.noConflict(true);
$j(document).ready(function(){
$j(function () {
$j("#mybook").booklet();
});
});
</script>
Is there something extra I need to do with noConflict since there are so many other scripts? Do I need to modify the jquery.booklet.latest.js file to include noConflict somehow? I tried declaring the variable and replacing $ like above but that didn't do anything.
I looked here and here to try to solve the easing error, but I am already including all the correct scripts.
I tried the solution here of using jQuery instead of $ with no luck.
I'm still pretty green when it comes to jQuery so any help is appreciated. Thank you.
I am about to move on to a different option but wanted to post here so I can learn what the problem is.
It must be your incomplete src location.
It should be something like this, as if running from localhost:
<script src="http://localhost/wcsstore/CVWEB/images/home/js/jquery.easing.1.3.js" type="text/javascript"></script>

ajax links getting mis-handled

I have an asp.net mvc 4 with jquery-mobile app.
On one page (url: /StatementBatch ), I have a list of batches, which are simply links to the batch details page (url: /StetementBatch/Details/4 ).
<li>
<a href="/StatementBatch/Details/4">
<h3>January 2012</h3>
<div style="float: right; width: 30%;"><strong>Issued : </strong>1/10/2012 12:00:00 AM</div>
<div style="float: right; width: 30%;">Completed</div>
<p class="ui-li-aside"><strong>1277</strong></p>
</a>
</li>
The oddity is that once the link is clicked, and the details page renders, the browsers current url is now http://localhost:49457/StatementBatch#/StatementBatch/Details/4
What do I need to change in the app to get this behavior fixed?
My guess is that its some sort of ajax loading related problem, but my shared _Layout.cshtml file contains $.mobile.ajaxEnabled = false;, which I expected would kill all ajax loading, but I've obviously mis-interpreted that one.
Thanks!
I suspect this may be the answer
jQuery Mobile ajaxEnabled doesn't work?
Will test and see if I can make it work
moving the mobileinit binding to after jquery, but before jquery-mobile does the trick. This appears to be a bug in MVC4's (new) mobile web application template, which simply bundles all the scripts together
This fails....
<link href="#System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Content/css")" rel="stylesheet" type="text/css" />
<script src="#System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Scripts/js")"></script>
<script>
$(document).bind("mobileinit", function() {
// As of Beta 2, jQuery Mobile's Ajax navigation does not work in all cases (e.g.,
// when navigating from a mobile to a non-mobile page, or when clicking "back"
// after a form post), hence disabling it.
$.mobile.ajaxEnabled = false;
});
</script>
But this works....
<link href="#System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Content/css")" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery-1.7.2.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.8.11.js" type="text/javascript"></script>
<script>
$(document).bind("mobileinit", function() {
// As of Beta 2, jQuery Mobile's Ajax navigation does not work in all cases (e.g.,
// when navigating from a mobile to a non-mobile page, or when clicking "back"
// after a form post), hence disabling it.
$.mobile.ajaxEnabled = false;
});
</script>
<script src="../../Scripts/jquery.mobile-1.1.0.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.validate.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.validate.unobtrusive.js" type="text/javascript"></script>
<script src="../../Scripts/modernizr-2.5.3.js" type="text/javascript"></script>
Thanks...
That is the default behaviour if you use jQuery mobile. jQuery mobile will enable all your links to be ajaxified. That means it will load content of the linked page via ajax and update the url. If you want to disable a link to be ajaxified, you can add rel attribute with external as value
This will open without ajax
This will do a normal page opening so your urls will updated based on the new page.
Alternatively you can use data-ajax="false" as well
This link also will open without ajax
this link has more info about it http://jquerymobile.com/test/docs/pages/page-links.html
That is strange. If $.mobile.ajaxEnabled = false; is set then it should not generate ajax links. Please check whether your view is using some other master page which has got this setting enabled. Look for "_ViewStart.cshtml" under the corresponding view directory to see which master it is linked to.
In order to disable Ajax behavior for a particular hyperlink use data-ajax="false" attribute. Like below
<a href="/StatementBatch/Details/4" data-ajax="false">
<h3>January 2012</h3>
<div style="float: right; width: 30%;"><strong>Issued : </strong>1/10/2012 12:00:00 AM</div>
<div style="float: right; width: 30%;">Completed</div>
<p class="ui-li-aside"><strong>1277</strong></p>
</a>

jquery mobile + phonegap onclick

I've been trying to figure this out but still stuck.
so I'm using PhoneGap for iOS and JQueryMobile.
I'm trying to show alert when a button is clicked.
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<!-- If your application is targeting iOS BEFORE 4.0 you MUST put json2.js from http://www.JSON.org/json2.js into your www directory and include it here -->
<script type="text/javascript" charset="utf-8" src="cordova-1.6.1.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js">
</script>
and I have
this
Login
$(document).ready("#button").click(function() {
alert('button clicked');
});
when I tried to launch this in chrome, this works fine.
however, when I used iphone simulator, it doesnt show anything.
For a normal web application you would use dom ready i.e.
$(function(){ // <-- this is a shortcut for $(document).ready(function(){ ... });
$('#button').click(function(){
alert('button clicked');
});
});
However in a JQM application it is much more useful to bind to 'pageinit' i.e.
$(document).on('pageinit','[data-role=page]',function(){
$('#button').click(function(){
alert('button clicked');
});
});
Binding to pageinit works better because JQM inserts new pages into the same dom as the first page. Because of this all of your code in dom ready doesn't get called again. So that first bit of code i put above will only work for that first page in your JQM application. The second will work no matter what page your button is in. Let me know if I can clarify this further for you.

Microsoft JScript runtime error: Object doesn't support property or method 'dialog' in jQuery

I have a problem of implementing the jQuery Dialog as Modal Form.
$(document).ready(function(){
$("#add-newItem")
.button()
.click(function () {
alert('a');
debugger;
$("#dialog-form").dialog("open");
});
});
Here execution is hitting the method and displays "Alert" as per the code. After the it comes to debugger and when I use "F10" it tries to execute the "$("#dialog-form").dialog("open");
" and getting the error below...
Microsoft JScript runtime error: Object doesn't support property or method 'dialog'
I have properly given refence to the jQuery as below
<script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.8.14.custom.min.js" type="text/javascript"></script>
<link href="../../Content/ui-lightness/jquery-ui-1.8.14.custom.css" rel="stylesheet" type="text/css" />
What could be the problem. If check using F12 of IE9 of my displayed page, I can list out the Dialog method from the script libray. but these are not vailable for the "$("#dialog-form")
regards,
Vinu
Do you have the <div id="dialog-form" /> ? Make sure the div element is present.

Resources