toaster.clear('*') does not work inside a jQuery function - javascript

I'm using Angular toaster messages. I use toaster.clear('*') to clear a toaster message and show the next toaster message. This works fine in my other situations.
However here it does not work. I clear the previous toaster message and change the text of the toaster, but the message changes only when I hover over it.
$("#pageColorPallette").change(function() {
if ($scope.questionNumber == 1) {
selectedcoler = $("#pageColorPallette").spectrum("get");
selectedhexacoler = selectedcoler.toHexString();
toaster.clear('*');
var content = document.getElementById("editableTextArea");
content.style.backgroundColor = selectedhexacoler;
if (selectedhexacoler == '#ffffff') {
if ($scope.attempts < 3) {
$scope.addMarksGeneric($scope.activityThreeMarks, 10);
}
toaster.clear('*');
toaster.pop({
type: 'info',
title: 'step 2',
body: ' body of step two message',
toasterId: 2
});
$scope.questionNumber = $scope.questionNumber + 1;
} else {
$scope.deductMarksGeneric($scope.activityThreeMarks, 5);
toaster.pop({
type: 'error',
title: 'try again',
body: 'please try again.',
toasterId: 2
});
}
} else {
$scope.deductMarksGeneric($scope.activityThreeMarks, 5);
toaster.pop({
type: 'error',
title: 'try again',
body: ' Please continue according to the steps.',
toasterId: 2
});
}
});

Related

Error in generating invoice from sales order in suitescript 2.0?

I tried to include a button (created from user event) on Sales order. Upon clicking it, Invoice will be generated. As soon as the button is hit, ther comes an error and invoice doesnt get generated. Can anyone help me with this?
//Client script
function pageInit() {
}
function csForButton(ctx) {
var rec = curr.get();
var customer = rec.getValue({ "fieldId": "customer" });
log.error({
title: 'customer',
details: customer
});
var scriptURL = url.resolveScript({
"scriptId": "customscript_button_task_sl",
"deploymentId": "customdeploy_button_task_sl"
});
console.log('scriptURL', scriptURL);
window.onbeforeunload = null;
window.open(scriptURL + '&id=' + rec.id);
}
return {
pageInit: pageInit,
csForButton: csForButton
};
//User Event Script
function beforeLoad(ctx) {
//if (context.type == context.UserEventType.VIEW) {
addbutton(ctx);
// }
}
function addbutton(ctx) {
try {
var rec = ctx.newRecord;//record object, now we can get its properties through it(e.g. fields)
var statusOfTrans = rec.getValue({ fieldId: 'status' });
log.error('statusOfTrans', statusOfTrans);
ctx.form.clientScriptFileId = "16474"
if (ctx.type == "view" && statusOfTrans == 'Pending Fulfillment') {
ctx.form.addButton({
id: 'custpage_make_invoice',
label: 'create invoice!',
functionName: 'csForButton'
});
}
}
catch (error) {
log.error('addbutton', error);
}
}
return {
beforeLoad: beforeLoad,
}
//Suitelet Script
function onRequest(ctx) {
try {
var req = ctx.request;
var res = ctx.response;
if (req.method == 'GET') {
var objRecord = rec.transform({
fromType: rec.Type.SALES_ORDER,
fromId: req.parameters.id,
toType: rec.Type.INVOICE,
isDynamic: true,
});
objRecord.save({
ignoreMandatoryFields: true
});
res.write({output: 'Invoice created'});
}
} catch (error) {
log.error('onRequest', error);
}
}
return {
'onRequest': onRequest
}
error (in suitelet):
{"type":"error.SuiteScriptError","name":"USER_ERROR","message":"You must enter at least one line item for this transaction.","stack":["anonymous(N/serverRecordService)","onRequest(/SuiteScripts/button SL.js:39)"],"cause":{"type":"internal error","code":"USER_ERROR","details":"You must enter at least one line item for this transaction.","userEvent":null,"stackTrace":["anonymous(N/serverRecordService)","onRequest(/SuiteScripts/button SL.js:39)"],"notifyOff":false},"id":"","notifyOff":false,"userFacing":false}
As Error says to include atleast 1 line but i wanted it to be generated automatically. I am new in suitescript and taking all the help from the documentation. Can anyone jst guide me what is wrong i m doing?
Thank u
You need the SO status to be Pending Billing. If the status of the SO is Pending Fulfillment, then no line items are ready to be invoiced.

