Zebra_Dialog - Get input texbox value - javascript

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

Related

How to stop/pause async call of ajax

I am stuck on this since yesterday, now I need help. I don't know how to properly 'question' this, but I think this is around the concern of ajax is asynchronous.
I am unable to complete the ajax call from my view when I call an ajax function inside an ajax postback.
$.ajax({
url: '#Url.Action("GetValidateAssignAccountName", "AccountsAssignment")?companyID=' + companyid,
type: request_method,
data: form_data
}).done(function (data) {
if (data == '') {
PromptAssign(data, post_url, request_method, form_data);
}
else {
Assign(post_url, request_method, form_data);
}
});
Assign function doesn't work/complete. I don't know how to call it, but it goes through the controller and calls the stored procedure, returns a success msg, but for some reason, the procedure did not work/save.
My problem is that, when I call PromptAssign - in which case I call a messageDialog and then call the Assign inside, right there the Assign does the job. Here is the PromptAssign function:
$("#messagedialog").dialog({
open: function () {
$(".ui-widget-overlay").css({ background: "#000000", opacity: 0.5 });
$(".ui-dialog-title").css("color", "#228B22");
//$(".message-img").attr("src", "../Content/images/success.png");
$(".message-wrapper").html(msg);
},
modal: true, height: 250, width: 500,
buttons: {
//'Ok': function () { $(this).dialog('close'); },
'Assign': function () {
Assign(post_url, request_method, form_data);
$(this).dialog('close');
},
'Close': function () { $(this).dialog('close'); }
},
create: function () {
$(this).closest(".ui-dialog")
.find(".ui-button").eq(2)
.addClass("btn btn-default");
},
title: "Confirmation",
dialogClass: "noclose"
});
Initially, the code was just the assign function which calls an sp to save a data. But we added the PromptAssign (first code block, then call a msgbox/PromptAssign, then assign) which is a validation if its existing or not, then the user can still Assign after if he still chooses to.
So when the validation returns nothing, I don't need to PromptAssign, so I just call the Assign straight away. This is not working. Anything I am missing on how to use ajax?
Just to answer the comments, there was an earlier problem like this that goes to the ajax, and then to the controller executing the stored procedure but for some reason the data isn't updated. We fixed the issue by making those ajax calls in a separate function.
For this one, I was trying to apply the same thing to no avail, I know there is nothing wrong in my way of using ajax, turns out, it was a data issue. The specific record in which I was testing is not working properly due to database validations. Still, thank you for looking at it.

Remove from a ComboBox a parameter in extjs 3.4

I want to remove a parameter from the store of a comboBox before it shows to the user, I know more or less how to do it but it´s not working properly, any one could give some solution? Maybe I need to select an specific event, but I tried with all the events that make sense and didn´t work, Here is the code:
var combo = fwk.ctrl.form.ComboBox({
storeConfig: {
url: app.bo.type.type_find
,fields: ['id', 'code']
}
,comboBoxConfig:{
triggerAction: 'all'
,allowBlank:false
}
});
combo.on('beforeshow', function() {
combo.store.removeAt(2);
});
Thank you very much!!!
Try removing it inside 'afterRender' event,
sample code:
listeners: {
'afterrender': function(comboRef) {
comboRef.store.removeAt(2);
}
}
Here you have the solution,
combo.getStore().load({
callback: function (r, options, success) {
if (success) {
combo.store.removeAt(2);
}
}
});
Is necessary to change it before the load of the store because first is painted the combobox and then is charged with the store data I was erasing data in a empty store.

Accept Image in Filefield ExtJs

I have a filefield componente in my application and I want to restrict it to only image files. I've found this question on stackoverflow:
How to restrict file type using xtype filefield(extjs 4.1.0)?
Add accept="image/*" attribute to input field in ExtJs
I'm using this code:
{
xtype:'filefield',
listeners:{
afterrender:function(cmp){
cmp.fileInputEl.set({
accept:'audio/*'
});
}
}
}
But this code only works the first time I click on "Examine" button, when I click again on it, the restriction dissapears. I've been looking for other events like onclick to write this code in that event, but I don't find the best way to do it, Anyone has any idea?
Greetings.
This is happening because when you submit form, it calls Ext.form.field.File#reset().
You should override reset() method like this, to keep you accept property:
{
xtype:'filefield',
reset: function () {
var me = this,
clear = me.clearOnSubmit;
if (me.rendered) {
me.button.reset(clear);
me.fileInputEl = me.button.fileInputEl;
me.fileInputEl.set({
accept: 'audio/*'
});
if (clear) {
me.inputEl.dom.value = '';
}
me.callParent();
}},
listeners:{
afterrender:function(cmp){
cmp.fileInputEl.set({
accept:'audio/*'
});
}
}
}

How to mask phone number input in Kendo UI Grid Column

