I am working on converting my existing MVC website to be Mobile friendly. I am having issues when clicked on links, it is showing empty page. If I remove following links in _Layout.Mobile.cshtml
#System.Web.Optimization.Scripts.Render("~/bundles/jquery")
#System.Web.Optimization.Scripts.Render("~/bundles/jquerymobile")
Then it works fine but I loose all the styling and the text on webpage displays very tiny.
I am using Opera Mobile emulator for testing.
The links are local and are like "localhost:62234/Articles/10".
Just to give some more background I am converting my Framework 4.5 MVC website to be Mobile friendly. I have added all the libraries needed and main page works fine. I am having issues when links are pressed on main page. Initially clicking on links was doing nothing, then I did some research and discovered that I have to add tag rel="external" to the links to make them work. Now links work but displays empty page. Any help is greatly appreciated.
Here is solution I found which solved my problem finally.
Here is how my code looks now..in _Layout.Mobile.cshtml
#System.Web.Optimization.Scripts.Render("~/bundles/jquery")
#System.Web.Optimization.Scripts.Render("~/bundles/jquerymobile")
<script type=”text/javascript” src=”#Url.Content("~/Scripts/jquery-2.0.2.min.js")"></script>
<script type=”text/javascript”>
$(document).bind("mobileinit", function () {
$.mobile.ajaxEnabled = false;
});
</script>
<script type=”text/javascript” src=”#Url.Content("~/Scripts/jquery.mobile-1.3.1.min.js")"></script>
I found some more information with this problem Here.
Hope this helps others
Related
I developed a project in jquery mobile which have fixed header. its working fine in laptop browser but when I run in mobile browser then after browse some pages my mobile getting stuck because jquery mobile keep cache of previous page. so to remove previous pages I added below code
$(document).on( "pageshow", function( event, data ){
$('div[data-role=page]:hidden').remove();
});
It also worked fine but now when i clicked on a link first time it remove previous page data as well padding-top from ui-page which was added for fixed header. now if I goes to next page and again comes on this page its work fine.
Please suggest, Thanks!!!
We have a mobile version of our Joomla site using mobile Joomla and everything was working fine until we introduced the jquery UI for the autocompletion functionality into the equation. We now get the following error "Uncaught TypeError: Object 0 has no method 'match'" which after googling seems to indicate it being a conflict between Mobile Joomla and jQuery UI.
We can prove this if we remove the UI it runs fine again.
Any help would really be appreciated.
Thanks
Richard
Use $.noConflict(); and inside (document).ready(function() put $ inside (function()
Example:
$.noConflict();
jQuery(document).ready(function($){
$("button").click(function(){
$("p").text("jQuery is still working!");
});
});
We encounter the following problems with Jquery Mobile.
Our site is divided in a mobile and a fixed desktop site.
Both use the same database and php code. Only the templates are different.
On our mobile site we use Jquery mobile for a better user experience and that works fine. However we integrated a button "goto desktop".
This link should bring us back to our "normal" desktop site.
But there is the problem. In the desktop-site, Jquery mobile is still activated and it replaces drop down fields, input fields and make a complete mess of the desktop site.
We tried everything to disable JQM but nothing seems to work.
How we can switch from our mobile site template to the desktop site template and disable JQM completely when we are on the desktop template?
Thanks a lot for help!
There are few available solutions but only one will really do.
Working example: http://jsfiddle.net/Gajotres/NvEcW/
Few things are needed, first we need to set this:
<script>
$(document).on('mobileinit', function () {
$.mobile.ignoreContentEnabled = true;
});
</script>
it will give us an ability to programatically turn on/off content enhancement. If you already don't know this mobileinit event must be initialized before jQuery Mobile initialization but after the jQuery initialization. This must always be a part of a page.
There's one last step. When we want to move from mobile to desktop page we need to reload page and use this javascript:
$(document).on('pagebeforecreate', '#index', function(){
$(this).attr('data-enhance','false');
});
Pagebeforecreate event is important because at this point content is still not enhanced and attribute data-enhance = false will prevent any further page enhancement. If you want to turn it on again just set attribute value to true.
If you want more solutions then take a look at my other answer, search for the topic Methods of markup enhancement prevention : jQuery Mobile: Markup Enhancement of dynamically added content.
So I have recently started using jQuery, jQueryUi and ASP.NET MVC. And I have been trying to use jQueryUi widgets like tabs, menu etc. in MVC pages.
Now, these widgets work perfectly fine when used without a master page. But when there is a master page involved in the picture, it seems to give the error
object doesn't support property or method 'menu'
or
object doesn't support property or method 'tabs'
etc.
Now, I have googled this problem and it seems that this is a common problem when using jQuery with master page.
So if anyone can tell me what is the proper way to make these things work with master pages please let me know.
And I have not posted a code because this always happens!! I have tried different code, different pages and I have always copied the code straight from jQueryUi website. So the code must be right. And it does work perfectly well without master pages! So I am looking for a general solution.. not just solution for a particular code.
Thank you!
I figured it out.. apparently the order in which the tags are written matters...
for me.. this is worked..
<script src="../../Scripts/jquery-1.8.3.js"></script>
<script src="../../Scripts/jquery-ui-1.9.2.custom.js"></script>
<link href="../../Content/themes/base/jquery-ui.css" rel="stylesheet" />
On the zepto project website i see no version of IE as being supported, not even 9.
I am considering using zepto in a webapp (not mobile) but i want to support IE 9+
Is that possible? What features / methods of zepto do not work on IE9?
Out of curiosity I just loaded up the following page and tested in current versions of Chrome, Firefox, Safari and IE9. In all but IE9 I was greeted with the alert() message. IE9 gave me no alert and contained two errors in the console. Here's the code I used, with the Zepto library in the same folder.
<!doctype html>
<h1>Zepto Browser Support Test</h1>
<script src="zepto.min.js"></script>
<script>
$(function () {
alert('Zepto Ready Successful!');
});
</script>
So, unfortunately for your web app, if you are trying to support IE9, it doesn't look like Zepto is going to work for you.
Although, what the good folks at Zepto encourage if you are trying to reach IE users is to fallback to jQuery. They even give you the code to do so.
If you need to support Internet Explorer, you can fall back on jQuery. Note that conditional comments are no longer supported starting on IE 10, so we recommend the following document.write approach:
<script>
document.write('<script src=' +
('__proto__' in {} ? 'zepto' : 'jquery') +
'.js><\/script>')
</script>
I found this in the Zepto docs near the top of the page.
Hope that helps and good luck!