I'm new to SammyJS and I am running into an issue. I have my routes working, however when I access 1, and then i go to the other. It works. The problem is when I try to go back to the first route that I visited. I'm working with ASP.NET MVC and sammyjs.
Here is my code...
<script type="text/javascript" charset="utf-8">
debugger;
; (function ($) {
var app = $.sammy(function () {
debugger;
this.get('#/PartIndex', function () {
var routing = new Routing('#Url.Content("~/")', '#testing', 'CustomerDetail/CustomerEditDetailPartial');
routing.init();
});
this.get('#/ECheckbook', function () {
debugger;
var routing = new Routing('#Url.Content("~/")', '#testing', 'CustomerDetail/CustomerEditDetailPartial');
routing.init();
});
});
$(function () {
app.run()
});
})(jQuery);
<div class="page-container">
Margin
<br />
Main
<div id="testing">
</div>
in my routing.js
var Routing = function (appRoot, contentSelector, defaultRoute) {
function getUrlFromHash(hash) {
debugger;
var secondString = hash.split('/')[2];
var url = hash.replace('#/', '').replace(secondString + '/', '');
if (url === appRoot)
url = defaultRoute;
return url;
}
return {
init: function () {
Sammy(contentSelector, function () {
this.get(/\#\/(.*)/, function (context) {
var url = getUrlFromHash(context.path);
context.load(url).swap();
});
}).run('#/');
}
};
}
Related
I use JSLink to color rows in a SharePoint 2013 list
ExecuteOrDelayUntilBodyLoaded(function () {
SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function () {
RegisterModuleInit(_spPageContextInfo.siteServerRelativeUrl + "/SiteAssets/jsLink.js", Highlight);
Highlight();
}
});
});
function Highlight() {
var HighlightFieldCtx = {};
HighlightFieldCtx.Templates = {};
HighlightFieldCtx.Templates.Fields = {};
HighlightFieldCtx.OnPostRender = postRenderHandler;
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(HighlightFieldCtx);
}
function postRenderHandler(ctx)
{
var rows = ctx.ListData.Row;
for (var i=0;i<rows.length;i++)
{
// do stuff
row.classList.add("Color");
}
}
I need add SP.SOD.executeFunc() for activate _spPageContextInfo. But when I added SP.SOD.executeFunc(), function postRenderHandler not called in line with HighlightFieldCtx.OnPostRender = postRenderHandler.
When I dont have SP.SOD.ExecuteFunc() and static link on my JS and CSS, my code and rendering fully working. Can you please help me, how to make proper code with working _spPageContextInfo?
Try this:
<script type="text/javascript">
SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function () {
//alert(_spPageContextInfo.siteServerRelativeUrl);
RegisterModuleInit(_spPageContextInfo.siteServerRelativeUrl + "/SiteAssets/jsLink.js", Highlight);
Highlight();
});
function Highlight() {
var HighlightFieldCtx = {};
HighlightFieldCtx.Templates = {};
HighlightFieldCtx.Templates.Fields = {};
HighlightFieldCtx.OnPostRender = postRenderHandler;
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(HighlightFieldCtx);
}
function postRenderHandler(ctx)
{
var rows = ctx.ListData.Row;
alert('postRenderHandler');
}
</script>
I work on my angularjs project.
Here is my cotroller:
(function () {
"use strict";
angular.module("dashboard").controller('dashboardController', ["$scope", "dashboardServices", dashboardController]);
function dashboardController($scope, dashboardServices) {
$scope.month = new Date().getMonth()+1;
$scope.year = new Date().getFullYear();
$scope.getRecords = function () {
dashboardServices.getRecords($scope.year, $scope.month).then(function (response) {
var result = dashboardServices.convert2json(response.data);
$scope.report = result.ArrayOfDepartmentReport;
});
}
}
})();
How to make function $scope.getRecords to be triggered when controll is loaded.
Execution of your controller code happens only when the controller is loaded.
Put $scope.getRecords() at the bottom of the controller.
I am trying to modify an application by overriding certain functions. I cannot release the code due to enterprise ownership. My code looks like this:
<html>
<head>
<script type="text/javascript" src="https://mylink.scriptX.js"></script>
// Some other scripts and css references
</head>
<body>
<script>
$(document).ready(function () {
form_script = my_script =
{
initialization:function (mode, json_data) {
this.parent_class.initialization(mode, json_data);
//Mycode to override the functions in scriptX.js is below:
var x= {};
function inherit(x) {
var y= {};
y.prototype = x;
return y;
};
(function ($) {
var OverrideFunctions = inherit($.my_methods);
OverrideFunctions.function1 = function () { ...};
OverrideFunctions.function2 = function () { ...};
OverrideFunctions.function3 = function () { ...}
})(jQuery);
}
//some original code here
}
</script>
//some other code here
</body>
</html>
Now the content of the scriptX.js is something like this:
(function ($) {
var my_methods = {
function1 = function () { ...};
function2 = function () { ...};
function3 = function () { ...}
}
})(jQuery);
The problem is that, I am noticing that the debugger skips the whole block of code since OverrideFunctions.function1 = function () { to the end })(jQuery);
So my functions are not being executed and thus the application is not changed. I was wondering if that could be related
I got a function that works on another website, but somehow it won't work with this (free) template I am using.
The main js file groups all functions together somehow and just pasting the code in the main.js file gives me a dropdown is not defined.
My function:
dropdown = function(e){
var obj = $(e+'.dropdown');
var btn = obj.find('.btn-selector');
var dd = obj.find('ul');
var opt = dd.find('li');
obj.on("mouseenter", function() {
dd.show();
}).on("mouseleave", function() {
dd.hide();
})
opt.on("click", function() {
dd.hide();
var txt = $(this).text();
opt.removeClass("active");
$(this).addClass("active");
btn.text(txt);
});
}
Then inside a document ready wrap I call:
dropdown('#lang-selector');
For the following HTML code:
<div id="lang-selector" class="dropdown">
NL
<ul>
<li>EN</li>
<li>NL</li>
</ul>
</div>
This is a working function in that template:
// custom theme
var CustomTheme = function () {
var _initInstances = function () {
if ($('.vk-home-dark').length) {
$('#scrollUp').addClass('inverse');
}
};
return {
init: function () {
_initInstances();
}
};
}();
Which is then called like this:
$(document).ready(function(){
PreLoader.init();
CustomTheme.init();
MediaPlayer.init();
});
I tried turning dropdown to a variable by adding var before it and then calling dropdown.init(); but this gave me dropdown.init(); is not a function
How can I make it work like the other functions?
Preloader function as requested:
// preloader
var PreLoader = function () {
var _initInstances = function () {
$('.animsition').animsition({
// loadingClass: 'loader',
inDuration: 900,
outDuration: 500,
linkElement: 'a:not([target="_blank"]):not([href^="#"]):not([href^="javascript:void(0);"])',
});
};
return {
init: function () {
_initInstances();
}
};
}();
I'm trying to understand why this does not work. (Basic example with no validation yet)
When I test it, firebug states Product.addPage is not found.
var Product = function ()
{
var Page = function ()
{
var IMAGE = '';
return {
image : function ()
{
return IMAGE;
},
setImage : function (imageSrc_)
{
IMAGE = '<img id="image" src="' + imageSrc_ + '" height="100%" width="100%">';
}
};
};
var PAGES = [];
return {
addPage : function ()
{
var len = PAGES.length + 1;
PAGES[len] = new Page();
return PAGES[len];
},
page : function (pageNumber_)
{
var result = PAGES[pageNumber_];
return result;
}
};
};
// Begin executing
$(document).ready(function ()
{
Product.addPage.setImage('http://site/images/small_logo.png');
alert(Product.page(1).image());
});
You're trying to reference the addPage property of the Product function (which in this case is a constructor), rather than on the returned object.
You probably want something like:
// Begin executing
$(document).ready(function ()
{
var product = new Product();
product.addPage().setImage('http://site/images/small_logo.png');
alert(product.page(1).image());
});
which also adds the brackets to the addPage call (though this is not the problem that FireBug will have been complaining about as it will not be able to find that method anyway).
How about Product.addPage().setImage('http://site/images/small_logo.png');?
Edit: Turns out I only caught half the problem. Look at dtsazza's answer for the whole thing.
This would work too:
Product().addPage().setImage('http://site/images/small_logo.png');
How about:
var Product = {
Page : function() {
return {
_image : '',
Image : function() {
return this._image;
},
setImage : function(imageSrc_) {
this._image = '<img id="image" src="' + imageSrc_ + '" height="100%" width="100%">';
}
};
},
Pages : [],
addPage : function() {
var Page = new Product.Page();
this.Pages.push(Page);
return Page;
},
GetPage : function(pageNumber_) {
return this.Pages[pageNumber_];
}
};
// Begin executing
$(document).ready(function ()
{
Product.addPage().setImage('http://site/images/small_logo.png');
alert(Product.GetPage(0).Image());
});