JsPlumb not working in ASP.net MVC - asp.net-mvc

I wanted to learn JsPlumb by following the example as below:
http://jsfiddle.net/aT63t/161/
I try to include this in ASP.NET MVC 4. However, it throws me with the exception of
0x800a1391 - JavaScript runtime error: 'jQuery' is undefined
in my jsPlumb 1.4 version.
My jQuery version updated to latest 2.0.3 and Jquery UI with 1.10.3
Anyone have this issue before? Any idea how to fix it?

make sure you've referenced jQuery in your page.
make sure that you first reference jQuery and jsPlumb after Order is important
should be like this: jQuery, jQuery UI, jsPlumb
in chrome right click the page "View Page Source" and click all the .js references to check if they are loaded, also check that you have jQuery referenced just once

Related

Why does Google lighthouse see jquery ui vulnerability on my website even though i am no longer using jquery ui

I used to use jquery ui on my website www.iusefaith.com but have stopped yet Google lighthouse still sees Jquery Ui on my website. Here is a link to the lighthouse report. Lighthouse says I have jquery ui meanwhile i have removed it.
Why does Google lighthouse see jquery ui vulnerability on my website even though i am no longer using jquery ui ?
Line 69 of: https://res.cloudinary.com/iusefaith/raw/upload/v1606174446/iusefaith_general_jquery_scripts_light_compressed.js
A few hundred characters along (after what looks like Modernizr) I see:
(function(e,t){function i(t,i){var a,n,r,o=t.nodeName.toLowerCase();return"area"===o?(a=t.parentNode,n=a.name,t.href&&n&&"map"
compare it to jQuery-ui 1.10.3
(function(t,e){function i(e,i){var n,o,a,r=e.nodeName.toLowerCase();return"area"===r?(n=e.parentNode,o=n.name,e.href&&o&&"map"
It looks like jQuery-ui from the first few characters there. You need to clear any cache plugins you have and ensure whatever builds the file I linked above doesn't include jQuery-ui anymore.

Angular2, PrimeNG, Calendar, jQuery, webpack datepicker is not a function

I started a project using ng-admin by akveo https://github.com/akveo/ng2-admin. The PrimeNG website specifies that one needs to add jQuery ui datetimepicker and jQuery datepicker in order to use their Calendar component. I did an npm install jquery-ui --save and it installed the files. However I'm clueless on how to add the reference on the webpack file and reference it properly.
thank you.
Yes, we call libraries like jQueryUi and jQuery 'broken modules' because they execute and rely on eachother in the global context. There are a few different methods to shim these kind of modules.
Here is a list of different options (as the solution cam vary per library). I like using the ProvidePlugin or using alias and externals.
I had the same error message, without using webpack yet. The solution, for this specific message, is in fact to declare/include jQuery BEFORE primeng.
So I just moved up the html tag adding jQuery to my page(s) and it went fine after that.
I don't know how to use webpack, but if there is a declaration order, just declare jQuery (or its subscript datepicker and datetimepicker) before primeng.

mobile joomla and jquery ui conflict

We have a mobile version of our Joomla site using mobile Joomla and everything was working fine until we introduced the jquery UI for the autocompletion functionality into the equation. We now get the following error "Uncaught TypeError: Object 0 has no method 'match'" which after googling seems to indicate it being a conflict between Mobile Joomla and jQuery UI.
We can prove this if we remove the UI it runs fine again.
Any help would really be appreciated.
Thanks
Richard
Use $.noConflict(); and inside (document).ready(function() put $ inside (function()
Example:
$.noConflict();
jQuery(document).ready(function($){
$("button").click(function(){
$("p").text("jQuery is still working!");
});
});

bootstrap modal created inside coffeescript not working

My problem in a nutshell is that from within coffeescript implemented jQuery-UI handler, I cannot create and show a bootstrap modal. If I try to show the modal using the standard button approach that is on the bootstrap documentation it works just fine. EDIT 3: This is within a Ruby on Rails 3.2 application using the asset pipeline.
Launch demo modal
However, when I do this from within a jQuery-UI event handler:
$("#my-modal").modal('show')
or
$("#my-modal").modal({})
I get this error:
Uncaught TypeError: Object [object Object] has no method 'modal'
My html is very standard--I just used the example html from the bootstrap documentation. I have this coffeescript for the jQuery-UI event handler:
$ ->
$("#selectable").selectable(
selected: (event, ui) ->
$("#my-modal").modal({})
)
EDIT: As this smells of a scope issue I tried monkeying with the -> and => to see if that changed things but no changes to that made any difference.
EDIT 2: I've validated that the javascript libraries are included in the right order: jquery, jquery-ui, jquery_ujs, and then bootstrap.js. Is it possible that there's another library I need to pull in?
I've validated that $("#my-modal") finds the modal DOM object correctly by doing
console.log $("#my_modal").html()
I'm at a loss to understand this. The code looks completely straightforward and simple to me.
I finally figured this out and thought I'd post the answer in case someone else runs into this.
Someone else on our team had brought in Google Analytics using jQuery and that was reintroducing jQuery AFTER bootstrap had injected itself into jQuery, thereby removing bootstrap from the world.
As we're in the first stages of our project and our motto is to not try to solve next years problems today, I fired him and we waited out back for him when he left. Of course he's my boss so none of that happened.

Problems with Jquery UI and Sitefinity 3.7

Im building a search autocomplete using Jquery UI. Everything worked perfectly fine when I built the search in a minimal document with nothing but an input. eg:
<input id="autocomplete" />
and the Jquery
<script>
$( "input#autocomplete" ).autocomplete({
source: ['johannesburg z', 'johannesburg x', 'johannesburg v','johannesburg b','johannesburg a','johannesburg q', 'johannesburg u', 'johannesburg y', 'johannesburg o', 'johannesburg p']
});
</script>
However, once I place my code into a Sitefinity 3.7 page, I get an error, telling me that "$("input#autocomplete").autocomplete" is not a function.
This error only occurs once its in sitefinity
Things Iv tried
Im using the latest Jquery UI library with the autocomplete widget.
Iv checked that my file paths are correct. (they are).
Used alerts eg
alert("$('input#autocomplete').autocomplete")
they keep returning undefined.
Any help would be much appreciated!
Sitefinity itself employs jquery and is probably overriding many of the base classes/methods with the same shorthand classnames ($, Jquery).
The consequence is that you cannot have your javascript on your page BEFORE any sitefinity page elements/controls are being inserted. I was having this same issue. I moved all my javascript AFTER the sitefinity elemens, to the bottom of my pages and everything worked fine again.
Bear in mind, what is actually happening in this case is that
sitefinity injects their own jquery, then
your link to the jquery.min.js file overrode sitefinity's.
So it's possible that doing this may actually break some of sitefinity's jquery-based functionality, although I haven't had any issues in the last 2 months.
You can also try using the sitefinity built-in version of jQuery (which is what Telerik recommends at the forum link below, although I didn't have much luck with this technique):
<%# Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %>
Here's the link to a recent Sitefinity forum post regarding this exact same issue:
http://www.sitefinity.com/devnet/forums/sitefinity-4-x/general-discussions/jquery-popup-not-working-in-telerik-webapplication.aspx
Good luck!

Resources