I am creating a row made from a widget dynamically from another controller. While I seem to have access to the views I cannot access the exported functions.
Here is the controller code for the widget.
var moment = require("/lib/moment-with-locales");
var args = $.args;
var isSent = true;
function configure(data){
$.userImage.image = data.otherUser.attributes["avatar-thumb-url"];
$.userNameLabel.text = Alloy.Globals.getFormattedName(data.otherUser.attributes["first-name"], data.otherUser.attributes["last-name"]);
//$.userRatingLabel.text = data.userRating;
$.bodyLabel.text = data.messages[0].attributes.body;
$.timeLabel.text = new moment(data.messages[0].attributes.timestamp).fromNow();
}
function setSentStatus(sent){
isSent = sent;
$.statusLabel.height = 15;
if(sent == false){
$.statusLabel.color = Alloy.CFG.colors.red;
} else {
$.statusLabel.color = Alloy.CFG.colors.grey0;
}
};
function sendMessage(){
Alloy.Globals.fluidAPI.postMessage(JSON.stringify({
"data": {
"type": "message",
"attributes": {
"body": data.messages[0].attributes.body,
"recipient_id": data.otherUser.id
}
}
}), function(postMessageResponse){
if(postMessageResponse){
Ti.API.info(postMessageResponse);
}
});
}
exports.configure = configure;
exports.setSentStatus = setSentStatus;
exports.sendMessage = sendMessage;
configure(args.data);
When I call the "sendMessage()" function from another controller. It can't find it.
var row = Alloy.createWidget("chatDetail.chatRow", {message: {attributes:{body: $.toolbarTextArea.getValue(), timestamp: new moment().toISOString()}}, user: Alloy.Globals.currentUserData});
Ti.API.info(row);
controllers.push(row);
$.tableView.appendRow(row.getView());
$.tableView.scrollToIndex($.tableView.data[0].rows.length-1);
row.sendMessage();
Anyone knows what I need to do to access those functions? It seems that if the widget is generated in the view XML file this issue doesn't exist.
Lets say that this is your widget .xml:
<Alloy>
<View id="widget">
<Label id="userNameLabel"/>
<Label id="userRatingLabel"/>
<Label id="bodyLabel"/>
<Label id="timeLabel"/>
<Label id="statusLabel"/>
</View>
</Alloy>
In your .js controller you could add the function to your widget, or set it directly, like:
$.widget.sendMessage = sendMessage;
Call it:
var widget = Alloy.createWidget("chatDetail.chatRow",{}).getView();
widget.sendMessage();
win.add(widget);
Or to the root, if you didn't call 'getView()' yet:
$.sendMessage = sendMessage;
Call it:
var widget = Alloy.createWidget("chatDetail.chatRow",{});
widget.sendMessage();
win.add(widget.getView());
Related
This is a follow-up to the following post:
Modal Pop-Up Displaying Incorrectly When ModelState.IsValid = false Redirect
My Pop-Up validates correctly but after it process the form data it is not getting closed. Once the data gets loaded in the db, I run the following:
TempData["ID"] = status.IssueID;
return RedirectToAction("edit");
Since the Modal doesn't close, the view data gets populated in the modal and not the window.
If I try to use return View("edit"); the underlying page fails because there is no model data on the page.
Here is the current code that I implemented from the post referenced above:
<script>
$('body').on('click', '.modal-link', function () {
var actionUrl = $(this).attr('href');
$.get(actionUrl).done(function (data) {
$('body').find('.modal-content').html(data);
});
$(this).attr('data-target', '#modal-container');
$(this).attr('data-toggle', 'modal');
});
$('body').on('click', '.relative', function (e) {
e.preventDefault();
var form = $(this).parents('.modal').find('form');
var actionUrl = form.attr('action');
var dataToSend = form.serialize();
$.post(actionUrl, dataToSend).done(function (data) {
$('body').find('.modal-content').html(data);
});
})
$('body').on('click', '.close', function () {
$('body').find('#modal-container').modal('hide');
});
$('#CancelModal').on('click', function () {
return false;
});
$("form").submit(function () {
if ($('form').valid()) {
$("input").removeAttr("disabled");
}
});
</script>
Here is the code that I run to open the modal:
<div id="modal-container" class="modal fade" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
</div>
</div>
</div>
Add New Status
And here are the actions when I submit data from the modal:
[ValidateAntiForgeryToken]
[HttpPost]
public ActionResult CreateEdit(StatusViewModel model)
{
if (ModelState.IsValid)
{
StatusModel status = new StatusModel();
status.IssueID = model.IssueID;
status.StatusDate = DateTime.Today;
status.Status = model.Status;
status.ColorCode = model.ColorCode;
status.NextStep = model.NextStep;
if (model.addedit == "edit")
{
status.UpdatedByNTID = AppHttpContext.Current.Session.GetString("userntid").ToString();
string done = _adoSqlService.UpdateStatus(status);
}
else
{
status.EnteredByNTID = AppHttpContext.Current.Session.GetString("userntid").ToString();
string done = _adoSqlService.InsertStatus(status);
}
TempData["ID"] = status.IssueID;
return RedirectToAction("edit");
}
else
{
return PartialView("_CreateEdit", model);
}
}
Before I implemented the Javascript code as identified in the link, the modal form closed properly but I couldn't validate. After implementation, the modal form validates but the modal receives the redirect instead of closing. What am I doing wrong
the Modal doesn't close, the view data gets populated in the modal and not the window.
It's the expected result, Ajax render the result of redirection to the modal. You should do the redirection in the done function.
Modify the CreateEdit method:
[ValidateAntiForgeryToken]
[HttpPost]
public ActionResult CreateEdit(StatusViewModel model)
{
if (ModelState.IsValid)
{
StatusModel status = new StatusModel();
status.IssueID = model.IssueID;
status.StatusDate = DateTime.Today;
status.Status = model.Status;
status.ColorCode = model.ColorCode;
status.NextStep = model.NextStep;
if (model.addedit == "edit")
{
status.UpdatedByNTID = AppHttpContext.Current.Session.GetString("userntid").ToString();
string done = _adoSqlService.UpdateStatus(status);
}
else
{
status.EnteredByNTID = AppHttpContext.Current.Session.GetString("userntid").ToString();
string done = _adoSqlService.InsertStatus(status);
}
TempData["ID"] = status.IssueID;
}
return PartialView("_CreateEdit", model);
}
Add a hidden input in the partial view to mark if the returned model has passed the validation.
<input name="IsValid" type="hidden" value="#ViewData.ModelState.IsValid.ToString()" />
Then determine whether to redirect in the script:
$('body').on('click', '.relative', function (e) {
e.preventDefault();
var form = $(this).parents('.modal').find('form');
var actionUrl = form.attr('action');
var dataToSend = form.serialize();
$.post(actionUrl, dataToSend).done(function (data) {
$('body').find('.modal-content').html(data);
var isValid = $('body').find('[name="IsValid"]').val() == 'True';
if (isValid) {
$('body').find('#modal-container').modal('hide');
window.location.href = "/Issue/Edit";
}
});
})
Result:
I have a table in my form and I don't want it to display until a link on the page is clicked which would call an action to get the data and redirect back to the same view so the table is populated. In essence like a master/detail form. I added a css class to hide the table but the only way I know of to call the action is to use ajax. I wrote the code for the function but and it seems to work fine but the table does not populate and I can't figure out why. I am using a partial view for the table which is supposed to be populated after the link is clicked. I'm very new to MVC so I have no idea what I'm missing, any help would be appreciated.
This is the link used in the jquery click event
<td><a id="viewOrder" href="#" data-PONumber-id=#osOrder.PurchaseOrderNumber>View Order</a></td>
This is my jQuery to call the action in the controller
$(document).ready(function() {
$("#viewOrder").on("click",
function(e) {
var button = $(this);
$.ajax({
type: "GET",
url: '#Url.Action("Details", "Receiving")',
data: { "id": button.attr("data-PONumber-id") },
success: function() {
var orderButton = $(".js-Order");
orderButton.removeClass("invisible");
orderButton.addClass("visible");
}
});
});
});
This is my controller code.
public ActionResult Details(int id)
{
var purchaseOrder = _context.PurchaseOrders.Single(p => p.PurchaseOrderNumber == id);
var viewModel = new ReceivngFormViewModel
{
PO = purchaseOrder.PurchaseOrderNumber,
Vendor = purchaseOrder.Vendor.VendorName,
Contact = purchaseOrder.Vendor.Phone,
OutstandingOrders = _context.PurchaseOrders.Where(od =>
od.Closed == false && !String.IsNullOrEmpty(od.PurchaseOrderNumber.ToString()) &&
od.OrderDate != null).ToList(),
ReceivedOrderDetails = _context.PurchaseOrderDetails
.Where(pod => pod.PurchaseOrderID == purchaseOrder.PurchaseOrderID && (pod.Quantity - pod.ReceiveOrderDetails
.Sum(rod => rod.QuantityReceived)) != 0)
.Select(pod => new ReceivedOrderDetail
{
PurchaseOrderId = pod.PurchaseOrderID,
PurchaseOrderDetailId = pod.PurchaseOrderDetailID,
PartId = pod.PartID,
PartDescription = pod.Part.Description,
QtyOnOrder = pod.Quantity,
QtyOutstanding = pod.ReceiveOrderDetails.Select(rod => rod.QuantityReceived).Any() ?
pod.Quantity - pod.ReceiveOrderDetails.Sum(rod => rod.QuantityReceived) : pod.Quantity
}).ToList()
};
return View("Index", viewModel);
}
Scenario: In our application a user can create a invoice by filling in certain fields on a Knockout view. This invoice can be previewed, via another Knockout page. I want to use the preview url within our PDF creator (EVOPdf), so we can provide the user with a PDF from this invoice.
To preview the invoice we load the data (on document ready) via an ajax-request:
var InvoiceView = function(){
function _start() {
$.get("invoice/GetInitialData", function (response) {
var viewModel = new ViewModel(response.Data);
ko.applyBindings(viewModel, $("#contentData").get(0));
});
};
return{
Start: _start
};
}();
My problem is within the data-binding when the PDF creator is requesting the url: the viewModel is empty. This makes sense because the GetInitialData action is not called when the PDF creator is doing the request. Calling this _start function from the preview page directly at the end of the page does not help either.
<script type="text/javascript">
$(document).ready(function() {
InvoiceView.Start();
});
</script>
Looking at the documentation of EvoPdf, JavaScript should be executed, as the JavaScriptEnabled is true by default: http://www.evopdf.com/api/index.aspx
How could I solve this, or what is the best approach to create an pdf from a knockout view?
Controller action code:
public FileResult PdfDownload(string url)
{
var pdfConverter = new PdfConverter();
// add the Forms Authentication cookie to request
if (Request.Cookies[FormsAuthentication.FormsCookieName] != null)
{
pdfConverter.HttpRequestCookies.Add(
FormsAuthentication.FormsCookieName,
Request.Cookies[FormsAuthentication.FormsCookieName].Value);
}
var pdfBytes = pdfConverter.GetPdfBytesFromUrl(url);
return new FileContentResult(pdfBytes, "application/pdf");
}
Javascript:
var model = this;
model.invoiceToEdit = ko.observable(null);
model.downloadInvoice = function (invoice) {
model.invoiceToEdit(invoice);
var url = '/invoice/preview';
window.location.href = '/invoice/pdfDownload?url=' + url;
};
The comment of xdumaine prompted me to think into another direction, thank you for that!
It did take some time for the Ajax request to load, but I also discovered some JavaScript (e.g. knockout binding) errors along the way after I put a ConversionDelay on the pdf creator object
pdfConverter.ConversionDelay = 5; //time in seconds
So here is my solution for this moment, which works for me now:
To start the process a bound click event:
model.downloadInvoice = function (invoice) {
var url = '/invoice/preview/' + invoice.Id() + '?isDownload=true';
window.open('/invoice/pdfDownload?url=' + url);
};
which result in a GET resquest on the controller action
public FileResult PdfDownload(string url)
{
var pdfConverter = new PdfConverter { JavaScriptEnabled = true };
// add the Forms Authentication cookie to request
if (Request.Cookies[FormsAuthentication.FormsCookieName] != null)
{
pdfConverter.HttpRequestCookies.Add(
FormsAuthentication.FormsCookieName,
Request.Cookies[FormsAuthentication.FormsCookieName].Value);
}
pdfConverter.ConversionDelay = 5;
var absolutUrl = ToAbsulte(url);
var pdfBytes = pdfConverter.GetPdfBytesFromUrl(absolutUrl);
return new FileContentResult(pdfBytes, "application/pdf");
}
The Pdf creator is requesting this action on the controller, with isDownload = true (see bound click event):
public ActionResult Preview(string id, bool isDownload = false)
{
return PartialView("PdfInvoice", new InvoiceViewModel
{
IsDownload = isDownload,
InvoiceId = id
});
}
Which returns this partial view:
PartialView:
// the actual div with bindings etc.
#if (Model.IsDownload)
{
//Include your javascript and css here if needed
#Html.Hidden("invoiceId", Model.InvoiceId);
<script>
$(document).ready(function () {
var invoiceId = $("#invoiceId").val();
DownloadInvoiceView.Start(invoiceId);
});
</script>
}
JavaScript for getting the invoice and apply the knockout bindings:
DownloadInvoiceView = function() {
function _start(invoiceId) {
$.get("invoice/GetInvoice/" + invoiceId, function(response) {
var viewModel = new DownloadInvoiceView.ViewModel(response.Data);
ko.applyBindings(viewModel, $("#invoiceDiv").get(0));
});
};
return {
Start: _start
};
}();
DownloadInvoiceView.ViewModel = function (data) {
var model = this;
var invoice = new Invoice(data); //Invoice is a Knockout model
return model;
};
Im working in Titanium Alloy and creating a popup window as a widget. I want to have the close - image up over the right top corner, so it stick abit out of the popup window.
So I created 2 separate window in the widget xml-file. One to just hold the close - image and one who is the popup - window.
Everythings look as I want, but I cant get the popup - window to close?!
I have tried:
$.myWindow.close();
Amd I have tried:
var win = Widget.createController('myWindow', 'myWindowID').getView();
win.close();
But nothing happens
Here is my xml - code:
<Alloy>
<Window id="popup">
<View id="myImagesViewIn" class="myImagesViewIn" onClick="closeWin">
<ImageView id="myImageIn" class="myImageIN" />
</View>
</Window>
<Window id="winImageOut" onClick="closeWindow">
<View id="myImagesViewOut" class="myImagesViewOut" >
<ImageView id="myImageOut" class="myImageOut" />
</View>
</Window>
</Alloy>
And here is my JS-code:
var args = arguments[0] || {};
$.popup.transform = args.transform || '';
/*
exports.setDataModalWindow = function(data) {
$.lblModalWinHead.text = data.title;
$.lblModalWinBody.text = data.text;
};
*/
function fnCloseClick() {
$.viewModal.close();
}
/*
$.myImagesViewOut.addEventListener('click', function(e) {
$.popup.close();
});
*/
function closeWin(e) {
$.myImagesViewOut.setVisible(false);
$.popup.close();
}
function closeWindow(e) {
//$.popup.close();
var wins = Widget.createController('widget', 'popup').getView();
wins.setVisible(false);
alert('hejsan');
//Ti.API.info('close');
}
exports.openModalWindow = function(arg) {
//$.lblModalTitle.text = arg.title || 'foo';
//$.lblModalText.text = arg.text || 'ff';
var t = Titanium.UI.create2DMatrix().scale(0);
var args = {
transform : t
};
var controller = Widget.createController('widget', args).getView();
controller.open();
// controller.animate(a2);
var t1 = Titanium.UI.create2DMatrix();
t1 = t1.scale(1.2);
var a1 = Titanium.UI.createAnimation();
a1.transform = t1;
a1.duration = 400;
controller.animate(a1);
var b1 = Titanium.UI.create2DMatrix();
var a2;
a1.addEventListener('complete', function() {
b1 = b1.scale(1.5);
a2 = Titanium.UI.createAnimation();
a2.transform = b1;
a2.duration = 400;
controller.animate(a2);
});
// create the controller a keep the reference
/*
controller.setDetails({
label: 'Are you sure you wish to log out?\n\nIf you do so you will no longer be able to take part in any challenges until you login again.',
ok: 'Log me out',
cancel: 'Cancel'
});
*/
// now get a reference to the UI inside the controller
//var win = controller.getView();
a1.addEventListener('complete', function() {
// simple reset animation
var t2 = Ti.UI.create2DMatrix();
var a3 = Titanium.UI.createAnimation();
a3.transform = t2;
a3.duration = 400;
controller.animate(a3);
$.winImageOut.open();
});
};
first thing is you are opening popup window so you should open that window...
then you should close bot the window in closeWindow function.
function closeWindow(e) {
$.popup.close();
$.winImageOut.close();
alert('hejsan');
//Ti.API.info('close');
}
I do not know your requirement but you should use only one window to show popup then its easy for you to handle open,close event of window.
The goal of my code is to search on the API search string:
So if you fill out the form you get the hits bij name.
I used the following Knockout.js script:
var viewModel=
{
query : ko.observable("wis"),
};
function EmployeesViewModel(query)
{
var self = this;
self.employees = ko.observableArray();
self.query = ko.observable(query);
self.baseUri = BASE + "/api/v1/search?resource=employees&field=achternaam&q=";
self.apiurl = ko.computed(function() {
return self.baseUri + self.query();
}, self);
//$.getJSON(baseUri, self.employees);
//$.getJSON(self.baseUri, self.employees);
$.getJSON(self.apiurl(), self.employees);
};
$(document).ready(function () {
ko.applyBindings(new EmployeesViewModel(viewModel.query()));
});
The html binding is:
<input type="text" class="search-query" placeholder="Search" id="global-search" data-bind="value: query, valueUpdate: 'keyup'"/>
But if i fill the text box i onley get the default "wis" employees? What am I doing wrong?
Not entirely sure what is wrong here, but have you debugged it and seen what the value of query is in apiurl?
One potential issue is that you are passing employees to getJSON as the observable, not the underlying array, so you could try:
$.getJSON(self.apiurl(), self.employees());
After some digging I found a solution.
var employeesModel = function(){
var self = this;
self.u = base +'/api/v1/search';
self.resource = 'employees';
self.field = 'achternaam';
self.employees = ko.observableArray([]);
self.q = ko.observable();
//Load Json when model is setup
self.dummyCompute = ko.computed(function() {
$.getJSON(self.u,{'resource': self.resource, 'field': self.field, 'q':self.q }, function(data) {
self.employees(data);
});
}, self);
};
ko.applyBindings(new employeesModel());