Hello,
I'm trying to inizialize a splitter in more than one tab of my web application.
The tab loades its content via Ajax. The content of each tab is based on one template, which contains the splitter.
So every tab gets the same div-tag with the id "splitter" and should inizialize $("#splitter").igSplitter();
But when I open the second tab the debugger says "Error setting option". But I suppose the framework has problems to inizialize the new splitter with the same id as a still existing splitter object.
One possible solution is to clear the deactivated tabs' content. But I'm convinced, there is a nicer solution for this problem.
Has anyone a suggestion?
Regards, Lutz
Hello Lutz,
Thank you for posting in our forums!
In general, the id for any element on your page should be unique from other elements. jQuery depends on this. You can see if you type $("#splitter").length in your console, jQuery only returns 1 element when using an ID as a selector.
You can find more information on using the id attribute in the W3C specifications here:
HTML 4.01: http://www.w3.org/TR/html4/struct/global.html#adef-id HTML5: http://www.w3.org/TR/html5/dom.html#the-id-attribute *Please note this site is not owned or maintained by Infragistics.
What I would recommend is to add a class to your divs. Something along the lines of: <div id="splitter1" class="splitterContainer"> and <div id="splitter2" class="splitterContainer">.
Then, you can use the following code to create and reference the igSplitters by their class:
$(".splitterContainer").igSplitter(...);
This will return matching selectors, which in this case would be both splitters and initialize them with the igSplitter.
If you have any further questions or concerns with this, please let me know.
Hello Michael,
thank you very much for your answer.
I have tried to inizialize the splitters with the class selector, but the error remains the same:
"Error setting option" in infragistics.lob.js
I am aware of the fact that the ".splitterContainer" exists twice in my dom. The first one is added and inizialized opening the first tab.
Now the application tries to add and inizialize the second splitter opening the second tab.
I think the error message says that it can't set or calculate the panel size of the splitter. But I don't know why.
I now built a workaround by taking all splitters by class and looking which of them isn't inizialized yet.
var horizontalSplitter = $(".horizontal-splitter"); $(horizontalSplitter).each(function () { var splitter = this; if (!$(splitter).data("igSplitter")) { $(splitter).igSplitter( /*options*/);
}
});
It isn't realy elegant, but it works. :-)
Hi Lutz,
I am glad to hear you found a workaround! Thank you for sharing it.
If you have any further questions or concerns with this issue, please let me know and I will be glad to help.