how to rename $ and jQuery ?
I have created widget and which is used in 3rd party website.
As i am getting conflict with jQuery with 3rd party website.
And I don't aware about which version of jquery 3rd party is using so i am stuck at this point.
so now if it is possible to rename ,then let me know how to do it in jquery.js library.
Otherwise i have to rewrite whole my script (about 3000+ lines) in native java script. and this is not possible because my script using third party js like fullcalendar, colorbox, validationengine etc. which fully dependent on jquery.
<html>
<head>
</head>
<body>
3rd party website
<script src="jquery-1.5.js"></script>
// My widget code : Start
<script src="http://my-domain.com/my-widget.js"></script>
<div id="my-result"></div>
// My widget code : End
</body>
</html>
EDIT 1
<html>
<head>
<title>title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript" src="script.js"></script>
<div id="my-result"></div>
<script src="js/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load('jquery', '1.5');
</script>
<!--<script src="http://code.jquery.com/jquery-migrate-1.2.1.js" type="text/javascript"></script>-->
</body>
</html>
it's not recommended to change code in the jquery file itself, just use no conflict:
<script src="jquery.js"></script>
<script>
var $j = jQuery.noConflict( true );
// $j will point to your jquery version
$j('#somediv').show();
</script>
after seeing the last edit, you can surround your my-widget.js code with closure that way your code will know $ as your version as jquery:
(function( $ ) {
// all my-widget.js code
})($j);
Related
How do you properly link a JavaScript file to a HTML document?
Secondly, how do you use jQuery within a JavaScript file?
First you need to download JQuery library from http://jquery.com/ then
load the jquery library the following way within your html head tags
then you can test whether the jquery is working by coding your jquery code after the jquery loading script
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--LINK JQUERY-->
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<!--PERSONAL SCRIPT JavaScript-->
<script type="text/javascript">
$(function(){
alert("My First Jquery Test");
});
</script>
</head>
<body><!-- Your web--></body>
</html>
If you want to use your jquery scripts file seperately you must define the external .js file this way after the jquery library loading.
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script src="js/YourExternalJQueryScripts.js"></script>
Test in real time
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--LINK JQUERY-->
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<!--PERSONAL SCRIPT JavaScript-->
<script type="text/javascript">
$(function(){
alert("My First Jquery Test");
});
</script>
</head>
<body><!-- Your web--></body>
</html>
This is how you link a JS file in HTML
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script> - tag is used to define a client-side script, such as a JavaScript.
type - specify the type of the script
src - script file name and path
To include an external Javascript file you use the <script> tag. The src attribute points to the location of your Javascript file within your web project.
<script src="some.js" type="text/javascript"></script>
JQuery is simply a Javascript file, so if you download a copy of the file you can include it within your page using a script tag. You can also include Jquery from a content distribution network such as the one hosted by Google.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
You can add script tags in your HTML document, ideally inside the which points to your javascript files. Order of the script tags are important. Load the jQuery before your script files if you want to use jQuery from your script.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="relative/path/to/your/javascript.js"></script>
Then in your javascript file you can refer to jQuery either using $ sign or jQuery.
Example:
jQuery.each(arr, function(i) { console.log(i); });
Below you have some VALID html5 example document. The type attribute in script tag is not mandatory in HTML5.
You use jquery by $ charater. Put libraries (like jquery) in <head> tag - but your script put allways at the bottom of document (<body> tag) - due this you will be sure that all libraries and html document will be loaded when your script execution starts. You can also use src attribute in bottom script tag to include you script file instead of putting direct js code like above.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<div>Im the content</div>
<script>
alert( $('div').text() ); // show message with div content
</script>
</body>
</html>
this is demo code but it will help
<!DOCTYPE html>
<html>
<head>
<title>APITABLE 3</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$.ajax({
type: "GET",
url: "https://reqres.in/api/users/",
data: '$format=json',
dataType: 'json',
success: function (data) {
$.each(data.data,function(d,results){
console.log(data);
$("#apiData").append(
"<tr>"
+"<td>"+results.first_name+"</td>"
+"<td>"+results.last_name+"</td>"
+"<td>"+results.id+"</td>"
+"<td>"+results.email+"</td>"
+"<td>"+results.bentrust+"</td>"
+"</tr>" )
})
}
});
});
</script>
</head>
<body>
<table id="apiTable">
<thead>
<tr>
<th>Id</th>
<br>
<th>Email</th>
<br>
<th>Firstname</th>
<br>
<th>Lastname</th>
</tr>
</thead>
<tbody id="apiData"></tbody>
</body>
</html>
I have a project written in C# ASP.net. jQuery have worked well before format computer. I have reinstall windows 7 on pc then install VS 2012 again. I run project then give this error
JavaScript runtime error '$' is undefined
I don't change anything. I referenced jQuery top of aspx file.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title></title>
<link rel="stylesheet" type="text/css" href="css/site.css" />
<link rel="stylesheet" href="Content/themes/base/jquery-ui.css"/>
<style>
.ui-datepicker-trigger { position:relative;top:0px ;left:2px ; height:16px;width:16px;vertical-align:middle; }
/* {} is the value according to your need */
</style>
<script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.12.0.js"></script>
<script type="text/javascript" src="js/jquery.maskedinput.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
SOLUTION
I have found solution like this
Please check with your physical location of jQuery file.
or try to add CDN of jQuery as below.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
You should change the path of the jquery libs to relative like this:
<script type="text/javascript" src="~/Scripts/js/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="~/Scripts/js/jquery-ui-1.12.0.js"></script>
<script type="text/javascript" src="~/Scripts/js/jquery.maskedinput.min.js"></script>
You then will have to make a folder(if it doesn't exist) named Scripts and subfolder(if it doesn't exist) named js and place your jquery libs inside.
I'm trying to use the Jquery plugin Flexslider on a website that I'm developing. I have my stylesheets and scripts in order like so:
<head>
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="jquery.js"></script>
<script src="jquery.flexslider.js"></script>'
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>
</head>
I checked to make sure that Jquery is working by writing just a simple script by putting a red box around all of my divs, and that worked.
I'm not sure what I'm doing wrong...I'm using the code (the HTML as well, but for some reason the ctrl+K isn't working for the code) exactly how the website tells me to use it
Any thoughts?
I have added jQuery Library 2.1 as javascriptResource in the project. As shown in the picture.
In the index.html, the autocomplete for ready works but, ready function is not called.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="main.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert("Hello");
});
</script>
</head>
<body>
What could I be missing?
Having it available under JavaScript Resources makes it known to the tools, and available for Content Assist at edit-time. It doesn't change the behavior at runtime in the browser--something still has to reference the jQuery file from your web page, like a script tag.
Try to include the jquery script. Example:
<head>
<script src="jquery-1.11.2.min.js"></script>
</head>
Source : http://www.w3schools.com/jquery/jquery_get_started.asp
Hope it helps.
i have a HTML template in which i have used a third party javascript code. this particular code provides an chat option.i have added this script in my header.html so that it gets displayed in all the pages. however i dont want this to display in my login page.i want this to be displayed only after logging in.
How do i hide this from a particular page(here login.html)?
Header.html
<!doctype html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="bower_components/weather-icons/css/weather-icons.min.css">
<link rel="stylesheet" href="styles/main.css">
</head>
<body data-ng-app="app" id="app" class="app" data-custom-page="" data-off-canvas-nav="" data-ng-controller="AppCtrl" data-ng-class=" {'layout-boxed': admin.layout === 'boxed' } ">
<section data-ng-include=" 'views/index.html' " id="header" class="header-container" data-ng-class=" {'header-fixed': admin.fixedHeader} " data-ng-controller="HeaderCtrl" data-ng-intro-options="introOptions" data-ng-intro-method="startIntro" data-ng-intro-autostart="true"></section>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="scripts/vendor.js"></script>
<script src="scripts/jquery.leanModal.min.js"></script>
<script src="scripts/ui.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/product_listing.js"></script>
<script src="scripts/angular-cookies.js"></script>
<script id="SettingsScriptTag">
**Third Party script Goes here**
</script>
</body>
</html>
The above header.html is included in all the other templates. hense the thrid party script runs in login page too. I need to hide this in login page.
If you're using jQuery (which... I think you are...?)
$(function () {
if (window.location.pathname !== '/login.html') {
// Third-party script goes here
}
});
If Using jquery .remove() is used to remove the html elements. So you can write this script on document ready of the login page.
$(document).ready(function(){
$( "#SettingsScriptTag" ).remove();
});