In: Computer Science
Jquery--- we want 1 plugin and 3 widget in webpage but after adding plugin to webpage our widget are not working can u plz look into this
thank you
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<title>3 widget and 1 plugin</title>
<link rel="stylesheet"
href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet"
href="/resources/demos/style.css">
<script
src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script
src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script
src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<script>
$( function() {
$( "#tabs" ).tabs();
} )
$( function() {
$( "#datepicker" ).datepicker();
} )
$( function() {
var availableTags = [
"USA",
"CANADA",
"INDIA"
];
$( "#tags" ).autocomplete({
source: availableTags
});
} )
$(document).ready(function(){
$('.slider').bxSlider();
});
</script>
</head>
<body>
<H1>Travel Agency</H1>
<div class="slider">
<img
src="https://www.pexels.com/photo/architecture-buildings-business-city-374870">
<img
src="https://www.pexels.com/photo/architecture-buildings-business-city-374870">
<img
src="https://www.pexels.com/photo/architecture-buildings-business-city-374870">
</div>
<div id="tabs">
<ul>
<li><a href="#tabs-1">CANADA</a></li>
<li><a href="#tabs-2">USA</a></li>
<li><a href="#tabs-3">INDIA</a></li>
</ul>
<div id="tabs-1">
<p>The second largest country in the world, Canada has no
shortage of beautiful landscapes and unique sites for travelers to
explore. From coast to coast to coast, the country is home to
vibrant and culturally rich cities, along with incredible natural
wonders.</p>
</div>
<div id="tabs-2">
<p>From coastlines to big cities, the United States is made
up of so many diverse destinations that it's hard to decide which
places deserve the distinction of the best in America. That's why
U.S. News considered a variety of factors, such as attractions,
accommodations and dining options, as well as votes from thousands
of travelers, to determine the best places to visit in the
USA.</p>
</div>
<div id="tabs-3">
<p>Blessed naturally, India attracts millions of travelers
from all over the world round the year with an enticing trip to
India. There are plenty of reasons to visit India – be it mountains
or plains, beaches or backwaters, wildlife tours or adventure
activities, secluded islands or bustling metropolitan, culinary
delights or local drinks, spiritual holidays or romantic vacations.
For those travelers who are visiting India for the first time, the
tourist destinations in India offer every reason that makes them
wish they stayed a little longer in India.</p>
</div>
</div>
<p>Date: <input type="text"
id="datepicker"></p>
<div class="widget">
<div class="ui-widget">
<label for="tags">AutoSearch(type US---it will show USA,INDIA
& CANADA): </label>
<input id="tags">
</div>
</div>
</body>
</html>
The updated code is present below. I have corrected one url and commented one line. It was hapenning because you were loading jquery again and that was causing the issue.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>3 widget and 1 plugin</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> -->
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<script>
$( function() {
$( "#tabs" ).tabs();
} )
$( function() {
$( "#datepicker" ).datepicker();
} )
$( function() {
var availableTags = [
"USA",
"CANADA",
"INDIA"
];
$( "#tags" ).autocomplete({
source: availableTags
});
} )
$(document).ready(function(){
$('.slider').bxSlider();
});
</script>
</head>
<body>
<H1>Travel Agency</H1>
<div class="slider">
<img src="https://www.pexels.com/photo/architecture-buildings-business-city-374870">
<img src="https://www.pexels.com/photo/architecture-buildings-business-city-374870">
<img src="https://www.pexels.com/photo/architecture-buildings-business-city-374870">
</div>
<div id="tabs">
<ul>
<li><a href="#tabs-1">CANADA</a></li>
<li><a href="#tabs-2">USA</a></li>
<li><a href="#tabs-3">INDIA</a></li>
</ul>
<div id="tabs-1">
<p>The second largest country in the world, Canada has no shortage of beautiful landscapes and unique sites for travelers to explore. From coast to coast to coast, the country is home to vibrant and culturally rich cities, along with incredible natural wonders.</p>
</div>
<div id="tabs-2">
<p>From coastlines to big cities, the United States is made up of so many diverse destinations that it's hard to decide which places deserve the distinction of the best in America. That's why U.S. News considered a variety of factors, such as attractions, accommodations and dining options, as well as votes from thousands of travelers, to determine the best places to visit in the USA.</p>
</div>
<div id="tabs-3">
<p>Blessed naturally, India attracts millions of travelers from all over the world round the year with an enticing trip to India. There are plenty of reasons to visit India – be it mountains or plains, beaches or backwaters, wildlife tours or adventure activities, secluded islands or bustling metropolitan, culinary delights or local drinks, spiritual holidays or romantic vacations. For those travelers who are visiting India for the first time, the tourist destinations in India offer every reason that makes them wish they stayed a little longer in India.</p>
</div>
</div>
<p>Date: <input type="text" id="datepicker"></p>
<div class="widget">
<div class="ui-widget">
<label for="tags">AutoSearch(type US---it will show USA,INDIA & CANADA): </label>
<input id="tags">
</div>
</div>
</body>
</html>
Screenshot of the website working is present below. It doesn't have the style.css because you did not provide and that is why lookign like this.