expert.
I use the API 「sap.ui.comp.varinats」 to implement variant management.Save the variant data to S/4 via OData.
The "SAVE" button is invisible, so I want to enable it.
I referred to the article below, but it didn't work.
https://answers.sap.com/questions/12086627/variant-management---save-option.html
I want to enable this "SAVE" button when the view has finished loading, but I have a problem.
I want to get the oVariantSave function using this.getView().ById("vm").
I can get the oVariantSave function in onSelect. But I can't get the oVariantSave function in onAfterRendering.
enter image description here
enter image description here
<View>
<mvc:View xmlns:mvc="sap.ui.core.mvc"
xmlns:v="sap.ui.comp.variants"
controllerName="Test.controller.View1" displayBlock="true">
<App id="app">
<Page id="page" title="{i18n>title}">
<content>
<v:VariantManagement id="vm" select="onSelect" save="onSave" enabled="true" manage="onManage" showExecuteOnSelection="false"
showShare="false" showSetAsDefault="false" variantItems="{Variants>results}">
<v:variantItems>
<v:VariantItem text="{Variants>Varname}" key="{Variants>Varkey}" author="{Variants>Userid}"/>
</v:variantItems>
</v:VariantManagement>
<Controller>
//i can't get oVariantSave function
onAfterRendering: function () {
var oVariantMgmtControl = this.getView().byId("vm");
}
//i can get oVariantSave function
onSelect: function (oEvent) {
var oVariantMgmtControl = this.getView().byId("vm");
}
Please tell me how to get the oVariantSave function in onAfterRendering and enable the "SAVE" button before the user takes action.
Thanks and Regards
If you want to enable SAVE button, you must set currentVariantSetModified to true.
For example:
this.byId("variantManagment").currentVariantSetModified(true);
I hope that I am helpful :)
Related
Im trying to use pass my car value to another function, which i have no idea how. i tried to place the whole function btn-info-add into .span8. But this it will execute twice on the 2nd time.
$(".span8").on("click", "table #trID", function() {
var car = ($(this).closest("tr").children("td").eq(1).html());
$('#myModal1').modal('show');
});
$("#btn-info-add").click(function() //button inside the modal
selectCourse(car); //execute ajax
});
var car; //car must be declared out of your function to be available for both functions
$(".span8").on("click", "table #trID", function() {
car = ($(this).closest("tr").children("td").eq(1).html());
$('#myModal1').modal('show');
});
$("#btn-info-add").click(function() //button inside the modal
selectCourse(car); //execute ajax
});
You can create a hidden element inside your dialog (input would be great) and assign it your desire value.
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
<input id="carvalue" type="hidden" value=""/>
</div>
Note that I created an input element (hidden, of course) which is going to store the value that I want to access later. After that, you can modify your code like this:
$(".span8").on("click", "table #trID", function() {
var car = ($(this).closest("tr").children("td").eq(1).html());
$("#carvalue").val(car); // Store value into hidden input
$('#myModal1').modal('show');
});
$("#btn-info-add").click(function() //button inside the modal
var car = $("#carvalue").val(); // retrieve value from input hidden
if(car != ""){
selectCourse(car);
}
});
This technique is commonly used in forms to pass additional information on AJAX calls. Your user will not notice its presence and you can keep working. Happy coding!
EDIT:
JQuery has a method called jQuery.data to store information into JQuery elements. So your values are going to be stored on the element itself. Your code will look like this:
$(".span8").on("click", "table #trID", function() {
var car = ($(this).closest("tr").children("td").eq(1).html());
jQuery.data("#btn-info-add", "car", car); // store data inside jQuery element
$('#myModal1').modal('show');
});
$("#btn-info-add").click(function() //button inside the modal
selectCourse(jQuery.data("#btn-info-add", "car")); //execute ajax
});
I hope it helps you. Happy coding!
I have the following code:
for (var i=0; i<len; i++){
var benID = results.rows.item(i).ID;
$('#'+element_id).append(
"<li><a>"+results.rows.item(i).nombres+" "+results.rows.item(i).apellidos+'</a>'+
'Eliminar</li>');
$("."+page+"_dis_ben_"+benID).click(function(){
console.log("Item to disable: "+benID);
$(this).children('span.ui-btn-inner').children('span.ui-btn-icon-notext').children('span.ui-btn-inner').children('span.ui-icon').removeClass('ui-icon-check');
$(this).children('span.ui-btn-inner').children('span.ui-btn-icon-notext').children('span.ui-btn-inner').children('span.ui-icon').addClass('ui-icon-delete');
$(this).children('span.ui-btn-inner').children('span.ui-btn-icon-notext').children('span.ui-btn-inner').addClass('ui-btn-inner-red');
$(this).removeClass(page+"_dis_ben_"+benID).addClass(page+"_enable_ben_"+benID);
});
$("."+page+"_enable_ben_"+benID).click(function(){
//NOT WORKING
console.log("Item to enable: "+benID);
$(this).children('span.ui-btn-inner').children('span.ui-btn-icon-notext').children('span.ui-btn-inner').children('span.ui-icon').removeClass('ui-icon-delete');
$(this).children('span.ui-btn-inner').children('span.ui-btn-icon-notext').children('span.ui-btn-inner').children('span.ui-icon').addClass('ui-icon-check');
$(this).children('span.ui-btn-inner').children('span.ui-btn-icon-notext').children('span.ui-btn-inner').removeClass('ui-btn-inner-red');
$(this).removeClass(page+"_enable_ben_"+benID).addClass(page+"_dis_ben_"+benID);
});
}
I have a list that is split in two, the right part being a button, to accept or reject. What I am attempting to do is that the check button, when clicked changes color and becomes a delete button, also performs an action. That I have been successful at it.
Now th problem is that I want to get it back to a check button, but as it is dynamically created I it doesn't trigger when I click the "delete" icon or the *_enable_ben_*. I assume it is because when I create the event the class/element doesn't exist yet.
Do you have any ideas?
Use .on
http://api.jquery.com/on/
var selector = "."+page+"_enable_ben_"+benID;
$("#yourList").on("click", selector, function(event){
//Insert handler code
});
Found the solution to the last question in the comment right here in stackoverflow:
jQuery Mobile click events on dynamic list items
We want to implement autocompelete using Jquery.
We need to enable the user to add text and to save the new text.
something like on key press event.
In Addition I want enable to user to add text into the input text.
$('#id').autocomplete({
source: url,
select: function (event, ui) {
// code..
}
});
We have tried to do this using change event , but this is not good enough since according to the API the change event is fire only after onBlur is fire (when the user live the input text).
Can someone help how to solve this problem?
Thanks,
John & Yuri.
$('#id').autocomplete({
source:function(request, response)
{
var text = $("#idofthetext").val()
alert(text);
}
select: function (event, ui) {
// code..
}
});
do you want to do something like this? var text will give you the text when user type in the input field with id "idofthetext".
I have a link which, when clicked, shows an image using Scriptaculous. When I click the link again, it hides the image again. Now, when the link is clicked, I call a function which is called toggle(). How can I change the links text when I click it and change it back to what it was when its clicked again? Thats my function:
<script type="text/javascript">
function toggle(element){
new Effect.toggle(element, 'Slide', {duration:0.5});
}
</script>
Thanks!
One solution would be to pass the object being clicked into the function and check its innerHTML.
click this
//replace my div with the name of the element to slide.
function toggle(element, obj){
if(obj.innerHTML == 'click this'){
obj.innerHTML = 'clicked';
}
else{
obj.innerHTML = 'click this';
}
new Effect.toggle(element, 'Slide', {duration:0.5});
}
I have the following scenario:
I have a button\link with a image inside like this:
<button type="submit" id="myButton" class="button"><img src="../../Content/images/check.png" id="defaultImage" />
SaveData!!!</button>
We are OK here! Now what I need to do is:
I want on the click that the image change for a loading element that is previously loaded in the page like this:
<img id="loadingImage" src="../../Content/images/loader.gif" style="display: none;" alt="loading"/>
And then when the load complete turn back the old button image, I ended with this code:
function loader() {
var $button = $('#myButton');
if (btnState == '1') {
$button.find('img').hide();
$button.prepend($('#loadingImage'));
$('#loadingImage').css({ 'display': 'inherit' });
btnState = '0';
}
else {
$button.find('img').hide();
$button.prepend($('#defaultImage'));
$('#defaultImage').show();
btnState = '1';
}
}
This does the trick for ONE SINGLE button(since I pass its ID in the function) but, when I have for example a grid with a button on each line, I found inviable when managing a screen with many buttons do this for each of then. The main question is: How can I make this method general for all buttons/links on one specific class in the page?
The goal is: Click a button, get the image and change it and stop(can be manual). I just don't wanna have to Hook ALL buttons.
You should do something like this, it will prevent the user from double submitting:
$('.button').click(function(evt) {
evt.preventDefault();
var button = this;
hideButton(button);
$('ID or CLASS').load('AJAX FILE URL', function() {
//On success, show button remove image
showButton(button);
});
});
function hideButton(button) {
$(button).hide().after('<img src="../../Content/images/loader.gif" alt="loading"/>');
}
function showButton(button) {
$(button).next('img').hide();
$(button).show();
}
All of the code above should be in the $(document).load
Your HTML should look like:
<button type="submit" class="button"><img src="../../Content/images/check.png" />SaveData!!!</button>
There is no need for Id's now on anything.