Develop Reference

Trying to hide a view but I need help in trying to move the code to the asset library and only have a reference on the "page"

I am trying to customize the page for a view to not display a specific view (aka I would like to hide another view from a specific view's page). Ideally based on group membership. The eventual goal is to have all my code in my site assets to allow for re-use on other pages/views.
I have the code that will remove the view and if I place it in the Script Editor, it works. Since I am trying to put all my code in my site assets, once I move it to the sites assets library and then I add my reference, the code no longer runs.
My code in the Site Assets is the following: (this same code surrounded by tags functions when on the page and in a script editor.
SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function () {
function init() {
SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
Templates: {
Header: function (ctx, columns) {
var views = JSON.parse(ctx.ListSchema.ViewSelectorPivotMenuOptions);
//display all View options except 'Create View' & 'Modify View'
ClientPivotControl.prototype.SurfacedPivotCount = views.length;
views = views.filter(function (view) {
console.log(view.DisplayText, view);
var isMenu=view.MenuOptionType===2;
return isMenu || view.DisplayText.indexOf('Owner') <0; // false will not be returned
});
ctx.ListSchema.ViewSelectorPivotMenuOptions = JSON.stringify(views);//create string defintion again
return RenderHeaderTemplate(ctx, columns); //render default Header template
}
}
});
}
RegisterModuleInit(SPClientTemplates.Utility.ReplaceUrlTokens("~siteCollection/Style Library/hideview.js"), init);
init();
});
My reference that I now add in my script editor to reference the above code from the site Assets library is:
<script type="text/javascript" src="../SiteAssets/js-test/HideOwnerViews.js"></script>
I would like the functionality of hiding the view with the code in the site assets library and not directly embedded in the page.

If your js library host in root web, reference the library as
<script type="text/javascript" src="/SiteAssets/js-test/HideOwnerViews.js"></script>
If your js library host in child web, reference the library as
<script type="text/javascript" src="/site/child/SiteAssets/js-test/HideOwnerViews.js"></script>

jQuery load dynamic content and make it accessible with a url

I have little time studying JavaScript and jQuery and would like to learn how to load dynamic content in a div of the site by a button and the loaded content create a new url to be indexable and could share with friends social networks, etc.
I created a function that is called with the onclick event of a button. The function takes two parameters, the div where to load the content and the path where the content to be loaded is stored:
function contentLoad(nameDiv, url)
{
$(name).load(url, function() {
});
}
button:
Moon
I do not know if I'll be doing well. The code still being very simple and charge me works perfectly content. But I'd like to load content would generate a new url that was accessible and that the link could be shared. How could I get it?
I think we need to store data loaded into a content with jQuery url when attempting to access, mount everything automatically and show visitors the web with dynamic content already loaded.
See if you can guide me in the process and that steps need to get it. Thanks to all.

