Develop Reference

Javascript Redirect Modal in Laravel

When the user likes a story on the card, users saves it with the "save" button. I do this as a savePost in my .js file. But if the user is not registered I am redirecting as "location.replace(APP_URL + "/login")".
I want to redirect to a modal on the homepage instead of /login. Is it possible for me to do this as a session or something?
function savePost(t) {
$.ajaxSetup({
headers: {
"X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
}
});
$(this);
$.ajax({
url: APP_URL + "/save_favorite",
type: "POST",
dataType: "json",
data: {
item: t,
_token: $('meta[name="csrf-token"]').attr("content")
},
success: function(e) {
1 == e.bool ? $("#save-icon-" + t).removeClass("text-muted").addClass("icon-filled") : 0 == e.bool && $("#save-icon-" + t).removeClass("icon-filled").addClass("text-muted")
},
error: function(e) {
location.replace(APP_URL + "/login")
}
})
}

Your current JS:
function savePost(t) {
$.ajaxSetup({
headers: {
"X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
}
});
$(this);
$.ajax({
url: APP_URL + "/save_favorite",
type: "POST",
dataType: "json",
data: {
item: t,
_token: $('meta[name="csrf-token"]').attr("content")
},
success: function(e) {
1 == e.bool ? $("#save-icon-" + t).removeClass("text-muted").addClass("icon-filled") : 0 == e.bool && $("#save-icon-" + t).removeClass("icon-filled").addClass("text-muted")
},
error: function(e) {
location.replace(APP_URL + "/targetPage?showModal=1")
}
})
}
At the end of your target page add:
#if(isset($_GET['showModal']) && $_GET['showModal'] == 1)
<script type='text/javascript'>
$(window).on('load', function() {
$('#your modal id').modal('show');
});
</script>
#endif
In your routes/web.php add this:
Route::get('/', function () {
if(Auth::guest()){
return view('target.page');
} else {
return redirect('/somewhere');
}
});

The Function App/GetSPANList returns 401 error on server. C# asp.net

The below method returns 401 error on server. As I don't see any errors in this. Please suggest why its coming as 401 error
function loadSPANByMZ() {
try {
showLoading();
var OperationType = "";
if (R4GStateSelected != "Select") {
if ($(mzoneid).val() != "Select") {
if ($(activitytypeid).val() != "Select") {
//call CurrentGroupName UMS variable
var UserType = CurrentGroupName;
var SpanType = $(spantypeid + ' option:selected').val().toUpperCase();
var MZone = $(mzoneid + ' option:selected').val();
OperationType = $(activitytypeid + ' option:selected').val();
var Values = { "USERTYPE": UserType, "SPANTYPE": SpanType, "MZONE": MZone, "OPERATIONTYPE": OperationType.toUpperCase() };
//$(gridSpanlisttable).empty();
$.ajax({
type: "POST",
url: AppConfig.PrefixURL + "App/GetSPANList",
data: JSON.stringify(Values),
contentType: "application/json; charset=utf-8",
dataType: "json",
async: false,
success: function (response) {
displaySpanList(response, SpanType, MZone, OperationType);
//hideLoading();
},
error: function (response) {
hideLoading();
$(dataContent).hide();
},
complete : function(response)
{
hideLoading();
}
});
}
}
}
//},
}
catch (e) {
hideLoading();
$(dataContent).show();
}
}

How do I show a confirmation box before deleting a record

I need to show a confirm box before performing this ajax request.
$(document).on("click", ".deletecustomer", function() {
var id = $(this).attr("id");
$.ajax({
method: "post",
url: "deletecustomer.php",
data: {
id: id
},
success: function(data) {
console.log(data);
if (data == "success") {
window.location.href = "customer.php";
}
}
});
});

$(document).on("click", ".deletecustomer", function() {
if (confirm('Are you sure?')) {
var id = $(this).attr("id");
$.ajax({
method: "post",
url: "deletecustomer.php",
data: {
id: id
},
success: function(data) {
console.log(data);
if (data == "success") {
window.location.href = "customer.php";
}
}
});
}
});

Ajax call not working for every controller

