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;
});
Related
I have a function where the user inputs are stored in a variable in javascript.
$('#btnsubmit').click(function() {
var seat = [], item;
$.each($('#place li.' + settings.selectingSeatCss + ' a'), function (index, value) {
item = $(this).attr('title');
seat.push(item);
});
var bookseats = seat;
$.ajax({
type: 'POST',
url: 'confirm.php',
data: {'bookseats': bookseats},
});
});
When the user clicks on the #btnsubmit button, I want to send this variable(actually an array) to a PHP file named confirm.php.
<form method="POST" action="confirm.php">
<div align="center"><input type="Submit" id="btnsubmit" value="Submit" /></div>
</form>
In my PHP file, I've written the code to get the sent variable as follows.
$bookseats = "";
if(isset($_POST['bookseats']))
{
$bookseats = $_POST["bookseats"];
print_r($bookseats);
}
When executed, nothing happens in the PHP file(doesn't print the bookseats).Is there something wrong with this code?
You're not using a "success" callback to get the output of the PHP code. See success callback
$.ajax({
type: 'POST',
url: 'confirm.php',
data: {'bookseats': bookseats},
success: function(data) {
console.log(data); // or alert(data);
}
});
Also, I think you should stop the propagation of the default behavior of the button, to prevent the browser to redirect the page to the form's action URL:
$('#btnsubmit').click(function(ev) {
ev.preventDefault();
As #Malovich pointed out, as of jQuery 1.8, you could also use .then():
$.ajax({
type: 'POST',
url: 'confirm.php',
data: {'bookseats': bookseats}
}).then(function(data) {
console.log(data); // or alert(data);
}, function(){
console.log("Error");
});
Sorry for asking this again but code won't execute. The problem is that I have a php loop that produces a html like below
<a class="js-delete-comment1" data-url="http://localhost/project/document_items/delete_item_comment/1">link</a>
<a class="js-delete-comment2" data-url="http://localhost/project/document_items/delete_item_comment/2">link</a>
<a class="js-delete-comment3" data-url="http://localhost/project/document_items/delete_item_comment/3">link</a>
Now, I want to select specific class to use as a jQuery selector but won't work. See below code
$("[id*=js-delete-comment]").each(function(){
$(this).click(function(){
var url = $('.js-delete-comment').attr('data-url');
// var id = $('.js-delete-comment').attr('data-id');
$.ajax({
url : url,
type : 'POST',
dataType : 'json',
success : function(result) {
console.log(result);
}
});
});
});
Any help would be much appreciated!
There is no ID on the elements, use class^= selector. There is no need of iterating over the elements and then bind the event, the event can be bind directly on the selector itself.
$("[class^='js-delete-comment']").click(function() {
Also, use $(this).data('url') to get the data-url attribute of the element that is clicked.
Code:
$("[class^='js-delete-comment']").click(function (e) {
e.preventDefault(); // To stop page redirection
var url = $(this).data('url');
$.ajax({
url: url,
type: 'POST',
dataType: 'json',
success: function (result) {
console.log(result);
}
});
});
You can use,
$("[class^=js-delete-comment]").click(function() {
var url = $(this).data("url");
$.ajax({
url: url,
type: 'POST',
dataType: 'json',
success: function(result) {
console.log(result);
}
});
});
^ is the attribute starts with selector. you can use that for selecting the class
Use data() method for getting the data-url
Just use click event like this:
$("[class^=js-delete-comment]").click(function(){
var url = $(this).attr('data-url');
$.ajax({
url : url,
type : 'POST',
dataType : 'json',
success : function(result) {
console.log(result);
}
});
});
I am not getting why you want to select these <a> links using class name.
Just put your code inside parent <div>
<div id="js-delete-comment">
<a class="js-delete-comment1" data-url="http://localhost/project/document_items/delete_item_comment/1">link</a>
<a class="js-delete-comment2" data-url="http://localhost/project/document_items/delete_item_comment/2">link</a>
<a class="js-delete-comment3" data-url="http://localhost/project/document_items/delete_item_comment/3">link</a>
</div>
And your JQuery code will be
$('#js-delete-comment > a').click(function(){
$.ajax({
url : $(this).data('url'),
type : 'POST',
dataType : 'json',
success : function(result) {
console.log(result);
}
});
});
<div class="report" data-id="55"></div>
<script>
$('.report').click(function() {
var id = $(this).data("id");
confirm("do you really want to report this post?");
$.ajax({
url: 'forumreport.php',
type: 'GET',
data: 'id='+id,
success: function(){
alert("reported!!");
},
});
})
</script>
I want to stop $.ajax() method if user clicks cancel on confirm form. However ajax is still sending the id to .php page. What should i do?
The confirm method returns a boolean indicating whether the prompt is confirmed, therefore you can simply save the resulting boolean in a variable and check whether it is true before executing the AJAX request.
$('.report').click(function() {
var id = $(this).data("id");
var confirmed = confirm("do you really want to report this post?");
if (confirmed) {
$.ajax({
url: 'forumreport.php',
type: 'GET',
data: 'id='+id,
success: function(){
alert("reported!!");
},
});
}
});
Confirm function returns a boolean value indicating whether OK or Cancel was selected (true means OK)
https://developer.mozilla.org/en-US/docs/Web/API/Window/confirm
Check for result which is returned by confirm function:
<script>
$('.report').click(function() {
var id = $(this).data("id");
if(confirm("do you really want to report this post?")){
$.ajax({
url: 'forumreport.php',
type: 'GET',
data: 'id='+id,
success: function(){
alert("reported!!");
},
});
};
})
</script>
I m trying to create a link that when clicked won't redirect but will perform an action and then refresh the page using jquery.
Click Me
<Span id="updateMe">1</span>
Jquery
$('#btnClick').click(function(e){
url = $(this).attr('href');
$.ajax({
url: url,
success: function(){
alert("succes alert 1 worked");
}
});
$.ajax({
url: "another_url.php",
success: function(data){
$("#updateMe").html(data);
}
});
javascript:window.location.reload();
});
Do these:
Add e.preventDefault(); to stop reload.
Move reload() to the success callback.
Get rid of javascript:. You are already inside it.
Corrected Code:
$('#btnClick').click(function(e) {
e.preventDefault();
url = $(this).attr('href');
$.ajax({
url: url,
success: function() {
alert("succes alert 1 worked");
window.location.reload();
}
});
$.ajax({
url: "another_url.php",
success: function(data) {
$("#updateMe").html(data);
window.location.reload();
}
});
});
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>