I'm building a responsive website using a mobile-first approach (meaning my default styles are for the mobile view, which are extended via css media queries to optimize the layout for desktop). I've tested my site on my phone (and by shrinking my desktop browser's width to less than 700px) and the mobile view kicks in beautifully.
I'm using the following line of HTML to ensure that on mobile devices, the width of the viewport is equal to the device width like so:<meta name="viewport" content="width=device-width, initial-scale=1" />
This website needs Infragistcs controls for some forms and so I added Ignite UI 2013.1 to the solution as I normally would. I know I've hooked the Ignite controls up properly because I've done it a million times and have implemented and tested the newly added Ignite Controls. They're fine.
This one of the strangest things I've ever come across; I loaded up the site on my phone again since implementing the Ignite controls and the site no longer displays the mobile-optimized view (as if the media queries are being ignored or if the viewport's width did NOT equal the device width).
Here are the steps I took to trouble shoot the issue:
Finally, I decided (while writing this post actually) to remove the initial-scale setting from my meta tag so it just read:<meta name="viewport" content="width=device-width"/>
The issue finally went away!!! So, I restored everything related to Infragistics and now I'm back up and running!
This post was originally supposed to be a "How do I...." post, but as I mentioned in the solution section, I figured out the problem while writing this. So, this post is now more of a reference for others. That said, I'll be adding this information along side my many other Infragistics-related posts on my company's dev blog (http://formativeinnovations.wordpress.com)
However, I still have a number of questions for Infragistics support staff:
Thank you,
Andrew
Ignore my Solution section, the problem is still there. I must have been checking against and old version or something when I thought I figured out.
Please help!
Hello abromfield ,
Thank you for posting in our forum.
I’m currently looking into your issue and I’ll let you know what I find out by tomorrow.
Best Regards,
Maya Kirova
Developer Support Engineer II
Infragistics, Inc.
http://ko.infragistics.com/support
Thank you Maya,
Any help would be greatly appreciated as my deadline for this project is this week! If you need examples or more information from me, please do not hesitate to ask.
Thanks again,
Adrian
Hello Andrew,
I’m happy to hear you’ve managed to resolve your issue and that you found my posts helpful in troubleshooting it.
Also I’d like to thank you for your feedback. We appreciate that you took the time to convey your comments and I assure you that we consider our customer community comments very important to steering improvement at Infragistics. I’ve made sure this was brought to our product management’s attention.
Infragistics is always aiming to improve its products and offer the best support for customers using them.
Please don’t hesitate to let me know if there’s anything else I can assist you with .Thank you for using our controls.
Good evening Maya,
I finally figured it out. It is the loader as I expected. I ran with the idea of scrapping the loader and manually referencing each file as needed. Here my final script/link block (I also had a date picker so that's why there are now references to igEditors):
<link type="text/css" href="/Styles/Infragistics/themes/metro/infragistics.theme.css" rel="stylesheet" /> <link type="text/css" href="/Styles/Infragistics/structure/modules/infragistics.ui.shared.css" rel="stylesheet" /> <link type="text/css" href="/Styles/Infragistics/structure/modules/infragistics.ui.combo.css" rel="stylesheet" /> <link type="text/css" href="/Styles/Infragistics/structure/modules/infragistics.ui.editors.css" rel="stylesheet" /> <script type="text/javascript" src="/Scripts/Infragistics/modules/infragistics.ui.scroll.js"></script> <script type="text/javascript" src="/Scripts/Infragistics/modules/infragistics.ui.combo.js"></script> <script type="text/javascript" src="/Scripts/Infragistics/modules/infragistics.ui.editors.js"></script> <script type="text/javascript" src="/Scripts/Infragistics/modules/infragistics.util.js"></script> <script type="text/javascript" src="/Scripts/Infragistics/infragistics.core.js"></script>
At this point, I no longer have the same confidence I once had in the quality of the Infragistics controls. I've purchased a subscription the past 3-4 years and each version fails to fix issues from the last, if not introduce new ones. It does not help that the documentation has been inaccurate at times too. I understand the gripes and technical issues related to software development, but due to all these issues, I've probably spent more time trying to troubleshoot the controls than I've gained by implementing said controls over hand-rolled solutions. If you check my forum post history or visit my development blog, you'll see proof of this.
That said, I do want to sincerely thank you for your time. I appreciate your efforts very very much. You are by far the most helpful support staff member I have ever encountered on these forums. Had you not suggested utilizing the Network Traffic tool, who knows how long it would have taken me to stumble upon my final solution. While your help has been somewhat of a boon to my confidence in Infragistics, I'm a week past my deadline and the bugs and bloat (which ironically, the Network Traffic tool made me cognizant of) are no longer acceptable.
Thank you once again Maya and take care,
Hi Maya,
I posted a response yesterday but has yet to be approved by a moderator. It had several links to screenshots I had taken during my testing so you can see for yourself some of the results I've been getting.
Have you had a chance to see it yet?
Hello Maya,
Thank you kindly again for your informative post.
I've followed your steps and can confirm that all Infragistics js and css files have indeed loaded successfully.
As for the jqmData error, I do believe it is coming from one of the Infragistics scripts partly because I'm not using jquery mobile, but mostly because I did a "Find" in "Current Project" for "jqmData" and it only found 3 references:
However, I just checked the console as per your suggestion and it points me to a totally different direction than a broken reference to jqmData. Despite the Error alert saying that there was a syntax error related to jqmData, Firebug reports the error as "TypeError: $(...).igCombo is not a function" and IE's Developer Tools reports the error as "Object doesn't support property or method 'igCombo'". I'd say it's save to say the jqmData error is non existent and that the culprit is a failure of some kind happening in the underlying IG framework. This would make sense since I only get the error when I add a "igCombo" to the "resources" property of $.ig.loader.
I was about to post this reply when I noticed something that can hopefully shed light on the issue!
Here's what I did:
By comparing the 3 different network traffic screenshots, I spotted one crucial difference. The only time it worked, (was in IE, when the page is already cached), the metro theme's UI images were loaded. This, compounded with the error, leads me to believe the issue is with some point of the loading process.
Thoughts? Should I just try directly referencing the .core.js ,.lob.js, ui.combo.css, ui.shared.css, and /metro/infragistics.theme.css files and delete the $.ig.loader()? That would effectively bypass all the dynamic loading stuff and should just make it all work right?
Most probably the loader attempted to load the shared and combo files but couldn’t find them in the specified directory.
For example it will look for the infragistics.ui.shared.js file in the modules subdirectory of the path you specified. So in your case it will look in:
/Scripts/Infragistics/modules/infragistics.ui.shared.js
Same for the igcombo script : infragistics.ui.combo.js
If it can’t load the scripts it will throw an error when it reaches the code generated by the MVC wrapper for the combo.
You can check whether all files were loaded by checking your browser’s Network. For example here are the steps for IE.
1) Load the page on Ie
2) Hit f12 to open the development tools
3) Open the Network tab and hit the start capturing button
4) Refresh the page
It will show all request for files for that page. Make sure all request to js files were successful.
You can also open the Console tab and check for any js error that have been thrown during the execution of the page.
The infragistics.core.js and infragistics.lob.js files are combined script files. They contain all scripts for all controls (expect for the charts and maps which have a separate combined script file: infragistics.dv.js). In general you can use them instead of the loader however in that case you need to make sure the css classes are also manually referenced and loaded on the page.
As for the error. The jqmData method is in the jQuery mobile API:
http://api.jquerymobile.com/jqmData/
If you’re using it somewhere in your code make sure you have a reference to the jQuery mobile script.
Otherwise that method would not be defined .