There is an image I want to display that depends on the response of a POST request.
<img ng-src="executePost()">
This is the controller.
$scope.executePost = function() {
$http.post('/post', {'data':'reallylongstuffthatcantbedonewithget'}).then(function(result){
console.log(result);
}, function(data, status){});
}
The response (i.e. console.log(result)) is a image/png type. How can I replace the image with the one returned via the POST request? Do I have to send the image back base64 encoded or is there another way?
I think I would perform a get on the image url if the post returns success.
The base64 solution seems a way of achieving your goal, but I'd think a post isn't meant to retrieve data.
Related
I have a JS array. Each element of that array is a form data in JSON format. I want to loop through this array and submit each form data to the server WITHOUT using AJAX. Can this be done? Any ideas would be a help.
One solution I know is Using Angualar JS service $http
$http({
method : 'POST',
url : 'clone.php or servlet or other calls',
data : $scope.user, //forms user object
headers : {'Content-Type': 'application/x-www-form-urlencoded'}
})
.success(function(data) {
//do something
});
References :
Angularjs - simple form submit
http://tutsnare.com/post-form-data-using-angularjs/
I don't see if you mentioned where this is executing but if it's not client side (I'm assuming server side since this is tagged CF), you could CFHTTP each item by looping through the array.
I am wondering if it's a good practice to use the same URL to provide both the HTML and JSON response.
For example if I am building a blog and I have a URL that provides the latest items, I would have a URL like /latest
I would like to use the same URL for my endpoint in angular to retrieve the items so I have following route in my node implementation:
app.get("/latest",function(req,res){
var type = req.header("Accept");
if(type.indexOf("application/json") > -1){
getLatestItems(req,res);
}
else {
res.render("/latest", {user: req.session.username, current: "latest"});
}
});
I was wondering if this approach is OK or is it better to have a separate set of endpoints for my JSON responses?
I would create a separate URL pattern for your backing API.
So in Angular you can still have a URL route /latest, but you will provide the JSON data via a URL like /api/latest.
This will create less confusion and also allow you to easily integrate the API with other stuff since it will only be returning JSON.
I am working with fabric.js inside of backbone.js, and trying to figure out how to load a Base64 image using fabric's command:
fabric.Image.fromURL( 'url', function(img)....
It works fine when I plug in a static url, like:
fabric.Image.fromURL('http://www.domain.com/image.jpg', function(img) {
img.set({ left: ui.offset.left, top: ui.offset.top});
canvas.add(img);
});
but I cannot get a Base64 image to load successfully. How I am I supposed to solve this problem?
All of the above answers are correct. But without an example, the answers aren't obvious.
fabric.Image.fromURL('data:image/png;base64,iVBORw0KGgo....', function(img) {
img.set({ left: ui.offset.left, top: ui.offset.top});
canvas.add(img);
});
Try: data:image/jpeg;base64,"+url. If this doesn't work then maybe your base64 is broken or you might need to tweak the base64 to unit8 conversion technique provided here and add the image data to the image object placed inside the canvas.
Data URI
Make sure your data url is according to the following format:
data:[< mediatype >][;base64],< data >
MDN
<data> above should be a valid base64 string.
If you want to test whether it's fabric that's not rendering the url or url isn't correct, try to open the whole data url in browser, browser will render the image if it's a correct data url.
fabric should just work fine for a base64 data url as it works for http image address.
I'm trying to post an array using a POST request to a specific page, the target page generates a csv and send me back the stream, right now i'm doing using ExtJs Ajax class, but that won't work as i need to make a normal HTTP request not ajax, my current code is as follows:
Ext.extend(Players.panel.Home,MODx.Panel,{
exportSubscribers: function(btn,e) {
MODx.Ajax.request({
url: Players.config.connectorUrl
,params: {
action: 'mgr/player/getSubscribers'
}
});
}
});
The exportSubscribers function is executed from a normal ExtJs button
{ xtype: 'button'
,text: 'Export Subscribers'
,preventRender: true
,handler: this.exportSubscribers
}
What class should i use to turn this into a normal request?
Thanks.
There isn't a class to do a normal request. I known two ways to accomplish a file download:
Use a hidden form in the page, replace the field values and invoke the form's .sumbit method from ExtJS button handler to do the POST request you want.
Replace your button by an HTTP anchor if you can use a GET request to make the server return the file: Download CSV'
You'd be better off making a local request to your server, and then in your server-side code make a cURL request to the CSV source. That way, you can make a non XMLHttpRequest method to get your data.
I am using cakePHP 1.26.
I got an Input Text box which contains a URL and I want to submit the URL and stored it in the Database using Jquery AJAX.
Here is the HTML part:
<input type="text" id="testing" value="https://stackoverflow.com/questions/ask">
This is the JQuery part:
var whatContent=$("#testing").val();
var curl="http://localhost:8080/test/grab/"+whatContent;
$.ajax({
type: "POST",
url: curl,
success: function(data) {
alert(data);}
});
This is the code for the Action in the Controller:
function grab($w=null){
if($w!=null){
return $w;
}
}
The code worked and I could see the Alert Message pop up, but there was something missing in the message. I mean I supposed to see the whole URL like this:
https://stackoverflow.com/questions/ask
But not, I just saw part of it instead:
http://stackoverflow.com
Later I altered the value in the Input Text box like this:
<input type="text" id="testing" value="https://stackoverflow.com/faq">
But again, the returned value was still
http://stackoverflow.com
cakePHP seemed to conside the URL as some parameters rather than a URL.
Please help
When you append the content to the end of your "curl" variable like you are, you are attempting to add it to be retrieved through a GET variable and will get a result in a request like http://localhost:8080/test/grab/http://stackoverflow.com/questions/ask. Clearly this is an invalid request. Your GET variable parsing is not going to be consistent and a dangerous way of passing data back to your controller (especially if users will be able to edit the appended value).
Instead, you should use the data attribute in jQuery to pass this information back in your POST request as described in the instructions here: http://api.jquery.com/jQuery.ajax/
On the Cake side, you'll be able to receive this value as $this->data['IDValueYouConfigured']. For example, if your AJAX request was like:
var whatContent=$("#testing").val();
var curl="http://localhost:8080/test/grab/";
$.ajax({
type: "POST",
url: curl,
data: "formValue="+whatContent,
success: function(data) {
alert(data);}
});
where formValue is the IDValueYouConfigured that I mentioned earlier.
More importantly, you seem to be misunderstanding proper use of the Cake framework and could be performing all of these functions MUCH more simply using things like the JsHelper, FormHelper, etc. I would recommend using the most RECENT version of Cake (1.3.3) and follow through the Blog tutorial at least once. This will lead to better questions which will be more likely to get helpful answers. Hope this helps.