pop up modal not appearing when toggle button is clicked

I have posted this kind of question before but after making changes I am getting new error now so I am again posting it.I have toggle button and when i click it my current page gets freezed as i cant click on any input form or any other button and the scroll bar also disappears.
Before clicking the toggle button everything is fine:
After i click the toggle button the error appears like this and the page gets freezed(computer works fyn):
My page source code for JS and jquery is:
The html part is:
<!-- toggle switch -->
<label class="switch">
<input type="checkbox" checked="checked" value="4" />
<div class="slider"></div>
</label>
The JS part is:
$('.switch input[type="checkbox"]').on('change',function(){
var checkbox=$(this);
var checked=checkbox.prop('checked');
var dMsg=(checked)? 'You want to activate the product':
'You want to deactivate the product';
var value=checkbox.prop('value');
bootbox.confirm({
size: 'medium',
title: 'Product Activation & Deactivation',
message: dMsg,
callback: function(confirmed){
if(confirmed){
console.log(value);
bootbox.alert({
size: 'medium',
title: 'Information',
message : 'you are going to perform operation on product'+ value
});
}
else{
checkbox.prop('checked',!checked);
}
}
});
});
myapp.js
$(function(){
switch(menu){
case 'About us':
$('#about').addClass('active');
break;
case 'Contact us':
$('#contact').addClass('active');
break;
case 'All Products':
$('#listProducts').addClass('active');
break;
case 'Manage Products':
$('#manageProducts').addClass('active');
break;
default:
if(menu == "Home") break;
$('#listProducts').addClass('active');
$('#a_'+menu).addClass('active');
break;
}
//code for jquery datatable
var $table=$('#productListTable');
//execute below code only where we have this table
if($table.length){
var jsonUrl='';
if(window.categoryId== ''){
//if categoryId passed through controller is empty
jsonUrl=window.contextRoot + '/json/data/all/products';
}
else{
//if categoryId passed is there listed in listProducts.jsp
jsonUrl=window.contextRoot + '/json/data/category/'+ window.categoryId +'/products';
}
$table.DataTable({
lengthMenu:[[3,5,10,-1],['3 Records','5 Records','10 Records','ALL']],
pageLength:5,
ajax :{
url: jsonUrl,
dataSrc : ''
},
columns: [
{
data : 'code' ,
mRender: function(data,type,row){
return '<img src="'+window.contextRoot+'/resources/images/'+data+'.jpg" class="dataTableImg" />';
}
},
{
data : 'name'
},
{
data : 'brand'
},
{
data : 'unitPrice' ,
mRender:function(data,type,row){
//to make Rs. in unit price
return '₹ ' + data
}
},
{
data : 'quantity' ,
mRender:function(data,type,row){
if(data<1){
return '<span style="color:red">Out of Stock!</span>';
}
return data;
}
},{
data : 'id',
mRender: function(data,type,row){
//data means id
var str='';
str += 'View';
if(row.quantity<1){
str+='Add to Cart';
}
else{
str += 'Add to Cart';
}
return str;
}
}
]
});
}
//dismissing alert after 3sec
var $alert=$('.alert');
if($alert.length){
setTimeout(function(){
$alert.fadeOut('slow');
},3000)
}
//-------------------------------
$('.switch input[type="checkbox"]').on('change', function() {
var checkbox = $(this);
var checked = checkbox.prop('checked');
var dMsg = (checked) ? 'You want to activate the product' :
'You want to deactivate the product';
var value = checkbox.prop('value');
bootbox.confirm({
size: 'medium',
title: 'Product Activation & Deactivation',
message: dMsg,
callback: function(confirmed) {
if (confirmed) {
console.log(value);
bootbox.alert({
size: 'medium',
title: 'Information',
message: 'you are going to perform operation on product' + value
});
} else {
checkbox.prop('checked', !checked);
}
}
});
});
});

