Assign Value to ViewData in Razor - javascript

I would like to store some user inputs into a cookie on the client side. Using MVC3/Razor. Data entered into several DropDownLists. Examople of one below:
<div style="float: left;">
#Html.Telerik().DropDownList()
.Name("name").BindTo((SelectList)#ViewBag.Filter1SelectList)
.Placeholder("All")
.ClientEvents(events => events
.OnChange("onChangeFilter1"))
</div>
I created the following JavaScript in an attempt to store values as the dropdown values change.
function onChangeFilter1(e) {
var filter1 = document.getElementById('name').value;
'<%= ViewData["Filter1Value"]%>' = filter1.toString();
}
The idea is to gather several filters from multiple dropdownlists. Data is filtered on submit button. Is this even possible? I saw only one example and copied it carefully but the above errors: Microsoft JScript runtime error: Cannot assign to '[string]'.

Try to put # sign before ViewData, it will allow you to assign your filter value to the ViewData
#ViewData["Filter1Value"] = filter1.toString();

Related

Alfresco javascript get custom DataList's properties

I have written one rule(execute script) on datalist, so that whenever any new item is added, it should send an email to the respective user.
In email I want to add custom properties value e.g. employee_first_name
I've tried to get datalist using
var dataLists = siteName.getContainer("dataLists");
But it gives an error as follows:
"getContainer" method is not available.
The script given in Alfresco javascript get custom DataList works perfectly in Javascript console.
Your siteName variable is probably a string, which does not have a method called "getContainer". That's why you are seeing that message.
Here's a code snippet that fetches the data list container object given a site ID (site short name):
var siteId = "jtp-test-site-1";
var siteInfo = siteService.getSite(siteId);
var dataLists = siteInfo.getContainer("dataLists");
print(dataLists.name);
Notice the use of the built-in root-scoped object, siteService, that fetches the site info for a given site.
You can run that in the JavaScript Console and it will output the name of that folder, which is "datalists".

Access Object Properties of ko.observable item selected in HTML drop-down list and use them in View Model

I am building a single page web application with Knockout that will display a variety of different information based on the user's selections. At the top there is a drop down list populated from a array of JSON objects using the options binding. Once the user makes a selection from the list how do I access the properties of the specified object in my View Model JavaScript code?
My specific app is about college football teams. The drop down list at the top has a list of team names that are pulled from an array of JSON objects that contain details about each team. This array comes from an AJAX request to the server. I know this part of my code works as I am able to use other properties in the selected object to change the look of the HTML page. However I can't figure out how to be able to access the properties of the selected object (school name, mascot, conference, etc) in my View Model Java Script so I can use those details to make further AJAX requests that will provide the user more information about the selected team (such as rosters, schedules, and stats).
There is a "value: selectedSchool" in the data-bind for my select menu in HTML that connects to a self.selectedSchool = ko.observable(); in my view model. I have tried a variety of ways to access the properties in that self.selectedSchool including dot and bracket notation, a ternary operator to check if it is null before accessing the property, and more. But as far as I can tell that variable doesn't actually contain an object that I can access, so how do I get around this?
I have tried to start small by just trying to access the 'school' property from that object and use it to get the rosters (which have the same file names as the school name) via AJAX, but eventually I want to do a lot more with it.
my HTML View:
<div>
<select data-bind="options: schools,
optionsText: function(item) {
return item.school + ' ' + item.mascot
},
value: selectedSchool,
optionsCaption: 'Choose a team...'"></select>
</div>
<div>
<!-- ko with: selectedSchool -->
<p>
School: <span data-bind="text: school"></span>
</p>
<p>
Conference: <span data-bind="text: conference"></span>
</p>
<img data-bind="attr: { src: logos[0], alt: school}">
<!-- /ko -->
</div>
The above HTML is the only part that works now. I also have a table for the team rosters with columns for things like name, position, and size once I can get the below AJAX request to work.
my JavaScript View Model:
function SchoolsViewModel() {
// Data
var self = this;
self.schools = ko.observableArray([]);
self.selectedSchool = ko.observable();
self.selectedRosterData = ko.observableArray([]);
// Behaviours
$.getJSON("/schools", function(data) {
self.schools(data);
});
//the below part works doesn't work. this is one of many tries
self.selectedRoster = function(roster) {
self.selectedSchool(roster);
$.getJSON("/rosters", { school: self.selectedSchool['school'] }, function(data) {
self.selectedRosterData(data);
});
ko.applyBindings(new SchoolsViewModel());
};
I want to make the second AJAX request return the JSON file from the server with the same name as the 'school' property from the selected JSON object in the schools array. However self.selectedSchool doesn't seem to contain a JSON object at all as far as I can tell. I don't want the AJAX request to activate until after the user selects a team from the drop down menu.
Also, for what it's worth, I eventually want to do a lot more with this than just request the roster data. The ideas is that after the user selects a team from the drop down then a list of folders will appear with several options like roster, schedule, stats, and news. When the user clicks on one of the folders they will receive the corresponding information. If I can access the properties of the selected team object from the drop-down menu then I think I can figure the rest out, but any answers with an eye on future expandability would be appreciated.
Thank you all so much for your time!
Remember selectedSchool is an observable (which, in Knockout, is technically a function), so this:
self.selectedSchool['school']
will not work. You need to "unwrap" the observable first by calling it:
self.selectedSchool()['school']

Set variables for multiple input IDs derived from JSON object

Directly below, the user clicks the link, which calls a PHP script and returns a JSON object, through which I parse and create INPUT fields each with their own ID, which was part of the JSON object:
$(function()
{
$('.addNewLink').click(function(e)
{
e.preventDefault();
$('#addNewForm input, #addNewForm select').val('');
$.post('api/size_types.php', function(data)
{
var obj = JSON.parse(data);
$('.size_types').empty();
var htmlToInsert = obj.map(function (item)
{
return '<div class="input-group">
<span class="input-group-addon" >'+item.SIZE_TYPE+'</span>
<input type="text" class="form-control size_types"
id="'+item.SIZE_TYPE+'" value="'+item.DEFAULT_TEU+'" />
</div>';
});
$('.size_types').html(htmlToInsert);
});
$('#addNewModal').modal('show');
});
});
In the code above, I was able to loop through the JSON and create INPUT fields all with their own ID's using item.SIZE_TYPE and have the values set to item.DEFAULT_TEU.
On the HTML side, there is a form, but hopefully I don't have to show that code. Just know there is a submit button with an ID called #addNewSubmit, which I will display the JavaScript directly below:
$('#addNewSubmit').click(function()
{
var addservice = $('#addservice').val(); // user entered field
// here is where I'm stuck
});
What I need to do is create variables using the INPUT fields automatically created by the JSON object. In my current case, 58 INPUT fields have been generated, all with their own ID and DEFAULT_VALUE. The user has the option to change the DEFAULT_VALUE.
After searching the web, I found this code and added it to the click event directly above, right beneath the first variable:
var size_types=new Array();
var j=0;
$(".size_types").each(function(){ // looking at the class, I need the ID
size_types[j]=$(this).val();
j++;
});
Using this, I can return the values of each of the INPUT fields in an ALERT box, but I need the IDs so I can send them all to a PHP script to INSERT into a database.
How can I get each ID and its VALUE and set them all to their own variables? Or, is there another way to do this?

Angular select multiple not refreshing on model change

I have the following issue with angular and the html select-input:
When the user loads the page my select is empty until the data is loaded and returned from the corresponding service.
In this case the select is populated correctly.
However, the user should be able to filter the model with a click on a button.
When I press the button a new request is send to the REST-API and the response contains the new model for the select.
Unfortunately, the select won't update correctly even when I change it's model
Here is some code to illustrate my problem:
// This happens in my controller
EventService.getAvailableRooms(requestObject).then(function successCallback(response){
// sanatizeRoomTypes is used to generate user-friendly names instead of [1, 2,..]
vm.rooms = DataSanatizer.sanatizeRoomTypes(response.data);
}, function errorCallback(response){
console.log(response)
});
vm.rooms is the model of my select:
<select id="roomSelect" ng-model="eventCtrl.selectedRooms"
ng-options="room.name group by room.type for room in eventCtrl.rooms track by room.id" multiple required>
</select>
In some cases the select duplicates it's model or looses entries. It seems like there is some sort of data binding problem.
Thanks,
Try wrapping your model changes in $scope.apply :
$scope.$apply(function() {
$scope.data.myVar = "Another value";
});
Read here for more info:
http://tutorials.jenkov.com/angularjs/watch-digest-apply.html
You can also use $scope.$watch on the changing $scope variables to update them in your view.

Not able to read value entered in the form

I am new to Javascript. I am hacking one application wherein I
need to get the values from the form and do processing on it :
icode=document.forms[0].intcode;
lamt=document.forms[0].lnamt.value;
nom =document.forms[0].nomon.value;
and update the values in the other fields in the form depending on the
above three values like this :
document.forms[0].monpmt.value=Math.round(mamt);
document.forms[0].totamt.value=totamt;
Note: these values must automatically appear in the form depending on the above three
values entered by the user.
function setTotamt() {
icode=document.forms[0].intcode;
lamt=document.forms[0].lnamt.value;
nom =document.forms[0].nomon.value;
intrate=icode.options[icode.selectedIndex].myvalue;
if(lamt >0 && nom>0 && intrate>0) {
document.forms[0].monpmt.value=Math.round(mamt);
document.forms[0].totamt.value=totamt;
}
}
I am doing this on Linux platform and tomcat.
> icode=document.forms[0].intcode;
> lamt=document.forms[0].lnamt.value;
> nom =document.forms[0].nomon.value;
Variables should be declared with var to keep them local (presuming the above is intended to be in a function). The syntax is more or less correct, it suggests an HTML structure like:
<form ...>
<input name="intcode" ... >
<input name="lnamt" ... >
<input name="nomon" ... >
...
<input name="monpmt" ...>
<input name="totamt" ...>
</form>
So if you have a button in the form that runs a function to get some values and update the value of some other control, it might look like:
<input type="button" onclick="updateForm(this);" ...>
and the update function might look like:
function updateForm(el) {
var form = el.form; // store a reference to the form
var icode = document.forms[0].intcode; // reference to element named "intcode"
// Get the value of some controls
var lamt = document.forms[0].lnamt.value;
var nom = document.forms[0].nomon.value;
// Do something with the values
var mamt = ...;
...
var totamt = ...;
// Set some values in the form
// Have a reference to the form so use it
form.monpmt.value = Math.round(mamt);
form.totamt.value = totamt;
}
Note that form control values are always strings and that you should test the values you get to make sure they are what you expect. If you want to update values without the user pressing a button[1] you can use the blur event to call updateForm.
You will need validation of input values and to deal with errors (updates before the user has filled in all the fields and invalid data being the obvious ones). Also you'll likely want to format the data when putting it back, such as formatting numbers to two decimal places perhaps.
A button is best as it can be a submit button so that if javascript is disabled or not working, the form is submitted and updated at the server and an updated form returned. If scripting is available, you can cancel the submit and do the processing on the client. You could have the update on the blur event and button if you want.

Categories

Resources