POST values from inline edit - ajax

I used this code from
Change table cell from span to input on click-
The replace one for inline edit now i want to post values through ajax and i am not sure how.
I just want to post the comments the users have edited and update them on the database
This is how i got so far:
$.ajax({
type: "POST",
url: "comments.php",//to update the comments
data: "data"
});
Not sure what to put next. Is it possible to post values when user click out of input area? and does the data have to be serialize?
Thanks in advance!

$.ajax({
type: "POST",
url: "comments.php",//to update the comments
data: {"comments":$("yourformId").serialize()},
success:function(res)
{
//Do what ever you want
}
});
And in your comments.php just print_r($_POST) will give you the posted array via ajax
If you use form.serialize you will get all the data from the form you submitted

Related

Method in Ajax other than POST and GET

I was asked in an interview what are the methods in AJAX other than GET and POST. I googled but I couldn't find any . Could someone please tell me.
HEAD Same as GET but returns only HTTP headers and no document body
PUT Uploads a representation of the specified URI
DELETE Deletes the specified resource
OPTIONS Returns the HTTP methods that the server supports
These are generally used methods
Also see detail about
There are four types of calls you cand do to a REST API GET,POST,PUT and DELETE. PUT should be suposedly used to modify already existing data while DELETE should be used to eliminate data. Still due to convention, PUT and DELETE are barely used. Here are a couple of examples of PUT and DELETE Ajax calls
$.ajax({
url: urlCalltoDeleteResource),
type: 'DELETE',
success: function(data) {
alert('Deleted');
},
error: function(data) {
alert('Not Deleted');
},
});
$.ajax({
url: urlToUpdate,
type: 'PUT',
data: "name=NameToUpdate",
success: function(data) {
alert('Load was performed.');
}
});

Ajax serialise - issue with data format

I have several inputs formatted with this jquery plugin here.
I use $.ajax to do my mysql insert:
$.ajax({
type: 'GET',
url: 'xxxx.php',
data: $('#new_form').serialize(),
}),
I face an issue as my input values are formatted with the plugins and can't get into mysql db.
As an example:
Input value: $450,000.00 is not accepted.
Is there a way to unformat within the serialise function values that have a specific classes (like class="money")?
Thanks for your help!
I have tried the below code:
$.ajax({
type: 'GET',
url: 'xxx.php',
data: $('#new_form').serialize(),
dataType:"json",
beforeSend: function(){
$(".money").cleanVal();
},
<script>
function cleanVal(v) {
return v.replace(/^\,/,'');
};
</script>
the result of the insert in mysql is still 450 for 450,000.
Do you have an idea?
thanks
You can try using the plugin $.cleanVal() method to retrieve the unmasked type value of the corresponding HTML element, prior to your AJAX form submission. So something like this:
$.ajax({
type: 'GET',
url: 'xxxx.php',
data: $('#new_form').serialize(),
beforeSend: function(){
$(".money").cleanVal();
}
}),
I couldn't make it work with beforehand. I found a solution which is to unmask values before calling ajax.
If anyone knows why it does not work with beforesend, thanks for letting me know.
cheers

AJAX unsubmit form

I've made an ajax search filter which loads when a certain input has a value (this is the search query box):
$("#filter").keyup(function(event){
var query = document.getElementById('query').value;
if(query!=""){
$("#filter").submit();
}
else{
}
});
$("#filter").submit(function(event) {
event.preventDefault();
$("#result").html('');
var values = $(this).serialize();
$.ajax({
url: "filter_content.php",
type: "get",
data: values,
success: function(data){
$('#result').html(data);
},
});
});
Is there a way to "unsubmit" the form when there is no value? So the ajax loaded content will disapeare instead of showing the content related to the last value (that wasn't blank)?
Thanks in advance!
If you want to make the content disappear why don't you just change $('#result').html() to an empty or a default value. This could be done in the 'else' part of query check. There is nothing called unsubmit form. Hope that makes sense

Grails: Passing a javascript variable to a template

I am new to ajax so maybe this is obvious. I've tried many different not-working approaches. I have javascript that when you click on a button:
an ajax call that grabs some data from a controller - returns an object
display that data in a template that I will show on the page
Here is the javascript/ajax:
<script type="text/javascript">
$("#show").click(function () {
$.ajax({ url: '/Myproject/result/index',
type: "POST",
data: { id: id},
success: function(result) {
alert("Success:" + result); // Can see getting object back.
}});
$(".resulttable").show();
});
Here is the key line in grails view template:
<g:each in="${allResults}" status="i" var="result">
How do I get the data from the javascript to the gsp code (ie allResults)?
Do I have to "refresh" this template to display new data?
thanks.
You just can't make your javascript/jquery code populate things in the gsp, since the gsp is processed server-side and javascript is processed client-side, after the gsp rendered all html documents and populated them with your model. You need to be aware that your page was already processed, so things like ${variables} won't be reloaded anymore. So when you do this:
$(".resulttable").show();
It's not gonna show the result you're waiting for. You have to use javascript code to reload your result table.
So if you're using ajax here, you should use the function success to alter your html table via javascript/jquery since you already have the response you wanted. Maybe this read can help you. Oh, and I think it would be better if in your ajax call, you would define a dataType (json works great in your case), like this:
$("#show").click(function () {
$.ajax({ url: '/Myproject/result/index',
type: "POST",
data: { id: id},
dataType: 'json',
success: function(result) {
alert("Success:" + result); // Can see getting object back.
}});
$(".resulttable").show();
});
Just to make clear what kind of response you're getting from the controller.
You do not need to write your ajax calls the hard way. There are some Grails intern tags you can use inside your html:
http://grails.org/doc/latest/ref/Tags/remoteFunction.html
http://grails.org/doc/latest/ref/Tags/submitToRemote.html
http://grails.org/doc/latest/ref/Tags/remoteLink.html
Following the links you will find some nice examples...

post form with ajax and additional json data

I send a form via jquery ajax. I do not only want to send the values of the formcollection I also want to send another id which is hidden in the page.
How can I send the form data + this id? Maybe there is a way to create one json object and I put everything in it?
jQuery('#myForm').live('submit',function(event) {
$.ajax({
url: 'Url.Action("Create")',
type: 'POST',
data: $('#myForm').serialize(),
success: function( data ) {
}
});
return false;
});
If your hidden field is already in the form, It will be in your serialized data. You dont need to send it exclusively. If you still want to send another piece of data from outside of your form, you may send it as a querystring value and have your action method a parameter named itemId.(Assuming hdnID is the id of your hidden element)
$.ajax({
url: '#Url.Action("Create","Home")'+?itemId='+$("#hdnID").val(),
type: 'POST',
data: $('#myForm').serialize(),
success: function( data ) {
}
});
http://api.jquery.com/serialize/

Resources