Ionic popup alert not closing properly

The first alert verifies whether the entered password corresponds to the user's password
If it does, then opens another alert where the user change the password if he has entered the same password in both fields
And finally, the third alert will open if it has successfully changed the password
The problem occurs if I click Cancel in the second alert or after confirming the third alert
After that, I'm not able to click on anything inside the app until I unload and restart the same application
So I guess the problem occurs because the alert is not closed properly
Here is my code:
$scope.changePass = function () {
$scope.newitem = {}
var myPopup = $ionicPopup.alert({
template: '<input type="password" placeholder="password" ng-model="newitem.password">',
title: 'Insert your password',
scope: $scope,
buttons: [
{ text: 'Cancel' },
{
text: '<b>Confirm</b>',
type: 'button-positive',
onTap: function(e) {
if (!$scope.newitem.password) {
console.log("preventing default");
e.preventDefault();
} else {
if($scope.newitem.password == $scope.user.password) {
$scope.new = {}
var newPass = $ionicPopup.alert({
template: '<input type="password" placeholder="password" ng-model="new.newpass"><br><input type="password" placeholder="Repeat password" ng-model="new.repeatpass">',
title: 'Insert your new password',
scope: $scope,
buttons: [
{ text: 'Cancel' },
{
text: '<b>Confirm</b>',
type: 'button-positive',
onTap: function(e) {
if (!$scope.new.newpass) {
console.log("preventing default");
e.preventDefault();
} else {
if (!$scope.new.repeatpass) {
$scope.new.newpass = "";
console.log("preventing default");
e.preventDefault();
} else {
if ($scope.new.newpass == $scope.new.repeatpass) {
$scope.user.password = $scope.new.newpass;
var uri = "http://someLink" + $window.localStorage.id;
$http({
method: 'PUT',
url: uri,
headers: {"Content-Type": "application/json;charset=UTF-8"},
data: $scope.user
}).success(function() {
var succesResponse = $ionicPopup.alert({
title: 'Ok',
template: "Password has changed"
});
succesResponse;
e.preventDefault();
});
}
else {
$scope.new.newpass = "";
$scope.new.repeatpass = "";
e.preventDefault();
}
}
}
}
}
]
});
}
else {
$scope.newitem.password = "";
e.preventDefault();
}
}
}
}
]
});
}
I found the answer to my question
Namely, the solution is to close the first alert before I open the second alert
But before I open second alert, it is necessary to have a timeout to close the first alert properly
myPopup.close();
$timeout(function() {
$scope.new = {}
var newPass = $ionicPopup.alert({...});
}, 500);

Can I send data from Ionic JS Popup?

I try build android and in some page I'll make edit from popup. Example if i click input it will show popup and on popup be found input text. After input some text and click OK data from input text will be sent to server. But I don't know how to make it.
This my HTML
<input class = "button" ng-click = "showPopup()">Add Popup Show />
And This my JS
$scope.showPrompt = function() {
var promptPopup = $ionicPopup.prompt({
title: 'Title',
template: 'Template text',
inputType: 'text',
inputPlaceholder: 'Placeholder'
});
promptPopup.then(function(res) {
console.log(res);
});
};
Can anybody help me to solve my problem ? Thanks
I had used ionicPopup show (hope it helps you) :
$scope.updateQ = function() {
var alertpop = $ionicPopup.show({
title: 'Quantity',
templateUrl: 'popup-template.html',
scope: $scope,
buttons: [{
text: '<p class="popup-p">Ok</p>',
type: 'button-positive',
onTap: function(e) {
//window.localStorage.setItem("tmpqty",$scope.product.quantity);
return $scope.product.quantity;
}
}, {
text: '<p class="popup-p">Cancel</p>',
type: 'popup-close',
onTap: function(e) {
//alert($scope.product.quantity);
//return 'cancel button'
$state.go('app.productdetail', { product_id: $scope.product_id }, { reload: false })
}
}]
});
alertpop.then(function(res) {
var tmp_qty = res;
var pid = $scope.product_id;
var url = "" + base_url + "?callback=JSON_CALLBACK&store=1&service=updatevproducts&productid=" + pid + "&qty=" + tmp_qty + "";
$http.jsonp(url)
.then(function(response) {
var stat = response.data;
if (stat.status == "success") {
var successPop = $ionicPopup.alert({
template: 'Inventory of Product Id : ' + pid + ' updated successfully !'
});
$state.go('app.stocks');
} else {
$state.go('app.productdetail', { product_id: $scope.product_id }, { reload: false });
}
});
});
};

