Scroll to Top of Bootstrap Modal / Panels

When opening a Boostrap Modal Window (or switching Boostrap Panels) and you scrolled the content previously, it will retain the position. Here are two methods to scroll the content back to the top after opening the modal again.

There was change in boostrap where you need to use: on shown.bs.modal or use a function call.

<div id="HelpScreenModal" class="modal fade" role="dialog">
    <div id="HelpDialog" class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
                <h4 id="HelpScreenModalTitle" class="modal-title"></h4>
            </div>
            <div id="HelpScreenModalContent" class="modal-body">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
//call a function when you show the modal window (I opted for this method)
<button onclick="showSMSSummary(); return false;" data-toggle="tooltip" title="Click To iew Summary" class="btn btn-primary btn-sm">SMS Summary</button>

function showSMSSummary()
{    
     $('#HelpScreenModal').modal('show');            
     $('#HelpScreenModalContent').animate({ scrollTop: 0 }, 'fast');
 }

 

DevExtreme Remove Specific View from Cache

I wanted to remove a specific view from the DevExtreme View Cache, but examples were not pointing the correct way.

I have a view named "showAccountInfo" and when I tried to remove it, I would get an error that it was not found.  I found the view name was actually "home_1_showAccountInfo" and was due to the fact that I performed an app.navigate({ view: 'showAccountInfo' }) to that view because I did not have it in the core menu items.

Here are the steps I took to get the correct name and remove a specific DevExtreme View from the Cache.

1. Capture View Name: 

  • Capture the view name in the model binding.  
  • Add the "viewInfo" parameter to the view function.
  • Add the viewInfo.key to a Global Var
Account.showAccountInfo = function (params, viewInfo) {
   var viewModel = {
        viewShown: function (e) {
            pageAcctInit(viewInfo.key);
        }
    };
    return viewModel;
};

//---------------------------------------------------
//Set a global var with the view key.
//---------------------------------------------------
function pageAcctInit(viewKey)
{
    _ViewKeyAcctInfo = viewKey;
}

2. Remove View from Cache: In my case when the user navigated back to the home page, and then back to the "Account Info" I will remove the view from the cache before I navigate.

//Remove the view from the cache
if (_ViewKeyAcctInfo != undefined) removeViewFromCache(_ViewKeyAcctInfo);
       
//Navigate to un-cached view!
Account_Inquiry.app.navigate({ view: 'showAccountInfo' });

 

HTML5 localStorage check for null or undefined

When saving values in localStorage those values are saved as string.  There are some guidelines when checking for undefined vs. null. 

Checking localStorage.variableName === undefined is the way to checked it.

Checking getItem("variableName") === null is the way to go.

Here is a sample and results in the console.

function testLocalStorage()
{
	console.log('TESTING localStorage.value1')
	if (localStorage.value1 === undefined) 
		console.log('localStorage.value1 - is undefined');

	if (localStorage.value1 === null) 
		console.log('localStorage.value1 - is null');
	
	console.log('\n');			
	console.log('TESTING getItem("value2")');

	var licValue = localStorage.getItem("value2");

	if(licValue === undefined) 
		console.log('getItem(localStorage.value2) - is undefined');

	if(licValue === null) 
		console.log('getItem(localStorage.value2) - is null');			 
}	

*** CONSOLE RESULTS ***

TESTING localStorage.value1
localStorage.value1 - is undefined

TESTING getItem("value2")
getItem(localStorage.value2) - is null