0
Es ist eine kleine Json Based kleine Anwendung, in der Benutzer iteram von einer Spalte in eine andere ziehen und ablegen kann. Auch Artikel haben ihre individuellen Beschreibungen, die beim Laden versteckt werden, sie werden nur wahr, wenn Sie auf Artikelliste klicken. bitte überprüfen Sie mit unten AusgabeJquery Popover funktioniert nicht
Ich habe Jquery-Ui Tooltip (http://jsfiddle.net/bh4ctmuj/164/) beim Klicken auf Listenelement in Json DOM-Element, Drag & Drop-Funktionalität zu implementieren. Aber ich bin nicht in der Lage herauszufinden, warum Jquery-ui Tooltip nicht funktioniert.
Fehler werfen wie folgt
"message": "Uncaught TypeError: $(...).tooltip is not a function",
"filename": "http://stacksnippets.net/js",
"lineno": 147,
"colno": 32
$(document).ready(function() {
$.ajax({
type: 'GET',
url: 'jSon.json',
data: '',
dataType: 'json',
success: function (data) {
//console.log(data);
$.each(data.hotels, function (i, hotel) {
$('.hotels').append("<li class='hotel' title='" + hotel.description + "'>" + hotel.name + "</li>");
});
$('.hotels').append('<div></div>');
$.each(data.location, function (i, place) {
$('.locations').append("<li class='place'>" + place.name + "</li>");
});
$('.locations').append('<div></div>');
}
});
$('li.hotels').tooltip({
position: { my: 'center bottom', at: 'center top-10' },
tooltipClass: "myclass",
disabled: true,
close: function (event, ui) { $(this).tooltip('disable'); }
});
$('li.hotels').on('click', function() {
alert();
$(this).tooltip('enable').tooltip('open');
});
})
$(function() {
$("#sortable1, #sortable2, #sortable3").sortable({
connectWith: ".connectedSortable"
}).disableSelection();
});ul.hotels, ul.Locations, ul.drop-container {
list-style-type: none;
border-radius: 5px;
margin: 0px;
padding: 0px;
}
.hotels li:first-child {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background: #6eb0e5;
}
li.hotel {
background: #c7dff6;
border:#4c85b2 solid 1px;
color:#4c85b2;
}
li.place{
\t background: #daedd5;
\t border:#53a464 solid 1px;
\t color:#53a464;
}
span{
\t display:none;
}
.Locations li:first-child {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background: #80cb9a;
}
.drop-container li:first-child {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background: #80cb9a;
}
.float-left {
float: left;
}
.clear {
clear: left;
}
#sortable1, #sortable2, #sortable3 {
border: 1px solid #eee;
min-height: 20px;
list-style-type: none;
margin: 0;
padding: 5px 0 0 0;
float: left;
margin-right: 10px;
}
#sortable1 li, #sortable2 li {
margin: 0 5px 5px 5px;
padding: 5px;
font-size: 1.2em;
}
#sortable1 li, #sortable3 li {
margin: 0 5px 5px 5px;
padding: 5px;
font-size: 1.2em;
}<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<html>
<head>
<title>Assi</title>
<meta charset="utf-8" />
</head>
<body>
<div class="">
<div class="float-left">
<ul class="hotels connectedSortable" id="sortable1">
<li>Hotels</li>
</ul>
</div>
<div class="float-left">
<ul class="Locations connectedSortable" id="sortable1">
<li>Locations</li>
</ul>
</div>
<div class="float-left">
<ul class="drop-container connectedSortable" id="sortable3" type="A">
<li>Hotels & Locations</li>
<li class="hotel">Hotel 1</li>
<li class="place">Loction 1</li>
</ul>
</div>
<div class="clear"></div>
</div>
NEIN beide sind erforderlich. –
Was meinst du? die gleiche Bibliothek enthalten zwei mal das wird einen Konflikt zu erstellen ... und die beiden sind einschließlich 'Tooltip' .. –
Wenn ich eine von ihnen entfernen, zeigt es Fehler in der Konsole überprüfen Sie mit Link http://proittechnology.com/dev/assign/ –