I try to remove elements from my table in my django project, but I would like to have such a removal to be confirmed. Using this article
http://www.developmentwall.com/delete-row-from-html-table-jquery/
I wrote such function:
<script>
function deleteAjax(row_id){
$.ajax({
url: "delete_item/"+ row_id +"/",
type: "POST",
data: {'id':row_id},
success: function (){
if(!confirm('Are you sure you want to delete?')){
ev.preventDefault();
return false;
}else{
$('#my_row_'+row_id).remove();
}
}
});
}
</script>
Unfortunately, despite of the fact that I click that I won't to delete object, the object is removed.
Have you any hints? I suppose that it can be something wrong with ev, but I am fairly new to javascript and ajax and I do not know how to cope with this.
try this:
<script>
function deleteAjax(row_id){
if (!confirm('Are you sure you want to delete?')) { return; }
$.ajax({
url: "delete_item/"+ row_id +"/",
type: "POST",
data: {'id':row_id},
success: function (){
$('#my_row_'+row_id).remove();
}
});
}
</script>
Related
I have an ajax request:
$.ajax({
type: 'POST',
url: '/get-result.php',
dataType: 'json',
data: 'pid=' + $(this).attr("id"),
success: function(response) {
$(".reviewee-fname").append(response['fname']);
$(".reviewee-lname").append(response['lname']);
} }); };
I want to be able to put this inside a function that waits for me to trigger it with a return call. I am not exactly sure how to word it, I am new to javascript and jquery. But basically, I want to trigger this ajax call with various different button clicks and instead of having to put the ajax call inside every button click event, I want to put it in a stand alone function so if I ever update it later I dont have to change it 5 times.
Heres an example of a click event Id like to call the ajax request function with. Thanks!
$(function() {
$(".task-listing").click(function() {
//Call Ajax function here.
});
});
Callbacks are well-suited for this scenario. You can encapsulate your ajax call in a callback function.
function apiCall() {
$.ajax({
type: 'POST',
url: '/get-result.php',
dataType: 'json',
data: 'pid=' + $(this).attr("id"),
success: function(response) {
$(".reviewee-fname").append(response['fname']);
$(".reviewee-lname").append(response['lname']);
} }); };
}
You can now hook apiCall()method as a callback to button click.
$(function() {
$(".task-listing").click(apiCall);
});
By doing this you will able to achieve this.
I want to put it in a stand alone function so if I ever update it later I dont have to change it 5 times.
EDIT:
Note:
This is lead to start, you can alter this according to your requirement.
Is this not working for you? ↓↓
$(function() {
$(".task-listing").click(function() {
let pid = $(this).attr("id"); //get any other value which you want to pass in function, say url
someFunction(pid); // pass any other parameters, eg- someFunction(pid, url)
});
});
function someFunction(pid){ // someFunction(pid, url)
$.ajax({
type: 'POST',
url: '/get-result.php', // url: url
dataType: 'json',
data: 'pid=' + pid,
success: function(response) {
$(".reviewee-fname").append(response['fname']);
$(".reviewee-lname").append(response['lname']);
}
});
}
I'm currently working on a project using Laravel platform.
I'm trying to delete data from a model asynchronously using ajax. And when all is done my data should be removed from the table. My code runs perfectly, data are being removed from my database , yet "tr" elements arent really faded or removed. Here is my code :
ajax sucess not really working.
$(document).on('click', '.btn-remove-interview' , function() {
var id = $(this).attr('data-interview-id');
$.ajax({
url: './manage/interviews/destroy/'+id ,
type: 'post',
dataType: 'json',
data: id,
success: function (data) {
$(this).parents("tr").remove();
}
});
});
Use
$(this).closest('tr').remove();
Instead of
$(this).parents("tr").remove();
The problem is that the success function callback within your ajax request no long refers to the button when you use this. You need to get an explicit variable to the button if you want to use it.
$(document).on('click', '.btn-remove-interview' , function() {
// Get this button as a variable so we can use it later
var el = $(this);
var id = $(this).attr('data-interview-id');
$.ajax({
url: './manage/interviews/destroy/'+id ,
type: 'post',
dataType: 'json',
data: id,
success: function (data) {
$(el).parents("tr").remove();
}
});
});
Solution was by removing dataType json . My function doesnt return any data .
Here is script for action.
I want to prevent redirecting to url.
$('#rem_btn').click(function(event) {
event.preventDefault();
var remove = $(this).attr('href');
$.ajax({
type: 'get',
url: remove,
success: function(data) {
$('shop_pro_remove').html(data);
}
});
return false;
});
Please try this
HTML:
<a id='rem_btn' rel='remove_product.php?id=<?php echo $pro_id; ?>&name=<?php echo $product_name;?>' href="javascript:void(0)"> remove </a>
AJAX call:
$('#rem_btn').click(function(event) {
event.preventDefault();
var remove = $(this).attr('rel');
$.ajax({
type: 'get',
url: remove,
success: function(data) {
$('#shop_pro_remove').html(data);
}
});
return false;
});
The reason you’d want to do this with the href of a link is that normally, a javascript: URL will redirect the browser to a plain text version of the result of evaluating that JavaScript. But if the result is undefined, then the browser stays on the same page. void(0) is just the smallest script possible that evaluates as undefined.
Reference VOID
First of all, you're missing a closing } and a ). Second, there is an invalid selector in your ajax success callback , you probably wanted to use a class or an id.
Should look like:
$('#rem_btn').click(function(event) {
event.preventDefault();
var remove = $(this).attr('href');
$.ajax({
type: 'get',
url: remove,
success: function(data) {
$('#shop_pro_remove').html(data);
}
});
return false;
});
i have this working code with this code i can pass data to div within same page
but insted of passing data to div i want to pass this to label or textbox so that i can post it to the server. i am new in ajax,jquery . please suggest me best answer
<script type="text/javascript">
//send clicker data to div
$(function() {
$(".clicker").mouseover(function(){
var data = $(this).attr('id');
$.ajax({
type: "POST",
data: "db_data=" + data,
success: function(){
//alert(data);
$('.responseDiv').text(data);
}
});
});
});
</script>
<script type="text/javascript">
i think i need to change this line only
$('.responseDiv').text(data);
but dont know how to do that. didnt find any solution on net also
take any name like propertyId
Let's say the text field has id="propertyID"
Use the val() method to assign this new value to your text field.
$('#proertyID').val(data);
Like:
$(function() {
$(".clicker").mouseover(function(){
var data = $(this).attr('id');
$.ajax({
type: "POST",
data: "db_data=" + data,
success: function(){
//alert(data);
// $('.responseDiv').text(data);
$('#proertyID').val(data);
}
});
});
});
In the below line change selector .responseDiv with id/name or class of input/label $('.responseDiv').val(data);
<script type="text/javascript"> //send clicker data to div
$(function() {
$(".clicker").mouseover(function(){
var data = $(this).attr('id');
$.ajax({
type: "POST",
data: "db_data=" + data,
success: function(data2){
//alert(data);
$('.responseDiv').text(data2);
}
});
});
});
success return in data2 and use this..
I'm having a problem filling and accessing a global variable with ajax. I have the following code (stripped down a bit):
var answers;
$(document).ready(function() {
showResults();
console.log(answers);
}
function showResults(){
$.ajax({
url: "/wp-content/themes/hoekiesikeenschool/question-storage.php",
data: { action: "get_results" },
type: "post",
dataType: "json"
}).done(function (data) {
answers = data.questionary;
return answers;
});
}
My question is the following: When I log answers in the done function it gives me a nice array. That would mean the array variable is filled. But when I log it from $(document).ready, It returns an empty variable. This is probably because the AJAX call is asynchronous, and the log gets executed before the variable is filled.
However, I need to use that variable on another page, so I need to access it from the $(document).ready ... Any idea about how to check if the variable is filled? Or when the showResults() is completed? Thanks in advance for your help!
Edit -
Thanks for your replies! But I'm still struggling with the following: As I understand, I can call another function from the ajax callback, and pass it the data. The thing is, I have to do a lot of different stuff with it after the call, and the only way I can get it to work now is by calling a function in the ajax callback, then calling another one from that one, etc...
So I end up wit showResults(); in the doc.ready, which then executes a lot of functions that are all "linked" together. Is there anyway I can return the data to the variable, for use in other places? I hope I have made this clear, English is not my native language, sorry.
Execute the functionality that is dependent on the answers array after the AJAX call. Call your function from within done(..)
A very rough idea:
var answers;
function functionalityDependentOnAnswers() {
//the code dependent on answers array.
}
$(document).ready(function() {
showResults();
//Move code here to functionalityDependentOnAnswers()
}
function showResults(){
$.ajax({
url: "/wp-content/themes/hoekiesikeenschool/question-storage.php",
data: { action: "get_results" },
type: "post",
dataType: "json"
}).done(function (data) {
answers = data.questionary;
functionalityDependentOnAnswer();
});
}
You can use the when method provided by jQuery (look at this SO link).
Or look at this SO link where a similar situation is explained.
Check the documentation for success: this will only be executed when successful callback is done.
var answers;
$(document).ready(function() {
showResults();
}
function showResults(){
$.ajax({
url: "/wp-content/themes/hoekiesikeenschool/question-storage.php",
data: { action: "get_results" },
type: "post",
dataType: "json"
}).when(function (data) {
console.log(answers);
answers = data.questionary;
return answers;
});
}
Idea: Have a hidden input field and add change listener to it.
<input type="hidden" id="answers_input" />
Now have a listener to this.
var answers;
$(document).ready(function() {
$('#answers_input').on('change', function() {
// trigger your custom code
console.log(answers);
})
showResults();
console.log(answers);
}
function showResults(){
$.ajax({
url: "/wp-content/themes/hoekiesikeenschool/question-storage.php",
data: { action: "get_results" },
type: "post",
dataType: "json"
}).done(function (data) {
answers = data.questionary;
$('#answers_input').val(answers);
});
}
Solution is kinda like a hack, let me know if this works for you
You're in the right way.
Do stuff with answers inside the DOM callback.
var answers;
$(document).ready(function() {
showResults();
}
function showResults(){
$.ajax({
url: "/wp-content/themes/hoekiesikeenschool/question-storage.php",
data: { action: "get_results" },
type: "post",
dataType: "json"
}).done(function (data) {
answers = data.questionary;
console.log(answers);
// Manage answers here
});
}