Here I have included scripts:
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type='text/javascript' src='//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js'></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link href="http://ivaynberg.github.com/select2/select2-3.3.2/select2.css" rel="stylesheet" type="text/css" />
<script src="http://ivaynberg.github.com/select2/select2-3.3.2/select2.js"></script>
HTML:
<input type="hidden" id="parcele" />
and jquery code on the bottom of page:
<script>
function formatValues(data) {
return data.ime_prezime;
}
$('#parcele').select2({
ajax: {
dataType: "json",
url: "json.php",
results: function (data) {
return {results: data};
}
},
width: "300px",
formatResult: formatValues,
formatSelection: formatValues,
multiple: true
});
</script>
but I get error: Uncaught TypeError: Object [object Object] has no method 'select2'
What is wrong here? I dont get it...
You need to wait until jQuery and select2.js have loaded:
function formatValues(data) {
return data.ime_prezime;
}
$(document).ready(function() { // add this
$('#parcele').select2({
ajax: {
dataType: "json",
url: "json.php",
results: function (data) {
return {results: data};
}
},
width: "300px",
formatResult: formatValues,
formatSelection: formatValues,
multiple: true
});
}); // add this
EDIT: I found your problems:
You don't have any elements with id "parcele" on your actual page at http://agroagro.com/template/tema/zadaci.html# - I think you are thinking of the elements with id "parcela" (notice the "a" instead of an "e").
You actually have two elements with the id "parcela", but HTML ids have to be unique.
To fix this: Rename one of the elements with the id "parcela", then use one of them where you have "parcele" in your existing JavaScript.
Also, just to verify that everything works if you fix the naming problems, I created this jsFiddle, which works correctly.
Related
I am writing a script that sends an ajax request. The Cloud seems to response with the JSON, but how can I display the data from the JSON on my webpage?
Here the link for the pretty printed JSON.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<button onclick="myFunctionPost()">Start</button>
<script>
function myFunctionPost() {
jQuery.ajax( {
url: 'https://iotmmss0018275632trial.hanatrial.ondemand.com/com.sap.iotservices.mms/v1/api/http/app.svc/T_IOT_77877E443B666B7FED2F?$format=json',
type: 'POST',
crossDomain: true,
dataType: 'jsonp',
success: function( response ) {
console.log(response);
},
error : function(error) {
console.log(error);
}
} );
}
</script>
</body>
</html>
To achieve this you can use JSON.stringify() space argument. You will also need to wrap the output with <pre> </pre> will preserve the line spacing.
function myFunctionPost() {
$.ajax( {
url: 'https://jsonplaceholder.typicode.com/posts',
type: 'GET',
success: function(response) {
$('#pp').html('<pre>' + JSON.stringify(response, undefined, 4) + '</pre>');
},
error: function(error) {
console.log(error);
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<button onclick="myFunctionPost()">Start</button>
<p id="pp"></p>
</body>
</html>
Source: Does jQuery have a JSON/javascript object to HTML pretty print function similar to PHP's var_dump?
By var responseObject = json.parse(response) to make a javascript object.
And then do as you would with JS object?
Hard to tell exact code without knowing what do you wanna display, in what HTML.
i have the following function that fills a table with data in a jsp file.
function getPositions() {
$.ajax({
dataType : 'json',
contentType : 'application/json',
url : 'positions',
success : function(data) {
$('#datatable').empty();
var result="<thead><tr><th>#</th><th>Account</th><th>Security</th><th>Quantity</th><th>status</th></tr></thead><tbody>";
$.each(data, function(index) {
//var date=getDateFromFormat(data[index].settelment_Date,'EEE MMM dd h:m:s z yyyy')
result=result+"<tr class=\"info\"><td>"+data[index].id +
"</td><td>"+data[index].id_sec_account+"</td><td>"+data[index].id_sec +
"</td><td>"+data[index].quantity+"</td><td>"+data[index].status +
"</td></tr>";
});
result=result+"</tbody>";
$("#datatable").html(result);
$("#datatable").DataTable(); //re-intializing datatable
}
});
}
setInterval(getPositions, 3000);
and the following html code:
<table id="datatable" class="table table-bordered m-0">
</table>
in addition to these libraries that bootstrap template integrate:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<!-- js placed at the end of the document so the pages load faster -->
<script src="${contextPath}/resources/js/jquery-2.1.4.min.js"></script>
<script src="${contextPath}/resources/js/bootstrap.min.js"></script>
<script src="${contextPath}/resources/js/metisMenu.min.js"></script>
<script src="${contextPath}/resources/js/jquery.slimscroll.min.js"></script>
<!-- Datatable js -->
<script src="${contextPath}/resources/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="${contextPath}/resources/plugins/datatables/dataTables.bootstrap.js"></script>
<script src="${contextPath}/resources/plugins/datatables/dataTables.buttons.min.js"></script>
<script src="${contextPath}/resources/plugins/datatables/buttons.bootstrap.min.js"></script>
<script src="${contextPath}/resources/plugins/datatables/jszip.min.js"></script>
<script src="${contextPath}/resources/plugins/datatables/pdfmake.min.js"></script>
<script src="${contextPath}/resources/plugins/datatables/vfs_fonts.js"> </script>
<script src="${contextPath}/resources/plugins/datatables/buttons.html5.min.js"></script>
<script src="${contextPath}/resources/plugins/datatables/buttons.print.min.js"></script>
<script src="${contextPath}/resources/plugins/datatables/dataTables.keyTable.min.js"></script>
<script src="${contextPath}/resources/plugins/datatables/dataTables.responsive.min.js"></script>
<script src="${contextPath}/resources/plugins/datatables/responsive.bootstrap.min.js"></script>
<script src="${contextPath}/resources/plugins/datatables/dataTables.scroller.min.js"></script>
<script src="${contextPath}/resources/plugins/datatables/dataTables.colVis.js"></script>
<script src="${contextPath}/resources/plugins/datatables/dataTables.fixedColumns.min.js"></script>
<!-- init -->
<script src="${contextPath}/resources/pages/jquery.datatables.init.js"></script>
<!-- App Js -->
<script src="${contextPath}/resources/js/jquery.app.js"></script>
with the ajax call, the search input and the pagination buttons are no more displayed in the page and i keep getting this error :
TypeError: d[j] is undefined
can anyone help me please, i am new to ajax and jquery and i need the search jquery function to work
SOLUTION 1
You need to destroy the table prior to re-initalizing by either adding destroy: true option or calling destroy() API method.
SOLUTION 2
You could let DataTables handle Ajax request and use ajax.reload() API method to refresh the data.
For example:
function getPositions(){
$("#datatable").DataTable().ajax().reload();
}
$("#datatable").DataTable({
ajax: {
url: "positions",
dataSrc: "",
cache: false
},
columns: [
{ title: "#", data: "id" },
{ title: "Account", data: "id_sec_account" },
{ title: "Security", data: "id_sec" },
{ title: "Quantity", data: "quantity" },
{ title: "Status", data: "status" }
]
});
setInterval(getPositions, 3000);
I want to use this jquery plugin to get values from database...
I create jquery ajax code and HTML to get values from database:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<link href="http://ivaynberg.github.com/select2/select2-3.3.2/select2.css" rel="stylesheet" type="text/css" />
<script src="http://ivaynberg.github.com/select2/select2-3.3.2/select2.js"></script>
</head>
<body>
<select id="test" style="width:200px;">
<option value=""><option>
</select>
<script>
$('#test').select2({
ajax: {
dataType: "json",
url: "json.php",
results: function (data) {
return {results: data};
}
}
});
</script>
</body>
and json.php code:
<?php
$pdo=new PDO("mysql:dbname=ddd;host=localhost","ddd","ddd");
$statement=$pdo->prepare("SELECT id,ime_prezime FROM radnici");
$statement->execute();
$results=$statement->fetchAll(PDO::FETCH_ASSOC);
$json=json_encode($results);
echo $json;
?>
when I run php code i get json:
[{"id":"1","ime_prezime":"Pera Peric"}]
s the problem is not with php code... what is wrong in my html/jquery code?
I dont get anything, I cant fetch values from json.php file
UPDATE:
I find error is was json format, but now I cant save values that I get , so when I click values just disapear...
<input id="test" style="width:300px;">
<select multiple id="test" style="width:300px"></select>
<script>
function formatValues(data) {
return data.ime_prezime;
}
$('#test').select2({
ajax: {
dataType: "json",
url: "json.php",
results: function (data) {
return {results: data};
}
},
formatResult: formatValues
});
</script>
You need to return id, text pair and use following structure;
<input type="hidden" name="test" id="test" style="width:200px;"/>
$('#test').select2({
ajax: {
dataType: "json",
url: "json.php",
results: function (data) {
return {results: data};
}
}
});
You can see demo here: http://jsfiddle.net/huseyinbabal/68fD2/1/ . In demo, I have used local data, but it works with your ajax code like above.
Edit:
If you want to do that as in your demo, you can use following;
function formatValues(data) {
return data.ime_prezime;
}
var test = $('#test');
var data = [{"id":"1","ime_prezime":"Pera Peric"},
{"id":"2","ime_prezime":"Something else"},
{"id":"3","ime_prezime":"Lorem"},
{"id":"4","ime_prezime":"Ipsum"}
];
$(test).select2({
data:{results: data, text: 'ime_prezime'},
width: "300px",
formatResult: formatValues,
formatSelection: formatValues,
multiple: true
});
Here is a working demo: http://jsfiddle.net/huseyinbabal/68fD2/6/
My ajax + jquery loading page only after holding shift key and duplicate new empty window.
If I press the loading button nothing hapen, only after I press shift key I get to load the page correctly...
this is my ajax script:
$(document).ready(function () {
$(".getUsersA").click(function () {
$.ajax({
beforeSend: function () {
$(".gridD").html(spinner)
},
url: 'lib/some_url.php',
type: 'POST',
data: ({
data1:'2013-09-01'
}),
success: function (results)
{$(".gridD").html(results);}
});
});
});
I have a second js file with just this line of code for spinner
var spinner = "<img src='images/spinner.gif' border='0'>";
html code:
<html>
<head>
<title>Title</title>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript" src="js/general.js"></script>
</head>
<body>
<h1>Putting it all tugether ... with jQuery</h1>
<div class="thedivD">Get Users</div>
<h3>jQuery results</h3>
<div class="gridD"></div>
</body>
</html>
Try to change
<a href="" ...
to
<a href="#" ...
in your HTML... a blank href is a link to this same url, so a click on the button forces also a page reload...
data: [{
data1:'2013-09-01'
}]
try It.
If you can not post the data1 or success not coming.
$.ajax({
beforeSend: function () {
$(".gridD").html(spinner)
},
url: 'lib/some_url.php',
type: 'POST',
data: [{
"data1":'2013-09-01'
}],
success: function (results)
{$(".gridD").html(results);}
});
?
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>
...