You can use "client routes", using the hash tag in your url, and than some js lib which can handle this routes, for instance you can use director js, here is an example:
$(function() {
var author = function () {
// Load your content using AJAX
$("#content").html("author");
};
var viewBook = function (bookId) {
$("#content").html("viewBook: bookId is populated: " + bookId);
};
var routes = {
'/author': author,
'/books/view/:bookId': viewBook
};
var router = Router(routes);
router.init();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Director/1.2.8/director.js"></script>
<div id="content"></div>
<ul>
<li>#/author</li>
<li>#/books/view/1</li>
</ul>

Load External Panel To Jquery Mobile Page

JQuery Mobile template which utilises a side panel. For simplicity I want to be able to load this panel from an 'external page' / seperate document so that it can be built once and used on many pages.
A bit of research has resulted in me getting the following code to load a string of html into a variable and then loading that variable into each page as the side panel:
/* Get the sidebar-panel as a var */
var side_var = '<div data-role="panel" id="left-panel" data-position="left" data-display="push"><h1>Panel</h1><p>stuff</p></div>';
/* Load the side-panel var to the DOM / page */
$(document).one('pagebeforecreate', function () {
$.mobile.pageContainer.prepend( side_var );
$("#left-panel").panel();
});
This works perfectly, however it still doesn't address the need to build the sidebar / panel as a separate html file.
A bit more work and I discovered this snippet to load a page into a variable:
$.get("http://www.somepage.com", function( side_var ) {}, 'html');
So in theory adding the two together should give me the desired result;
/* Get the sidebar-panel as a var */
$.get("mypage.html", function( side_var ) {}, 'html');
/* Load the side-panel var to the DOM / page */
$(document).one('pagebeforecreate', function () {
$.mobile.pageContainer.prepend( side_var );
$("#left-panel").panel();
});
However, all I get when running this is an eternally rotating AJAX loader.
What am I missing &/or doing wrong??
COMPLETE SOLUTION
Omar's solution below goes most of the way but needs one small but important addition to make the JQM elements display as expected. Here is the complete solution:
$(document).one("pagebeforecreate", function () {
$.get('side-panel.html', function(data) {
//$(data).prependTo($.mobile.pageContainer); //or .prependTo("body");
$.mobile.pageContainer.prepend(data);
$("[data-role=panel]").panel().enhanceWithin(); // initialize panel
}, "html");
});
Each element to be enhanced as a JQM element needs the data-theme adding to tell it which theme to use. Additionally in the JavaScript the initialised panel widget needs to .enhanceWithin() in order for the elements to be rendered with the desired style.

the $.get() function should be wrapped in pagebeforecreate event, to append contents directly once retrieved. Also, you need to initialize retrieved contents.
$(document).one("pagebeforecreate", function () {
$.get('mypage.html', function(data){
$(data).prependTo("body"); // or .prependTo($.mobile.pageContainer);
$("[data-role=panel]").panel(); // initialize panel
}, "html");
});

Backbone.JS view renders, but not displayed on page

I'm working on converting a single-page app to backbone.JS. The View below uses the body tag as it's tagName - ie, I want the view to occupy the entire content of the page. I don't want to use container divs or other hacks.
var ThingView = Backbone.View.extend({
tagName : "body",
...
// Show the HTML for the view
render : function() {
console.log('Displaying thing')
$(this.el).append('<h1>test</h1>');
console.log('finished')
console.log($(this.el))
return this; // For chaining
When rendering, I see
finished
[
<body>​
<h1>​test​</h1>​
</body>​
]
But after I inspect the DOM, the body no longer has the text.

tagName indicates what tag Backbone should use to create its el if no el is provided by the constructor. The created element is not automatically inserted into the DOM.
The simplest way is probably to create your view with its el set to body :
new ThingView({el:'body'})

What nikoshr explained is correct. Adding to it, Using tagName is correct. but Ideally you should use el element, which is defined in Backbone.js library as an element (el) of View.
Below is the ideal code you should use while doing this.
<script type="text/javascript">
$(document).ready(function(){
var ThingView = Backbone.View.extend({
el:$("body"),
initialize: function(){
_.bindAll(this,"render");
this.render();
},
render:function(){
this.el.append('<h1>test</h1>');
console.log('finished');
console.log($(this.el).html());
}
});
var ThingView = new ThingView();
});
</script>

Drupal 6 - Add Javascript to a View

I want to add a Jquery plugin to a view. However, I don't want to add via the .info file, as I don't want it on every page. I also don't want to add it to the header of the view or create a view.tpl.php file.
This page shows how to add Java Script to a Node via template.php. Is there anyway to do something similar to add Java Script to a View via the template.php file?

Here is an example for Daniel Wehner's answer. It assumes your view is called 'blog', and your display id is 'page_1'. This code goes into template.php. Remember to clear the template cache after adding new functions to template.php.
/**
* Implements hook_preprocess_views_view().
*/
function THEMENAME_preprocess_views_view(&$vars) {
$view = $vars['view'];
// Load the blog.js javascript file when showing the Blog view's page display.
if ($view->name == 'blog' && $view->current_display == 'page_1') {
global $theme;
drupal_add_js(drupal_get_path('theme', $theme) . '/js/blog.js', 'theme', 'footer', FALSE, TRUE, FALSE);
}
}

You can use the hook hook_preprocess_views_view