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://es.infragistics.com/support
Sorry for my post being hard to read; I wrote much of it in bullet list form, but the HTML Editor seems to have stripped them out.
In general you need the loader script:
<script type="text/javascript" src="/Scripts/Infragistics/infragistics.loader.js"></script>
To be loaded if you’re going to load the other scripts on the page using $.ig.loader.
Then also if you’re defining the loaded in js :
<script type="text/javascript">$.ig.loader({ scriptPath: "/Scripts/Infragistics/", cssPath: "/Styles/Infragistics/", theme: "metro" });</script>
You will need to define the resources it needs to load.
For example if you have an igGrid on the page you should have:
<script type="text/javascript">
$.ig.loader({ scriptPath: "/Scripts/Infragistics/", cssPath: "/Styles/Infragistics/", theme: "metro", resources:”igGrid.*” });
</script>
This will tell the loader to load all scripts for the igGrid( for its features like updating,sorting and so on).
If you have a grid and an igTree for example you should also have “igTree” in the resources listed as well:
$.ig.loader({ scriptPath: "/Scripts/Infragistics/", cssPath: "/Styles/Infragistics/", theme: "metro", resources:”igGrid.*,igTree” });
In general if you’re using the MVC wrapper to define the loader you’d still need to have the loader script loaded. However if all the IG controls are on the same view and are also defined via the wrapper you don’t need to specify the resources . For example in the Home view in the sample I’ve attached the loader is defined like this:
@(Html.Infragistics().Loader()
.ScriptPath("http://cdn-na.infragistics.com/jquery/20131/latest/js")
.CssPath("http://cdn-na.infragistics.com/jquery/20131/latest/css/")
.Render()
)
However since the grid is also defined in the same view via the MVC wrapper there’s no need to add it in the resources.
However if for example the Loader is on another View. For example on the Layout page. Then you’d have to add “igGrid” in the Resources for the Loader.
I hope this will help you in locating the issue.
You can also refer to the documentation on the loader:
http://help.infragistics.com/NetAdvantage/jQuery/2013.1/CLR4.0?page=Using_Infragistics_Loader.html
Let me know if specifying the resources for the loader helps. I’m looking forward to your reply.
Hello Maya,
Thank you for the well written guide.
I've followed you're instructions but further problems present themselves. On quick side note, my script references are in a Layout page, so you're right, I have to reference the appropriate resources. I did however have "resources: 'igShared') in my $.ig.Loader() properties from the get go (I removed it during the wave of testing for my postings on this forum), so just keep in mind that it was always there. (Another quick side note, i removed it and it makes no difference if "igShared" is there or not)
Just to refresh your memory, my setup prior to your trying your latest instructions looked like this (I omitted the commented lines for simplicity):<script type="text/javascript" src="/Scripts/Infragistics/infragistics.core.js"></script> <script type="text/javascript" src="/Scripts/Infragistics/infragistics.lob.js"></script> <script type="text/javascript" src="/Scripts/Infragistics/infragistics.loader.js"></script> <script type="text/javascript">$.ig.loader({ scriptPath: "/Scripts/Infragistics/", cssPath: "/Styles/Infragistics/", theme: "metro", resources: "igShared"});</script>
The first thing I tried, was removing all but the last two scripts (the reference to loader.js, and the line that initializes the loader's constructor) and adding "igCombo" to the resources property. Based on your instructions (and the documentation), this is all I need for it to work.
Here's what my new simplified code looks like:
<script type="text/javascript" src="/Scripts/Infragistics/infragistics.loader.js"></script> <script type="text/javascript">$.ig.loader({ scriptPath: "/Scripts/Infragistics/", cssPath: "/Styles/Infragistics/", theme: "metro", resources: "igShared, igCombo"});</script>
This resulted in zero infragistics controls being rendered at all. It was if I never added the Infragistics controls to the page. While this didnt break the entire page like it before (no controls were rendered, not even standard <inputs>), it still goes to show that the loader is not working properly.
I tried this setup with both the Javascript $.ig.loader, and with the MVC wrapper, with no difference in results.
Next, I reverted back to my original setup (listed at the top of this post), and simply added "igCombo" to the resources property. This worked, but the styling still wasnt 100% right (eg. the NullText rendered in the combo was not vertically centered like it normally would be), and further more it produced an error on page load. I just happen to have an Error(data) function with an alert("Error("+data+")"); in it defined on the particular page I was testing it on. It appears and some backend Infragistics Script is calling it.
The error is: "Error(Syntax error, unrecognized expression: jqmData)"
Now, while I can rename my method (would rather not though) or comment out the alert, the fact of the matter is that an error is occurring, and it's causing the styles to still not work properly (unless the styling issue is related to the $.ig.loader not properly loading the references, in which case we're still no better off).
Just for reference, here is the setup for the this attempt:
<script type="text/javascript" src="/Scripts/Infragistics/infragistics.core.js"></script> <script type="text/javascript" src="/Scripts/Infragistics/infragistics.lob.js"></script> <script type="text/javascript" src="/Scripts/Infragistics/infragistics.loader.js"></script> <script type="text/javascript">$.ig.loader({ scriptPath: "/Scripts/Infragistics/", cssPath: "/Styles/Infragistics/", theme: "metro", resources: "igShared, igCombo"});</script>
Thoughts??
Attempting to specify "igCombo" in the resources property is definitely the cause of the error. Without it, I get no error.
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 .
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?
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?
Adrian