In ExtJs we have a page load event named Ext.onReady() which is called after window.onload as it is registered to onload and than called. so basicly last event we can find is Ext.onReady().
The problem is that I have several Ext.onReady() for a bussiness reqiurment which we can't change. I have ExtJs TabbedPanel which is been reandered to the page which is in the last Ext.onReady() of the page.
What I want is to register some events on TabbedPanel after it is rendered to the page. Assume that you don't have control over the TabbedPanel's render event as well as you can't create onReady after last onReady of the page.
Ext.require([
'Ext.window.MessageBox',
'Ext.tip.*'
]);
Ext.onReady(function(){
Ext.get('mb1').on('click', function(e){
Ext.MessageBox.confirm('Confirm', 'Are you sure you want to do that?', showResult);
});
Ext.get('mb2').on('click', function(e){
Ext.MessageBox.prompt('Name', 'Please enter your name:', showResultText);
});
Ext.get('mb3').on('click', function(e){
Ext.MessageBox.show({
title: 'Address',
msg: 'Please enter your address:',
width:300,
buttons: Ext.MessageBox.OKCANCEL,
multiline: true,
fn: showResultText,
animateTarget: 'mb3'
});
});
Ext.get('mb4').on('click', function(e){
Ext.MessageBox.show({
title:'Save Changes?',
msg: 'You are closing a tab that has unsaved changes. <br />Would you like to save your changes?',
buttons: Ext.MessageBox.YESNOCANCEL,
fn: showResult,
animateTarget: 'mb4',
icon: Ext.MessageBox.QUESTION
});
});
Ext.get('mb6').on('click', function(){
Ext.MessageBox.show({
title: 'Please wait',
msg: 'Loading items...',
progressText: 'Initializing...',
width:300,
progress:true,
closable:false,
animateTarget: 'mb6'
});
// this hideous block creates the bogus progress
var f = function(v){
return function(){
if(v == 12){
Ext.MessageBox.hide();
Ext.example.msg('Done', 'Your fake items were loaded!');
}else{
var i = v/11;
Ext.MessageBox.updateProgress(i, Math.round(100*i)+'% completed');
}
};
};
for(var i = 1; i < 13; i++){
setTimeout(f(i), i*500);
}
});
Ext.get('mb7').on('click', function(){
Ext.MessageBox.show({
msg: 'Saving your data, please wait...',
progressText: 'Saving...',
width:300,
wait:true,
waitConfig: {interval:200},
icon:'ext-mb-download', //custom class in msg-box.html
animateTarget: 'mb7'
});
setTimeout(function(){
//This simulates a long-running operation like a database save or XHR call.
//In real code, this would be in a callback function.
Ext.MessageBox.hide();
Ext.example.msg('Done', 'Your fake data was saved!');
}, 8000);
});
Ext.get('mb8').on('click', function(){
Ext.MessageBox.alert('Status', 'Changes saved successfully.', showResult);
});
//Add these values dynamically so they aren't hard-coded in the html
Ext.fly('info').dom.value = Ext.MessageBox.INFO;
Ext.fly('question').dom.value = Ext.MessageBox.QUESTION;
Ext.fly('warning').dom.value = Ext.MessageBox.WARNING;
Ext.fly('error').dom.value = Ext.MessageBox.ERROR;
Ext.get('mb9').on('click', function(){
Ext.MessageBox.show({
title: 'Icon Support',
msg: 'Here is a message with an icon!',
buttons: Ext.MessageBox.OK,
animateTarget: 'mb9',
fn: showResult,
icon: Ext.get('icons').dom.value
});
});
function showResult(btn){
Ext.example.msg('Button Click', 'You clicked the {0} button', btn);
};
function showResultText(btn, text){
Ext.example.msg('Button Click', 'You clicked the {0} button and entered the text "{1}".', btn, text);
};
});
Thanks for your replys friends. I have solved the issue.. For your information and for the your information m posting solution
I have created a callback method in java. which means it will be called from a perticular other function is called. I just checked the function which is taking most time to excetue and at last of that function created callback.
Problem is solved thanks.. :)
Related
Hi I'm kinda new to JS and I'm trying to figure out why i'm getting unexpected behavior.
I'm trying to define some functions and hook up some buttons but some events are firing on page load and I can't tell what determines if it will fire or not and more importantly how to stop it.
//this one does not execute on page load
var saveDataCallback = function(){
alert('Save Successful');
};
//this one executes on page load
var addFieldToForm = function(){
alert('wtf mate');
};
$(document).ready(function(){
//this one does not execute the alert when I load the page
$("#showMePOTATOSALAD").on('click', function (){ alert(JSON.stringify(formDataObj)) });
var dialog = $("#addToFormDialog");
//this one does execute the dialog open when I load the page
$("#addToForm").on('click', function(){ dialog.data("kendoDialog").open() });
}
this was the issue
dialog.kendoDialog({
title:'Add Field to Form',
modal:true,
width: 500,
height: 350,
content:"",
actions:[
{text: 'Cancel'},
{text: 'Add', action: addFieldToForm() }
]
});
Changed to
dialog.kendoDialog({
title:'Add Field to Form',
modal:true,
width: 500,
height: 350,
**visible: false,**
content:"",
actions:[
{text: 'Cancel'},
{text: 'Add', action: **addFieldToForm** }
]
});
Thanks in advance
As mentioned in the comment, your document ready code block is missing a close parenthesis...
Change the following--
$("#addToForm").on('click', function(){ dialog.data("kendoDialog").open() });
}
To:
$("#addToForm").on('click', function(){ dialog.data("kendoDialog").open() });
});
$(document).ready(function(){
//this one does not execute the alert when I load the page
$("#showMePOTATOSALAD").on('click', function (){ alert(JSON.stringify(formDataObj)) });
var dialog = $("#addToFormDialog");
//this one does execute the dialog open when I load the page
$("#addToForm").on('click', function(){ dialog.data("kendoDialog").open() });
}
it's normal, the alert will be displayed when YOU CLICK ON THE ELEMENT WITH THE ID=showMePOTATOSALAD and the dialog when YOU CLICK on THE ELEMENT WITH THE ID=addToForm.
I am trying to figure out how to make the following $ngConfirm box update after a function is completed.
After submit is clicked, the following appears (the cog is spinning):
$scope.inProgress = function(){
$ngConfirm({
theme: 'modern',
icon: "fa fa-cog fa-spin fa-.5x fa-fw",
title: 'File is downloading Please wait.',
content: "",
buttons: {
}
});
};
After this box is displayed, the function doSomething() gets called. Once that function returns, I would like to update the display to the following (the cog stops):
$scope.Complete = function(){
$ngConfirm({
theme: 'modern',
icon: "fa fa-cog fa-.5x fa-fw",
title: 'Spreadsheet Generated!',
content: "File size is {$scope.fileSize}, Do you want to save it?",
buttons: {
'Yes, save my file': {
downloadStuff();
$ngConfirm('Spreadsheet saved to "Downloads" folder.');
},
'No, take me back': {
action: function(){
$ngConfirm('Download has been cancelled.');
}
}
}
});
};
And this is the way I currently have it set up in the submit() function inside my controller:
$scope.submit = function() {
$scope.inProgress();
$scope.doSomething();
$scope.Complete();
};
Using the above code, my application displays both elements layered over eachother. I am stuck trying to figure out how to make $scope.inProgress() update with the details inside $scope.Complete() once $scope.doSomething() returns.
Could someone offer me some advice on what changes I need to make? I've tried to tinker with $scope.inProgress at the end of the submit function, but I always end up displaying a new confirm box or not actually changing something.
My current idea is something along the lines of
$scope.ConfirmationControl = function() {
$scope.inProgress(){
storageService.doSomethingCool().then(
$scope.inProgress() = //updated elements
)
}
}
Does that make sense? Am I close or thinking about this totally wrong?
Thank you in advance for your help! :)
Angular Confirm
There is an example of how to change content on the site. https://craftpip.github.io/angular-confirm/#quickfeatures. Under the Features header you can click on the button labeled "Dialogs" to see an example. Basically you will need to put everything in the content: option with some scope variables. When doSomething() is done, set a $scope variable ($scope.somethingWasDone in this case) and in your dialog have the ng-if. Below is an untested example.
$scope.inProgress = function(){
$scope.title = 'File is downloading. Please wait.';
$ngConfirm({
scope: $scope,
icon: "fa fa-cog fa-spin fa-.5x fa-fw",
content: '<h2>{{title}}</h2>' +
'<div ng-if="somethingWasDone">' +
'<div>File size is 250kb, do you want to save it?</div>' +
'<button ng-click="downloadStuff()">Yes</button>' +
'<button ng-click="cancel()">No</button>' +
'</div>'
});
};
// when your doSomething function is done
$scope.doSomething().then(function(result) {
$scope.title = 'Spreadsheet Generated!';
$scope.somethingWasDone = true;
});
I'm trying to force submitting of my form, the problem is that I use bootboxjs
(that uses an asynchronous code) to make a confirmation dialog before submitting, this is exactly I want, also the required inputs are validated in that way.
This is the structure of my JS code:
$("#myForm").submit(function(e){
bootbox.confirm({
message: "Are you sure?",
buttons: {
confirm: {
label: 'Yes',
className: 'btn-danger'
},
cancel: {
label: 'NO, STOP!',
className: 'btn-primary'
}
},
callback: function (result){
if (result)
{
// Some code to set values to hidden inputs and another irrelevant stuff...
// The right command (that I didn't know) to force the form
}
}
});
return false;
});
How can I avoid this issue and preserve the validation of required inputs?
You can prevent the jquery event and use a native one to force a browser default submit when you are ready
$("#myForm").submit(function(e){
// store reference to form due to callback context
var form = this;
bootbox.confirm({
message: "Are you sure?",
buttons: {... },
callback: function (result){
if (result)
{
// Some code to set values to hidden inputs and another irrelevant stuff...
// Now use native submit
form.submit();
}
}
});
// prevents jQuery submit only
return false;
});
I'm trying to use a Zebra_Dialog modal window as a small form for user input. However, when retrieving the textbox values, it returns a blank string every time. This is what I'm using to create the pop-up:
new $.Zebra_Dialog("<table><tr><td>Request ID:</td><td><input id='txtRequest' type='text' /></td></tr><tr><td>Request Title:</td><td><input id='txtTile' type='text' /></td></tr></table>", {
'type': 'information',
'title': 'Save Estimate',
'buttons':
[
{
caption: 'Submit', callback: function () {
UploadToDB();
return false;
}
},
{
caption: 'Cancel', callback: function () {
}
}
]
});
When the UploadToDB method fires it has this code to get the value from the dynamically created textboxes:
function UploadToDB() {
var param = {
requestID: document.getElementById("txtRequest").value,
requestTitle: document.getElementById("txtTitle").value
};
//Other code here.....
}
I've also tried different variations such as requestID: $("#txtRequest").val(),.
Every time though I get a blank string back. Any help appreciated.
I really like Zebra_Dialog, so I wrote these helper functions. zprompt() is the one you want, it turns out to be a little tricky to get Zebra to handle prompt, and I couldn't get zprompt or zconfirm to act like synchronous Javascript functions prompt or confirm which is why they have callbacks. The OP has the same problem I had, which is that the text input vanishes on closure and jquery cannot get its value, that's why I use the old-fashioned onchange handler below.
function zalert(msg,title,type) {
$.Zebra_Dialog(msg,"title":title||'Alert',"type":type||'error',"position":['center','top+50']});
}
function zconfirm(msg,title,okproc) {
$.Zebra_Dialog(msg,{
'type': 'question',
'title': title||'Confirm?',
'position': ['center','top+50'],
'buttons': ['OK','Cancel'],
'onClose': function(caption) {
if (caption=="OK")
okproc();
}
});
}
var zprompt_value='';
function zprompt(msg,deftxt,title,okproc) {
var len=deftxt.length;
var wd=len*10;
if (wd<220) wd=300;
var size=len || 24;
$.Zebra_Dialog(msg,{
'title': title||'Confirm?',
'message': msg+"<br><input type=text onchange='zprompt_value=this.value' value='"+deftxt+"' size="+size+">",
'width': wd,
'position': ['center','top+50'],
'buttons': ['OK','Cancel'],
'onClose': function(caption) {
if (caption=="OK")
okproc(zprompt_value);
}
});
Here are some examples how they might be called:
zalert("Big mistake!","Report","error");
zconfirm("Are you sure you want to format the drive?","Confirm?",function(){
format_drive(); // Ack!
});
zprompt("Enter a funny nickname:","(nickname)","Nickname",function(n){
set_nickname(n);
});
Hope that helps someone, it took most of an afternoon to figure it out! If there's a better way to do it, please tell me.
SSF
In my web app, on one of the forms, I have a button(s) that users can click to look up names from the corporate directory. Once they have found the name, they click on the results and the name and other directory data is populated onto the form. At least, that is how I would like it to work.
My question is how to properly use a callback function so that my data from the look up is brought back to the form where I can parse it out to the correct fields.
From the form page I have the following click function:
$(".lookupNameBTN").button({
icons: {primary:"ui-icon-gear"}}) //button
.on("click",function(event){
var btn = $(this).attr("data");
mainApp.lookup(function(obj){
if(btn == "request"){
$("input[name=requestName]").val(obj.cil);
}; //request
if(btn == "client"){
$("input[name=clientName]").val(obj.cil);
}; //client
}); //lookup
}); //click
The mainApp.lookup() opens the dialog box and loads the server files.
mainApp.lookup = function(callback){
if($("#lookupDialog").length == 0){
$("body").append("<div id=\"lookupDialog\" class=\"dialogDivs\" />");
}; //div exists
$("#lookupDialog").load("/RAMP/cfm/common/lookup.cfm",function(r,s,x){
if(s == "success"){
mainApp.lookupDialog = $("#lookupDialog").dialog({
title: "Corporate Directory",
modal: true,
width:600,
height:450,
position: {my:"center center", at:"center center", of: "#app"},
close: function(){
$("#lookupDialog").dialog("destroy").remove();
} //close
}); //dialog
}else{ alert("Error in Loading");
} //success
}); //load
}; //mainApp.lookup
Finally, on the lookup popup, I have the following when the user clicks on the table row with the results:
$("#lookupResultsTbl tr").on("click",function(){
var rslt= $(this).attr("data");
// magic goes here to return value
}); //click
Once I have the value, I'm unclear how to get it back to the callback function?
I really appreciate the assistance.
Thanks,
Gary
UPDATE: I added the Coldfusion tag because using CF9 for my server side. Since this isn't specific to server side, I'll remove that tag.
My question is around continuation. One the form page, I am calling mainApp.lookup. I would like to provide a callback in that function that returns the data from the directory lookup.
The load function completes and returns the html for the dialog box. The user must interact with that dialog by searching for a name and getting the returned results.
I am looking for a way to return the data in the tr click event in the dialog box back to the mainApp.lookup function and then to the callback in the original statement in my form.
You should be able to safely invoke your callback function in the if(s == "success") code block;
mainApp.lookup = function(callback){
if($("#lookupDialog").length == 0){
$("body").append("<div id=\"lookupDialog\" class=\"dialogDivs\" />");
}; //div exists
$("#lookupDialog").load("/RAMP/cfm/common/lookup.cfm",function(r,s,x){
if(s == "success"){
callback() // here
mainApp.lookupDialog = $("#lookupDialog").dialog({
title: "Corporate Directory",
modal: true,
width:600,
height:450,
position: {my:"center center", at:"center center", of: "#app"},
close: function(){
$("#lookupDialog").dialog("destroy").remove();
} //close
}); //dialog
}else{ alert("Error in Loading");
} //success
}); //load
}; //mainApp.lookup
.. which is itself in the standard jQuery .load() callback function anyway .. so I hope I've understood your question properly!