Why is `this` undefined in a Blaze event handler?

I'm stuck in a reply function to intern messages: the email reply-sending function works fine (if I choose manually in the code the to field), but I'm failing, when I choose the message to reply, to select automatically the email in the contact-messages collection (field email) with my Meteor.methods.
In few words :
var to = "bob#bob.com" => ok
var to = this.email => no value catched
Here below my event on the reply form submit and the method
Event (can't catch var to = this.email)
Template.ContactReplyModal.events({
'click .send-message':function(e) {
e.preventDefault();
Meteor.call('replyMessage', this._id, function(error) {
if(error) {
Bert.alert({
title: 'Error',
message: error.reason,
type: 'danger'
});
} else {
var to = this.email;
var from = "my#mail.com";
var subject = $('#reply-subject').val();
var message = $('#reply-message').val();
if(message != '' && subject != '') {
Meteor.call('sendEmailContact', to, from, subject, message, function (error) {
if(error) {
Bert.alert({
title: 'Error',
message: error.reason,
type: 'danger'
});
} else {
$('#reply-message').val('');
$('#reply-subject').val('');
Bert.alert({
title: 'Success',
message: 'Message sended.',
type: 'success'
});
}
});
} else {
Bert.alert({
title: 'Error',
message: 'Message error.',
type: 'danger'
});
}
}
});
},
//Close events for ContactReplyModal
'click .close-login': ()=> {
Session.set('nav-toggle-contactreply', '');
},
'click .modal-overlay-contactreply': ()=> {
Session.set('nav-toggle-contactreply', '');
}
});
Method (using here the replyMessage function)
//Contact Method
Meteor.methods({
insertMessage: function(message) {
ContactMessages.insert(message);
},
openMessage: function(messageId) {
ContactMessages.update({_id: messageId}, {$set: {new: false}});
},
replyMessage: function(messageId) {
ContactMessages.findOne({_id: messageId});
},
deleteMessage: function(messageId) {
ContactMessages.remove({_id: messageId});
}
});
EDIT
The bind of the variable email with an arrow function doesn't work.
So maybe it is an issue of capturing the variable?
I cant' read console.log (this); and console.log (this.email); says undefined.
Here below is my message collection.
"_id": "6c3478WugEajr6zaw",
"name": "bob",
"email": "bob#bob.com",
"message": "This is a try.",
"submitted": "2017-01-05T15:19:04.642Z",
"new": true
I really don't understand, cause this below event works on the openMessage method (so the right message is correctly identified from the others)
//CLIENTSIDE
'click .open-message':function() {
Meteor.call('openMessage', this._id, function(error) {
if(error) {
Bert.alert({
title: 'Error',
message: error.reason,
type: 'danger'
});
}
});
}
//SERVERSIDE
Meteor.methods({
insertMessage: function(message) {
ContactMessages.insert(message);
},
openMessage: function(messageId) {
ContactMessages.update({_id: messageId}, {$set: {new: false}});
},
replyMessage: function(message) {
ContactMessages.findOne({_id: message});
},
deleteMessage: function(messageId) {
ContactMessages.remove({_id: messageId});
}
});
EDIT 2
As asked, below the template & the js linked to. The method is already showed and an example of the data in collection too.
template (contact-reply.html)
<template name="ContactReply">
<h3>Reply</h3>
<h3>To: {{email}}</h3>
<input class="form-control" type="text" name="reply-subject" id="reply-subject" placeholder="Subject"/>
<br>
<textarea class="form-control" name="reply-message" id="reply-message" rows="6"></textarea>
<br>
<button class="btn btn-success send-message">Send</button>
</template>
<template name="ContactReplyModal">
<div class="contactreply-modal {{$.Session.get 'nav-toggle-contactreply'}}">
<i class="fa fa-close close-login"></i>
<h3>Send a reply</h3>
{{> ContactReply}}
</div>
<div class="modal-overlay-contactreply"></div>
</template>
js of the template (contact-reply.js)
import './contact-reply.html';
Template.ContactReplyModal.events({
'click .send-message':function(e) {
e.preventDefault();
console.log(this);
Meteor.call('replyMessage', this._id, (error) => {
if(error) {
Bert.alert({
title: 'Error',
message: error.reason,
type: 'danger'
});
} else {
console.log (this.email);
const to = this.email;
var from = "my#mail.com";
var subject = $('#reply-subject').val();
var message = $('#reply-message').val();
if(message != '' && subject != '') {
Meteor.call('sendEmailContact', to, from, subject, message, (error) => {
if(error) {
Bert.alert({
title: 'Error',
message: error.reason,
type: 'danger'
});
} else {
$('#reply-message').val('');
$('#reply-subject').val('');
Bert.alert({
title: 'Success',
message: 'Message sended.',
type: 'success'
});
}
});
} else {
Bert.alert({
title: 'Error',
message: 'Message error.',
type: 'danger'
});
}
}
});
},
//Close events for ContactReplyModal
'click .close-login': ()=> {
Session.set('nav-toggle-contactreply', '');
},
'click .modal-overlay-contactreply': ()=> {
Session.set('nav-toggle-contactreply', '');
}
});
First, it is important to be sure that the data context is correct.
Each element within the template is rendered with a certain data context. If you target them in a template event handler, the data context will be available to the handler via this.
If you target an element that is not rendered by the current template (e.g, rendered by a third-party library or belongs to a sub-template), it will not have a data contest, which is what causes your data context to be undefined).
Having that fixed, assuming the data context (the external function's this) is indeed what you expect in the event handler (i.e, has an email field), you need to make it available to the callback. You can capture it in a local variable and make it available in a closure or lexically bind it with an arrow function:
Template.ContactReplyModal.events({
'click .send-message':function(e) {
e.preventDefault();
console.log(this); // to make sure that it is what you are expecting.
Meteor.call('replyMessage', this._id, (e) => { // note the arrow function
if(e) {
// ...
} else {
const to = this.email;
// ...
if(message != '' && subject != '') {
Meteor.call('sendEmailContact', to, from, subject, message, (e) => {
if(e) {
// ...
} else {
// ...
}
});
} else {
// ...
}
}
});
},
// ...
});
However, it does not seem like a good idea to use multiple nested method calls. It would probably be better to do it all in a single method call.
You can not access the template variable in template events using this, you can access them by the 2nd parameter in your events, here is your code, hope it will work
Template.ContactReplyModal.events({
'click .send-message'(e, instance) {
e.preventDefault();
Meteor.call('replyMessage', this._id, function(error) {
if(error) {
Bert.alert({
title: 'Error',
message: error.reason,
type: 'danger'
});
} else {
var to = instance.email;
var from = "my#mail.com";
var subject = $('#reply-subject').val();
var message = $('#reply-message').val();
if(message != '' && subject != '') {
Meteor.call('sendEmailContact', to, from, subject, message, function (error) {
if(error) {
Bert.alert({
title: 'Error',
message: error.reason,
type: 'danger'
});
} else {
$('#reply-message').val('');
$('#reply-subject').val('');
Bert.alert({
title: 'Success',
message: 'Message sended.',
type: 'success'
});
}
});
} else {
Bert.alert({
title: 'Error',
message: 'Message error.',
type: 'danger'
});
}
}
});
},
});

Categories