The dokumentation of sap.m.CustomListItem says that CustomListItem hat a press event.
I created a site with the press event on a list item, and another press event on a Button inside the list item. The button works fine. A click on the list item shows nothing. Not even an error.
var oCustomItem = new sap.m.CustomListItem({
content: [
new sap.m.Text({
text: "{text}"}),
new sap.m.Button({
text: "btn",
press: function(){
alert("Pressed the button");
}
})
],
press: function(){
alert("Clicked the list item");
}
});
Here is an example:
http://jsbin.com/pozeve/4/edit?html,output
This is a frequent issue people face when they´re using List controls. There´s an answer to this here.
To put it in a nutshell, you either have to add a type property to your CustomListItem:
var oCustomItem = new sap.m.CustomListItem({
content: [
new sap.m.Text({
text: "{text}"}),
new sap.m.Button({
text: "btn",
press: function(){
alert("Pressed the button");
}
})
],
type : sap.m.ListType.Active,
press: function(){
alert("Clicked the list item");
}
});
or a mode property to your sap.m.List. For a comparison see the answer mentioned above.
Related
I've been trying to create a dynamic table that lets the user insert rows with textboxes and confirm the data/insert it on database by clicking a confirm button. The button works just fine, it inserts the table row on click, but i need a validation where the textboxes can't be blank and i can't make it work inside the function.
i've tried creating variables for the data on the textboxes, and used a simple if to confirm they are not empty, but the confirm button keeps adding the table rows without displaying the alert
$(function tableConfirm(){
$(document).on('click','.btnConfirm', function(){
var error=0;
var campo1 = document.getElementById("campo1").value;
var campo2 = document.getElementById("campo2").value;
var campo3 = document.getElementById("campo3").value;
var campo4 = document.getElementById("campo4").value;
//Html insertion
var content='<tr><td><label class="checkContainer"><input type="checkbox"><span class="checkmark"></span></label></td><td id="texto1">'+campo1+'</td><td id="texto2">'+campo2+'</td><td id="texto3">'+campo3+'</td><td id="texto4">'+campo4+'</td><td><button class="eliminar">X<!--</Button><<i class="far fa-edit"></i></button>--></td></tr>';
$(this).parents('tr').remove();//this is to remove the textboxes before inserting the row data
$('tbody',currentView).append(content);//this appends the row data
//Validation not working
if(document.getElementById("texto1").value==""){
$.alert({
useBootstrap:false,
columnClass:'small',
title:'Error!',
content:'you must fill all the blanks!',
icon:'fas fa-exclamation-triangle',
type:'red',
typeAnimated:true,
buttons:{
tryAgain:{
text:'Ok',
btnClass: 'btn-red',
action: function(){
}
}
}
});
}
//This alertbox should only be displayed if the row has no blank spaces
else
$.alert({
useBootstrap:false,
columnClass: 'small',
title: 'Success!',
content: 'Task inserted!',
type: 'green',
icon:'fas fa-check-circle',
typeAnimated: true,
buttons: {
tryAgain: {
text: 'Ok',
btnClass: 'btn-green',
action: function(){
}
},
}
});
});
});
I expect the code to alert the user when the textboxes aren't filled, but it always inserts the task and shows the respective alert.
Thank you for your time, I appreciate any kind of help!
a TD element has no value but innerHTML so repleace the following :
wrong:
if(document.getElementById("texto1").value=="")
Correct:
if(document.getElementById("texto1").innerHTML=="")
My HTML/Javascript app uses a modal popup which I created using sweet Alert 2. Let's call this "Alert1".
Alert1 is using custom HTML and there is a button inside that HTML which I want to trigger another sweet alert 2 modal popup, we'll call this one "Alert2".
Alert2 has two options. "confirm" or "cancel" If the user clicks "cancel" I want to return to Alert1.
Here is the catch: The custom HTML for Alert1 is editable therefore, I can't just re-invoke the code that originally launched the alert, because this would show the old HTML.
This is what I have tried:
function clickButton(){ //This function will be attached to the button in Alert1
var currentSwal = document.getElementById('swal2-content').innerHTML;
swal({
title: "Confirm 'Remove Script Page'",
text:
"Are you sure you want to remove this page from the script?",
type: "warning",
showConfirmButton: true,
showCancelButton: true
}).then(function(dismiss) {
if (dismiss.dismiss == "cancel" || dismiss.dismiss == 'overlay') {
swal.close;
swal({
html: currentSwal,
showConfirmButton: false,
customClass: 'swal-extra-wide',
showCloseButton: true
});
} //end if
else {
//go ahead and delete the script page
} //end else
});
}//end function
My above solution does not work. It is a bit hard to explain, but basically, the HTML code gets broken and things just don't work properly.
TLDR/My question: Is there a way to have multiple SweetAlert2 alerts? (i.e. launch alert2 from alert1 and then close alert2, returning the view to alert1?
Yes you can ,
var modals = [];
modals.push({title: 'title Of Modal1', text: 'text1' });
modals.push({title: 'title Of Modal2', text: 'text2' });
swal.queue(modals);
References
Question 38085851 Answer 1
make a for loop for 3 and use toast not sweet alert and it will be works
require(["dijit/form/Button", "dojo/dom", "dojo/domReady!"], function(Button, dom){
// Create a button programmatically:
var myButton = new Button({
disabled:true,
label: "Click me!",
onClick: function(){
// Do something:
dom.byId("result1").innerHTML += "Thank you! ";
}
}, "progButtonNode").startup();
});
require(["dijit/form/Textarea","dijit/registry","dojo/dom" ,"dojo/on","dojo/domReady!"], function(Textarea,registry,dom,on){
var textarea = new Textarea({
name: "myarea",
value: "This is the text area...\n\n\n\n\n\n",
style: "width:200px;"
}, "myarea").startup();
//disalbe the button...
//registry.byId("progButtonNode").set("disabled",true);
//test
dom.byId("result1").innerHTML += "Good!";
//add onchange event...
//var button = registry.byId("progButtonNode");
alert('hi');
on(textarea,"change",function(){
alert('3');
registry.byId("progButtonNode").set("disabled",false);
});
});
The above is my code.
My requirement is detect the changes once it was made from textarea, and then set the button enable. (the button was disable by default)
I am getting error:
Uncaught TypeError: Cannot read property 'on' of undefined
Thanks a lot!
To detect changes on widget Textarea, use onChange when initializing it.
Use registry.byId() to get you Button widged ans set is property disabled to false using method .set();
Working example: https://jsfiddle.net/41epfsdd/
Please note I have used intermediateChanges: true this allow onChange to fire on each keystroke which changes value within the widget Textarea.
If you omit it or use intermediateChanges: false instead, onChange event will only fires when the field is blurred.
require(["dijit/form/Button", "dijit/form/Textarea", "dijit/registry", "dojo/dom", "dojo/on", "dojo/domReady!"], function(Button, Textarea, registry, dom, on) {
var myButton = new Button({
disabled: true,
label: "Click me!"
}, "progButtonNode").startup();
var textarea = new Textarea({
name: "myarea",
value: "This is the text area...\n\n\n\n\n\n",
intermediateChanges: true,
onChange: function() {
var progButtonNode = registry.byId('progButtonNode');
progButtonNode.set('disabled', false);
}
}, "myarea").startup();
});
Edit:
Regarding your comment on how to apply an event handler on an already generate Textarea widget. You can use dojo/on example:
require(["dojo/on"], function(on){
on(target, "event", function(e){
// handle the event
});
});
Example based on your comment:
on(this.lastCommentTextArea, 'change', function(event){
// handle the event
})
I have a dijit/form/button that is added to a dijit/layout/ContentPane. The dijit/layout/ContentPane is then placed within a dijit/form/DropDownButton. When I click on the dijit/form/button it does not fire the first time. For this example, I'm just having the button click generate an alert box with the value typed into the ValidationTextBox. I've seen some discussion on this topic in other forums suggesting that a onMouseDown event or focus event is canelling out the first onClick event. What is the best way to test for when these events have loaded or am I simply missing something in the code for dijit/form/button? Thanks for having a look.
dojoConfig = {
parseOnLoad: true
}
require(["dijit/form/DropDownButton", "dijit/MenuItem", "dijit/layout/ContentPane", "dijit/form/ValidationTextBox", "dijit/form/Button"],
function(DropDownButton, DropDownMenu, ContentPane, ValidationTextBox, Button) {
var parcelsearchCP = new ContentPane({
id: 'parcelsearchCP',
tabindex: 0
});
var parcelsearchInput = new ValidationTextBox({
title: "Enter Parcel ID",
name: "parcelvalue",
id: "parcelsearchInput",
placeholder: "<enter 8 digits>",
regExp: "^[0-9]*$"
});
var searchBtn = new Button({
//iconClass: "mySearchIcon",
name: "searchme",
label: "click me"
});
searchBtn.startup();
dojo.place("<div>Enter Parcel ID: </div>", parcelsearchCP.containerNode);
dojo.place(parcelsearchInput.domNode, parcelsearchCP.containerNode);
dojo.place(searchBtn.domNode, parcelsearchCP.containerNode);
var button = new DropDownButton({
label: "hello!",
name: "programmatic2",
dropDown: parcelsearchCP,
id: "progButton"
}, "dropDownButtonContainer").startup();
dojo.connect(searchBtn, "onClick", function() {
var boxentry = dijit.byId("parcelsearchInput");
if (boxentry.value !== "" || parcelsearchInput.isValid() === true) {
alert(boxentry.value);
} else {
alert("Please enter a valid 8 digit number and re-submit.");
}
});
});
<link href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<body class="claro">
<div id="dropDownButtonContainer"></div>
</body>
Well as it turns out, all I had to do was change the event from "onClick" to "onMouseDown" and add a searchBtn.focus() in the button connect statement. That seemed to do the trick. Thanks for your time!
I'm struggling to get the below piece of code working. The problem is that when I wrap the two functions in the editItems property inside the parenthesis (), the code behaves strangely and assigns display: none inline css property to the edit button.
If I don't wrap the two functions inside the parenthesis, I get a javascript syntax error function statement requires a name.
var shoppingList = {
// Some code ...
'init' : function() {
// Capture toggle event on Edit Items button
(shoppingList.$editButton).toggle(shoppingList.editItems);
},
'editItems' : function() {
(function() {
$(this).attr('value', 'Finish editing');
(shoppingList.$ingrLinks).unbind('click', shoppingList.ingredients) // disable highlighting items
.removeAttr('href');
$('.editme').editable("enable");
$('.editme').editable('http://localhost:8000/edit-ingredient/', {
indicator : 'Saving...',
tooltip : 'Click to edit...',
submit : 'OK',
cancel : 'Cancel'
});
}), (function() {
$(this).attr('value', 'Edit item');
(shoppingList.$ingrLinks).attr('href', '#');
$('.editme').editable("disable");
(shoppingList.$ingrLinks).bind('click', shoppingList.ingredients) // re-enable highlighting items
})
}
}
$(document).ready(shoppingList.init);
However, if I invoke the toggle event "directly" like this, it works:
var shoppingList = {
// Some code ...
'init' : function() {
// Toggle event on Edit Items button
(shoppingList.$editButton).toggle(
function() {
$(this).attr('value', 'Finish editing');
(shoppingList.$ingrLinks).unbind('click', shoppingList.ingredients) // disable highlighting items
.removeAttr('href');
$('.editme').editable("enable");
$('.editme').editable('http://localhost:8000/edit-ingredient/', {
indicator : 'Saving...',
tooltip : 'Click to edit...',
submit : 'OK',
cancel : 'Cancel'
});
}, function() {
$(this).attr('value', 'Edit item');
(shoppingList.$ingrLinks).attr('href', '#');
$('.editme').editable("disable");
(shoppingList.$ingrLinks).bind('click', shoppingList.ingredients) // re-enable highlighting items
});
}
};
$(document).ready(shoppingList.init);
Is there a way I could store the toggle event inside the editItems object literal and still have it working as expected?
editItems function looks really odd. I guess you just need to define 2 functions: startEdit and endEdit. And bind them on even and odd clicks using toggle.
var shoppingList = {
// Some code ...
init : function() {
// Bind on edit button click
this.$editButton.toggle(this.startEdit, this.endEdit);
},
startEdit : function() {
$(this).attr('value', 'Finish editing');
shoppingList.$ingrLinks.unbind('click', shoppingList.ingredients) // disable highlighting items
.removeAttr('href');
$('.editme').editable("enable");
$('.editme').editable('http://localhost:8000/edit-ingredient/', {
indicator : 'Saving...',
tooltip : 'Click to edit...',
submit : 'OK',
cancel : 'Cancel'
}),
endEdit: function() {
$(this).attr('value', 'Edit item');
(shoppingList.$ingrLinks).attr('href', '#');
$('.editme').editable("disable");
(shoppingList.$ingrLinks).bind('click', shoppingList.ingredients) // re-enable highlighting items
})
};
$($.proxy(shoppingList, 'init'));