I have following bootstrap datepicker:
Now, when I am deleting the 24th date from my another table, as a result, it should remove the 24th date from the date picker after the ajax call.
I have written the following code for it. However, it's not working:
$.ajax({
type: "POST",
url: "<?php echo VIEW_HOST_PATH;?>remove_data.php",
data: {ch: ch, dh: dh, sp_rec: sp_rec, cartDate: 1},
success: function(data) {
console.log(data);
var obj = $.parseJSON(data);
//console.log(obj.length);
var selectedDates = '';
for(var i=0;i<obj.length;i++) {
//selectedDates = selectedDates+"'"+obj[i]+"',";
//$('#disc_single_datepicker_1').datepicker('setDates',[obj[i]]);
}
console.log(selectedDates);
//alert(selectedDates);
//$('#disc_single_datepicker_1').datepicker('setDates',[data]);
//$('#disc_single_datepicker_1').datepicker('update',selectedDates);
display_toastr(datainfo+" record has been removed!","Remove Record",true,"right","info");
$("#row_"+dh).fadeOut('slow');
}, error: function() {
alert("Something went wrong. Please contact admin!");
}
});
so what should I write to unset that particular date. thanks
Related
I am using WordPress and I have used Select2 and Toastr libraries successfully.
Basically I have a dropdown and if I change, Toastr will ask whether I need to update or not.
If I click on "Yes" then it will update and if I click on "No" then my dropdown should set previous value and nothing will happen.
Currently its selecting previous value but then if I open the same dropdown try to click on it to search then its saying "The results could not be loaded".
Here is my JS code what I have done so far.
var prevSubVarClientId;
jQuery('.mySubscription').select2({
allowClear: true,
placeholder: "",
//minimumInputLength: 3,
ajax: {
type: "POST",
url: '/wp-admin/admin-ajax.php',
dataType: 'json',
delay: 250, // delay in ms while typing when to perform a AJAX search
data: function (params, page) {
return {
action: 'list_posts',
q: params.term,
};
},
processResults: function( data ) {
var options = [];
if ( data ) {
jQuery.each( data, function( index, text ) {
options.push( { id: text['id'], text: text['name'] } );
});
}
return {
results: options
};
},
cache: true
}
});
jQuery('.mySubscription').on('select2:selecting', function (evt) {
prevSubVarClientId = jQuery('select').val();
});
jQuery('.mySubscription').change(function() {
var $this = jQuery(this);
jQuery(this).blur();
alertify.confirm("Are you sure you want to transfer?",
function(e){
var subscriptionId = jQuery($this).data("subscription-id");
var url = jQuery($this).data("ajax-url");
var userId = jQuery($this).val();
jQuery.ajax({
type: "POST",
url: url,
data : {
action : 'update_var_client_user_id',
userId : userId,
subscriptionId : subscriptionId
},
success: function(data)
{
var data = JSON.parse(data);
toastr["success"]("Transferred Successfully." );
}
});
},
function(){
jQuery($this).val(prevSubVarClientId);
jQuery($this).select2().trigger('change');
}).set({title:"Alert!!!"}).set({ labels:{ok:'Yes', cancel: 'No'} });
});
As you can see I have prevSubVarClientId variable and mySubscription dropdown with this class.
jQuery('.mySubscription').change(function() { here you can see I am opening alertify confirm box and if I click on "No" then I am doing below code.
jQuery($this).val(prevSubVarClientId);
jQuery($this).select2().trigger('change');
But then whenever I am trying to open the dropdown again, I am getting the below error.
Can some one guide me, what I am doing wrong here ?
Thanks
"The results could not be loaded". only show when return data is null or not found.
I tested your code below snippet and working fine.
$(".js-data-example-ajax").select2();
jQuery('.js-data-example-ajax').on('select2:selecting', function (evt) {
prevSubVarClientId = jQuery('select').val();
});
jQuery('.js-data-example-ajax').change(function() {
var $this = jQuery(this);
jQuery(this).blur();
alertify.confirm("Are you sure you want to transfer?",
function(e){
console.log('change');
},function(){
console.log('no change');
jQuery($this).val(prevSubVarClientId);
jQuery($this).select2().trigger('change');
}).set({title:"Alert!!!"}).set({ labels:{ok:'Yes', cancel: 'No'} });
});
.select2-container, .select2-container--open .select2-dropdown--below {
width: 200px !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/AlertifyJS/1.13.1/css/alertify.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/AlertifyJS/1.13.1/alertify.min.js"></script>
<select class="js-data-example-ajax">
<option value="abc">ABC</option>
<option value="bca" selected>BCA</option>
<option value="mnp">MNP</option>
<option value="pqr">PQR</option>
</select>
I am struggling with situation of geting events from two different resources. I know that as ajax is asynchronous I cant get more than one callbacks and my code is proving that - By reloading the page I am getting random results from one or other query. But there must be some workaround, right? I just wanna get combined array of both events and vacations so I can pass it to fullcalendar as one instance. Thanks a lot!
var events = [];
var vaca = [];
var now = moment();
var nextMonth = now.clone().add(1, 'month');
$.ajax({
type: "GET",
url: "/home/GetEvents",
success: function (data) {
$.each(data, function (i, v) {
//alert(v.id);
events.push({
title: v.title,
description: "Project Type: " + v.projectType,
start: moment(v.onSite),
end: v.onSiteTill != null ? moment(v.onSiteTill).add('days', 1) : null,
color: v.color,
allDay: true
});
})
GenerateCalendar(events);
},
error: function (error) {
alert('failed');
}
})
$.ajax({
type: "GET",
url: "/home/GetVacations",
success: function (data2) {
$.each(data2, function (i, v) {
//alert(v.who);
vaca.push({
title: v.who,
description: ("Who or what: " + v.who + ". Vacation because " + v.why).link("Vacation/Edit/" + v.id),
start: moment(v.fromWhen),
// add one day due to excluding end date in callendar
end: v.tillWhen != null ? moment(v.tillWhen).add('days', 1) : null,
color: "#cc0000",
allDay: true
});
})
GenerateCalendar(vaca);
},
error: function (error) {
alert('failed');
}
})
You can call next Ajax call from first AJAX call.
Sample Code for Reference:
$.ajax({url: URL, data : {//data
}).done( function( data ) {
// Handles successful responses only
}).fail( function( error) {
console.log( error);
}).then( function( data ) { // Promise finished
$.ajax( { //2nd ajax
url : URL,
data : { DATA }
}).done( function( data ) {
// 2nd call finished
}).fail( function( reason ) {
console.log( error);
});
});
Generate your calendar first then make 2 calls to render the events. You can use the FullCalendar renderEvent or renderEvents to achieve this.
I have created a basic working example here.
First of all I looked trough a lot of same questions on stack. My problem is as follows:
I'm working on a school project to make a card game (ginrummy)
In this web application (mvc 4) I want to move cards to sets (right side) and I want to do this with ajax.
added a picture to clearify.
The ajax perfectly triggers the controller and perfectly bring over the data I put through.
In firebug I checked the response and it even added a card to the right correct set
The problem is when the ajax is done, it doesn't trigger the succes function neither it updates the page.
Note: This is my first time I work with ajax.
The complete function returns OK status.
Now the code:
View:
var GameId = #Model.Id
$(function () {
$(".droppable").droppable({
drop: function (event, ui) {
var id = ui.draggable.find("a").attr("data-CardId");
var location = droppableId = $(this).attr("id");
$.ajax({
type: "POST",
url: '#Url.Action("ChangeCardLocation")',
data: { 'id': GameId, 'cardId': id, 'location': location },
succes: function () {
alert('wow');
},
complete:function (){
}
});
}
});
});
Controller:
public ActionResult ChangeCardLocation(int id, int cardId, Location location)
{
var game = db.Games.Find(id);
var card = db.Cards.Find(cardId);
game.ChangeCardLocationTo(card, location);
db.SaveChanges();
game.Info = game.GetInfo(id);
if (game.GameState == GameState.playerOneLayOn || game.GameState == GameState.playerTwoLayOn)
{
return View("LastTurn", game);
}
else
{
return View("Details", game);
}
}
Any suggestions on what is going wrong?
I'm a student and it is for a school project!
#comment:
When I did this:
error: function(xhr, error){
console.log(error);
console.log(xhr);
},
I noticed it didn't get triggerd.
After that I tried the same in complete:
complete:function (xhr, error){
console.log(error);
console.log(xhr);
}
The result was
succes
object that returned readystate 4
I misspelled success thats in the first part it wasn't working. But my next question is how do make it updating the contents of the page that the ajax call is getting back.
I am trying myself offcourse now. In the data succes is getting is my whole page delivered as I want to have it.
Is it because you have misspelt "success"?
$.ajax({
type: "POST",
url: '#Url.Action("ChangeCardLocation")',
data: { 'id': GameId, 'cardId': id, 'location': location },
success: function () {
alert('wow');
},
complete:function (){
}
});
I have a strange problem and i m not able to understand why it is happening.
I called a page - Remarks(say) by jquery ajax on row click of grid viw. Then i binded that page (coming in response) into a div - dvRemarks(say). This div is opening in a popup.
Pop-up window is only opening first time, which is working fine. But when i click second time, data is coming in response, But this time popup is not opening. Problem is with popup only but i don't understand why it is ?
When i again refresh the page, it again opens up Ist time only.
Below is jquery :-
jQuery(function() {
// Remarks
jQuery('#<%=dvRemarks1.ClientID %>').dialog({
autoOpen: false,
width: 600,
modal: true
});
// Remarks Link
jQuery('#lnkDialog').click(function() {
jQuery('#<%=dvRemarks1.ClientID %>').dialog('open');
return false;
});
});
Below is the function which i am calling on click :-
function Call_Ajax(id)
{
var d = new Date();
var n = d.getMilliseconds();
var parameters="id=" + id;
$.ajax({
type: "POST",
url: "Remark.aspx",
data: {id:id, n:n},
success: function(response) {
$('#<%=dvRemarks.ClientID %>').html(response);
$("#lnkDialog").click();
},
error: function() {
alert('Some problem has been occured.');
}
});
}
And below is the div - dvRemarks in which i am binding response
<div id="dvRemarks1" runat="server" style="display: none;" title="Enter Remarks">
<div id="dvRemarks" runat="server">
</div>
</div>
Thanks.
Not sure on this but give a try to below one.
jQuery(function() {
// Remarks
jQuery('#<%=dvRemarks1.ClientID %>').dialog({
autoOpen: false,
width: 600,
modal: true, //Calling destroy on close function might help
close: function() {
$(this).dialog("destroy");
}
});
// Remarks Link
jQuery('#lnkDialog').click(function() {
jQuery('#<%=dvRemarks1.ClientID %>').dialog('open');
return false;
});
});
give a try changing ajax call to
function Call_Ajax(id)
{
var d = new Date();
var n = d.getMilliseconds();
var parameters="id=" + id;
$.ajax({
type: "POST",
url: "Remark.aspx",
data: {id:id, n:n},
success: function(response) {
$('#<%=dvRemarks.ClientID %>').empty().html(response); //empty function may be of some help here
$("#lnkDialog").click();
},
error: function() {
alert('Some problem has been occured.');
}
});
}
I have a jquery mobile based implementation of a mobile website and now learning backbone.js and rethinking the app to better organize it.
var membership = Backbone.Model.extend();
var memberships = Backbone.Collection.extend({
model: membership,
parse: function (resp, xhr) {
},
url: "/groups.svc/memberships/azxcv01"
});
var col1 = new memberships();
col1.fetch({ success: function () {
console.log(col1);
}
});
In chrome, I see that the URL is formatted well and returns valid JSON back. The parse() event also gets a valid resp. But the console.log() above displays and empty array "[ ]".
What am I missing ?
try this,
here link to fiddle http://jsfiddle.net/w7xeb/ (updated)
var membership = Backbone.Model.extend();
var memberships = Backbone.Collection.extend({
model: membership,
parse: function (resp, xhr) {
return resp;
},
});
var col1 = new memberships();
col1.fetch({
url : "/restful/fortune",
success: function () {
console.log(col1);
}
});
response
$.mockjax({
url: "/restful/fortune",
responseTime: 750,
contentType: "text/json",
responseText: [{
a:'a'
},{
a:'b'
},{
a:'c'
}]
});