I have Two Drop Down Menus. One is main Menu And Other is SubMenu.
<div id="menu">
<select data-native-menu="false" id="mainMenu" name="select-choice-0">
</select> <select data-native-menu="false" id="subMenu" name=
"select-choice-1">
</select>
</div><!--End of menu-->
I have Populated the main Menu With Array Data but Iam not Able to Show the Submenu with Respective Main menu data. what i have tried is
function setSubMenu(indexPos) {
var selectedMenuArray = [];
for (var i = 0; i < sortedArray[menuKeys[indexPos]].length; i++) {
selectedMenuArray.push(sortedArray[menuKeys[indexPos]][i]);
}
//creating submenu
var subMenuId = $('#subMenu');
var subCatHtml = '';
for (var i = 0; i < selectedMenuArray.length; i++) {
console.log(selectedMenuArray[i]['subcategory']);
subCatHtml += '<option>' + selectedMenuArray[i]['subcategory'] + '</option>';
}
subMenuId.html(subCatHtml);
subMenuId.selectmenu();
subMenuId.selectmenu('refresh');
}
Here iam passing the Index position of Main Menu Item. Then iam pushing the Respective items to SelectedMenuArray to Display them in SubMenu.
here my problem is iam unable to display the Submenu items.
try this
submenuID.trigger('create');
subMenuId.html(subCatHtml).trigger('create');
subMenuId.html(subCatHtml).selectmenu('refresh', true);
Related
I have one single selection drop down and multi select drop down. Both is having dynamic value.
What I am doing is the I am clicking on edit button it shows modal inside modal there is select drop-downs of module and multi select of actions.
I am dynamically selecting module name it works perfectly but dependent multi-select is not working. I think single select is not firing change event.
HTML:
<div class="col-md-12">
<label for="module">Select Module</label>
<select class="form-control" (change)="onChangeModuleDD($event)" name="moduleSelection" required>
<option value="">-- Select Module --</option>
<option *ngFor="let module of allModuleData" [value]="module | json" [selected]="module.name == usermodule">{{
module.name
}}</option>
</select>
</div>
<div class="col-md-12">
<label for="actions">Select Actions/Charts</label>
<ng-multiselect-dropdown [placeholder]="'-- Select Action/Charts --'" [data]="dropdownList" [settings]="dropdownSettings"
(onSelect)="onItemSelect($event)" name="actionSelection" (onDeSelect)="OnItemDeSelect($event)"
(onSelectAll)="onSelectAll($event)" (onDeSelectAll)="onDeSelectAll($event)">
</ng-multiselect-dropdown>
</div>
COMPONENT:
onChangeModuleDD(event) {
this.selectedItems = [] // empty selected action array
this.dropdownList = []
let value = event.target.value
if (value) {
let parsedValue = JSON.parse(value)
this.usermodule = parsedValue.name
if (parsedValue.hasCRUD == 0) {
this.userListingApi.fetchAllDashboardAction().subscribe(res => {
this.dropdownList = []
for (let i = 0; i < res['data'].length; i++) {
this.dropdownList.push(res['data'][i])
}
})
} else {
this.userListingApi.fetchAllCRUDAction().subscribe(res => {
this.dropdownList = []
for (let i = 0; i < res['data'].length; i++) {
this.dropdownList.push(res['data'][i])
}
})
}
} else {
console.log('Nothing to display')
}
}
At the time of insertion it is working perfectly but when I select dynamically it is not working.
EDIT:
onItemSelect(item: any) {
this.selectedItems.push(item)
}
OnItemDeSelect(items: any) {
var id = items._id
this.selectedItems = this.selectedItems.filter((item) => item['_id'] !== id);
}
onDeSelectAll(items: any) {
this.selectedItems = items
}
in your component I cant see onItemSelect($event),OnItemDeSelect($event) and other multi select method bind to the event.
check this link :
https://www.npmjs.com/package/ng-multiselect-dropdown
add this in your component and try:
onItemSelect(item: any) {
console.log(item);
}
Not sure if it is even supposed to work. Please look at this issue: https://github.com/NileshPatel17/ng-multiselect-dropdown/issues/5.
Probably events get erased after reloading [data] (see my comment).
I have a table with select2 selections. Each row has an add button with a default value in the attribute. When the user adds an item each select2 box with the same default value has to be updated. Here is a part of my code:
<tr>
<td>
<div class="gb-select-div" rowId="279525">
<select class="idInLine">
<option value="">--Select--</option>
</select>
</div>
</td>
<td>
<a href='#' default="Piet" class='ui-icon ui-icon-circle-plus addId'></a>
</td>
</tr>
var rowId;
var def;
var newOption = new Option(name, newId, true, true);
$(".idInLine").each(function() {
rowId = $(this).closest('div').attr('rowId');
def = $('#tr' + rowId).find(".addId").attr("default")
if (def === defaultValue) {
$(this).append(newOption).trigger('change');
}
});
The code is almost working. A new item is added (Ajax). The select2 change event is triggered (selections are saved with Ajax). The only problem is; only one select2 control is showing the new value, the others keep showing "--Select--".
I am using the latest version of select2 v4.
Solved it. The line:
var newOption = new Option(name, newId, true, true);
had to be inside the each loop.
I have a file upload control in a partial view(_Managefiles),
#model Framework.Views.FileUpload
...
#{
var grid = new WebGrid(Model.UploadFileList, ...);}
<div id="gridContent">
#grid.GetHtml(tableStyle: "webGrid",...)
#using (Html.BeginForm("UploadFiles", "PartialVw", FormMethod.Post,
new { enctype = "multipart/form-data", Id = "frmManageFiles", UpdateTargetId = "Grd" }))
{
..
<input id="uploadFile" name="uploadFile" type="file" />
<input type="button" id="btnSubmit" value="Upload File" onclick="javascript:StoreFormData()" />
}
this partial view is within a popup in a view(Expense.cshtml),
#model Framework.Views.Expenses
...
<div id="FileUploadModal" title="Upload File" style="display: none; overflow: auto;">
#Html.Partial("../Shared/_ManageFiles", Framework.Views.FileUpload.Current)
</div>
on click of web grid row item link in the view, upload popup is displayed and file is uploaded on upload click button below is the controller event
[HttpPost]
public ActionResult UploadFiles(FormCollection form)
{
HttpPostedFileBase File = Request.Files["uploadFile"];
...
File.SaveAs(FileUpload.Current.UploadFolderPath);
return View("../Expenses/Expenses", Expenses.Current);
}
After each upload the popup disappears, it should persist after download. I'm thinking of using ViewData for this, is there any workaround for popup to persist?
I dont want to use any upload controls like uploadify, blueimp. I want to keep it simple.
Instead of a partial view i created a normal view for the upload control and on click of web grid row item link, a new window is opened and in this way only the newly opened window will be refreshed on upload
function UploadExpenseFile(e) {
var l = (screen.width - 500) / 2;
var t = (screen.height - 500) / 2;
var f = window.open("#Url.Action("ManageFiles", "Tools", new { itemid = "_id" })".replace("_id",e), "_blank", 'resizable=0, height=500px,width=500px,top=' + t + ',left=' + l + 'w');
}
I am looping through an object passed to the View (I'm using ASP.NET MVC 3) and creating a Nav Tab using Bootstrap.
At the moment, the actual TABS work and render fine. The tab-content however doesn't get displayed - Or one of them will if I make it's class "active" which basically shows the current tab-content (It doesn't change when I click on a different tab).
What I want to happen: Click on a tab -> It's content appears.
What currently happens: Click on a tab -> Nothing shows unless I change a tab-content's class to active (like i mentioned earlier).
Below is my code:
<div>
<ul class="nav nav-tabs">
#for (int i = 0; i < 1; )
{
foreach (var cat in Model.MyObject)
{
if (i == 0)
{
<li class="active">#cat.Name</li>
i++;
}
else
{
<li>#cat.Name</li>
}
}
}
</ul>
<div class="tab-content" style="overflow: visible;">
#for (int i = 0; i < 1; )
{
foreach (var cat in Model.Model.MyObject)
{
if (i == 0)
{
<div class="tab-pane active" id="##cat.Name">#cat.Name</div>
i++;
}
else
{
<div class="tab-pane" id="##cat.Name">#cat.Name</div>
}
}
}
</div>
I put a Breakpoint over each foreach loop - there IS content being passed so that's not the problem.
How do I modify the code so the content changes when I select a different tab?
EDIT: I have made an IF function that only makes the first one active. As of now, the tabs can switch, BUT, the contents DON'T switch. Only the first content is shown and it won't change even if I click on another tab.
You have the markup, but not the logic for active class. Bootstrap provides that logic through Javascript.
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
})
Source: http://twitter.github.com/bootstrap/javascript.html#tabs
I have done a similar thing in cakePHP. You need to specify one of them as active so that when the user loads the page they see the active tab. Then when they click on a different tab the js kicks in and moves the active class to that tab. You can put an if statement in to have it only add the active class to the first tab (or whichever tab you want active by default).
I am new to jquery mobile. In my UI, one text box and one select menu are there. Initially select menu is empty.If the textbox value is more than 1 then some data is added to the select menu otherwise select menu is empty. For this, i am calling the function at the onchange of select menu but it is not working. Please can anybody help me.
Edit:
Ex:
$('#Goal_Time').bind( "focus", function(event, ui)
{
if(Goal_WeightVar.val() > 0)
{
Goal_WtVar = Math.abs(weightVar.val() - Goal_WeightVar.val());
Min_DurationVar = Math.round(Goal_WtVar * 2.2);
for(var i=0;i<10;i++)
{
$('#Goal_Time').append('<option value=Min_DurationVar>Min_DurationVar</option>');
}
}
});
thanks
Well Kinda working example:
http://jsfiddle.net/v5DC3/5/
JS
$('#Goal_WeightVar').live('change', function() {
var weightVar = 0; // for testing only
var goalWeightVar = $('#Goal_WeightVar').val();
if(goalWeightVar > 0)
{
Goal_WtVar = Math.abs(weightVar - goalWeightVar);
Min_DurationVar = Math.round(Goal_WtVar * 2.2);
for(var i=0;i<10;i++)
{
$('#Goal_Time').append('<option value='+Min_DurationVar+'>'+Min_DurationVar+'</option>');
}
$('#Goal_Time').listview('refresh');
}
});
HTML
<div data-role="page" id="Goal_Time_Page">
<div data-role="content">
<label for="Goal_WeightVar">Goal Weight:</label>
<input type="text" name="Goal_WeightVar" id="Goal_WeightVar" value="" />
<label for="Goal_Time" class="select">Goal Time:</label>
<select name="Goal_Time" id="Goal_Time">
<!-- Add options here -->
</select>
</div>
</div>
You will need to tweak it
As it says in the docs of jQuery Mobile, you have to tell the select menu to update it's contents by calling $('select').selectmenu();
If it still doesn't work you'll have to post a little sample code so I can have a look at it.
Edit:
Actually, that's not even necessary. If you have an empty <select id="to-append"></select>, you can just add options via $('#to-append').append('<option value="a">A</option>')!
The onchange event of the select is probably not the right event to do this though. The select will not change as long as it's empty, thus your event will never get triggered. Try the blur event of the text box.
jQuery Mobile Docs - Select