jqGrid not available even though imported properly - javascript

I am having a problem getting the jqGrid to be recognized by jQuery. For some reason despite having imported the library
<script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.js"></script>
I can verify that the library is imported correctly and I can click on it and see it in Chrome. Any idea why I cannot use the library? When I try
JQuery("#table").jqGrid...
it doesn't work, nor does it show up as one of the functions available.
Any help is really appreciated!

jQuery should be first then jQueryUI then jqGrid, this is because jqgrid depends in jquery an djqueryui so they need to be loaded before.
I think you also need i18n/grid.locale-en.js loaded before too
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"> </script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.js"></script>
<script type="text/javascript" src="js/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>

Related

Using backboneJS and loading two different builds of jquery works but not one or the other

This is a bit of a dated question but still curious and I am not pulling anything up, other than it is bad practice. (BTW the code that this is on will not be going to production with two)
I have a backbone.js app that I am updating jQuery from 1.9.1 to the 3.1.1. With how it is built up right now, I can use 3.1.1 but only if I also have version 2.2.4 loaded in as well. If I remove one or the other script tag, the app breaks and I get Uncaught ReferenceError: jQuery is not defined and Uncaught TypeError: $ is not a function as the errors that range across the board.
I have added var $= jQuery; to where the jQuery is first loaded but that error still persists.
Wondering where I got off track and/or why this is happening.
How the scripts are being loaded in
<script type="text/javascript" src="libs/jquery.min.js"></script>
<script type="text/javascript" src="libs/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="libs/underscore-min.js"></script>
<script type="text/javascript" src="libs/backbone-min.js"></script>
<script type="text/javascript" src="libs/tooltip.js"></script>
<script type="text/javascript" src="libs/popper.js"></script>
<script type="text/javascript" src="libs/bootstrap.js"></script>
<script type="text/javascript" src="libs/tooltip.js"></script>
<script type="text/javascript" src="libs/less.min.js"></script>
<script type="text/javascript" src="libs/mobiledatepicker.jquery.js"></script>
<script type="text/javascript" src="libs/moment.min.js"></script>
<script type="text/javascript" src="libs/serialize.min.js"></script>
<script type="text/javascript" src="libs/sha256.min.js"></script>
Last thing I am on backbone 1.3.3 and bootstrap 4. The code does work up to jQuery version 2.0.3
So found out this was more to do with the window that I was loading it in. Don't and still can figure out why two version of jQuery would load and make the page responsive but a single one would not.
Issue came down to I was loading the pages and scripts into an electron app.
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script> and
<script>if (window.module) module = window.module;</script>
wrapped around the code cleared up the issue with only loading one.

AnyTime widget not working

My Anytime date picker widget is not working. Here's my reference at Site Master:
<link href="Content/anytime/anytime.5.1.2.min.css" rel="stylesheet" type="text/css" />
<script src="Scripts/anytime/anytime.5.1.2.min.js"></script>
<script src="Scripts/anytime/jquery-1.11.0.min.js"></script>
<%--<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//www.ama3.com/anytime/anytime.5.1.2.js"></script>--%>
css is working fine, but the jquery and anytime.js doesn't. As you can see I have two lines commented, those two lines work pretty well if the source is directly to their web page, but if I reference it in my local it just doesn't work, no calendar nor time picker pops up.
Anyone who knows what i'm doing wrong?
Order of loading of scripts is important when there are dependencies such as a plugin that is dependent on jQuery.js.
The dependency must load first so switch the order of your loading:
<script src="Scripts/anytime/jquery-1.11.0.min.js"></script>
<script src="Scripts/anytime/anytime.5.1.2.min.js"></script>
You should be seeing errors thrown in browser dev tools console like $ is undefined due to improper order
I just made it to work.
I tried referencing it to the page where it was called upon and I noticed a difference in the "src".
<script type="text/javascript" src="../../Scripts/anytime/jquery-1.11.0.min.js" ></script>
<script type="text/javascript" src="../../Scripts/anytime/anytime.5.1.2.min.js" ></script>
whereas if I reference it in the Site.Master, those dots doesn't exist when you click the "Pick URL". I tried pasting it back to the Site.Master with the dots and it works.

jquery libraries conflict

I am using the following libraries in my project
<script src="jquery.js"></script>
<script src="jquery.datetimepicker.js"></script>
<script src="http://code.jquery.com/jquery-1.4.2.js" type="text/javascript"></script>
<script src="scripts/jquery.autocomplete.js" type="text/javascript"></script>
there is a conflict between first 2 and second 2 libraries when I use first 2 then 3 and 4 stop working.
I could not fix this conflict.
Problem is you have multiple jquery files included, this should be avoided. Use the latest version and include it at top before any other library, as other plugins are dependent on jquery library, try excluding the 3rd number jquery file, otherwise include latest jquery library and then datetimepicker and autocomplete:
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="jquery.datetimepicker.js"></script>
<script src="scripts/jquery.autocomplete.js" type="text/javascript"></script>

Calling DWR library and JQuery library

I am new to DWR and I need some clarifications in the subject. I have some code that is using DWR engine and I want to implement JQuery events but if I put this header
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
above the script to get DWR ready to work
<script type="text/javascript" src="ajax/core/engine.js"></script>
<script type="text/javascript" src="ajax/core/util.js"></script>
JQuery does not work.
And if I put it below, DWR does not work.
Does anyone have some info that can help me to understand this better?
Thanks in advance.
Try adding
<script type="text/javascript">
jQuery.noConflict();
</script>
to your application, sometimes there is conflicts between different libraries, this might solve your problem.
Take a look here for more information.
Add jQuery.noConflict below JQuery libraries, then add DWR libraries.
i.e.
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
</script>
<script type="text/javascript" src="ajax/core/engine.js"></script>
<script type="text/javascript" src="ajax/core/util.js"></script>
Now it should work.

jquery library conflict

I use two jQuery Library in a single page (Tab & Gallery) for both used two different versions of jQuery libraries now it both wont work at a time. i have to remove a library to work another.
Used versions
1.7.1 jQuery.mini.js for Gallery
1.6.2 jQuery.mini.js - for tab
and
this one
--http://ajax.googleapis.com/ajax/libs/jquery-ui-1.8.16.custom.min.js
Here how i used this coding
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../js/libs/jquery-1.6.2.min.js"><\/script>')</script>
<script src="../js/libs/jquery-ui-1.8.16.custom.min.js"></script>
<script // type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
Please tell a solution for this
Only use the newest source! And place it before the jQuery UI. It is better to get your files from the same source, perferably a CDN, like Google's.
These are the newest versions, you are using out-dated ones.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
Don't reference the jQuery library twice - it will attempt to override the functionality and break your script. You just need to reference it once:
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="../js/libs/jquery-ui-1.8.16.custom.min.js"></script>
Just don't include jQuery twice...
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="../js/libs/jquery-ui-1.8.16.custom.min.js"></script>
you may be polluting the name space. change $ to jQuery, use noconflict() or use self invoking anonymous function

Categories