I've struggled with this problem for two days. I googled it and see some similar cases.
After sending POST request to the server, I wanna redirect the page to another one. The POST function works properly but window.location.assign() method doesn't work (although it works in another part of my project).
Here is my code:
const $btnDel = $("<button>", {
appendTo: $('td:eq(0)', $tr),
"class": "revertButton",
html: "<i class='material-icons'>restore</i>",
on: {
click: function () {
console.log(`Reverting: ${book.name}`)
$.post(`/revert/${book.name}`, {
bookName: `${book.name}`,
pageCount: `${book.pageCount}`,
action: "REVERT"
}).done(() => {
window.location.assign('/bookPage');
})
}
}
});
The first console.log works (I mean console.log("Reverting: ${book.name}"), but done function doesn't work.
Can you please try the below code.
const $btnDel = $("<button>", {
appendTo: $('td:eq(0)', $tr),
"class": "revertButton",
html: "<i class='material-icons'>restore</i>",
on: {
click: function () {
console.log(`Reverting: ${book.name}`)
$.post(`/revert/${book.name}`, () => {
bookName: `${book.name}`,
pageCount: `${book.pageCount}`,
action: "REVERT"
}).done(() => {
window.location.assign('/bookPage');
}).fail(function(error){
console.log(error);
})
}
}
});
Hope this will give you some help/clue.
Related
I am not sure if this can even be done. I have a custom system that creates a modal. The modal is generated by ajax.
there are two different ways I achieve this.
Normal CHTML page link:
#Ajax.ModalDialogActionLink("Edit", "Edit", "Edit", "btn btn-warning btn-sm", new { id = item.QuoteId })
Pure Ajax:
'<li><i class="fa fa-pencil-square"></i>Quick Edit</li>';
I would like to add this feature to the eventClick for editing.
This is what I have tried, but this only opens a new page of Edit:
eventDidMount: function (arg) {
arg.el.onclick = function () {
arg.data.ajax.attr('data-ajax-update', "#skEdit");
arg.data.ajax.attr('data-ajax-success', "openModalDialog(\'SkEdit\', \'Edit\')");
arg.data.ajax.attr('data-ajax-mode', "replace");
arg.data.ajax.attr('data-ajax-method', "GET");
arg.data.ajax.attr('data-ajax-begin', "prepareModalDialog(\'SkEdit\')")
arg.data.ajax.attr('data-ajax', "true");
}
},
eventClick: function (arg, element) {
//window.location = "/CalendarManager/Edit/" + arg.event.id;
location = "/CalendarManager/Edit/" + arg.event.extendedProps.eventId;
},
events: {
url: '/CalendarManager/Findall',
failure: function () {
alert('there was an error while fetching events!');
},
},
I must be missing something or it just cannot be done..
Thanks for your help!
I have SPA multi view application in AngularJS, I have defined $interval which is started from another view Controller. When i click a btn with function called and line $interval.cancel(); in it, it does not stop.
Here are examples of my code:
MainController:
$scope.$on("startInterval", function () {
$interval(function warningsControl() {
console.log("Timer stamp!");
$.ajax({
// some web api call which works fine
})
}, 10000);
});
$scope.stop = function () {
$interval.cancel();
}
$scope.logoutButton = {
text: "Logout",
type: "normal",
visible: false,
onClick: function () {
// some working code
$scope.stop();
var logoutBtn = $("#logout-btn").dxButton("instance");
logoutBtn.option({
visible: false
});
}
}
And SecondController:
$scope.authenticateButton = {
type: "default",
text: "Log In",
onClick: function () {
$.ajax({
// some web api calling
success: (data) => {
// some working code
$rootScope.$broadcast("startInterval");
}
})
}
}
This code start interval and everithing is running OK, until the point i click Logout btn - it made everithing except stoping the interval.
Any ideas how to fix it? I would be grateful for advice.
The $interval function should return some sort of ID which you can pass into $interval.cancel(). For example:
var int_id = $interval( func, time )
//...later...
$interval.cancel(int_id)
Im using this tool here http://craftpip.github.io/jquery-confirm/#dialog and i wanted to have a popup that has a variable amount of buttons based on a piece of data used to construct pop up.
Here is an example of what a very simple/empty one looks like.
$.confirm({
title: 'testing',
content: 'this has two static buttons',
buttons: {
confirm: function () {
},
cancel: function () {
},
}
});
What i want is to be able to put a foreach loop in side of "buttons: { ... }".
Is there a way to do so or a way to achieve what i am trying to do?
Just build your options object before :
var options = {
title: 'testing',
content: 'this has two static buttons',
buttons: {},
};
$.each( variable_name, function(){
options.buttons[ this.btn_name ] = this.fn;
} );
$.confirm( options );
Of course, everything depends on how the object you loop looks like, but the logic is here.
Your logic is inverted. The following is an object:
{
title: 'testing',
content: 'this has two static buttons',
buttons: {
confirm: function () {
},
cancel: function () {
},
}
}
So you could do:
var options = {
title: 'testing',
content: 'this has two static buttons',
buttons: {
confirm: function () {
},
cancel: function () {
},
}
};
$.confirm(options);
You then can add items by
options.buttons["mybutton"] = function() { };
You can place the previous code in a loop and change the string "mybutton" to whatever you want for whatever functions you have. You're basically asking how to add a property to and existing javascript object.
I have 3 links, 2 with a pushstate data 1 without. Users + Tags link has data, topics doesnt. If i click users then topics then back or tags then topics then back it works perfect. if I click users then tags then click back it will only load the last pushstate (tags). if i click tags then users then back it just reuses the users pushstate. if i go tags -> users -> topics, back will goto users, back again will also be users ??
$('#changetousers').click(function () {
$('#loadingAjaxs').show(); $('#flubestext').hide();
$('#contentwrap').load('#Url.Action("FollowingUsersDetail", "Following", new {#ajax = "yes"})', function () { $('#loadingAjaxs').hide(); $('#flubestext').show(); window.history.pushState({ "page": "followingusers" }, 'title1', '/users/'); window.onpopstate = function (e) { document.getElementById('changetousers').click(); };
})
});
$('#changetotags').click(function () {
$('#loadingAjaxs').show(); $('#flubestext').hide();
$('#contentwrap').load('#Url.Action("FollowingTagsDetail", "Following", new {#ajax = "yes"})', function () { $('#loadingAjaxs').hide(); $('#flubestext').show(); window.history.pushState({ "page": "followingtags" }, 'title2', '/tags/'); window.onpopstate = function (e) { document.getElementById('changetotags').click(); }; })
});
$('#changetofavorites').click(function () {
$('#loadingAjaxs').show(); $('#flubestext').hide();
$('#contentwrap').load('#Url.Action("FollowingTopicsDetail", "Following", new {#ajax = "yes"})', function () { $('#loadingAjaxs').hide(); $('#flubestext').show(); window.history.pushState(null, 'title', '/favorites/'); })
});
I think you calling the pushState even user clicks to back, this is why you cannot go to previous state. This should work:
function loadUserDetails() {
$('#loadingAjaxs').show();
$('#flubestext').hide();
$('#contentwrap').load(
'#Url.Action("FollowingUsersDetail", "Following", new {#ajax = "yes"})',
function () {
$('#loadingAjaxs').hide();
$('#flubestext').show();
});
}
$('#changetousers').click(function () {
loadUserDetails();
window.history.pushState({ "page": "followingusers" }, 'title1', '/users/');
window.onpopstate = function (e) { loadUserDetails(); };
});
I have a function inside a toolbar, let's call it:
Ext.define('MyArchive.Toolbar', {
search: function() {
console.log('searching');
}
}
Now I'd like to call this function when clicking a button. So I'm adding some click handlers in the afterRender on the toolbar setup:
afterRender: function() {
Ext.getCmp('search-button').on('click', this.search);
}
However, this doesn't work and I ultimately need to go the full route of:
afterRender: function() {
Ext.getCmp('search-button').on('click', function() {
quick_search();
)};
}
Any particular reason why my first attempt doesn't apply the click handler as I expect?
Thanks for any explanations or refactorings! Additional patterns/idioms welcome...
Next try:
var panelOverall = new Ext.form.FormPanel({
html: 'bla',
search: function() {
console.log('searching');
},
buttons: [
{
text: 'Moo',
id: 'button1',
handler: function(){
//window.destroy();
}
}
],
afterRender: function() {
Ext.getCmp('button1').on('click', this.search);
}
});
is working for me.. am I missing something?