I want to enable those two button after submit on same page using yii2.
First time the button will be disabled, As i click on submit after successfully submit that buttons would be enabled.
How can we perform this in yii2?
Please help.
thanks in advance !!
You can use ajax form submit and enable buttons inside the success callback. Assuming the id of your from is myForm and your Add Slider and Add Attchment buttons have ids add-slider and add-attachment respectively.
$(document).ready(
$('#myform').on('beforeSubmit', function(event, jqXHR, settings) {
var form = $(this);
if(form.find('.has-error').length) {
return false;
}
$.ajax({
url: form.attr('action'),
type: 'post',
data: form.serialize(),
success: function(data) {
$('#add-slider, #add-attachment').prop('disabled', false);
}
});
return false;
}),
);
Related
Submitting a page form results in an ajax call to a backend service which returns an json object. The object is than bound to a vue.js template (a div with a particular id). Everythiong works as expected on the first submit. However, the view is not updated on any following form submits (it still shows the data from the first submit).
<div id="Response"></div>
$('#Form').submit(function (e) {
e.preventDefault();
var $form = $(e.target);
$.ajax({
url: 'https://somewhere,
type: 'POST',
data: $form.serialize(),
dataType: 'json',
success: function(response) {
if (response) {
var app = new Vue({
el: '#Response',
data: response
});
}
}
});
});
How to do this properly so each time the form is submitted, the view is updated appropriately based on the last response?
Now you are creating a new vue instance with each response. You need to mount the vue instance first, then use the response to update the data in it.
While searching in stack overflow .I find an old issue that i am facing too.But no one answered it.
So just wants to know anyone have any idea about it
How to get jquery Tooltipster Plugin to work for newly created DOM elements?
Following is my code
$(document).ready(function() {
$('.test_link').tooltipster({
interactive:true,
content: 'Loading...',
functionBefore: function(origin, continueTooltip) {
continueTooltip();
// next, we want to check if our data has already been cached
//if (origin.data('ajax') !== 'cached') {
$.ajax({
type: 'POST',
url: 'example.php',
success: function(data) {
// update our tooltip content with our returned data and cache it
origin.tooltipster('content', $(data)).data('ajax', 'cached');
}
});
// }
}
});
});
My problem solved.
Just add the instantiation script in the ajax content too.
also set the option multiple:true
ie
$(document).ready(function() {
$('.test_link').tooltipster({
interactive:true,
multiple:true,
content: 'Loading...',
functionBefore: function(origin, continueTooltip) {
continueTooltip();
// next, we want to check if our data has already been cached
//if (origin.data('ajax') !== 'cached') {
$.ajax({
type: 'POST',
url: 'example.php',
success: function(data) {
// update our tooltip content with our returned data and cache it
origin.tooltipster('content', $(data)).data('ajax', 'cached');
}
});
// }
}
});
});
It worked for me in Firefox.But didn't tested in other browser
I know this is an old post, and the problem was solved, but i recently needed something similar.
Adding the initialization on every ajax function was not a solution since we had several content dynamically loaded on the page, so the simplest solution found was:
$(document).on('mouseenter', '[data-toggle="tooltip"]', function(){
if ($(this).is('.tooltipstered')) {
// Do nothing
} else {
$(this).tooltipster({
delay: 50,
// Your other Tooltipster options
});
$(this).mouseover();
}
});
$('[data-toggle="tooltip"]') being the OP's $('.test_link').
The if deter the repeated initialization of document mouseenter.
I'm new to Durandal, so I might be taking the wrong approach to my problem.
I want to show a modal popup with a message of 'logging in...please wait' when the user has clicked the login button. I want to close the modal popup once the response is received. My attempted approach is to call a custom modal popup using Durandal's app.showModal and a view with no buttons, from the login view model. This shows the modal popup I'm after, but I haven't been able to figure out how to close the popup once the server response is received. All the examples I've seen have a button on the modal popup view that closes the popup.
Is this possible? If not, is there a better approach that will show the user something is happening and also stop the user from trying to use any other button on the view?
Here's the view model code for the login view (with extraneous code removed):
define(['services/appsecurity', 'durandal/plugins/router', 'services/utils', 'services/errorhandler', 'durandal/app', 'viewmodels/controls/activityindicator'],
function (appsecurity, router, utils, errorhandler, app, activityIndicator) {
var username = ko.observable().extend({ required: true }),
password = ko.observable().extend({ required: true, minLength: 6 }),
rememberMe = ko.observable(),
returnUrl = ko.observable(),
isRedirect = ko.observable(false),
var viewmodel = {
username: username,
password: password,
rememberMe: rememberMe,
returnUrl: returnUrl,
isRedirect: isRedirect,
appsecurity: appsecurity,
login: function() {
var credential = new appsecurity.credential(this.username(), this.password(), this.rememberMe() || false),
self = this;
activityIndicator.message = 'Logging in...please wait';
app.showModal(activityIndicator);
appsecurity.login(credential, self.returnUrl())
.fail(self.handlevalidationerrors)
.always(function() { activityIndicator.close(); });
}};
return viewmodel;
});
The appsecurity.login function is the ajax post call. The view model for the custom modal is:
define(function () {
var activityIndicator = function (message, title, options) {
this.message = message;
this.title = title || activityIndicator.defaultTitle;
this.options = options || activityIndicator.defaultOptions;
this.close = function() {
this.modal.close();
};
};
return activityIndicator;
});
When running this, I get an error on .always(function() { activityIndicator.close(); }); of close is undefined.
Note for anyone using Durandal 2.0, the above marked answer only works in earlier 1.x versions. Happy coding!
Found the problem. The viewmodel for the custom modal was wrong, so the close() method was undefined. The working viewmodel is:
define(function () {
var message = ko.observable();
var activityIndicator = {
message: message,
close: function() {
this.modal.close();
}
};
return activityIndicator;
});
I have a div (mvc4 razor):
<div onclick='dialogtrigger(this)'>send</div>
when user click on this div it goes to loading a view on popup dialog box and show it to user.
it works fine for the first time that user click it, after that when user close dialog box and want to reopen it again it gives me this error :
0x800a01b6 - JavaScript runtime error: Object doesn't
support property or method 'dialog'
I clean my browser cache and check my script file if it can not support dialog why works for the first time?
my function code:
$.ajax({
url: "OpenSendDialog",
type: "GET",
})
.done(function (result) {
$("#clientdetailmodal").html(result).dialog({
autoOpen: true, modal: true, show: {
effect: "blind",
duration: 500
}
});
});
}
in my main view:
<div id="clientdetailmodal"></div>
and my controller:
[HttpGet]
public ActionResult OpenSendDialog()
{
return view();
}
I think that a problem with your function and her scope...
look here, i hope that'll help you :
var dialogtrigger=null; // global scope
$(function() {
dialogtrigger = function (){
//replace with your ajax call
$("#clientdetailmodal").html($('#content')).dialog({
autoOpen: false, modal: true, show: {
effect: "blind",
duration: 500
}
});
}
$( "#opener" ).click(function() {
// or destruct your modal on close and re-call your ajax
$( "#clientdetailmodal" ).dialog( "open" );
});
});
I have gone through as many questions on here as I could find and tried all the different suggestions and cannot get this to work. I have a view that is bound with Knockout using the mapping plugin and it works okay but only when I do the "wrong thing". Everything that I have read says that you should only make one call to ko.applyBindings() per view and then everything should update using ko.mapping.fromJS(). I cannot seem to get this to work, the only way I have been able to get my view to refresh is to call ko.applyBindings() again in the success call back from my .ajax() call. Here is the offending code.
<script type="text/javascript">
var viewModel;
$(document).ready(function() {
$("#panelbar").kendoPanelBar({
expandMode: "multiple"
});
$.ajax({
type: 'GET',
url: '/Home/IsUserMarketingManager',
success: function (data) {
if (data == true) {
$('#submitNewCase').hide();
$('#approveCase').show();
$('#disapproveCase').show();
}
}
});
// Generate client View Model from Server View Model
viewModel = new ViewModel();
ko.mapping.fromJS(#Html.Raw(Json.Encode(Model)),{}, viewModel);
ko.applyBindings(viewModel);
});
function ViewModel () {
var self = this;
self.addLocation = function() {
self.AdditionalLocations.push({ GaNumber: "" });
};
}
</script>
And later this to update the form with retrieved data:
<script type="text/javascript">
$('#btnImport').click(function () {
$.blockUI({ message: '<h2>Importing Client Information...</h2> <img src="/Images/ajax-loader.gif"><br />' });
$.ajax({
type: 'post',
url: '/Home/ImportClientCrmInfoJson',
dataType: "json",
data: ko.mapping.toJS(viewModel),
success: function (data) {
$.unblockUI();
if (!data.AccountNull) {
ko.mapping.fromJS(data, {}, viewModel);
} else {
alert("Could not find account for this GA Number, please try again.");
}
}
});
});
</script>
When submitting the form to my controller, all the data is there and mapped correctly to my server side View Model, but the form in the view isn't updated with the data that comes back from the $.ajax call. I've gotten the form to update if I do the following, but I know it's not the right way and has caused me other issues as well.
<script type="text/javascript">
$('#btnImport').click(function () {
$.blockUI({ message: '<h2>Importing Client Information...</h2> <img src="/Images/ajax-loader.gif"><br />' });
$.ajax({
type: 'post',
url: '/Home/ImportClientCrmInfoJson',
dataType: "json",
data: ko.mapping.toJS(viewModel),
success: function (data) {
$.unblockUI();
if (!data.AccountNull) {
viewModel = ko.mapping.fromJS(data);
ko.applyBindings(viewModel); // This works but isn't the right way...
} else {
alert("Could not find account for this GA Number, please try again.");
}
}
});
});
</script>
Any help would be much appreciated.
Have you examined that the following line of code appears to create a 'NEW' viewmodel?
viewModel = ko.mapping.fromJS(data);
When you do this the new viewModel the old bindings are destroyed. This is why you have to call ApplyBindings again. Anyway, I think the above line of code is the root of the problem.
Is there a way for you to create an observable property on the viewModel and allow the viewModel to reflect the data in this object? That may be a more practical approach to the update process.
In the success callback of the ajax call, use this method ko.applyBindings(viewModel) but pass as a second parameter the DOM portion you want to update as follows
ko.applyBindings(viewModel, $("#mydiv")[0])
Don't use a jquery object but a REAL DOM object.