I have a delete button. which on click it should visit a url like /delete/{id} and once the response from that url is true. i want to delete the comment box like in facebook.
I wont add any extra than Leo's comment, but I will explain with some code. Presume that you are using jQuery...
$(document).ready(function(){
$('tr a.delete').live('click', function(e){
e.preventDefault();
var link = $(this);
$.get($(this).attr('href'), null, function(response){
if(response == 'ok'){ //you should invent how to get 'ok' or other string identifying that the deletion is successful.
link.parents('tr').remove();
} else {
alert('There is a problem while deleting this element');
}
});
})
});
if you put this code on your project it will handle all links which had .delete class and are in a table row.
There are two things which you should do:
You need to pass some string in
order to detect if the operation is
successful or not. In my example I
would print "ok" on success
deletion.
If your table has pagination, it wont
rebuild the table, while it just
will remove the row from the table.
and if you have let's say 5 rows per
page and you delete all of them the
page will remain empty while there
will be other records in the table.
That's why instead of removing the
tr I would reload the whole page.
In that case the code for successful deletion will look like this:
if(response == 'ok'){
$('#content').load(window.location);
}
The script is not optimised, but it will give you the ideas how to achieve your ideas.
HTH
So write an onClick event handler in your view, a php delete method on the appropriate controller called by the event handler and a javascript action to perform when the ajax call returns success.
Related
I'm using jQuery UI. I'm loading some content in a dialog box over AJAX. After inserting the content from the server, I need to make modifications to the document. I am using the .live() function on my link; I thought this would enable me to use Js after loading the content over ajax, but it's like the content I just loaded isn't a part of the document. Any help very much appreciated.
Are you adding the bindings (lives) in the success function of the ajax call?
If so I had the same issue, I'll try to explain what I figured out:
$.post('callURL', function(data){
// Let's say data returned from server is an ID of a div I have to hide
// by clicking on some_link
$('#some_link').live('click',function(){
$('#'+data).hide();
});
});
This won't work because the code inside the 'live' function is executed on click and at that time the 'data' value is gone.
To make it work I made a global variable 'ID' which I set in the success function and then called in the 'live' function again like this:
var ID;
$.post('callURL', function(data){
// Let's say data returned from server is an ID of a div I have to hide
// by clicking on some_link
ID = data
$('#some_link').live('click',function(){
$('#'+ID).hide();
});
});
I have a page of products and for each of them, I want to have a form that uses AJAX to update the session. I've done this bit - just providing background.
I use the product's ID to create a different form class and name for each form, so each form is called something like this_form_name_567 and the next would be this_form_name_568 and so on.
There is a submit button per form. I'm having trouble figuring out
Which event is best to use so that the correct form will be identified when a submit button is clicked?
Once clicked, how to then make sure the correct value is taken from a hidden field (unique ID) within the submitted form so that I can populate a line of code such as:
$.post("compare_response.php", {compare_this: $("#compare_this").val()}, function(data){
}
You can use the .closest tree traversal method to get the form in which the button of interest is nested:
$("input[type=submit]").click(function() {
alert($(this).closest("form").attr("id"));
});
or even simpler, just get the element's form property :)
$("input[type=submit]").click(function() {
alert(this.form.id);
});
You can try it out here.
You can get the form you are submitting like this:
$('form').submit(function() {
var yourForm = $(this);
var hiddenValue = $(this).find('input[type=hidden]').val();
});
Of course you can get the hidden value differently, or if you have more than one hidden you'll have to give a little more information about it.
I have an AJAX / prototype related question. I have an AJAX call currently placed inline, in the onclick (i promise i'll move it out of there :) event, looking like this:
onclick="var pn = $('yards').value; $('inventory').update('Working...');
new Ajax.Updater('inventory','ajax.php?ac=checkInventory&productID='.$someproductid.'&yards='+pn,{method:'get', evalScripts: true, asynchronous: true, onComplete:function(tr){$('inventory').update(tr.responseText);}});"
File called ajax.php then gets the data from $_GET[], displays a small text input field. When filled in and clicked on a submit button, it calls a function which reads the relevant data from the file, and prints a result on the screen. The purpose of all this code is inventory check.
So, when a user clicks on the "get inventory" button with the onclick defined as above, everything works nice, the user fills the yardage, the right result pops up, everybody happy. But what makes it less usable is the fact that in case a user wants to do another inventory check, the entire page needs to be refreshed. If it's not, then when clicking on "get inventory" button, the user will be getting the same result of the last check again, not the text input field.
So, my question is, how do I make that after one inventory check, the whole thing sort of resets itself so that the next time a user clicks on "get inventory" button, he'll be offered to fill the text input field again, and hence get the new result.
I'm sorry if I didn't make myself clear enough. I'm very new to AJAX and prototype, and this is my colleague's work I need to finish...Thanks!
Ah I see,
I don't think Ajax.Updater works like that; have a look at the doc:
http://www.prototypejs.org/api/ajax/updater
new Ajax.Updater({ success: 'items', failure: 'notice' }, '/items', {
parameters: { text: $F('text') },
insertion: Insertion.Bottom
});
var pn = $('yards').value;
$('inventory').update('Working...');
new Ajax.Updater('inventory','/ajax.php
,{
parameters: { ac: 'checkInventory'
, productId: /*put productId here*/
, yards:/*put yards here too*/
}
, method:'get'
, evalScripts: true
, asynchronous: true
, onSuccess: function(tr){
//try an alert(tr.repsonseText); just to see what you get back
$('inventory').update(tr.responseText);
}
});
Things to try:
Clear the text input field before your repopulate it when the onComplete event fires in your ajax.updater call.
Alert the response to make sure your getting a different response from the server.
*Use Fiddler to make sure your passing in a different productId
Change onComplete to onSuccess
Hope this helps
Since you've promised to move the code out of the onclick handler do:
var inv = $('inventory');
inv.update('Working...');
new Ajax.Request('ajax.php', {
method:'get',
parameters:{
ac:'checkInventory',
yards:$('yards').value
},
onSuccess: function(response)
{
inv.update(response.responseText);
}
});
I have a page which needs to use $.post() but for some reason the exact code works when I run it from the firebug console but not from my script? My script is:
$(document).ready(function () {
$('#dl_btn').click(function () {
$.post(
"news_csv.php",
$("#dl_form").serialize(), function (data) {
alert('error');
if (data == 'success') {
alert('Thanks for signing up to our newsletter');
window.open("<?php echo $_GET['link']; ?>");
parent.Shadowbox.close();
} else {
alert(data);
}
});
});
});
It isn't the link as that does get printed properly but it gives me an error on line 140 of jquery min, I have tried using different versions of jquery and to no avail. I really dont understand why this isn't working.
When I changed from $.post to $.ajax and used the error callback I did receive an error of 'error' and the error is undefined?
Don't suppose anyone has any ideas? Would be much appreciated.
Thanks,
Tom
Is your click button placed inside a form element?
Cause doing so, clicking on it will not only trigger the onClick event you have binded to, but form submit as well, so you will end up in a case where your browser is executing both requests in parallel - with unpredicted outcome, of course.
I tried the same code with an element that does not trigger form submit and it worked as expected.
One point though: if you plan to use simple string as a return value and to do something with it (display it or so) then is ok to do what you do right now. However, if you have more complex response from the ajax request, you should specify the response type (xml, json..) as the last parameter of the post method.
Hope this helps.
I'm trying to do a simple update, but can't figure out somthing.
I have a table that i get from a DB with an Edit button that when i press change to a Save button so i can save with Ajax the record that the user just edit.
I'm doing the first part just fine, have one function that do all the jquery stuff on the page (that is working just fine).
Now I want to change the $('#a'+productID) line to save insted of edit. i am changing the link attribute also, so when the user presses save it will send him to a function that will make the Ajax request and update the record.
But i dont have a clue how to start that....I don't think it has any thing to do with any bind function becouse i am allready binded by calling the save function (or am i wrong and need to bind antway???) can any one help me out here?
P.S. the save function recives the productID do i have the right product when i will need it.
Don't have a code to send for the save function becouse i don't know how to start it and every thing i tried doesn't work....sorry :-(
It might be easier if you simply had both buttons on the page and toggled between them depending on the page state.
<a id="editButton" href="http://example.com/widget/edit/1">Edit</a>
<a id="saveButton" href="http://example.com/widget/update/1" style="display: none;">Save</a>
$(function(){
$('#editButton').click( function() {
// set up the form as edit...
$(this).hide();
$('#saveButton').show();
return false;
});
$('#saveButton').click( function() {
var button = $(this);
var href = button.attr('href');
$.post(href,$('form').serialize(), function() {
// change form back to readonly...
button.hide();
$('#editButton').show();
}
});
});