I am trying to call ajax and get my HTML contend .But I want to show that data on tooltip/or pop over .I am getting the data on console I don't know why it showing black data tooltip it is showing black .is there problem in binding ?
here is plunker
http://plnkr.co/edit/OYiawflIBnpJ1PKx02LG?p=preview
when you click "star" image it show blank data.why ?
app.directive('mypopover', function ($compile,$templateCache) {
var getTemplate = function (contentType,scope,element) {
var template = $templateCache.get("templateId.html");
$.ajax({
type: "GET",
url: 'partials/popup.html',
type: 'get',
dataType: 'html',
success: function (data) {
alert('d'+data)
var options = {
content: $(template).html(data),
placement: "right",
html: true,
date: scope.date
};
$(element).popover(options);
},
error: function (data) {
}
});
return template;
}
return {
restrict: "A",
link: function (scope, element, attrs) {
console.log('entering link')
var popOverContent;
popOverContent = getTemplate("user",scope,element);
}
};
});
there was few error please see here: http://plnkr.co/edit/5SpDRkMokbPCMRT8oB0r?p=preview
app.directive('mypopover', function($compile, $templateCache) {
var getTemplate = function(contentType, scope, element) {
var template = $templateCache.get("templateId.html");
$.ajax({
type: "GET",
url: 'pop.html',
type: 'get',
dataType: 'html',
success: function(data) {
console.log($(template).html(data));
var options = {
content: data,
placement: "right",
html: true,
date: scope.date
};
$(element).popover(options);
},
error: function(data) {
alert(data)
}
});
return template;
}
return {
restrict: "A",
link: function(scope, element, attrs) {
console.log('entering link')
var popOverContent;
popOverContent = getTemplate("user", scope, element);
}
};
});
html:
<head>
<link data-require="bootstrap-css#3.x" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script data-require="jquery#2.1.1" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script data-require="ui-bootstrap#0.10.0" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<script data-require="angular-route#1.2.16" data-semver="1.2.16" src="http://code.angularjs.org/1.2.16/angular-route.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="https://dl.dropboxusercontent.com/s/a98aey2mlu0h511/bootstrap-tooltip.js"></script>
<script src=" https://dl.dropboxusercontent.com/s/s1imyubboz1qjtl/bootstrap-popover.js?m="></script>
<script src="script.js"></script>
</head>
The error was in your <script> tags list : http://plnkr.co/edit/GUlSHxy6aEwfVZuXFwDM?p=preview
<script src="https://dl.dropboxusercontent.com/s/a98aey2mlu0h511/bootstrap-tooltip.js"></script>
<script src="https://dl.dropboxusercontent.com/s/s1imyubboz1qjtl/bootstrap-popover.js?m="></script>
<script src="script.js"></script>
Related
I have the following setup, which makes the popover appear on the second hover event, since it is not yet been created. The data is called via ajax, and I need to somehow create the .popover() before this, yet activate it successfully afterwards.
$('.entry').on('mouseenter', function () {
var achievementId = $(this).attr('data-entry-achievement-id');
var entry = this;
var entryData = function(response) {
var result = response;
$(entry).popover({
html: true,
placement: 'top',
trigger: 'hover',
title: result.data.definition,
content: result.data.achieved_at
}, "show");
}
$.ajax({
type: "GET",
url: 'href here..',
datatype: "json",
success: entryData,
});
});
How can I achieve this?
This works, but then, due to server response or whatever reason, I get the following error:
$('.entry').popover();
$('.entry').hover( function () {
var achievementId = $(this).attr('data-entry-achievement-id');
var entry = this;
var entryData = function(response) {
var result = response;
$(entry).popover('destroy').popover({
html: true,
placement: 'top',
trigger: 'hover',
title: result.data.definition,
content: result.data.achieved_at
});
$(entry).popover("show");
}
$.ajax({
type: "GET",
url: '/bettleverse/get-achievement-info-for-hover/?achievement=' + achievementId,
datatype: "json",
success: entryData,
});
});
// Error shown in console:
tooltip.js:380 Uncaught TypeError: Cannot read property 'trigger' of null
at HTMLDivElement.complete (tooltip.js:380)
at HTMLDivElement.fn (jquery.js:4496)
at HTMLDivElement.handle (transition.js:54)
at HTMLDivElement.dispatch (jquery.js:4737)
at HTMLDivElement.elemData.handle (jquery.js:4549)
at Object.trigger (jquery.js:7807)
at HTMLDivElement.<anonymous> (jquery.js:7875)
at Function.each (jquery.js:365)
at jQuery.fn.init.each (jquery.js:137)
at jQuery.fn.init.trigger (jquery.js:7874)
You can add some loading message or spinner when popover is hover so that message will be shown and when response is recieve from ajax you can replace it .
Demo Code :
$('.entry').popover({
title: "Coming..",
placement: 'bottom',
trigger: 'hover',
html: true,
content: function() {
return "<i class='fa fa-spinner fa-pulse fa-2x fa-fw'></i>"
}
});
$('.entry').on('mouseenter', function() {
var achievementId = $(this).attr('data-entry-achievement-id');
var entry = this;
/* var entryData = function(response) {
var result = response;*/
setTimeout(function() { //this is just for demo to show effect after ajax success
//get div popover classs..find then popover content
$(entry).siblings(".popover:first").find(".popover-title").text("Done ..") //for title change
var popover = $(entry).siblings(".popover:first").find(".popover-content");
popover.text("YOUR NEW TEXT"); //for body change
}, 1000)
/*}
/*$.ajax({
type: "GET",
url: '',
success: entryData,
});*/
});
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<a data-entry-achievement-id="ss" class="entry" title="">Testlink1</a>
I have this code in my javascript:
$(document).ready(function() {
$('#theatreC').on('click', function() {
$.ajax({
type: "POST",
url: '/Inicio.html',
data: {
llama: teatro
},
datatype: 'html',
success: function success(data) {
$('#mainPage').html(
"<p>Buscando...</p>"
);
},
error: function error(data) {
$('#mainPage').html(
"<p>Error</p>"
);
}
});
});
});
and it doesn't do anything. I checked the console, but there's no error about the script. I want that, when the user clicks on the list element with id "theatreC", it writes in the with id "mainPage". This is the header of my html file:
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="Fuentes/Fuentes.css">
<link rel="stylesheet" href="css/estilos.css">
<link rel="stylesheet" href="Icon.css">
<script src="//code.jquery.com/jquery-latest.js"></script>
<script src="script.js"></script>
</head>
I am trying to build an autocomplete search bar, using a JSON large file containing millions of rows as source.
To have better performance, it is not desired to have Ajax requests to a PHP script making %like% requests to a Database.
I started playing around with JQuery to achieve it but I can't get the JSON function to work.
What are some ways to improve the code below to get better performance when dealing with a large json file?
Thank you very much!
Here is the HTML:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>Custom Search</title>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/redmond/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<input />
</body>
</html>
Here is the javascript, not working properly:
$(function() {
$.widget("custom.catcomplete", $.ui.autocomplete, {
_renderMenu: function(ul, items) {
var that = this,
currentCategory = "";
$.each(items, function(index, item) {
if (item.name != currentCategory) {
ul.append("<li class='ui-autocomplete-name'>" + item.name + "</li>");
currentCategory = item.name;
}
that._renderItemData(ul, item);
});
}
});
$("input").catcomplete({
delay: 0,
source: function(request, response) {
$.ajax({
url: "data.json",
dataType: "json",
data: {
term: request.term
},
success: function(data) {
var cat_data = $.map(data, function(item) {
return {
name: item.name
};
});
$("#searchfield").catcomplete({
delay: 0,
source: cat_data,
minlength: 0
});
}
});
},
minlength: 0
});
});
Here is the JSON data:
[{
"unit":12345,
"name":"Car Batteries",
"type":"HardGood",
"price":0.50,
"category":[
{"id":"1","name":"Automobile"},
{"id":"2","name":"Batteries"}]}
{
"unit":2345,
"name":"Soap",
"type":"Hygiene",
"price":1.00,
"category":[
{"id":"3","name":"Hygiene"},
{"id":"4","name":"Bathroom"}]}
{
"unit":56573,
"name":"Camera",
"type":"Photography",
"price":700.50,
"category":[
{"id":"6","name":"Photography"},
{"id":"7","name":"Gadgets"}]}
{
"unit":94893,
"name":"iPhone Cable",
"type":"Cables",
"price":0.50,
"category":[
{"id":"19","name":"Cables"},
{"id":"20","name":"Mobile"}]}]
I am new to React, and I'm making a webpage to show a list of items.
I have this React Code in a file called admins.js:
//more code
var AdminsBox = React.createClass({
getInitialState: function() {
return {adminsList: []};
},
setAdminsArray: function(data) {
this.setState({adminsList: data});
},
render: function() {
return (
<div>
<AdminsContentBox adminsList={this.state.adminsList}/>
</div>
);
}});
var AdminsBoxRender = ReactDOM.render(
<AdminsBox />,
document.getElementById('adminsContent')
);
And in the file index.jsp:
<html lang="es">
<head>
<link rel="stylesheet" href="base.css" />
<script src="react.js"></script>
<script src="react-dom.js"></script>
<script src="browser.js" charset="utf-8"></script>
<script src="jquery.min.js"></script>
<script src="marked.min.js"></script>
<link rel="stylesheet" href="fonts.css">
<link rel="stylesheet" href="material.indigo-blue.min.css">
<script type="text/babel" src="admins.js"></script>
<script>
$(document).ready(function() {
$.ajax({
url: 'myUrlServlet',
type: 'POST',
data: "function=getAdmins",
dataType: "json",
success: function(data){
AdminsBoxRender.setAdminsArray(data);
}
});
});
</script>
</head>
<body>
<div id="adminsContent"></div>
</body>
The error I get is AdminsBoxRender is not defined.
What am I doing wrong?
Thank you in advance.
That's not the proper way to fetch data for your component, you should fetch it in componentDidMount()
var AdminsBox = React.createClass({
getInitialState: function() {
return {adminsList: []};
},
componentDidMount: function(){
$.ajax({
url: 'myUrlServlet',
type: 'POST',
data: "function=getAdmins",
dataType: "json",
success: function(data){
this.setState({adminsList: data});
}
});
},
setAdminsArray: function(data) {
this.setState({adminsList: data});
},
render: function() {
return (
<div>
<AdminsContentBox adminsList={this.state.adminsList}/>
</div>
);
}});
window.AdminsBoxRender = ReactDOM.render(
<AdminsBox />,
document.getElementById('adminsContent')
);
You should keep the stuff related to React "inside" React.
Your approach would fall under the heading of "fighting the framework".
I would recommend going with QoP's first recommendation rather than attaching the component to the window object.
I have this short piece of code:
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<script type="text/javascript">
$("#term").autocomplete({
source: function(request, response) {
$.ajax({
url: 'http://query.yahooapis.com/v1/public/yql',
dataType: 'JSONP',
data: {
format: 'json',
q: 'select * from xml where url="http://google.com/complete/search?output=toolbar&q=' + encodeURIComponent(request.term) + '"'
},
success: function(data) {
response($.map(data.query.results.toplevel.CompleteSuggestion, function(item) {
return { label: item.suggestion.data, value: item.suggestion.data };
}));
}
});
}
});
</script>
</head>
<body>
<label for="term">Search term: </label>
<input id="term" />
</body>
</html>
It is working good online at JsBin: JsBin preview
However when I copy code to desktop so I can work with it it doesn't work (it used to work however) What am I doing wrong?? Why is this not working except online??
try wrapping the javascript code inside the ready handler, jsbin does it automatically
$(document).ready(function(){
//your code here
});
or the short cut
$(function(){
//your code here
});
this wil execute the script once the DOM has finished loading, or as an alternative you can place the javascript at the end of the document so it is executed when the DOM has loaded
You are referring to the input element before it has been created. Perform your autocompletion initialization after the DOM elements have been set up.
...
<script type="text/javascript">
$(function() {
$("#term").autocomplete({
source: function(request, response) {
$.ajax({
url: 'http://query.yahooapis.com/v1/public/yql',
dataType: 'JSONP',
data: {
format: 'json',
q: 'select * from xml where url="http://google.com/complete/search?output=toolbar&q=' + encodeURIComponent(request.term) + '"'
},
success: function(data) {
response($.map(data.query.results.toplevel.CompleteSuggestion, function(item) {
return {
label: item.suggestion.data,
value: item.suggestion.data
};
}));
}
});
}
});
});
</script>
...