How to use JSfiddle echo feature in javascript? - javascript

Below JS fiddle is the sample echo feature done onload of the page. We are getting the value 1 from the json response.
JSFiddle
And, I'm trying to add username and emailid and get back the response. But I'm getting an error like
{"error":"key missing: title"}
This is my fiddle OwnJSFiddle
Can someone help on this to fix this issue? I wanted to add name and emailid through echo/json and get the response and show in html.

I have found a solution yet I had to modify your code to work a little differently.
jQuery Version
JSFiddle
In this fiddle, I add a submit event listener to your form.
I use e.preventDefault() to prevent default submit action.
Later, I use JSON.stringify() on your JSON object.
Vanilla JS Version
JSFiddle
In this fiddle, I used XHR request to achieve the same thing.
If using XHR requests for /echo/json/ you need to use the application/x-www-form-urlencoded header and stringify the parameters into the URL even though it's a POST request.
I'd say the issue was that you were trying to POST via $.ajax() and submit at the same time.

Related

ajax post big data Jquery

I am facing problem for sending big form data using ajax function to server i.e php page. In my page html input fields will add by users for making a quote. And user add many fields then all datas wont posted to server php page. Only some information will save in database and others will lost.
I have used post method in ajax function.
If you have any suggestion for this problem please suggest me.
Detect place of the problem
Check POST request. Did you see there your data. In case you see - there is only one reason some where on the server. It couldn't be limit of the post - because in this case you will never get any information on the server and all request would be cancelled.
Another place is in your javascript:
1. you make mistake in name of field
2. bug some where in library
3. bug in your code.
try to debug javascript and understand what happen there.

JSFiddle - Use POST request error

I've looked at several other SO questions about this same error, but they don't seem to quite match what I'm doing.
I'm working up an AngularJS app & trying to do pagination within JSFiddle. When I click on my link, I get an error: {"error": "Please use POST request"}
Most sources say that I need to simply change my form method. But no where am I using GET or POST, so not sure where the hangup is happening. Even tried setting breakpoints, but that didn't help much.
Help would be appreciated!
note- To get the same error message: you need to select "RUN" & then click on the link
When you first link to the jsfiddle it works because the frame shows http://fiddle.jshell.net/enigmarm/L7CSD/6/show/. When you click RUN it posts the form to http://fiddle.jshell.net/_display/ to render your page. Going to http://fiddle.jshell.net/_display/ in the browser (ie: using GET) will give you the error.
You have an href="" which means that clicking it regets the page using the GET verb instead of the post that created the rendered page. Don't put href="" on that or stop it from requesting the page.
This can happen when using a XSS script-blocker like NoScript, which changes cross-site requests from POST to GET.

Intercept and edit ajax data before submit

So I am trying to write a script that will go out and edit the html for all of my tumblr blogs, so i dont have to do it manually.
The problem is that tumblr doesnt really have a form that i can edit, and then submit through JS.. they have a very strange way of compiling the custom html and submitting an ajax request.
So, i was wondering if there was a way to intercept the ajax call before it goes out, edit a field in the data, and then make the submission my self?
I tried something like this:
var submitted = false
$("body").ajaxSuccess(function(evt, request, settings){
j = $.parseJSON(settings.data)
j.custom_theme = "PUT HTML HERE"
if (!submitted)
$.post(settings.url, j, function(data){
console.log(data);
submitted = true;
})
})
But i got a 403 forbidden error.
Does anyone have any ideas?
I'm not sure exactly what you're trying to do, but must this be done with a custom script? It sounds like this will only be used by you, so an extension should work. If so, there is a very useful Firefox extension, in the spirit of Firebug, called Tamper Data. This should be able to do what you want.
It allows you to monitor each request made by the browser, and you can turn on an option that allows you to look at, and edit, every single request before it gets sent.
Well, it's pretty obvious that ajaxSuccess isn't going to work in the way you want it to.
Assign the function which sends the AJAX request a new name and overwrite it. Call the previous function at the end of the new function, i.e. after manipulating the data the way you want.

AJAX Form Submit v/s Standard Form Submit

I am trying to implement GSA(Google Search Appliance) in my app. I want to use the REST(JSON) call that the GSA provides. The point for this question is that, the GSA needs a POST request in order to return the JSON response.
Now when I made a new dummy HTML page with a form and make a POST request with parameters I get a successful response(JSON)
But, when I try using the $.post(...) method to send a POST request to the URL I am not getting the actual response, but some error page.
I just wanted to know is there a difference between a standard submit and an ajax form submit. If yes, is there any workaround for this situation.
Please Help. Thanks in Advance.
If you want to submit the form through ajax but in the conventional way, You should have a look at jquery form plugin . Just make your submit button to type button and on click submit your form thorugh .ajaxSubmit(). I think this will solve your problem.
GSA search protocol is based on HTTP GET. All search parameters need to be passed in via query string. Also, out of box, GSA only returns either HTML or XML results. You could apply an xslt that transforms xml to JSON -- but I'm yet to find one that works really well (i.e., I've found a couple but they don't return valid JSON in all instances).

How to save an ajax response in firefox

I need to find a way to write ajax responses to a file. The responses are XML strings, which is more than fine by me.
What I would like to do, is click on something in my webpage, and save the XML that is returned to a file.
But since I know, that Javascript can't access local files by itself, it is also possible to just send the data on to another server, where PHP would take care of this.
Now the place where I'm stuck is the javascript and the interception. I know, that some of this can be done using greaseMonkey in Firefox. If so, how? Thanks!
Edit: Some explaining.
The script that creates the output is not written by me.
Yes, I could see the data in Firebug, seeing is one thing. I need to interpret the data
There are a lot of requests going on here. About 1 every 2 seconds, so copying them by hand isn't an option.
Still, help?
You should provide more details, a link to the target page is best.
Is the page using jQuery?, Some other library?, or custom XMLHttpRequest() calls?
Anyway, a simpler approach may work, try it first...
If the AJAX data is being written to the page, attach a DOMSubtreeModified event listener to the container element. Something like:
document.getElementById ("ContainerID").addEventListener ("DOMSubtreeModified", YourFunction, false);
function YourFunction () {
//--- Get the target node's inner HTML and send it to our server.
}
Note that DOMSubtreeModified events work fine in FF and Chrome, the two main browsers for Greasemonkey.
If the data is not being written to the page, then the best way to intercept the AJAX depends on if the target page is using a library like jQuery.
A generic way to intercept AJAX can be seen in this SO question (and others).
As you said, once you have the data, to automatically write it to a file, use GM_xmlhttpRequest() to send it to a server that you control.
Why cannot you do it like this?
Save AJAX response to file on the server side and then provide a link to it, so it can be downloaded.
Firebug will also help, you can view in very convenient way each response in few formats, and eventually copy/save it.
Use a normal (non-AJAX) request and add a Content-Disposition: attachment; filename="foo.xml" header to the response.
If you're just going to save the XML, why are you using AJAX? Just set location.href to the location of a PHP script that sends a "Content-disposition: attachment" header and gives the XML in the response body. AJAX seems totally the wrong tool for the job.

Categories