I have written an exernal js file and in it is one function. In this function I am trying to call $.mobile.showPageLoadingMsg(); How would I do this? I have tried the following and it doesnt work:
function test() {
$.mobile.showPageLoadingMsg();
}
The order of script inclusion on the html is shown below:
<script src="jquery.mobile-1.1.1.min.js"></script>
<script src="jquery-1.7.2.min.js"></script>
<script src="cordova-2.0.0.js"></script>
<script src="master.js"></script>
and master.js is the one that makes the call.
You have to load the jQuery library before the jQuery mobile library.
<script src="jquery-1.7.2.min.js"></script>
<script src="jquery.mobile-1.1.1.min.js"></script>
<script src="cordova-2.0.0.js"></script>
<script src="master.js"></script>
jQuery min javascript file before mobile.js ok?
view: http://jsfiddle.net/7fxQf/24/
Related
I need to use both below files but just one of the can work if both of the use in pae
<script src="jquery.min.js"></script>
<script src="jquery-1.min.js"></script>//just this work
Or if change order
<script src="jquery-1.min.js"></script>
<script src="jquery.min.js"></script>//just this work
I use a drag and drop plugin , this need jquery.min.js and my theme need to jquery-1.min.js for be responsive
You should be able to do this when you use noConflict.
<!-- load jQuery-1 -->
<script type="text/javascript" src="jquery-1.min.js"></script>
<script type="text/javascript">
var jQuery_1_min = $.noConflict(true);
</script>
<!-- load jQuery -->
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
var jQuery_min = $.noConflict(true);
</script>
Now whenever you need one of these files you can do this.
//example
$jQuery_min('.selector').live('click', function(){
//do something
});
If it still wont work I dont know anymore... This is the way everybody does it. Quick google search.
I load jquery and ajaxform plugin and after that init ajaxform on element.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.form.js" /></script>
<script src="script.js"></script>
script.js
$(document).ready(function() {
$('.form').ajaxForm();
});
Error: $(...).ajaxForm is not a function.
It appears on this site.
Github isn't a CDN and will block you trying to use it as such.
jquery.form.js is available on numerous proper CDN's or you can download it and serve from your own site
I am creating a widget that will eventually sit on a clients site, and I need to create my own jQuery variable, so that the jquery versions don't conflict. Currently I have the following code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> // Clients own jquery.
<script type="text/javascript" src="sf_content/js/jquery-1.11.2.min.js"></script> // My jQuery.
<script type="text/javascript">
var $sf_jquery = $.noConflict(true);
</script>
Everything else works just fine, but jQuery slider stopped working when I changed to my own jquery:
TypeError: $sf_jquery(...).slider is not a function
Is the problem with the jQuery slider, or am I missing something else here?
Good plain javascript slider -tips are welcome as well!
Edit: Everything the widget needs, is inside function call like this:
$sf_jquery(function(){ // all of the code here });
Edit: The jQuery Ui is imported aswell. Just forgot to add it here. The importing looks like this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> // Clients own jquery.
<script type="text/javascript" src="sf_content/js/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
var $sf_jquery = $.noConflict(true);
</script>
<script type="text/javascript" src="sf_content/js/jquery-ui.min.js"></script>
Edit, Solution!
Dummy me didn't think that the slider isn't part of the native jQuery. The noConflict must be after the jQueryUI, like this:
<script type="text/javascript" src="sf_content/js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="sf_content/js/jquery-ui.min.js"></script>
<script type="text/javascript">
var $sf_jquery = $.noConflict(true);
</script>
You aren't including jQueryUI code (at least in your example).
Slider is part of jQueryUI and is not native to jQuery alone. (https://jqueryui.com/slider/)
Your "noconflict" function must be called before the second jQuery call.
I am currently experiencing the following errors, while debugging my client-side code using web-browser:
TypeError: $ is undefined
ReferenceError: $ is not defined
In the in the "Network" tab, of the debugger, it shows the JQueries scripts as "404". Does this indicate my Jqueries are not being render/initialized
This is my client-side code:
<script src="Scripts/jquery-1.10.2.min.js"></script>
<script src="Scripts/jquery.signalR-2.1.0.min.js"></script>
<script src='<%: ResolveClientUrl("~/signalr/hubs") %>'></script>
<script type="text/javascript">
$(function () {
// Declare a proxy to reference the hub.
var notifications = $.connection.NotificationHub;
// Create a function that the hub can call to broadcast messages.
notifications.client.recieveNotification = function (role, descrip) {
// Add the message to the page.
$('#spanNewMessages').text(role);
$('#spanNewCircles').text(descrip);
};
// Start the connection.
$.connection.hub.start().done(function () {
alert("Preparing to send notifications...");
notifications.server.sendNotifications();
alert("Notifications have been sent.");
}).fail(function (e) {
alert(e);
});
//$.connection.hub.start();
});
</script>
<h1>New Notifications</h1>
<div>
New <span id="spanNewMessages"></span> role.<br />
New<span id="spanNewCircles"></span> descrip.<br />
</div>
Updated Jquery Scripts:
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<script src="~/Scripts/jquery.signalR-2.1.0.min.js"></script>
<script src='<%: ResolveClientUrl("~/signalr/hubs") %>'></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
Any help would be very helpful. Thank you
$ is an alias of jQuery. Your jquery script has to be included in your page if you want to use it.
As long as your jQuery script returns 404, you won't be able to use it. To help you, you could load the script from the jQuery website.
Replace this line :
<script src="Scripts/jquery-1.10.2.min.js"></script>
with this one :
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
A good practice on a website is to load jQuery from the Google cdn as it will be most likely cached as many websites use it :
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Another thing you can do to ensure that your script will do well is to make sure that there is no conflict with other scripts. Add this at the begining of your code :
jQuery.noConflict();
Make sure that you replace every $ with jQuery.
Example :
$('#spanNewMessages').text(role);
will become :
jQuery('#spanNewMessages').text(role);
If it does not work, remove all your code and just try to display alert(jQuery("h1").text()); like this :
jQuery(function () { alert(jQuery("h1").text()); });
The order of your script tags is wrong. You need to load jquery before jquery.signalr:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.signalR-2.1.0.min.js"></script>
<script src='<%: ResolveClientUrl("~/signalr/hubs") %>'></script>
<script type="text/javascript">
Many thanks to all, for your suggestion and help.
I manage to get the issue resolved through using the Scripts as the following below:
<script src="../Scripts/jquery-1.10.2.min.js"></script>
<script src="../Scripts/jquery.signalR-2.1.0.min.js"></script>
<script src='<%: ResolveClientUrl("~/signalr/hubs") %>'></script>
I am using Laravel-4-Bootstrap-Starter-Site. I have this issue loading javascript files: Error: Popover requires tooltip.js It seems that is not causing majors problems but I am losing functionality.
Checking source code we can see that popover is loaded first and before than tooltip file.
<!-- Javascripts -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/popover-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/tab-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/alert-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/transition-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/modal-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/scrollspy-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/carousel-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/dropdown-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/tooltip-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/collapse-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/button-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/affix-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/assets/js/wysihtml5/wysihtml5-0.3.0-5f4b6ad2a53f7fc45751886caf6076e2.js"></script>
<script src="http://code.dev/assets/compiled/admin/assets/js/wysihtml5/bootstrap-wysihtml5-5f4b6ad2a53f7fc45751886caf6076e2.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<script src="http://code.dev/assets/compiled/admin/assets/js/datatables-bootstrap-5f4b6ad2a53f7fc45751886caf6076e2.js"></script>
<script src="http://code.dev/assets/compiled/admin/assets/js/datatables.fnReloadAjax-5f4b6ad2a53f7fc45751886caf6076e2.js"></script>
<script src="http://code.dev/assets/compiled/admin/assets/js/jquery.colorbox-5f4b6ad2a53f7fc45751886caf6076e2.js"></script>
<script src="http://code.dev/assets/compiled/admin/assets/js/prettify-5f4b6ad2a53f7fc45751886caf6076e2.js"></script>
<script src="http://code.dev/assets/compiled/admin/assets/js/jquery.uploadfile-88e9f41770fc597c379b2a75086bcb0f.js"></script>
<script src="http://code.dev/assets/compiled/admin/assets/js/common-75a4c5198cfe0c4468991a6000253513.js"></script>
<script type="text/javascript">
$('.wysihtml5').wysihtml5();
$(prettyPrint);
</script>
Question: is there a way to solve this issue?
I have had the same problem. The reason that happens is because basset loads the resources in order by name. and since p comes before t obviously it gets loaded afterwards coming up with the error. Hacking your way around the problem simply rename tooltip with to atolltip in vendors/twbs/bootstrap/js or instead requiring the directory to load the files in basset config you require each single js file in the order you want. The second option i did not test but should work.