My AJax Request Not Woking On click of an icon - javascript

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)
}
})
})

Related

Delete deezer playlist using javascript

The way I'm trying to perform this action is like this:
var postPlaylistAjax = $.ajax({
type: 'delete',
url: 'http://api.deezer.com/user/me/playlists?request_method=delete&
access_token='+
encodeURIComponent(deezerAccessToken)+'&playlist_id=' +
encodeURIComponent(playlistId) + '&output=jsonp',
dataType: 'jsonp',
success: function() {
alert('Deleted');
},
error: ajaxError,
});
(When I try it in web the result is true but it doesn't delete the playlist).
Since the API description for deleting a playlist is the following
request_method = delete
https://api.deezer.com/playlist/{playlist_id}
I'm getting trouble to execute it in javascript
solved it:
function deleteDeezerPlaylist(playlistId) {
var postPlaylistAjax = $.ajax({
type: 'post',
url: 'http://api.deezer.com/playlist/'+encodeURIComponent(playlistId)+'?request_method=DELETE&access_token='+encodeURIComponent(deezerAccessToken)+'&output=jsonp',
dataType: 'jsonp',
error: ajaxError,
});
return postPlaylistAjax.then(function (response) {
return response.id;
});
}

ajax post not working without alert message

i have a problem with ajax post function. Ajax function doesn't working without alert message. If add alert message, div content will be refresh and working my code.
I have a mv3 application. And post form data to this javascript function. Like that:
function Add_Definition() {
var data = $.extend({ call: "Add_Definition", url: "/Definition/Definition", type: "post", dataType: "html", data: $("#definition_form").serialize() }, data);
Load(ajaxrequest(data));
}
function Load(val) {
if (val == true) {
var data = $.extend({ call: "Load", render: $("#render"), url: '#Url.Action("Definition", "Definition")', type: "get", dataType: "html", data: { "groupid": '#Request.QueryString["groupid"].ToString()'} }, data);
ajaxrequest(data);
}
}
My ajax javascript function is below.
function ajaxrequest(param) {
var result = true;
//alert("hi there");
$.ajax({
type: param.type,
url: param.url,
data: param.data,
dataType: param.dataType,
success: function (result) {
$(param.render).empty();
$(param.render).html(result);
result = true;
},
error: function (request, status, error) {
result= false;
}
});
return result; }
If remove // char from javascript code, it will not work, (need refresh page), if have a alert message, content will be refresh with load function.
How is error?
you can also direct call like
var divElem = $('#yourdivid').load('#Url.Action("Definition", "Definition")');

Ajax Get Request with JQuery Error

I'm trying to call a php script with a get request and using the data theaddress however the results are showing me the source of the page im calling.
The page im calling is here
Here is my ajax function that will get this page
$( document ).ready(function() {
var address = document.getElementById("address");
$.ajax({
url: '/r10database/checkSystem/ManorWPG.php',
type: 'GET',
data: 'theaddress='+address.value,
cache: false,
success: function(output)
{
alert('success, server says '+output);
}, error: function()
{
alert('Something went wrong, saving system failed');
}
});
});
$( document ).ready(function() {
var address = document.getElementById("address");
$.ajax({
url: '/r10database/checkSystem/ManorWPG.php',
type: 'GET',
data: 'theaddress='+address.value,
cache: false,
success: function(output)
{
alert('success, server says '+output);
}, error: function(error)
{
alert (error); // this is the change from the question
}
});
});
Put the dataType as json with a curly brace
data: {theaddress:address.value},
dataType:'json',
success: function(output)
{
alert('success, server says '+output);
}, error: function(xhr)
{
alert (xhr.status);
}
and get the data in ManorWPG.php as $_GET['theaddress']
** share the xhr.status if failed.

Run Javascript function as long as condition is true

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});
}

Ajax on success of another ajax doesn't work in ie

I do an ajax call to get a list of all elements, say Products and populate them in a table with checkboxes. Then I make another ajax call to get which products were already selected and select them. This works in all browsers except ie. Am I doing something wrong?
$.ajax({
url : "${product_category_url}",
data : {"orgID":"${globalOrganisation.id}"},
dataType : "html",
statusCode: {
401: function() {
$('.ui-tabs-panel:visible').html("${ajax_session_expired}");
}
},
success : function(data) {
$("#productCategoryContainer").html(data);
$.ajax({
url: "${get_taggedProd_url}",
data: {"questionnaireId":_questionnaireId},
dataType: "json",
success: function(data){
var productIds = data.products;
$.each(productIds,function(index,value){
var obj = $('input[name="'+value+'"]');
obj[0].checked = true
selectRow(obj[0]);
});
}
});
}
});
This is due to caching by IE.
Please try this
$.ajax({
url : "${product_category_url}",
data : {"orgID":"${globalOrganisation.id}"},
dataType : "html",
statusCode: {
401: function() {
$('.ui-tabs-panel:visible').html("${ajax_session_expired}");
}
},
success : function(data) {
$("#productCategoryContainer").html(data);
$.ajaxSetup ({
// Disable caching of AJAX responses
cache: false
});
$.ajax({
url: "${get_taggedProd_url}",
data: {"questionnaireId":_questionnaireId},
dataType: "json",
success: function(data){
var productIds = data.products;
$.each(productIds,function(index,value){
var obj = $('input[name="'+value+'"]');
obj[0].checked = true
selectRow(obj[0]);
});
}
});
}
});
and if you need more details please look into this
The thing in this code that always screws me up is trying to get the check box selected. Make sure obj[0].checked = true actually works.

Categories