Conflict with jQuery?

[dpdragnevMember]

Hi,

I have just installed the new 2.7 version of jqWidgets on my MVC4 application. Until today, I was testing with the older version and everything was working fine. After the upgrade I started getting some weird errors ( TypeError: e is not a function) in the jQuery js files.

Here is what I have so far:
– I have created a bundle with all the jqWidgets controls that I am using
– I am loading this bundle in my _Layout.cshtml file after the jQuery bundle
– On this page, the only control I am using is the jqxDocking control
– I am initializing the control as suggested in the demo documentation:
$(‘#docking’).jqxDocking({ theme: theme, orientation: ‘horizontal’, width: 294, mode: ‘docked’ });
$(‘#docking’).jqxDocking(‘enableWindowResize’, ‘window1’);
$(‘#docking’).jqxDocking(‘enableWindowResize’, ‘window2’);
$(‘#docking’).jqxDocking(‘enableWindowResize’, ‘window3’);
$(‘#docking’).jqxDocking(‘enableWindowResize’, ‘window4’);
$(‘#docking’).jqxDocking(‘showAllCollapseButtons’);
$(‘#docking’).jqxDocking(‘hideAllCloseButtons’);
$(‘#calendar’).jqxCalendar({ theme: theme, width: 262, height: 185 });
$(‘#newsTbs’).jqxTabs({ theme: theme, width: 260, height: 185, selectedItem: 1 });
$(‘#listbox’).jqxListBox({ source: source, theme: theme, width: 260, height: 185 });
$(‘#zodiak’).jqxPanel({ theme: theme, width: 260, height: 185 });
– When I run the page I get the “TypeError: e is not a function” error.
– If I comment out the jqxDocking code, the page runs fine.

All this makes me think that there is a conflict between the jQuery and jqWidgets somewhere.

Has anyone experienced similar problem and if so how did you resolve it?

Thank you.

[Peter StoevKeymaster]

Hi dpdragnev,

There is no conflict between jQWidgets and jQuery. Actually, we use jQuery in all widgets. For integration with MVC4, see: asp.net-binding-to-sql-database-mvc4.htm. Just, make sure that you use jQuery 1.7+ version.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[dpdragnevMember]

Hi Peter,

Thank you for your reply. As I mentioned in my post, everything was working fine until I replaced the 2.6 version with 2.7. Furthermore, If I remove the reference to the jqxDocking in my js file, the page loads correctly, but with the jqxDocking code, I get the “TypeError: e is not a function” error.

I am not doing anything different, all I did was replaced the content of the jqwidgets directory with the one I downloaded today (v.2.7). There must be a conflict somewhere otherwise the code should work, right? As you can see the code above is taken from your demo page. Here is my jqwidgets bundle:

bundles.Add(new ScriptBundle(“~/bundles/jqwidgets_controls”).Include(
“~/Plugins/jqwidgets/jqxcore.js”,
“~/Plugins/jqwidgets/jqxbuttons.js”,
“~/Plugins/jqwidgets/jqxdata.js”,
“~/Plugins/jqwidgets/jqxgrid.js”,
“~/Plugins/jqwidgets/jqxgrid.edit.js”,
“~/Plugins/jqwidgets/jqxgrid.selection.js”,
“~/Plugins/jqwidgets/jqxmenu.js”,
“~/Plugins/jqwidgets/jqxscrollbar.js”,
“~/Plugins/jqwidgets/jqxlistbox.js”,
“~/Plugins/jqwidgets/jqxdropdownlist.js”,
“~/Plugins/jqwidgets/jqxgrid.columnsresize.js”,
“~/Plugins/jqwidgets/jqxgrid.selection.js”,
“~/Plugins/jqwidgets/jqxgrid.edit.js”,
“~/Plugins/jqwidgets/jqxcheckbox.js”,
“~/Plugins/jqwidgets/jqxnumberinput.js”,
“~/Plugins/jqwidgets/jqxexpander.js”,
“~/Plugins/jqwidgets/jqxnavigationbar.js”,
“~/Plugins/jqwidgets/jqxmaskedinput.js”,
“~/Plugins/jqwidgets/jqxdatetimeinput.js”,
“~/Plugins/jqwidgets/jqxcalendar.js”,
“~/Plugins/jqwidgets/jqxtooltip.js”,
“~/Plugins/jqwidgets/jqxdocking.js”,
“~/Plugins/jqwidgets/jqxpanel.js”,
“~/Plugins/jqwidgets/jqxsplitter.js”,
“~/Plugins/jqwidgets/jqxwindow.js”,
“~/Plugins/jqwidgets/jqxtabs.js”,
“~/Plugins/jqwidgets/jqxvalidator.js”,
“~/Plugins/jqwidgets/globalization/jquery.global.js”));

I am loading all the files like so:
@Styles.Render(“~/Content/css”)
@Scripts.Render(“~/bundles/modernizr”)
@Scripts.Render(“~/bundles/jquery”)
@Scripts.Render(“~/bundles/jqueryval”)
@Scripts.Render(“~/bundles/jqwidgets_controls”)
@Scripts.Render(“~/bundles/custom”)
@Scripts.Render(“~/bundles/blockui”)
@Scripts.Render(“~/bundles/plugins”)
@Styles.Render(“~/Plugins/jqwidgets/styles/jqx.base.css”)
@Styles.Render(“~/Plugins/jqwidgets/styles/jqx.shinyblack.css”)
@Styles.Render(“~/Plugins/jqwidgets/styles/jqx.ui-smoothness.css”)
@Styles.Render(“~/Plugins/jqwidgets/styles/jqx.ui-darkness.css”)

As far as I can see, everything is loading correctly. I am not getting any network errors so all the files load properly. Here is my HTML:

calendar

Sunny

Mo: 23 °C
To 25 °C
We: 27 °C

News

World
Local
Sports

Microsoft is set to get a little more pushy ensuring
you have an up-to-date browser and will automatically update Internet Explorer…
(BBC)

The High Court has dismissed a challenge to laws that
require immigrant spouses to be able to speak English in order to live in the UK…
(BBC)

British number one Elena Baltacha says Judy Murray is
a “fantastic” appointment as Great Britain’s new Fed Cup captain… (BBC)

Zodiac

Leo
Individuals born under the zodiac sign of Leo are very
good looking and have a healthy physique, with a broad forehead. Leo are very intelligent,
extremely courageous, love their freedom and live by their own rules. Indulgence
and extravagance is like second nature to them and they love to…

E-mail

This code was copied from your Demo page as well.

What am I missing? I spent all afternoon trying to figure this out and I am out of ideas.

Thank you.

[Peter StoevKeymaster]

Hi dpdragnev,

Check which version of jQuery you use in your project. As I pointed out in the previous message, jQuery 1.7+ is required.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[dpdragnevMember]

Thank you Peter,

This was the problem. I just updated the project to jQuery 1.9 and everything works as expected.

Appreciate your help.

[Author]

Posts