We're working on a Kendo UI grid that is bound to REST endpoint. The messaging portion is working great.
Where we're having trouble is trying to mask a phone number input. We like the following behavior:
1) User clicks into phone number cell.
2) User enters 1234567890.
3) When leaving the cell, the format is changed to (123) 456-7890.
We looked already at custom formats. Those seem date/time and number specific. I haven't found a way to do a custom format for a string column.
We also looked at doing this with a formatPhoneNumber function that is called on each cell's change event. I'm not happy with that approach, though it does work.
Here is the base code for the grid. I'd like to just find a way to include a custom format, or bind to a function when defining the column or field properties.
EditGridConfig = function() {
var self = this;
self.gridConfig = {
columns: [
{ field: 'PhoneNumber', title: 'Phone Number', width: '150px' },
],
data: [],
toolbar: [
{ name: "save" },
{ name: "cancel" }
],
dataSource: {
type: "json",
transport: {
read: "/api/BusinessEntity",
update: {
url: function(parent) {
return "/api/BusinessEntity/" + parent.Id;
},
dataType: "json",
type: "PUT"
}
},
schema: {
model: {
id: "Id",
fields: {
PhoneNumber: { type: "string" },
}
}
}
},
editable: "incell"
};
self.selectedData = ko.observable();
};
Here is the change event and formatPhoneNumber function we are using to get the phone number to format when focus leaves the cell. I'm just not happy with this approach, and am looking for a "cleaner" way to do it.
change: function (e) {
if (e.field == "PhoneNumber") {
console.log('before' + e.items[0].PhoneNumber);
e.items[0].PhoneNumber = formatPhoneNumber(e.items[0].PhoneNumber);
console.log('after' + e.items[0].PhoneNumber);
}
}
function formatPhoneNumber(number) {
return number.replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3');
}
Thanks much for any suggestions!
Sorry for answering my own question. I thought I would add some more detail along the lines of #James McConnell's answer so other people won't struggle like I did trying to wire up the jQuery.on event with the .mask function.
Thanks to James' hint, I wound up using the Masked Input jQuery plugin and wiring up to dynamically created events using jQuery.on.
Here is the helper function I wrote (simplified for example):
applyDynamicInputMask = function(container, selector, event, mask) {
$(container).on(event, selector, function() {
var $this = $(this);
$this.mask(mask);
});
};
And to call it:
applyDynamicInputMask(document, "[name='PhoneNumber']", 'focusin', "(999) 999-9999");
edit: function (e) {
//if edit click
if (!e.model.isNew()) {
$('input[name=Time]').attr("data-role", "maskedtextbox").attr("data-mask", "00:00");
//init mask widget
kendo.init($('input[name=Time]'));
}
}
Have you tried a jQuery plugin? We use this one at work:
http://digitalbush.com/projects/masked-input-plugin/
You can bind the plugin to any jQuery selector, so just slap a custom class on the input that needs formatted, and use that to hook up the plugin. Not sure if this is a viable solution, but it's what I've used in the past. HTH! :)

Get data from the server and display in the Edit Form

This question is continuation of the following question Add JSON data to the view that unfortunately ended up unresolved yet.
In my main view which has a form with 2 controls and placeholder for flexigrid I added the following at the bottom
<div id="add-edit-dialog" style="display: none" title="Add / Edit Client">
#Html.Partial("_ClientForm", Model)
</div>
The flexigrid pluglin instantiates in run-time and adds 3 buttons: Add, Edit, Delete.
For Edit button I need to get the current row information from the server and then display it in the Form. For Add button I do not need to go to the server (I think).
This is my current code for the Edit button:
function edit(com, grid) {
$('.trSelected', grid).each(function () {
var id = $(this).attr('id');
id = id.substring(id.lastIndexOf('row') + 3);
currentId = id;
$('#fntype').val('Edit');
var ClientName;
ClientName =$('.trSelected td:eq(2)').text();
var url = '/Client/Edit/' + id ;
$.getJSON(url, function (html) {
// setFormControls(data.Id, data.Role, data.Location, data.JobType,
// data.Description);
// alert(data);
$($dlg).html(html);
});
//location.replace(url);
RunModalDialog("Edit Client: " + ClientName);
});
So, it is going to Edit controller action and returns that same partial view _ClientForm with correct information passed as a model. If I look at the response result returned in FireBug I can see that the returned HTML is correct and all the textboxes have correct information in their values.
However, the dialog that opens looks exactly the same as the dialog for the Add button - in other words, all form controls come blank. I can not figure out what is wrong and why it is not working the way I want it.
This is what I have for the RunModalDialog:
var validator = $("#add-edit-form").validate();
var $dlg = $("#add-edit-dialog").dialog({
autoOpen: false,
show: "blind",
closeOnEscape: true,
resizable: true,
width: 1200,
height: 750,
minHeight: 600,
minWidth: 950,
buttons: {
"Save": function () {
if ($("#add-edit-form").valid()) {
// jobPost.setVals(txtId.val(), txtRole.val(),
// txtLocation.val(), txtJobType.val(),
// txtDescription.val());
$.ajax({
type: 'POST',
//data: JSON.stringify(clientInformation),
url: '/Client/Save',
dataType: 'json',
contentType: 'application/json',
success: function (result) {
// insert new list into grid
$('#flexClients').flexAddData(result);
}
});
$(this).dialog('close');
} else return false;
},
Cancel: function () {
$(this).dialog("close");
clearForm();
if (validator)
validator.resetForm();
}
},
close: function () {
clearForm();
},
open: function () {
//$("#add-edit-dialog").parent().appendTo($("#add-edit-form"));
}
});
function RunModalDialog(title, url) {
if (title) {
$dlg.dialog("option", {"title": title });
}
if (url) {
$dlg.load(url).dialog("option", { "title": title }).dialog("open");
//$dlg.load(url, function () {
// var validator = $("#sform").validate();
// if (validator)
// validator.resetForm();
// $dlg.dialog("option", { "title": title }).dialog("open");
//});
} else {
$dlg.dialog("open");
}
}
The code with the load (and commented code) was another attempt to solve this problem. That sort of worked (the form displayed with the info), but the main Client view was also reloaded so I was seeing double grid.
Do you see what should I change in my code to get this thing working?
Thanks a lot in advance.
With Jazzen Chen from MS help we solved this problem. All I needed to do to display the data correctly was to change getJSON to just get jquery function. Now my form comes with data populated correctly and the next challenge will be to save the data.
I posted a blog post with what I have so far - hope it may help
http://blogs.lessthandot.com/index.php/WebDev/UIDevelopment/AJAX/asp-net-mvc-project-with

Categories