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();
}
});
});
Related
I was wondering if someone can help guide me how I can write a event when I'm using toggleClass in jQuery?
I have a list of items and when I click on an item, it highlights it, and when someone clicks another item from the list, the previous highlighted item goes away and highlights the current click. Also, if I click the same item that has been highlighted, it goes away.
Now I'm trying to write a function to call ajax when only its been highlighted. So it won't run the ajax function again when its being pressed again (when highlight is removed).
$(".media").on('click',function(){
var $this = $(this);
// highlighting the object
$this.toggleClass('selectMedia').siblings().removeClass('selectMedia');
// saving the id
var selId1 = $this.data('id');
$.post("ajax/ajax_sessions.php", {"sel_1":selId1}, function(data) {
alert(data); // alerts 'Updated'
});
});
Thank you for help!
Just check for the existance of the class before doing your AJAX request:
if ( ! $this.hasClass('selectMedia') ) return;
// Now do your AJAX request...
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 website that pages' contents loaded by ajax. All of my pages are seperate files actually and when I need to call a page, I just passed the link to my "pageLoader" function.
pageLoader handle with content loading and re-ignite/re-define the necessary functions like close button.
Since the actual function have ~250 lines, I did re-write a short version;
var pageLoader = function(link){
var page = $(link).attr("href").replace('#','');
if(page != lastCalledURL){
// Load the page.
$.ajax({
beforeSend: function(){ /* remove previously loaded content; */ },
success: function(data){
// remove the loaded content if user clicked to close button.
$("a.close-button").live("click", function(){
$(this).parent().fadeOut().remove();
return false;
});
// load another page if user click another page's link.
$("a.content-loader-link").live("click",function(){
pageLoader(this);
});
// handle with tabs
$("a.tabs").live("click", function(){
var index = $("a.tabs").index(this);
console.log(index);
return false;
});
}
});
lastCalledURL = page;
}
return false;
OK. If I click a link in the page, It calls pageLoader. If I click one of the links just once, pageLoader called once. If I click another link, pageLoader called twice. If I click another link again, pageLoader called third times and so on.
Same things happen for the links that bind with "live" function in the code. If I click a.tabs, it write to console twite. If I clicked another .tabs link, it write to console four times and increasing double for every click.
I don't why it happens. Please let me know if you have any idea.
You can solve it by using the bind and unbind. Like this:
$("a.tabs").unbind('click').bind("click", function(){
var index = $("a.tabs").index(this);
console.log(index);
return false;
});
But i would prefer that you attach this events in your $(document).ready function instead of everytime you make an AJAX call.
$(document).ready(function() {
// Attach your events here.
});
Those live event handlers "Attach a handler to the event for all elements which match the current selector, now and in the future." so you shouldn't need them in your ajax call.
i would like to ask how i can intercept the ajax delete functionality of a grid using ajax binding? specifically, up to the point wherein, after i click on delete, as the confirm prompt pops up, i would like to do something based on the user's choice,
basically, if OK, do this, if CANCEL do that..
You need to use the OnRowDataBound and attach a click handler to the delete button. Then you can display custom confirmation and decide what to do. If you want' to prevent the grid deletion code - call e.stopPropagation(). Here is a quick sample:
<%: Html.Telerik().Grid(Model)
// Prevent the grid from displaying the default delete confirmation
.Editable(editing => editing.DisplayDeleteConfirmation(false))
// Subscribe to the OnRowDataBound event
.ClientEvents(e => e.OnRowDataBound("onRowDataBound"))
%>
<script>
function onRowDataBound(e) {
$(e.row) // get the current table row (TR) as a jQuery object
.find(".t-grid-delete") // find the delete button in that row
.click(function(e) { // handle its "click" event
if (confirm("Do you want to delete this record?")) {
// User clicked "OK"
} else {
// User clicked "Cancel"
e.stopPropagation(); // prevent the grid deletion code from executing.
}
});
}
</script>
The demo page seems to contain an example of what you are looking for.
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.