The script in question is app.js.
I have placed this custom script between jquery.min.js and jquery.mobile.js in the section of _layout.Mobile.cshtml.
#* one recommendation to load custom scripts but does not work *#
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
#*<script src="#Url.Content("~/Scripts/kendo.web.min.js")" type="text/javascript"></script> *#
#*<script src="http://openlayers.org/api/OpenLayers.js" type="text/javascript"></script>*#
<script src="#Url.Content("~/Scripts/app.js?45")" type="text/javascript"></script>
#*#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/3rdparties")*#
<script src=#Url.Content("http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js") type="text/javascript"></script>
</head>
I have also tried referencing the script immediately after the first element with attribute role=page in Index.Mobile.cshtml.
<div data-role="page" id="agencies-pane">
<script src="#Url.Content("~/Scripts/app.js?45")" rel="external" type="text/javascript"></script>
<div data-role="header" class="header"><h1><a>Agencies</a></h1></div>
In both cases, my custom script does not load. What a waste of an entire afternoon :(
I do not want to disable Ajax even though I tried and failed at that miserably. Can not seem to get anything jQM to work even after carefully reading instructions from here
Anyone have any ideas?
Related
ok so I decided to post another question (separate from my other one/edited it. this one is more on ordering of scripts).
So my problem is this: I have this at the header
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
</head>
then at the bottom I got:
<script src="assets/js/app.min.js"></script>
<script src="assets/js/scripts.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!--Reference the jQuery library. -->
<script src="Scripts/jquery-1.10.2.min.js" ></script>
<!--Reference the SignalR library. -->
<script src="Scripts/jquery.signalR-2.1.2.min.js"></script>
<!--Reference the autogenerated SignalR hub script. -->
<script src="signalr/hubs"></script>
<!--Add script to update the page and send messages.-->
</form>
Problem is I don't know where to correctly place the scripts/proper ordering placing signalR at the very bottom removes my Navbar/animations/transitions which is in scripts.js,
placing the signalR above it will fix the Navbar issue but the signalR will stop working.
First thing I see is that you have 2 different versions of jQuery loaded.
At the top -
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
At the bottom -
<script src="Scripts/jquery-1.10.2.min.js" ></script>
You should only have 1 version. This is probably causing most of your issues. You may have some other conflicts running both bootstrap and jquery-ui (not validated) if similar js/css is applied between both. You may want to search for conflicts and see what impacts you.
As far as order goes load:
jQuery-x.x.x.min.js
bootstrap.min.js
jquery-ui.js
signalR-2.1.2.min.js
signalr/hubs
Currently, have a web app for appointments. I had a question answered around last week at the following link: jQuery and Bootstrap dialog not coming up
I got this working. However, I just noticed that this messes up my NavBar that is stored in my layout file. On any other page, the NavBar works, but on the Calendar page it doesn't respond. The only thing I can think of is the scripts are clashing.
I tried taking them out of my calendar page but this causes my calendar to not pop up with a dialog. I must be doing something wrong here but I honestly don't know.
Here is my layout file's scripts.
#Styles.Render("~/Content/Site.css")
#Styles.Render("~/Content/jquery.datetimepicker.css")
#Styles.Render("~/Content/fullcalendar.css")
#Scripts.Render("~/bundles/modernizr")
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
My Calendar File Scripts:
#section Scripts{
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>
}
If more code is needed, I can supply it.
EDIT Image of my console after I load Calendar:
EDIT 2 Image of my console after I load Calendar after removing one instance of Jquery:
Turns out I had an error on my Layout Page that was causing hassle.
The scripts section weren't being rendered as I had RenderSection("Scripts", false)
Removed the scripts section and that and the error went away!
Problem
I have the following problem that I can't fully understand what is happening and why.
One specific page is attempting to use $.fn.ajaxQueue .
When I load this page on my locally (using localhost:8080) I get the error:
TypeError: $.fn.ajaxQueue is not a function[Learn More]
When I load the deployed page (same code), I don't get the error but I get a warning:
jquery-1.7.1.min.js:4 Synchronous XMLHttpRequest on the main thread
is deprecated because of its detrimental effects to the end user's
experience. For more help, check https://xhr.spec.whatwg.org/.
Series of Imports
The series of <script> statements is the same on both local and deployed.
I am noticing that the JQuery <script> tag is not firstt. Shouldn't JQuery be the first thing that is imported???
<link href='scripts/jquery/src/skin/ui.dynatree.css' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/utils/jquery.tablednd.js"></script>
<script type="text/javascript" src="js/utils/jQueryUtils.js"></script>
<script src='scripts/jquery/jquery/jqueryBeforeTooltip.js' type='text/javascript'></script>
<script src='scripts/jquery/jquery/jqueryAfterTooltip.js' type='text/javascript'></script>
<script src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="scripts/jquery/src/jquery.dynatree.js"></script>
<script type="text/javascript" src="scripts/jquery/jquery/jquery.cookie.js"></script>
<script type="text/javascript" src="scripts/jquery/plugins/ajaxautocomplete/chosen/chosen.jquery.js"></script>
<link rel="stylesheet" href="scripts/jquery/plugins/ajaxautocomplete/chosen/chosen.css"/>
<script type="text/javascript" src="js/jquery.blockUI.js"></script>
Questions
Why would the error/warnings be different depending on if the server
is localhost or another domain? Is there a logical reason or is it a
configuration difference?
Is the list of imports correct? Shouldn't JQuery be first?
Can I add a try/catch to the statement trying to use $.fn.ajaxQueue and if it is undefined, dynamically load it and try again?
It turns out, that there were javascript imports on a specific page that was breaking the page. After we deleted the duplicate imports, everything worked fine:
<script src='js/jqueryFileupload/jquery.ui.widget.js'
type='text/javascript'></script>
<script src='js/jqueryFileupload/jquery.iframe-transport.js'
type='text/javascript'></script>
<script src='js/jqueryFileupload/jquery.fileupload.js'
type='text/javascript'></script>
<script type="text/javascript" src="js/utils/jQueryUtils.js"></script>
I added 3 files to my HTML code:
<script src="js/jquery-2.1.4.js"></script>
<script src="js/main.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
Without jQuery mobile my main.js script works properly but when included jquery mobile file script doesn't work. There is way to deal with this?
Have jQuery mobile and jQuery (basic) some conflicts? (I'm concerned about js only)
Load your main javascript <script src="js/main.js"></script> only after all his dependencies so:
<script src="js/jquery-2.1.4.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<script src="js/main.js"></script>
If the issue persist try to use $.noConflict()
<script>
$.noConflict();
</script>
When I include my script like this - loading bootstrap.min.js from a local file on disk, it does not execute my browser code.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js" </script>
I know it can find the file, because if I introduce a misspelling in the file name, Chrome complains, but otherwise not. Same behavior from IE-Edge by the way.
However if I include from the cdn network like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Everything works fine. The setup was suggested in a Coursera course on bootstrap and seems to work for most people, but not all. I am kind of puzzled. Is there a browser/internet setting that is preventing me from executing bootstrap from the disk or something that I am missing?
just change
<script src="js/bootstrap.min.js" </body>
To
<script src="js/bootstrap.min.js"></script>
You probably have not closed your code
Here
<script src="js/bootstrap.min.js" </body>
should be
<script src="js/bootstrap.min.js"></script>