I want to load a json from local input file to my js script.
The json is imported and I can get the file object, but I can't properly get the JSON and parse it to a JS Object
I tried to use RequiereJS which seems to be the best and quickest solution but I can't make this line to work
require(['json!someFile.json'], function(data){
})
Here is my input in HTML :
<input type="file" class="custom-file-input" onchange="loadFile(this.file) accept="application/json">
And here my js file :
function loadFile(file) {
var myJson;
var url = URL.createObjectURL(file);
require(['json!'+url+''], function(data){
myJson = data;
}
}
Or this :
require(['json!'+file+''], function(data){
You can use ajax function from jQuery
$.ajax({
type: "Get",
url: "data.json",
dataType: "json",
success: function(data) {
},
error: function(){
alert("json not found");
}
});
Note: You need to have the file in server then only it will work.
Related
HTML here.
<form id="myForm">
<input type="text" name="name">
<input type="file" name="userImage">
<button onclick="post('./example.php')" type="button">Save</button>
</form>
Now i want to post it by using post() function
Java-script:
Function post(url){
$.ajax({
url:url,
type: 'POST',
data: $("#myform").serialize(),
success: function (data) {
alert("successfully posted.");
}
});
}
But not serialized file
My advice is: try to have apart html and js defining the event callback on "attacheventlistener" function or "on" jquery's function (this way is easier).
Your problem is that you are passing the string "url" when you need pass a valid url, so write the url directly on ajax url field or define a data attribute on your form tag, e.g. data-url="http://whatever", and catch this value from the event.
If you use jquery's "on" function is extremly easy, you could to get it data's value via jquery's "data" function over "this" var.
Something like ...
$("#myForm").on("click",
function() {
post(this.data("url"));
});
But probably you do not need url being a var.
If I understand correctly, the problem is that nothing is being posted.
The thing is is that you are trying to do a file upload via ajax, this is not wrong but it needs to be done differently shown here:
jQuery Ajax File Upload
You can add extra data with form data
use serializeArray and add the additional data:
var data = $('#myForm').serializeArray();
data.push({name: 'tienn2t', value: 'love'});
$.ajax({
type: "POST",
url: "your url.php",
data: data,
dataType: "json",
success: function(data) {
//var obj = jQuery.parseJSON(data); if the dataType is not specified as json uncomment this
// do what ever you want with the server response
},
error: function() {
alert('error handing here');
});
First of all i need to say that, if you want to upload file, i mean if your form have file input then add the form attribute enctype="multipart/form-data" according to RFC-7578. you can also see the uses http://www.w3schools.com/tags/att_form_enctype.asp.
Then move to the html part again. Suppose you have a form input like
<form action="some_domain/example.php" method="post" enctype="multipart/form-data">
<input type="file" name="file" id="fileId"/>
<input type="text" name="firstName" id="name">
<button onclick="post('some_domain/example.php')" type="button">Save</button>
</form>
Now post the file data using ajax:
function post(url){
$.ajax({
url:url,
type: 'POST',
processData:false,
contentType:false,
data: $('#fileId')[0].files[0],
success: function (data) {
alert("successfully posted.");
}
});
}
I think this should be worked fine.
UPDATE:
if you want to post text data as well then you should use FormData object.
function post(url){
var formData = new FormData();
var files = document.getElementById("fileId").files;
for (var i = 0; i < files.length; i++) {
var file = files[i];
formData.append('files[]', file, file.name);
}
formData.append('firstName',$('#name').val());
$.ajax({
url:url,
type: 'POST',
processData:false,
contentType:false,
data: formData,
success: function (data) {
alert("successfully posted.");
}
});
}
I am trying to get a jQuery var into PHP so I can use it with mysql. I have searched everywhere but nothing seemed to solve it.
I have the following jQuery code:
$('.eventRow').click(function(){
var eventID = this.id;
$.ajax(
{
url: "index.php",
type: "POST",
data: { phpEventId: eventID},
success: function (result) {
console.log('success');
}
});
$('#hiddenBox').html(eventID);
console.log(eventID);
});
If I run this, the ID is shown in both #hiddenBox and in the console.log. The console also says "Succes" from the Ajax.
I am trying to get it in the php file:
$value = $_POST['phpEventId'];
echo "<div class = 'showNumber'>"."Nummer: ".$value."</div>";
It just says: Nummer:
It also gives no error whatsoever.
Thanks for your help!
Try
var eventID = $(this).attr('id');
Where this id comes from in your code ?
Passing it as JSON often gets the results I'm looking for. The server will interpret the JSON object as POST variables:
$.ajax({
url: "index.php",
type: "POST",
data: JSON.stringify({phpEventId: eventID}),
contentType: "application/json; charset=utf-8",
success: function (result) {
console.log(result);
}
});
Hi guys this script was working fine when I add a console.log but as soon as I replaced the console.log with the $.ajax() function it wont give me the result back from the php file the ajax function I used was working from my other projects but I cant seem to find out why it wont work on this snippet
Here is my js code :
$(document).ready(function(){
$("#qs").find(".chs").each(function(i,obj){
$(this).addClass("chs"+i);
$(".chs"+i).on("click",function(){
var s = $(this).data("lvs"),carrier= {"vars":s};
$.ajax({
url: aScript.php,
type: "POST",
data: carrier,
dataType: "json"
success: function(data) {
console.log(data) }
});
});
});
});
my php file looks like this
<?php
$json = $_POST['carrier'];
$data = json_decode($json);
$d = $data->vars;
echo $d;
?>
<input type="hidden" id="ss" value="<?=$d?>" />
can someone review this file for me cause I cant seem to find whats wrong please help me find out whats wrong with this script
You should wrap the filename inside quotes, as it is a string variable
$.ajax({
url: 'aScript.php',
type: "POST",
data: carrier,
dataType: "json",
success: function(data) {
console.log(data) }
});
});
There are some issues with your code
in this line url: aScript.php, the url string is not quoted, it should be url: 'aScript.php',
you set dataType: "json" but aScript.php returns html instead of json, remove that line
the data you're passing is not json, it will be serialized into key=value pairs and you'll be able to access it via $d = $_POST['vars'];
I'm using onload() and ajax to get the array from php, but it didnt work. The html page should be able to get the array from n1.php and alert("GOOD"), but it's not giving any response, not even alerting GOOD or BAD so i really dont know what's wrong with the code. How can I fix this??
n1.html:
<!DOCTYPE html>
<html>
<body onload="getArr();">
here
</body>
<script type="text/javascript">
function getArr(){
alert('return sent');
$.ajax({
url: "n1.php",
dataType: 'json',
success: function(json_data){
var data_array = $.parseJSON(json_data);
var rec = data_array[0];
alert("GOOD");
},
error: function() {
alert("BAD");
}
});
}
</script></html>
n1.php:
<?php
$output = array("cat","dog");
echo json_encode($output);
?>
The request must contains the type of request. Also the dataType refers on data you are going to send,as long as you don't send any data, it does not need here.
Try this:
$.ajax({
url: "n1.php",
type: "GET",
success: function(json_data){
var data_array = $.parseJSON(json_data);
var rec = data_array[0];
alert("GOOD");
},
error: function() {
alert("BAD");
}
});
Try this
$.ajax({
url: "n1.php",
dataType: 'json',
success: function(json_data){
var data_array = json_data; // Do not parse json_data because dataType is 'json'
var rec = data_array[0];
alert("GOOD");
},
error: function() {
alert("BAD");
}
});
Now, two things to note here:
You have not passed HTTP Method in the ajax but by default it is GET as mentioned here in jQuery AJAX docs. Please pass appropriate method type if it is not GET.
Since you have sent dataType as 'json', you need not parse json received in the response in success handler.
I am trying to get JSON data from Yahoo's Finance API.
$.getJSON("http://query.yahooapis.com/v1/public/yql?q=select%20%2a%20from%20yahoo.finance.quotes%20WHERE%20symbol%3D%27WRC%27&format=json&diagnostics=true&env=store://datatables.org/alltableswithkeys&callback", function(data) {
// I am parsing JSON string using data here
});
Problem is when when stock is close, I need to show last trade values. I found a link which returns values as a CSV file. So I need to download it and parse it with jQuery.
This is what I have done so far:
$.getJSON("http://query.yahooapis.com/v1/public/yql?q=select%20%2a%20from%20yahoo.finance.quotes%20WHERE%20symbol%3D%27WRC%27&format=json&diagnostics=true&env=store://datatables.org/alltableswithkeys&callback", function(data) {
if(data.query.results.quote.DaysLow == null && data.query.results.quote.DaysHigh == null){
//When stock is closed this section works
var date = data.query.results.quote.LastTradeDate;
var datesplit = date.split('/');
$.ajax({
type: "GET",
url: "http://ichart.finance.yahoo.com/table.csv?s=WRC&a="+ datesplit[1] +"&b="+ datesplit[0] + "&c="+ datesplit[2] +"&d="+ datesplit[1] +"&e="+ datesplit[0] +"&f="+ datesplit[2] +"&g=d&ignore=.csv",
dataType: "text",
success: function(data) {
console.log(data);
}
});
}
else{
//When stock is not closed this section works
//There is no problem in this section
}
});
This is the error message I get:
XMLHttpRequest cannot load
http://ichart.finance.yahoo.com/table.csv?s=WRC&a=18&b=9&c=2012&d=18&e=9&f=2012&g=d&ignore=.csv.
Origin null is not allowed by Access-Control-Allow-Origin.
Can you please help me for downloading CSV file?
I think there is no need of ajax you can simply call it like
document.location.href = "http://ichart.finance.yahoo.com/table.csv?s=WRC&a="+ datesplit[1] +"&b="+ datesplit[0] + "&c="+ datesplit[2] +"&d="+ datesplit[1] +"&e="+ datesplit[0] +"&f="+ datesplit[2] +"&g=d&ignore=.csv";
It will not reload page
You can do it by using any server side script
eg :-
$.ajax({
type: "GET",
url: "your-server-side-file.php",
dataType: "text",
success: function(data) {
console.log(data);
}
});
and in that server file your-server-side-file.php process the csv file parse the value. return with your own format.
For example php csv file parsing http://php.net/manual/en/function.fgetcsv.php