I have some global code running in an MVC application but I cannot guarantee that the igDialog resource has been loaded for all views. So I am using the igLoader to pass in the resource so the framework loads that dependency. The code below is what I am executing but when it reaches that point, I receive this error:
0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'igDialog'
$.ig.loader("igDialog", function () { $("#" + dialogId).igDialog({ state: "opened", headerText: "", height: "500px", width: "450px", modal: true, draggable: false, resizable: false });});
What am I doing wrong? Looking at Fiddler, I do not see the resource loading.
Hello Daniel,
Thank you for contacting Infragistics Developer Support!
The issue is related to that you are not referencing the scripts with the correct path, because the igDialog constructor cannot be found. You can see what scripts are being failed to load by using the browser developer tools.
Please review the following links, I believe they might be of help.
http://help.infragistics.com/jQuery/2014.2/ig.loader
http://help.infragistics.com/Help/Doc/jQuery/2014.2/CLR4.0/html/Using_Infragistics_Loader.html
http://www.igniteui.com/loader/overview
If that does not help please attach a sample project replicating your issue to your reply.
v13.2
I've been tracking this issue thoroughly and I see the issue is the callback is firing too soon. After the callback fires, I see the resource request in Fiddler. Which is the exact opposite of what we want.
I tried changing the code a little bit to request the resources first, then provide the "ready" callback in another loader instance. After doing this, the callback fires way too many times and causes this exception:
Out of stack space
try { var dialogOptions = { scriptPath: "/Scripts/IGDebug/", cssPath: "/Content/IG/", resources: "igDialog", theme: 'redmond' };
$.ig.loader(dialogOptions);
$.ig.loader(function () { $("#" + dialogId).igDialog({ state: "opened", height: "400px", width: "450px", modal: true, draggable: false, resizable: false }); });}catch (e) { alert(e);}
Thoughts? I'll try to provide a sample here shortly.
I guess I forgot to mention that the code above is within an event. The iggridrendering event to be exact. I moved the loader code outside of this event and everything is timed correctly and the object now loads.
Are there any specific reason why we cannot invoke the $.ig.loader method in this event? Are there others? Why? What is the limitation?
The only problem with the code now is that the resource loads every single time instead of on demand. I won't know when it should load until the tail end of the iggridrendering event is completed. We can live with this because we control how the file gets downloaded and cached on the client side.
I was not able to reproduce the behavior that you're seeing on your side. I have attached the sample project I used to test this. Please test this project on your side; whether or not it works correctly may help indicate the nature of this issue. If this sample project is not an accurate demonstration of what you're trying to do, please feel free to modify it and send it back, or send a small sample project of your own if you have one.
Please let me know if I can provide any further assistance.
I updated the example to mirror what we are trying to do. The changes are: - Instead of hooking into the grid's event, we hook up to the iggridrendering event globally on document.body. This event should fire all grids on the page across the entire application.
- Moved the igDialog declaration into its own loader, and it is only executed when necessary.
- Passed the options into the loader with the callback instead of loading the ig resource independently.
The example no longer works but based on the examples, it should.
Thanks,