Onsen UI Render All Tabs On Display - javascript

I am using onsen-ui Tab Bar component, When trying to access HTML element of any tab other than the displayed one before rendering it, I always get undefined.
I have made this workaround method which is called after displaying the tab bar on the screen:
var test = function () {
var tabbar = $scope.tabbar;
if (typeof tabbar != 'undefined') {
var len = tabbar._tabItems.length;
for (var i = 0; i < len; i++) {
var tabItem = tabbar._tabItems[i];
tabItem.setActive(true);
tabItem.setActive(false);
}
tabbar._tabItems[len - 1].setActive(true);
};
};
But after executing this method the selected tab is displayed empty, I must click its tab again to show its content.
Any help?

Related

JQuery to get the last changed value from #Html.DropDownListFor asp.net mvc multiselect dropdownlistbox

How do I use Jquery to find the last checked/unchecked item and so that I can add or remove them from other two listboxs?
I am creating a dropdown listbox(excludedPeople) with multiselect checkbox with two other listboxs(PrimaryPerson,secondaryPerson) in same form. All three list box are having same set of data during form load. If any item in excludedPeople is selected(checked), I need to remove that item from PrimaryPerson and secondaryPerson and vise-versa.
ASP.Net MVC multiselect Dropdown Listbox code:
#Html.ListBoxFor(m => m.ExcludedPeople, Model.AllPeopleListViewModel,
new { #class = "chkDrpDnExPeople" , #multiple = "multiple"})
jQuery code:
$(".chkDrpDnExPln").change(function ()
{
console.log("Trigger" + $(this).val()); //this code gets the list of all items selected. What I need is to log only last selected/unselected item's val & text into the console.
});
Any help is appreciated. Ask questions if any.
Well, after waiting for 2 days I made a solution myself and posting it here so that others can make use of it.
I made this code for multiselect dropdown listbox with checkboxes in each list item. I expect this to work on similar controls like checked listbox but haven't tested it.
I followed register control and get notified by event so the usage can be made seamless without getting into details.
Usage:
1) include the "JQuery based Library" part into your project as shared or same js script file.
2) Use the below approach to consume the functionality. The event should get you the changed values when the control selection is changed.
RegisterSelectedItemChangeEvent("chkDrpDnctrl#1");
RegisterSelectedItemChangeEvent("chkDrpDnctrl#2");
RegisterSelectedItemChangeEvent("chkDrpDnctrl#3");
$(".chkDrpDnctrl").on("OnSelectionChange", function (e,eventData)
{
var evntArgs = {
IsDeleted: false,
IsAdded: false,
AddedValues: [], //null if no change/None. Else changed value.
DeletedValues: [] //null if no change/None. Else changed value.
};
var source = e;
evntArgs = eventData;
var elementnm = $(this).attr("id");
if (evntArgs !== "undefined" && elementnm != "")
{
if (evntArgs.IsAdded == true)
{
//if excluded checked then remove.
for (var i = 0; i < evntArgs.AddedValues.length; i++)
{
PerformAction (control#, evntArgs.AddedValues[i]);
}
}
if (evntArgs.IsDeleted == true)
{
//if excluded checked then remove.
for (var i = 0; i < evntArgs.DeletedValues.length; i++)
{
PerformAction (control#, evntArgs.AddedValues[i]);
}
}
}
});
JQuery based Library:
function RegisterSelectedItemChangeEvent(selector) {
var dropdownElementRef = selector;
//Intializes the first time data and stores the values back to control. So if any of the checkboxes in dropdown is selected then it will be processe and added to control.
$(dropdownElementRef).data('lastsel', $(dropdownElementRef).val());
var beforeval = $(dropdownElementRef).data('lastsel');
var afterval = $(dropdownElementRef).val();
//storing the last value for next time change.
$(dropdownElementRef).data('lastsel', afterval);
//get changes details
var delta = GetWhatChanged(beforeval, afterval);
//stores the change details back into same object so that it can be used from anywhere regarless of who is calling it.
$(dropdownElementRef).data('SelectionChangeEventArgs', delta);
//prepares the event so that the same operation can be done everytime the object is changed.
$(dropdownElementRef).change(function () {
var beforeval = $(dropdownElementRef).data('lastsel');
var afterval = $(dropdownElementRef).val();
//storing the last value for next time change.
$(dropdownElementRef).data('lastsel', afterval);
//get changes details
var delta = GetWhatChanged(beforeval, afterval);
//stores the change details into same object so that it can be used from anywhere regarless of who is calling it.
$(dropdownElementRef).data('OnSelectionChangeEventArgs', delta);
//fires the event
$(dropdownElementRef).trigger('OnSelectionChange', [delta]);
//$.event.trigger('OnSelectionChange', [delta]);
});
var initdummy = [];
var firstval = GetWhatChanged(initdummy, afterval);
//fires the event to enable or disable the control on load itself based on current selection
$(dropdownElementRef).trigger('OnSelectionChange', [firstval]);
}
//assume this will never be called with both added and removed at same time.
//console.log(GetWhatChanged("39,96,121,107", "39,96,106,107,109")); //This will not work correctly since there are values added and removed at same time.
function GetWhatChanged(lastVals, currentVals)
{
if (typeof lastVals === 'undefined')
lastVals = '' //for the first time the last val will be empty in that case make both same.
if (typeof currentVals === 'undefined')
currentVals = ''
var ret = {
IsDeleted: false,
IsAdded: false,
AddedValues: [], //null if no change/None. Else changed value.
DeletedValues: [] //null if no change/None. Else changed value.
};
var addedvals;
var delvals;
var lastValsArr, currentValsArr;
if (Array.isArray(lastVals))
lastValsArr = lastVals;
else
lastValsArr = lastVals.split(",");
if (Array.isArray(currentVals))
currentValsArr = currentVals;
else
currentValsArr = currentVals.split(",");
delvals = $(lastValsArr).not(currentValsArr).get();
if (delvals.length > 0)
{
//console.log("Deleted :" + delvals[0]);
for (var i = 0; i < delvals.length; i++)
{
ret.DeletedValues.push(delvals[i]);
}
ret.IsDeleted = true;
}
addedvals = $(currentValsArr).not(lastValsArr).get();
if (addedvals.length > 0)
{
//console.log("Added:" + addedvals[0]);
for (var i = 0; i < addedvals.length; i++)
{
ret.AddedValues.push(addedvals[i]);
}
ret.IsAdded = true;
}
return ret;
};

How to detect if webpage is being reloaded after the initial load with Javascript?

So I have a sort of newbie of a question : How can I detect if a page have been reloaded after the initial load ?
I am asking that question because I have a problem : My JavaScript code works as it should when the user gets to the page. But when the user is on that page and reload the page ,the code breaks and stop working.
I'm trying to find a way for the code to reloads if the page reloads or to edit my code to fix the problem.
Here is the code. It a dynamic drop-down list with one parent and one child:
"use strict";
/*
The dynamic drop-down does not work properly with safari on mac OS. It does disable child options but they remain visible.
*/
window.onload = function () {
//parent function start here ...
function parent_() {
let p = document.getElementById('category_select'),
c = p.options[p.selectedIndex].value;
return c; // return parent options value
}
//child function start here ...
function child_() {
// create a list of all child options in the dropdown ...
let c = document.getElementById('type_select');
for (let l = 0; l < c.options.length; ++l) {
// if parent options value === child option values it display all child options values that match the selected parent value
if (c.options[l].value === parent_()) {
c.options[l].style.display = 'block';
c.options[l].disabled = false;
// and disable all child options that dont match the selected parent value
} else
if (c.options[l].value !== parent_()) {
c.options[l].style.display = 'none';
c.options[l].disabled = true;
}
}
}
let l = document.location.pathname;
if (l === "/get-started") {
// on page load, disable child drop-down
let p = document.getElementById('category_select'),
c = document.getElementById('type_select'),
p_ = p.options[p.selectedIndex].value;
if (p_ === "") {
c.disabled = true;
}
p.addEventListener("change", function () {
let p = document.getElementById('category_select'),
c = document.getElementById('type_select'),
p_ = p.options[p.selectedIndex].value;
if (p_ !== "") { //parent drop-down has a selected value ...
//get first child with options value equal to parent's one
c.value = p_;
//disable the child drop-down
c.disabled = false;
child_();
} else if (p_=== "") {
c.value = p_;
c.disabled = true;
}
})
} else
if (l !== "/get-started"){
return null;
}
};
You need a variable to save your page's state when your page is
destoryed.
So in this idea, you can try cookies or localStorage, even add the states to url as params. When initials the page, reads localStorage(For example), if state exists, read those variables rende your drop-down. If not, get state from last page and initial.

Selecting a drop-down box option does not affect page

I'm trying to make an extension that selects facilitates filling out info on checkout page of a website (you'll probably have to add to cart before you can go to the checkout page). Currently I'm just setting the "selected" value of a certain option tag to be true, but it seems not to affect the page as intended. I'm talking about the Country and State selection on the checkout page (I want it to be Canada and BC). Would prefer vanilla Javascript
Here's my code:
var checkoutSelects = document.querySelectorAll("select:not([type=hidden])");
for(var i = 0; i < checkoutSelects.length; i++) {
if(checkoutSelects[i].getAttribute("id").toLowerCase().includes('country')) {
var countryOptions = checkoutSelects[i].querySelectorAll('option');
for(var a = 0; a < countryOptions.length; a++) {
if(countryOptions[a].value.toLowerCase().includes("canada")) {
countryOptions[a].selected = true;
}
}
}
}
Can you try countryOptions.selectedIndex = a;
instead of
countryOptions[a].selected = true;

how to get itemId values using hasOwnProperty method to hide a tab in ext js

I tried this code to hide a tab:
hideTab: function() {
var dashboard_obj = Ext.ComponentQuery.query('sellax-navigation-panel');
var tabBarObj = dashboard_obj[0].down('tabpanel').getTabBar();
var tabsArray = tabBarObj.items;
for(var tabBarObjItems = 0; tabBarObjItems < tabsArray.length; tabBarObjItems++)
{
var tabObj = tabsArray.get(tabBarObjItems);
if(tabObj.card.id == "tabSettings")
{
var tabObj_list = Ext.ComponentQuery.query('sellax-navigation-sub[id=settingsSubNav]');
var tabBarObj_list = tabObj_list[0].getTabBar();
var tabsArray_list = tabBarObj_list.items;
for(var tabSubBarObjItems = 0; tabSubBarObjItems < tabsArray_list.length; tabSubBarObjItems++)
{
if(tabsArray_list_item.id == "tab-1334")
{
tabsArray_list_item.hide();
}
But the console values are not correct, so how can I hide that tab?
My code:
var tabsArray_list = tabBarObj_list.items;
for(var tabSubBarObjItems = 0; tabSubBarObjItems < tabsArray_list.length; tabSubBarObjItems++)
{
var tabsArray_list_item = tabsArray_list.get(tabSubBarObjItems);
if (tabsArray_list_item.hasOwnProperty('itemId'))
{
value = tabsArray_list_item['itemId'];
if (value == 'tabdeptsList')
{
tabsArray_list_item.hide();
}
}
Code throws no error but tab is not hiding.
How to get ItemId of this panel and hide this tab?
Find Component in Container
To retrieve the component for a specific itemId you should use the getComponent method of the Ext.container.Container. It accepts an itemId as it's parameter and returns the matching component.
From the Sencha ExtJs 6.2.1 documentation:
Examines this container's items property and gets a direct child component of this container.
So you do not need too loop over the items, just call the function.
var tabsArray_list = tabBarObj_list.getComponent('tabdeptsList');
Hide Tab
To hide the associated tab, you can use the tab property of the component.
var tab = tabsArray_list.tab; // Each component has a reference to it's tab
tab.hide();
Full Code
var tabsArray_list = tabBarObj_list.getComponent('tabdeptsList');
var tab = tabsArray_list.tab;
tab.hide();

Adding content to menu items

I've made some menus, but can't figure out how to set the actual page content for these menu items once clicked. Cheers.
function doGet() {
var app = UiApp.createApplication();
var menu = app.createMenuBar();
var handler = app.createServerHandler();
var menuUsers = menu.addItem('Users', handler).addSeparator().setId('users');
var menuPending = menu.addItem('Pending Submissions', handler).addSeparator().setId('pending');
app.add(menu);
return app;
}
In general, you would have some main panel that is your main display. Let's call it main-display".
The handler for each menu item executes a function when the menu item is clicked. This function can do anything (say, highlight some text, or pull up a toolbar, or save the file). It doesn't necessarily have to change the whole display. A menu bar is like the File menu or Edit or whatever you'd like.
You would have to define a ServerHandler that handles each different menu item being clicked.
function doGet() {
var app = UiApp.createApplication();
var menu = app.createMenuBar();
var handlerUsers = app.createServerHandler("showUsers");
var handlerPending = app.createServerHandler("showPending");
var menuUsers = menu.addItem('Users', handlerUsers).addSeparator().setId('users');
var menuPending = menu.addItem('Pending Submissions', handlerPending).addSeparator().setId('pending');
app.add(app.createVerticalPanel().add(menu).add(app.createSimplePanel().setId("main-display")));
return app;
}
Then have some functions
function showUsers() {
var app = UiApp.getActiveApplication();
var main = app.getElementById("main-display");
//do whatever you need to display your main panel
return app;
}
Similar function for showPending.
Instead, if you'd like a bunch of different content panels, look into using TabPanel. I feel like this is more of what you're looking for.

Categories