I have started making a hybrid mobile app using Cordova in Visual Studio. There is a part of a code that will be repeated on all the pages. I want to split the code into a separate file and load the file at the required div on every page.
I have tried ajax load, innerHTML, saving the file in js and loading it, but none of them work.
My code has a document.write command for printing the localstorage parameter and hence I am not able to load the html along with the localstorage parameter. It's only loading the HTML and ignoring the script part.
Please help.
This is my code:
<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- Sidebar user panel -->
<div class="user-panel">
<div class="pull-left image">
<script>document.write('<img src="'+localStorage.getItem("avatar_url_small")+'" class="user-image" alt="User Image">');</script>
</div>
<div class="pull-left info">
<p><script>document.write('<span class="hidden-xs">'+localStorage.getItem("name")+'</span>');</script></p>
<a href="profile_edit.html"><i class="fa fa-circle text-success"></i> Edit Profile</a>
</div>
</div>
<!-- search form -->
<form action="#" method="get" class="sidebar-form">
<div class="input-group">
<input type="text" name="q" class="form-control" placeholder="Search...">
<span class="input-group-btn">
<button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i>
</button>
</span>
</div>
</form>
<!-- /.search form -->
<!-- sidebar menu: : style can be found in sidebar.less -->
<ul class="sidebar-menu">
<li class="header">MAIN NAVIGATION</li>
<li><a href="activity.html"><i class="fa fa-dashboard"></i> <span>Activity</span></a></li>
<li><a href="groups.html"><i class="fa fa-users"></i> <span>Groups</span></a></li>
<li><a href="events.html"><i class="fa fa-calendar-o"></i> <span>Events</span></a></li>
<li><a href="blogs.html"><i class="fa fa-pencil-square-o"></i> <span>Blogs</span></a></li>
<li><a href="files.html"><i class="fa fa-files-o"></i> <span>Files</span></a></li>
<li><a href="bookmarks.html"><i class="fa fa-bookmark-o"></i> <span>Bookmarks</span></a></li>
<li><a href="wire.html"><i class="fa fa-newspaper-o"></i> <span>Wire Post</span></a></li>
<li><a href="questions.html"><i class="fa fa-question-circle"></i> <span>Questions</span></a></li>
<li><a href="photo.html"><i class="fa fa-photo"></i> <span>Photos</span></a></li>
<li><a href="video.html"><i class="fa fa-file-video-o"></i> <span>Videos</span></a></li>
</ul>
</section>
<!-- /.sidebar -->
</aside>
How can I split the file and load it on every page along with the document.write command and not just the HTML.
