I am trying to delete a photo using ajax and when the photo is deleted show default image instantly, so far I am done with php side but the ajax part isn't working. How can I make an ajax request without data type?
function delete_image()
{
$.ajax({
type: "POST",
url: "target.php?page=delete",
cache: false,
success: function(response)
{
var $divs = $("<div>" + response + "</div>");
$("#phd").fadeOut('slow');
$(".suc_pic").fadeIn('slow').empty().append($divs.find("#msg"));//the default picture fades in once the photo is deleted.
}
});
}
Try move "page= delete" in data secction:
function delete_image()
{
$.ajax({
type: "POST",
url: "target.php",
cache: false,
success: function(response)
{
var $divs = $("<div>" + response + "</div>");
$("#phd").fadeOut('slow');
$(".suc_pic").fadeIn('slow').empty().append($divs.find("#msg"));//the default picture fades in once the photo is deleted.
},
data: {page='delete'}
});
}
Related
I am inserting the data into the database and display data on the page without refresh the page.
I tried $("#e-empListwrap").load(location.href + "#e-empListwrap"); but it's displaying the whole page on my page.
$("form[name='emp']").validate({
rules: {
//rules
},
submitHandler: function(form) {
var form = $('form[name="emp"]').get(0);
var formData = new FormData(form);
$.ajax({
url: baseUrl + "/controller/emp_control.php",
type: "POST",
dataType: 'json',
data: formData,
contentType: false,
cache: false,
processData: false,
success: function(data) {
$('form[name="emp"]')[0].reset();
$('#modal-addemp').modal().hide();
$("#e-empListwrap").load(location.href + "#e-empListwrap");
},
}); // AJAX Get Jquery statment
}
});
HTML
<div class="e-empListwrap mt-4" id="e-empListwrap"><ul></ul></div>
// The below is the script when refersh the page then it will call the ajax and get the the and display on the page.
<script>
fetchEMPsaved_data();
function fetchEMPsaved_data(){
$.ajax({
url:'controller/developer_control.php',
type: "post",
dataType: "json",
data: { action: "fetchEMPsaved_data"},
success: function(data) {
$("#e-empListwrap ul").append(data);
}
});
}
</script>
You are missing a space after the url, between the url and CSS target:
$("#e-empListwrap").load(location.href + " #e-empListwrap");
or else jquery handles it as an anchor of the url, not as the element ID. You are loading url.html#element but to grep an element/css target, not the whole page, the syntax should be url.html #elementOrTarget, with the space in between.
i want to send a ajax call on click of a icon.
Admin.js
$('.user-status').click(function() {
var userId = this.id;
var userStatus = $(this).attr('data-status');
alert('clicked');
$.ajax({
type: "get",
url: siteUrl + 'admin/change-user-status',
data: { userId: userId, userStatus: userStatus },
dataType: 'html',
success: function(data) {
console.log(data);
}
})
})
Route.php
Route::get('/admin/change-user-status', [AdminController::class, 'changeUserStatus']);
But when I click on icon I am getting the alert clicked, but the ajax call is not being initiated.
The alert is coming
But no ajax request initiated
No error in console
i am using webpack
mix.js(['resources/js/dashboard-template.js', 'resources/js/admin.js'], 'public/js/admin.js');
You can use a tool: "Network" (see screenshot)
And you will be able to see if it is well sent.
An ajax request is by default sent with "xhr", so I advise you to sort by xhr as I did on the screenshot
Network screenshot
You should also add the error method and a timeout (to be sure that the server returns a response)
$('.user-status').click(function() {
var userId = this.id;
var userStatus = $(this).attr('data-status');
alert('clicked');
$.ajax({
type: "get",
url: siteUrl + 'admin/change-user-status',
data: { userId: userId, userStatus: userStatus },
dataType: 'html',
timeout: 5000, //ms
success: function(data) {
console.log(data);
},
error: function(a,b,c){
console.log(a,b,c)
}
})
})
currently having this problem, I have ajax request to send form datas and save it to database and after saving I then use load() function to refresh the list in table, but after being loaded the button inside the loaded div is not working which also uses js.
Ajax
var formData = new FormData(this);
$.ajax({
url: "/systemadmin/storemanagement/"+id,
method: "POST",
data:formData,
cache:false,
contentType: false,
processData: false,
success:function(data){
console.log(data)
$("#storeDatatable").load(location.href + " #storeDatatable");
$(".message-error").remove();
$(".message-success").remove();
$('#store-update-header').append('<div class="message-success">Update succesfully</div>');
}, error:function (err) {
if (err.status == 422) {
console.log(err.responseJSON);
$(".message-error").remove();
$(".message-success").remove();
$.each(err.responseJSON.errors, function (i, error) {
$('#store-update-header').append('<div class="message-error">'+error[0]+'</div>');
});
}
}
});
solved by using
$(document).on('click','.toggleModal-updateStore', function(){ })
instead of
$('.toggleModal-updateStore.').on('click', function(){ })
for the buttons inside the row
I have a canvas in my .aspx form page where one can sign a signature, I would like to send the base64 data from the JQuery client side to the C# Asp.Net side. Here I want to upload this base64 data to a database.
(a couple things I tried)
Jquery:
$("#savebtn").bind("click", function () {
var base64 = $('#sketch')[0].toDataURL("image\png");
$.ajax({
url: 'EvaluatieForm.aspx', // page where i have button listenener
data: '{ data: "' + base64 + '"}',
type: 'POST',
async: true,
cache: false,
contentType: "application/json; charset=utf-8",
success: function (result) {
console.log("inside sucess");
console.log("result: " + result);
},
error: function (request, error) {
// This callback function will trigger on unsuccessful action
alert('Error!');
}
});
$.post("EvaluatieForm.aspx", { data: base64 }); // another thing i tried
C#:
var d = Request.Params["data"];
The variable d is null when i put a breakpoint at it.
Does anybody see how I can tackle this hurdle, or make it easier?
(note: I do not have a lot of experience with JQuery)
Your JSON with base64 could be available as request body.
using (StreamReader reader = new StreamReader(context.Request.InputStream))
{
string text = reader.ReadToEnd();
}
If you replace
url: 'EvaluatieForm.aspx'
by
url: 'EvaluatieForm.aspx?data=' + base64
and remove
data: '{ data: "' + base64 + '"}',
then it will work.
Try this:
Just a small change in your existing code, used JSON.stringify to post data.
$("#savebtn").bind("click", function () {
var base64 = $('#sketch')[0].toDataURL("image\png");
var objectToPasss = {data: base64};
var postData =JSON.stringify(objectToPasss );
$.ajax({
url: 'EvaluatieForm.aspx', // page where i have button listenener
data: postData,
type: 'POST',
async: true,
cache: false,
contentType: "application/json; charset=utf-8",
success: function (result) {
console.log("inside sucess");
console.log("result: " + result);
},
error: function (request, error) {
// This callback function will trigger on unsuccessful action
alert('Error!');
}
});
$.post("EvaluatieForm.aspx", { data: base64 });
Try this:
$("#savebtn").bind("click", function () {
$.ajax({
url: 'EvaluatieForm.aspx', // page where i have button listenener
data: {
sketch: $('#sketch')[0].toDataURL("image\png")
},
type: 'POST',
async: true,
cache: false,
contentType: "application/json; charset=utf-8",
success: function (result) {
console.log("inside sucess");
console.log("result: " + result);
},
error: function (request, error) {
// This callback function will trigger on unsuccessful action
alert('Error!');
}
});
where
var d = Request.Params["sketch"];
The data argument in the jQuery ajax() function works in conjunction with the contentType. As you are setting it to application/json, then it stands to reason that data will be serialized, so setting the sketch variable seems about right.
With ajax you can try xhr.
maybe this thread helps you out! :)
How can I upload files asynchronously?
I'm building a PhoneGap app where user press button which then sends data to server. On the success handler I have a new function that asks user some questions with prompt box and then sends them back to server. So I need to make the prompt box appear as long as the condition "status=ok" is true.
I don't know how many times the prompt box has to appear, it can be anything from 1 to 10 times, so I guess I need to make a some sort of loop, but how can I do it?
This is the code I've been using now:
function UpdateRecord(update_id)
{ var id = getUrlVars()["id"];
jQuery.ajax({ type: "POST",
url: serviceURL + "update.php",
data: 'id='+id ,
cache: false,
success: function(data) {
console.log(data)
if(data.key[0].status == "ok"){
var reply = prompt(data.key[0].QUESTION, "");
jQuery.ajax({ type: "POST",
url: serviceURL + "question.php",
data: 'id='+id+'&reply='+reply ,
cache: false,
success: function(data) {
window.location = "page.html" }
} else {
window.location = "page.html"
}
}
});
}
I think what your after is moving the response from the AJAX call into a method AskQuestion (or whatever you want to call it). This function would prompt and would query if the answer was correct or not and redirect them to another page:
function AskQuestion(data)
{
var id = getUrlVars()["id"];
console.log(data);
if(data.key[0].status == "ok") {
var reply = prompt(data.key[0].QUESTION, "");
jQuery.ajax({ type: "POST",
url: serviceURL + "question.php",
data: 'id='+id+'&reply='+reply,
cache: false,
success: AskQuestion});
} else {
window.location = "page.html";
}
}
function UpdateRecord(update_id)
{
var id = getUrlVars()["id"];
jQuery.ajax({ type: "POST",
url: serviceURL + "update.php",
data: 'id='+id,
cache: false,
success: AskQuestion});
}