I have written a controller. When I click the button from view, this controller generic 'button' is called as follows:
'button': {
tap: function() {
Ext.data.JsonP.request({
url: 'http://download.finance.yahoo.com/d/quotes.csv',
params: {
s: '^BSESN',
f: 'nsl1op'
},
callbackKey: 'callback',
scope: this,
success: function( res, req ) {
Ext.example.msg('Sucess!', 'CSV file successfully generated.');
Ext.data.StoreManager.get('Files').load();
},
failure: function( res, req ) {
console.log('Failed to load csv file.');
}
});
....
....
....
It timesout and failure is called "Failed to load csv file."
The original URL I am using is "http://download.finance.yahoo.com/d/quotes.csv?s=^BSESN&f=nsl1op".
I would like know where I am going wrong.
You're requesting a CSV file via JSONP.
The file will be injected into the DOM via a '' tag (which is how JSONP works), but since it's not a valid JavaScript file, your callback (callbackKey: 'callback') is never executed, so Sencha Touch will fire the timeout handler, seeing the callback has not been fired by the injected <script> tag.
You probably need to change the URL to something that is actually JSONP (iow valid JavaScript wrapped in a callback), not a CSV file.
Related
I'm trying to build a file upload with Next.js and Ant Design using React.
On localhost, everything works fine. When I deployed the instance and try to upload a file, I get the following error:
Request URL: https://my-app.my-team.now.sh/url/for/test/
Request Method: POST
Status Code: 405
Remote Address: 34.65.228.161:443
Referrer Policy: no-referrer-when-downgrade
The UI that I use looks like the following:
<Dragger {...fileUploadProps}>{renderImageUploadText()}</Dragger>
where fileUploadProps are:
const fileUploadProps = {
name: 'file',
multiple: false,
showUploadList: false,
accept: 'image/png,image/gif,image/jpeg',
onChange(info) {
const { status } = info.file;
if (status === 'done') {
if (info.file.size > 2000000) {
setUploadSizeError('File size is too large');
} else {
handleFieldValue(API_FORM_FIELDS.PICTURE, info);
}
} else if (status === 'error') {
setUploadSizeError(`${info.file.name} file upload failed.`);
}
},
};
I assume, it has to do with the server side rendering of Next.js? On the other hand, it might not, because by the time I navigated to url/for/test it should render on the client.
How do you implemented file uploads with Ant Design and Next.js?
Got this to work by passing the prop action="https://www.mocky.io/v2/5cc8019d300000980a055e76" to the <Upload/> component.
The ANTD Upload component must make a POST request to upload the file. It either makes that POST request to the current url, which results in the 405, or to the url specified by the action prop. https://www.mocky.io/v2/5cc8019d300000980a055e76 works as this url.
Inspired by Trey's answer (and because I didn't want to send data anywhere outside my domain) I made a no-op api route that simply returns a success, and then pointed Ant Design <Upload>'s action to /api/noop
/* pages/api/noop.tsx */
import { NextApiRequest, NextApiResponse } from 'next'
export default async function handler(
req: NextApiRequest,
res: NextApiResponse
) {
res.status(200).end('noop')
}
/* Wherever I'm using <Upload /> */
<Upload
...otherProps
action={'/api/noop'}
>
Note: this is specific to Next.js, which makes it easy to create API routes.
This works for me.
By default, the ANTD upload component makes a POST request to upload the file. So, to avoid this, add a customRequest props on Upload as below.
customRequest={({ onSuccess }) => setTimeout(() => { onSuccess("ok", null); }, 0) }
i am trying to create status page which check database for the job status every 5 minutes and then updates the user about the status of the job..
So once the job is finished, I want to move from the current page to result page..
To update the status i m using JavaScript :
function() {
setInterval(function() {
var uuid =" \'${uuid}\'";
var jobid =" \'${jobid}\'";
console.log();
$('#checkstatus').load('/jobque/connectdatabase',{jobid:jobid,uuid:uuid});
}, 5000);
});
Checking status works correctly. I tried using redirect or forward but both these terms loads the result page into current page. I want to go to next page not load into current page ..
What are the other option available ?
Your javascript uses jquery to load the results of a call to a controller action into the named element.
Why not check the result of your call to the controller action and if it indicates success, then use javascript to redirect to your desired page.
controller action:
def checkStatus() {
if (status_check_ok) {
render 'url_of_page_for_redirect'
return
}
render status:409 // failure
}
javascript on web page:
$.ajax({
timeout:5000,
type: 'POST',
url: controller_action_url_for_checkStatus,
success: function(data){
window.location.href=data
},
error: function(data){
// do something else
}
});
I am attempting to use jQuery-File-Upload for showing the preview of the uploaded image. This is working fine. The code for file upload is as shown below
$('#Image').fileupload({
url : "/FileUpload/Upload",
autoupload:false,
add: function (e, data) {
gm.layout.loaderOpen(); //open loader
data.submit();
},
done: function (e, data) {
console.log("done")
if (data.response().jqXHR.status === 200)
$('#processImage').attr('src', data.response().jqXHR.responseText);
},
always: function (e, data) {
gm.layout.loaderClose();
}
})
However apart from the image preview the form also has other fields which the user fills up and then submits the form. Now I am trying to use ajax to submit and collect the data by serialzing the form
var formData = $('form').serializeArray();
$.ajax({
type:"POST",
url: "{url}",
data: formData,
contentType: false,
processData:false,
success: function (data) {
alert("whatever");
}
});
This ajax submit fails as long as I have the fileupload for the html input control. With the file upload the multimedia data doesn't reach the server on submit
However, in the absence of fileupload for the same control, everything works fine and I can get the file content on the server.
Any idea what I am doing wrong?
For loading the google oauth client lib we have to use this script tag
<script src="https://apis.google.com/js/client.js?onload=load"></script>
where the load method will be called after client.js is loaded.
i am using dojo in my application
How can i load this using dojo?
i have tried with dojo/request/script but the callback method is taken by the dojo which is not able to modify
any help how i can do this,
Thanks
call back is sent to the deferred then parameter::
require(["dojo/request/script", "dojo/dom", "dojo/dom-construct", "dojo/json", "dojo/on", "dojo/domReady!"],
function (script, dom, domConst, JSON, on) {
on(dom.byId("startButton"), "click", function () {
domConst.place("<p>Requesting...</p>", "ret");
script.get("http://ajax.googleapis.com/ajax/services/search/web", {
jsonp: "callback",
query: {
"v": "1.0",
"q": "internet kittens"
}
}).then(function (data) {
//Call you function here, or deal with data
domConst.place("<p>response data: <code>" + JSON.stringify(data) + "</code></p>", "ret");
});
});
});
Fiddle::http://jsfiddle.net/D49GP/
UPDATE
You will not be able to use the normal dojo syntax for this one. The problem is that when dojo creates the callback for the then, it creastes the call back function in object.method format. This does not work because google is using window[nameoffunction] for the call back.
So since you can manually add parameters for the script IO. use below:
script.get("https://apis.google.com/js/client.js", {
//jsonp: "onload",
query: {
onload:<callbackfunction>
}
})
I'm using the new google places api with jquery/ajax. When I run this code:
$.ajax({
url: "https://maps.googleapis.com/maps/api/place/search/json?location=40.7834345,-73.9662495&radius=50&sensor=false&key=Your_API_KEY_HERE",
dataType: "jsonp",
data: {
name: 'rogue'
},
success: function( data ) {
console.log(data)
}
});
I get this error: invalid label html_attributions []; I think this is preventing me from seeing the output object in the console, although I can see the response coming back fine in the json tab in firebug
It seems like the places api does not support ajax so far.
It not enough that the server responds with proper JSON. The answering server has to support JSONP and surround the JSON answer with a callback generated by jQuery. The response must look like that:
jQuery17101705844928510487_1324249734338({"data":"whatever"});
The hack that JSONP does, is to interpret the response as script, because the script-Tag is not affected by the Same-Origin-Policy. Without the callback you have no chance to do that in the browser.
If its not supported you have to do the requests from your server..
Server-Example with PHP:
<?php
header("Content-Type:text/javascript"); // avoid browser warnings
$request = new HttpRequest("http://programmingisart.com/json-data-source.php", HttpRequest::METH_GET);
$request->send();
$json_data = $request->getResponseBody();
// wrap the data as with the callback
$callback = isset($_GET["callback"]) ? $_GET["callback"] : "alert";
echo $callback."(".$json_data.");";
Client-Example with jQuery:
<div id="json-result"></div>
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
dataType: "jsonp",
url: "jsonp-wrapper.php",
success: function(data) {
$("#json-result").html(JSON.stringify(data));
},
error: function() {
alert("error");
}
});
});
</script>
You can replace the PHP-code with any other server-platform and do the required steps.
HTTP-Request to a JSON source
Wrap the JSON as with a callback-function