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
Attempting to specify "igCombo" in the resources property is definitely the cause of the error. Without it, I get no error.
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??
Hello abromfield ,
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.
Best Regards,
Maya Kirova
Developer Support Engineer II
Infragistics, Inc.
http://ko.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.
First of all thank you for your help.
I do however need to clarify a few things I forgot to mention in my original post:
Now, I partially solved the issue, but not really:
My new project is MVC 4 (Razor as opposed to ASPX). Apparently the loader doesnt have as many isssues because I was able to comment out infragistics.dv.js. My final script block looks like (I no longer need .dv.js for the controls to work, but i definately need core.js, lob.js and loader.js):@*<link type="text/css" href="/Styles/Infragistics/structure/infragistics.css" rel="stylesheet" />*@ <script type="text/javascript" src="/Scripts/Infragistics/infragistics.core.js"></script> @*<script type="text/javascript" src="/Scripts/Infragistics/infragistics.dv.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" });</script>
I'm really starting to lose it because nothing works like it's supposed to and it doesn't make any sense!! Am I missing something? References to Modernizr, jQuery and jQueryUI are all above the infragistics references. I'm running modernizr-2.5.3.js , jquery-1.7.1.min.js, and jquery-ui-1.8.20.min.js however. Is that fine?