I am using mvc 4 ,I need to call controller actions using ajax.So I created a new scripts.js file at Scripts folder.In my project there are lot of controllers and I wrote ajax functions for each of them in the same js file.But except the default controller other controllers are not initiated by the ajax code. Scripts.js file contains:
$(document).ready(function () {
//END COUNTRY ................................................................
$("#savecountry").click(function () {
//var car = { id: 4, name: "India" }
$.ajax({
type: "POST",
url: '/Country/SaveCountry',
data: {name: $('#country').val() },
dataType: 'json', encode: true,
async: false,
cache: false,
//contentType: 'application/json; charset=utf-8',
success: function (data, status, jqXHR) {
// alert("success");
console.log(jqXHR);
console.log(status);
console.log(data);
//$.each(data, function (index, customer) {
// alert(customer.Name + " " + customer.UserName);
//});
},
error: function (jqXHR, textStatus, errorThrown) {
//console.log(jqXHR);
//console.log(textStatus);
//console.log(errorThrown);
if (typeof (console) != 'undefined') {
alert("oooppss");
}
else { alert("something went wrong"); }
}
});
});
$("#updatecountry").click(function () {
//var car = { id: 4, name: "India" }
$.ajax({
type: "POST",
url: '/Country/Update',
data: { id:$('#id').val(), name:$('#country').val() },
dataType: 'json', encode : true,
async: false,
cache: false,
success: function (data, status, jqXHR) {
alert("success");
//$.each(data, function (index, customer) {
// alert(customer.Name + " " + customer.UserName);
//});
},
error: function (jqXHR, textStatus, errorThrown) {
console.log(jqXHR);
if (typeof (console) != 'undefined') {
alert("oooppss");
}
else { alert("something went wrong"); }
}
});
});
$('#cancel').click(function () {
$('input:text').val('');
});
//$('.deleteRow').click(function () {
// alert('ewewrwr');
// $.ajax({
// type: "POST",
// data: { id: $('#id').val() },
// url: "/Country/DeleteCountry",
// dataType: 'json', encode: true,
// async: false,
// cache: false,
// success: function (data, status, jqXHR) {
// alert("success");
// //$.each(data, function (index, customer) {
// // alert(customer.Name + " " + customer.UserName);
// //});
// },
// error: function (jqXHR, textStatus, errorThrown) {
// console.log(jqXHR);
// if (typeof (console) != 'undefined') {
// alert("oooppss");
// }
// else { alert("something went wrong"); }
// }
// });
//});
$("#updateoffer").click(function () {
//var car = { id: 4, name: "India" }
$.ajax({
type: "POST",
url: '/Offer/Update',
// contentType: "application/json; charset=utf-8",
data: { id: $('#id').val(), name: $('#offer').val(), description: $('#description') },
dataType: 'json', encode: true,
async: false,
cache: false,
success: function (data, status, jqXHR) {
alert("success");
//$.each(data, function (index, customer) {
// alert(customer.Name + " " + customer.UserName);
//});
},
error: function (jqXHR, textStatus, errorThrown) {
console.log(jqXHR);
if (typeof (console) != 'undefined') {
alert("oooppss");
}
else { alert("something went wrong"); }
}
});
});
});
Here Country is the default controller and ajax call working well.But call to Offer controller Update ajax not working .Page not responding error will result.

You should take project name to baseUrl for call ajax function.
$(document).ready(function(){
var baseurl = "";//your project name
$("#savecountry").click(function () {
$.ajax({
type: "POST",
url: baseurl+'/Country/SaveCountry', // baserurl+"/controller name/action"
.....
}

The accepted answer has a serious flaw in commercial deployments, so offering alternatives.
Yes, you need the base address of the website, but you do not want to hard-wire it into the code.
Option 1
You can inject a global javascript variable into your master page as a string constant.
e.g. put this at the top of your master page
<script>
window.baseurl = "#Url.Content("~/")";
</script>
then just use window.baseurl prepended to your URLs
e.g
$("#savecountry").click(function () {
$.ajax({
type: "POST",
url: window.baseurl+'/Country/SaveCountry',
Option 2
You can inject a data- attribute into the DOM in your master page. e.g. on the body tag
then extract it using jQuery:
e.g.
var baseurl = $('body').data('baseurl');
$("#savecountry").click(function () {
$.ajax({
type: "POST",
url: baseurl+'/Country/SaveCountry',
Option 3 (I do not advise this one)
Inject the string literal into your Javascript
$("#savecountry").click(function () {
$.ajax({
type: "POST",
url: "#Url.Action("SaveCountry", "Country")",
This is bad for maintenance and debugging as the code must be in a Razor view in order to work.
We used to use option 2 a lot, but now tend to use option 1.

jquery if data not empty add class issue

not sure why this isn't working still fairly new with js. I am trying to check if there is any data and if there is then it should add a hidden class or should remove it if it has no data.
$(function() {
$('#search').keyup(function() {
var followerList=$("#followerlist");
if($('#search').val() !== ""){
followerList.addClass('hidden');
}else{
followerList.removeClass('hidden');
};
$.ajax({
type: "POST",
url: "/search/",
data: {
'search_text': $('#search').val(),
'csrfmiddlewaretoken': $("input[name=csrfmiddlewaretoken]").val()
},
success: searchSuccess,
dataType: 'html'
});
});
});
function searchSuccess(data, textStatus, jqXHR)
{
$('#search-results').html(data);
}

Your searchSuccess function has to be like this:
function searchSuccess(data, textStatus, jqXHR)
{
var followerList=$(".followerlist");
$('#search-results').html(data);
if(data !== "")
{
followerList.addClass("hidden");
}
else
{
followerList.removeClass("hidden");
}
}