Load Content to HTML Page from an External File

This is an example of loading an HTML page with content from an external file. This is a technique I have used on some sites and in some Word Press sites.

This script will read the contents from file1.html on the web service and load it to the content of a DIV on a page.

$(function() 
{	
	$.get( "file1.html", function( data ) {
		//$( "#Content" ).html( data ); //This Replaces  
		$( "#Content" ).append( data );   //This Appends  
 	}); 
});	

Click here for a link to the full working sample.

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' });