I have 3 radio buttons and 2 text boxes in a view. Initially I need to save the values in DB through the view and once its saved I need to display the saved values in the particular view according to which radio button I clicked.
One way is to post the values to a controller method, save it, then render back a new view with the values.
This got solved. We can use JQuery to achive tgis
View
--------
var url = '#Url.Action("YourActionName", "YourControllerName")';
$.post(url, 'ID=' + radio button Id , function (data) {
$('#txtBox1').val(data.Key1);
$('#txtBox2').val(data.Key2);
$('#txtBox3').val(data.Key3);
}
Controller
----------
Inside your action method , construct a JSON string as showed below and send back to JQuery Function.
var dataTest = new { "Key1"= "value1","Key2"= "value2", "Key3"= "value3" };
return Json(dataTest, JsonRequestBehavior.AllowGet);
Related
I want my text area to be empty after I press OK button.
I have try this line this.byId("id").setValue("")
onWorkInProgress: function (oEvent) {
if (!this._oOnWorkInProgressDialog) {
this._oOnWorkInProgressDialog = sap.ui.xmlfragment("WIPworklist", "com.sap.FinalAssestments.view.WorkInProgress", this);
//this.byId("WIP").value = "";
//this.byId("WIP").setValue();
this.getView().addDependent(this._oOnWorkInProgressDialog);
}
var bindingPath = oEvent.getSource().getBindingContext().getPath();
this._oOnWorkInProgressDialog.bindElement(bindingPath);
this._oOnWorkInProgressDialog.open();
},
//function when cancel button inside the fragments is triggered
onCancelApproval: function() {
this._oOnWorkInProgressDialog.close();
},
//function when approval button inside the fragments is triggered
onWIPApproval: function() {
this._oOnWorkInProgressDialog.close();
var message = this.getView().getModel("i18n").getResourceBundle().getText("wipSuccess");
MessageToast.show(message);
},
The text area will be in popup in the fragment. I am expecting the text area to be empty.
If you instantiate your fragment like this:
sap.ui.xmlfragment("WIPworklist", "com.sap.FinalAssestments.view.WorkInProgress", this);
You can access its controls like this:
Fragment.byId("WIPworklist", "WIP").setValue(""); // Fragment required from "sap/ui/core/Fragment"
Source: How to Access Elements from XML Fragment by ID
The better approach would be to use a view model. The model should have a property textAreaValue or something like that.
Then bind that property to your TextArea (<TextArea value="{view>/textAreaValue}" />). If you change the value using code (e.g. this.getView().getModel("view").setProperty("/textAreaValue", "")), it will automatically show the new value in your popup.
And it works both ways: if a user changes the text, it will be automatically updated in the view model, so you can access the new value using this.getView().getModel("view").getProperty("/textAreaValue");.
You almost have it, I think. Just put the
this.byId("WIP").setValue("") line after the if() block. Since you are adding the fragment as a dependent of your view, this.byId("WIP") will find the control with id "WIP" every time you open the WIP fragment and set its value to blank.
You are likely not achieving it now because A. it is not yet a dependent of your view and B. it is only getting fired on the first go-around.
I am trying to set the title of my view dynamically with no success so far.
I am trying something like this:
<div data-role="view"
id="mt-details-view"
data-title="#= pageTitle #" <---- this one
data-layout="mt-main-layout"
data-init="X.details.onInit"
data-before-show="X.details.beforeShow"
data-show="X.details.onShow"
data-model="X.details.viewModel"
data-use-native-scrolling="true">
I tried using a function, tried setting a viewModel variable, tried passing the title from the view.params, tried also to set the title on the onShow function like that:
function onShow(e) {
X.debug.dbg2(e.view.id, "onShow");
viewModel.setViewParams(e.view.params);
e.view.title = e.view.params.pageTitle;
e.view.options.title = e.view.params.pageTitle;
fetchSomeDetails();
}
nothing works.
Enlighten me please!
Here is one approach you can try. After declaring your viewmodel, bind a function to its 'set' method. Within here, check whether the field being set is the page title property on the viewmodel. If it is, find the dom element holding the title text and set its html to the value being 'set':
X.details.viewModel.bind("set", function(e) {
if (e.field == "pageTitle") {
$("#mt-details-view [data-role='view-title']").html(e.value);
}
})
Whenever that property is changed on the viewmodel, you will now see it reflected on the page. However there is still the issue of setting the value in the UI initially. You can do this in your onShow function which of course happens after the view is rendered and all the dom elements have been created:
function onShow(e) {
var temp = viewModel.pageTitle;
viewModel.set("pageTitle", null);
viewModel.set("pageTitle", temp);
}
That will force the 'set' method on the viewmodel to run and the UI should then update.
Where, and how do I clear out the input date on a view....
E.g. when the data is saved, and I access my page from the menu, the old data is still displayed in the input boxes.
I've tried the onInit() function but that only fires the first time into the view.
The navto call is in the BaseController which calls the defaultTimes page (view/controller).
onNavToDefaultTimes : function(oEvent) {
this.getRouter().navTo("defaultTimes");
}
My clear code was in the _onRouteMatched function of detaultTimes.....
_onRouteMatched : function(oEvent) {
var view = this.getView();
view.byId("shopInput").setValue("");
view.byId("effectiveDateFrom").setValue("");
view.byId("shop24Hrs").setSelected(false);
view.byId("shopClosed").setSelected(false);
},
The problem is though, _onRouteMatched is also callled from navBack of the page following default times. And I don't want to clear the fields in this case.
How do I implement the clear from the onNavToDefaultTimes function of the base Controller only?
Can you give an example.
Let's say the name of the view in which your input field is created is test.js, then whenever you are navigating to the view or navigating from the view, you can use invalidate view like below
sap.ui.getCore().byId("test").invalidate();
this makes the view to be rendered again when you are coming back to the view and onBeforeRendering() is triggered
You can choose one of the following options, and put one of them, after the code to save is executed:
Option 1:
var yourInput = this.getView().byId("yourInputID");
yourInput.setValue("");
Options 2 (Try someone):
var yourInput = this.getView().byId("yourInputID");
yourInput.unbindValue();
yourInput.unbindElement();
yourInput.unbindObject();
Or put the code in the following method, which is executed every time the view is displayed:
onAfterRendering: function(){
//Option choosed
}
I have a question and maybe someone could help me find the best solution. I want a user to be able to add items to a drop down list dynamically in a form. I have a form with text boxes and drop down lists and want the user to be able to add items to the drop down list if they don't find it. I would make the drop down lists text boxes but I want to try and keep the names consistent. An example of a form would be have the user enter a name and then have drop down lists for colors and shapes. If the user does not see the color in the drop down I want them to be able to click a link next to the drop down and enter the name or the color. Another link to add shapes to the drop down list.
I'm trying to do this in an MVC Razor environment. I tried using partial views by having the link open a modal box of a partial view to enter the name, but then I have a form within a form and cannot submit the inner form. If I open a small window to enter the name then how do I add it back to the original parent window form without loosing what they already entered in the text box? I know there has to be a good solution out there.
If you want the users new input to be saved for later use, you could use Ajax to submit the new data into the database, and then have the controller return a partial view with your new dropdown.
So your dropdown would be an action Like this:
public PartialViewResult Dropdown()
{
var model = new DropdownModel()
{
Data = yourdata;
}
return PartialView("Dropdown.cshtml", model)
}
And your action to insert new data would look something like this:
public PartialViewResult AddDataToDropdown(string data)
{
var newDropdown = repository.AddData(data);
var model = new DropdownModel()
{
Data = newDropdown;
}
return PartialView("Dropdown.cshtml", model)
}
So bascially, you can resplace the HTML in the div that contains the dropdown with Ajax like this:
$(".someButton").on("click", function () {
var newData = ("$someTextbox").val();
$.ajax({
url: "/YourController/AddDataToDropdown",
type: "GET",
data: { data: newData}
})
.success(function (partialView) {
$(".someDiv").html(partialView);
});
});
This way you save the data and the dropdown is refreshed without refreshing the entire page
I am having one issue with document.ready jQuery function.
On load the document.ready function is working fine. When I click on the button or href link, I want to reconnect with the document.ready function where I have set of code in JavaScript file.
Here is the actual scenario. Please find below sample JS code:
$(document).ready(function() {
var title = "This is your title";
var shortText = jQuery.trim(title).substring(0, 10).split(" ").slice(0, -1).join(" ") + "...";
alert(shortText );
});
After clicking submit button i am adding the input fields data in the below table row. In which description texts are also added in one of table row columns. If description field has more than 100 character, I am pushing the above mentioned JavaScript code from external .JS file. How can i refresh the Java script function without refreshing the page? Anyone have idea?
Please share your opinion.
Create a function, that you can call both in document.ready, and also anywhere else, such as a buttons click event:
function myfunc(){
var title = "This is your title";
var shortText = jQuery.trim(title).substring(0, 10).split(" ").slice(0, -1).join(" ") + "...";
alert(shortText );
}
$(document).ready(function() {
//call when document is ready
myfunc();
//call again when button is clicked
$('#button').click(myfunc());
});