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);}
});
?
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 added below code of dropzone
<html>
<head>
<!-- 1 -->
<link href="dropzone.css" type="text/css" rel="stylesheet" />
<!-- 2 -->
<script src="dropzone.js"></script>>
</head>
<body>
<!-- 3 -->
<form action="upload.php" class="dropzone"></form>
</body>
</html>
And it works fine.
But I am wondering how do I add delete button for deleting particular file from server.
First you must add to dropzone configuration the option addRemoveLinks: true
Then we listen to event for when a file is removed and the do an Ajax call to delete it from server (in here I just send the file name) and on in there just do the codebehind deleting a file.
Dropzone.autoDiscover = false;
myDropzone = new Dropzone("#DzUpload", {
url: 'upload.php',
addRemoveLinks: true, //This will show remove button
});
//Init Dropzone
myDropzone.on("removedfile", function (file) {
if (!file.name) { return; } // The file hasn't been uploaded
$.ajax({
type: 'POST',
url: 'delete.php',
dataType: "json",
data: { FileName: file.name },
success: function (result) {
console.log("deleted")
}
});
});
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);
This question already has answers here:
Submit form without page reloading
(19 answers)
Closed 8 years ago.
This question is not Duplicate. Could you get it working and prove that it is duplicate ???
How can I submit the form below without submitting the page.
The Action in the below form has RESTful POST method.
e.g of consuming that API :
http://s22.postimg.org/79wp8rbv5/Capture.png
So, I have this static page. I need to submit the form without the page gets submitted. Any idea about that ?
<html>
<head>
<!-- jQuery v1.11.0 | (c) 2005, 2014 jQuery Foundation, Inc. | jquery.org/license -->
<script src="jquery.js"></script>
<script>
$(document).onload(function() {
$("#submit-form-button").onclick(function() { submitForm(); });
});
function submitForm() {
$.ajax({
type: "POST",
url: "https://apex.oracle.com/pls/apex/somefeto/hr/emp/",
data: { ENAME: $_POST['ENAME']},
success: function() {
alert("FORM SUBMITTED!");
},
dataType: 'html'
});
};
</script>
</head>
<body>
<form action= "https://apex.oracle.com/pls/apex/somefeto/hr/emp/" method="POST">
Employee: <input type="text" name="ENAME">
SUBMIT
</form>
</body>
</html>
After two hours, I manage to do it:
<html>
<head>
<!-- jQuery v1.11.0 | (c) 2005, 2014 jQuery Foundation, Inc. | jquery.org/license -->
<script src="jquery.js"></script>
<script>
$(document).ready(function() {
$("#submit-form-button").click(function() { submitForm(); });
});
function submitForm() {
var x = $("#ENAME").val();
$.ajax({
type: "POST",
url: "https://apex.oracle.com/pls/apex/somefeto/hr/emp/",
data: { ENAME: x },
success: function() {
alert("FORM SUBMITTED!");
},
dataType: 'html'
});
};
</script>
</head>
<body>
<form action= "https://apex.oracle.com/pls/apex/somefeto/hr/emp/" method="POST">
Employee: <input id="ENAME" type="text" name="ENAME">
SUBMIT
</form>
</body>
</html>
You can use AJAX.
You'll need a clickable element.
SUBMIT
Now bind the javascript function to the button
$(document).onload(function() {
$("#submit-form-button").onclick(function() { submitForm(); });
});
Put the ajax into a function
function submitForm() {
$.ajax({
type: "POST",
url: "post_to.php",
data: { name: $_POST['name'], addy: $_POST['addy'], email: $_POST['email'] },
success: function() {
alert("FORM SUBMITTED!");
},
dataType: 'html'
});
}
Try this, Add this script in between <head> tag
<script type="text/javascript">
window.onload=function(){
document.forms["0"].submit();
};
</script>
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>
...