hello i want to create a edit interface for array based div-array.
for example i create in a loop 15 divs,
based on this i want to load via ajax an edit interface where i can
select one of those divs and change their classes,
like so, i can do this by hand,
var divs = {
'selector': ['Select One'],
'id': ['div-1', 'div-2', 'div-3', 'div-4'],
'class': ['class-1', 'class-2', 'class-3', 'class-4']
};
the point is i dont know how many they are until the user inputs a int to render them.
id and class should be populated based on my current rendered div amount,
for example:
current code:
(function($) {
var container = $('.holder');
//The input getter for amount of divs
var form1 = new Backbone.Form({
schema: {
nDefine: 'Number',
}
}).render();
$('.input').append(form1.el);
// rendering amount of divs
function render(){
num = parseInt($('input').val());
for(var i = 1; i <= num; i++) {
container.append('<div id="id'+i+'" class="box category'+i+'">Id:'+i+'</div>');
}
}
// renders divs on click
$('.n-definer').click(function() {
container.empty();
render();
//form1.commit();
});
})(jQuery);
this works fine,
how can i get now those id's and classes into my backbone form selects in array form?
Related
I am working on a Lightswitch HTML application. I Have a Browse screen with a button which opens an Add screen.
My Browse screen is populated by a viewwhich may have multiple records per employee. The view is being filtered at the Datasource level based on this.Application.User.Name. That filter sets it such that only records for the active user show on the Browse screen.
I want to set the default EmployeeID on my Add screen to be the EmployeeID of the active user, which will come from my view.
Here is my code for the button:
myapp.BrowseTimesheetRecords.AddNewRecord_execute = function (screen) {
myapp.showAddTimesheetRecord(null, {
beforeShown: function (addScreen) {
var newItem = new myapp.TBG_KeepInTimesheet();
newItem.EmployeeID = screen.TBG_V_KeepInTimeSheet_Detail.EmployeeID;
newItem.CreateDate = new Date;
newItem.EffectiveDate = new Date;
newItem.CreatedBy = this.Application.User.Name;
addScreen.TBG_KeepInTimesheet = newItem;
},
afterClosed: function () {
screen.TBG_V_KeepInTimeSheet_Details.load();
}
});
};
I believe the problem is that I have no selected EmployeeID so I can't use screen.
Is there a way to select and pass the Distinct EmployeeID from my DataSource within that JavaScript Execute function? There will only ever be 1 distinct EmployeeID though there may be many records
For reference here is the filter on my dataset:
partial void TBG_V_KeepInTimeSheet_Details_Filter(ref Expression<Func<TBG_V_KeepInTimeSheet_Detail, bool>> filter)
{
filter = e => e.UserLogin == this.Application.User.Name;
}
TBG_V_KeepInTimeSheet_Details is the name of my view within the Application.
TBG_KeepInTimesheet is the name of the table which my view draws from.
Thank you in advance
How I can get the counts list items of specific view ?
I want to get rid of the pivotControl-overflowDot, so all views a list have are shown without clicking on the dots.
I have the following code:
<script>
function renderHeaderTemplateForDocuments(renderCtx, fRenderHeaderColumnNames){
var viewData = eval(renderCtx.ListSchema.ViewSelectorPivotMenuOptions);
ClientPivotControl.prototype.SurfacedPivotCount = 20;
return RenderHeaderTemplate(renderCtx, fRenderHeaderColumnNames);
var menu = $('ms-pivotControl-overflowDot');
menu.style.display = "none";
}
SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
Templates: {
Header: renderHeaderTemplateForDocuments
}
});
</script>
I don't know the numbers of elements and I set the SurfacedPivotCount to 20,
but I want the SurfacedPivotCount to be dynamic, based on the number of view elements.
Thanks!
When customizing SharePoint list via CSR the number of available list view options could be determined like this:
var viewData = JSON.parse(renderCtx.ListSchema.ViewSelectorPivotMenuOptions);
var numOfViews = viewData.length - 3; //system menu options such as Create View, Modify View and menu delimiter are exluded
Example
The following example demonstrates how to display all the available list view options
function renderHeaderTemplateForList(renderCtx, fRenderHeaderColumnNames){
var viewData = JSON.parse(renderCtx.ListSchema.ViewSelectorPivotMenuOptions);
var numOfViews = viewData.length - 3;
ClientPivotControl.prototype.SurfacedPivotCount = numOfViews;
return RenderHeaderTemplate(renderCtx, fRenderHeaderColumnNames); //render default Header template
}
SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
Templates: {
Header: renderHeaderTemplateForList
}
});
Result
I am new to DOJO and I am using DOJO 1.5.0 version.
I want to create dynamic checkboxes by iterating JSONArray in DOJO. This dynamic creation will be done on a particular event like when we selecting some combo-box value.
For example consider below JSONArray:
var tempJSONArray = [{role_id = '1', role_name = 'role1'},{role_id =
'2', role_name = 'role2'},{role_id = '3', role_name = 'role3'}]
I want display checkboxes corresponding to Role Name. Lable for checkbox will be role_name and value will be role_id from JSON object.
Also I want to add 'onChange' event to check-boxes, as on this event I want to do a Ajax call to server with role_ids.
Thank you for reading and also please let me know if further clarification is needed.
You can use the dojo.create() method for creating DOM nodes and the dojo.place() method for placing them inside another element, for example:
var checkbox = dojo.create("input", {
type: "checkbox",
value: "1"
});
You will probably have to wrap it inside a <label> to show the text (which you can also create with dojo.create()). Then you can place them inside a list, for example:
dojo.place(label, "checkboxes");
This will wrap the checkbox (or label) inside an element with ID checkboxes. So, if you create your checkboxes now inside a loop, it should work.
After doing some internet surfing and playing around code I able write below code, which working fine for my scenario. So thought it will be helpful for others.
for ( var i = 0; i < roleJSON.length; i++) {
var role = roleJSON[i];
var tr = dojo.create("tr",{id:"rolebasecheckbox"+i,'class':'rolebasecheckbox'});
alert("tr=" + tr);
var td= dojo.create("td",{innerHTML:'<input id="roleBaseCb_'+i+'" value="'+role.role_id+'" dojoType="dijit.form.CheckBox" onclick="alert('onclick event')" type="checkbox" /> <label for="roleBaseCb_'+i+'">'+role.role_name+'</label>',align:'center'},tr);
alert("td=" + td);
if(i==0){
alert("i is 0");
dojo.place(tr, "roleBaseComboTR", "after");
}else{
dojo.place(tr, "rolebasecheckbox"+(i-1), "after");
}
}
I'm currently facing a problem with the Kendo UI MultiSelect widget for selecting an option more than once. For example, in the image below I want to select Schindler's List again after selecting The Dark Knight, but unfortunately the MultiSelect widget behaves more like a set than an ordered list, i.e. repetitive selection is not allowed. Is there actually a proper way to achieve this? Any workarounds?
That's the intended behavior of the multi-select control and there is no simple way to make it do what you want using the available configuration options. Possible workarounds are ...
Creating a custom multi-select widget
Something like this should work (note that I haven't tested this much - it lets you add multiples and keeps the filter intact though):
(function ($) {
var ui = kendo.ui,
MultiSelect = ui.MultiSelect;
var originalRender = MultiSelect.fn._render;
var originalSelected = MultiSelect.fn._selected;
var CustomMultiSelect = MultiSelect.extend({
init: function (element, options) {
var that = this;
MultiSelect.fn.init.call(that, element, options);
},
options: {
name: 'CustomMultiSelect'
},
_select: function (li) {
var that = this,
values = that._values,
dataItem,
idx;
if (!that._allowSelection()) {
return;
}
if (!isNaN(li)) {
idx = li;
} else {
idx = li.data("idx");
}
that.element[0].children[idx].selected = true;
dataItem = that.dataSource.view()[idx];
that.tagList.append(that.tagTemplate(dataItem));
that._dataItems.push(dataItem);
values.push(that._dataValue(dataItem));
that.currentTag(null);
that._placeholder();
if (that._state === "filter") {
that._state = "accept";
}
console.log(this.dataSource.view());
},
_render: function (data) {
// swapping out this._selected keeps filtering functional
this._selected = dummy;
return originalRender.call(this, data);
this._selected = originalSelected;
}
});
function dummy() { return null; }
ui.plugin(CustomMultiSelect);
})(jQuery);
Demo here.
Using a dropdown list
Use a simple dropdown list (or ComboBox) and bind the select event to append to your list (which you have to create manually).
For example:
var mySelectedList = [];
$("#dropdownlist").kendoDropDownList({
select: function (e) {
var item = e.item;
var text = item.text();
// store your selected item in the list
mySelectedList.push({
text: text
});
// update the displayed list
$("#myOrderedList").append("<li>" + text + "</li>");
}
});
Then you could bind clicks on those list elements to remove elements from the list. The disadvantage of that is that it requires more work to make it look "pretty" (you have to create and combine your own HTML, css, images etc.).
I have these js code;
$(document).ready(function() {
$.getJSON("Stations.php", function(jsonData){
$.each(jsonData, function(key,value) {
$('#selectStation')
.append($("<option></option>")
.attr("value",key)
.text(value.name));
});
});
});
function sta_callStation(sel){
$('#noOfPassengers, #infoOfPassengers, #distType,#distParams').empty();
$('#sta_numberOfIcons').empty();
$.getJSON('Stations.php', function(station){
$.each(station, function(sta_key, sta_value) {
if(sel.value==sta_key)
{
$.each(sta_value.passengers, function(j,passengers)
{
//$('#sta_numberOfIcons').append('<i class="icon-user" ></i>');
var pas_icon = document.createElement("a");
pas_icon.className = "icon-user";
pas_icon.id='id_'+(j);
pas_icon.setAttribute('href', '#');
pas_icon.setAttribute('rel', 'popover');
//alert('id_'+(j));
document.getElementById('sta_numberOfIcons').appendChild(pas_icon);
});
}
});
});
}
Here is some html part:
Stations
<select name="selectStation" id="selectStation" onchange="sta_callStation(this);">
</select>
First when the page is loaded the combobox is filled with Station 1 ,Station2 etc.The when I want to select one of them (this refer 1, 2, 3, 4 or 5 ) I am calling sta_callStation function.I dynamically create person icons giving them some attributes, for example their ids; id_1 ,id_2 etc.But after that how can I trigger them when mouse over, should I use class or id of them?
Before choosing station:
https://docs.google.com/file/d/0B1RbKsJ4B8eoeW5wdWhLQW85QTQ/edit?usp=sharing
After choosing one station(randomly produced passengers in php)
https://docs.google.com/file/d/0B1RbKsJ4B8eoQmYwWVpYbno2NnM/edit?usp=sharing
You could use some client side UI framework (eg. Knockout.js).
If you would like to keep your UI rather simple, then yes as you said, you could create class with person attributes and appended reference to icon HTML element. When creating instance of class, link HTML callback function to your object function.
Somethig like this:
var PassInfo = function (name)
{
name: name,
onhover: function ()
{
// do something special
}
};
var passInstance = new PassInfo('passenger1');
$(pas_icon).hover(function()
{
passInstance.onhover();
});