JavaScript/jQuery - Navigation between pages - javascript

I would like to know which is the proper way to navigate between pages using ajax calls.
An example, we got this 3 html pages.
users.html (with users.js which initializes it and has its own functions)
cars.html (with cars.js which initializes it and has its own functions)
bills.html (with bills.js which initializes it and has its own functions)
What would be the proper way to go from users.html to cars.html ? I got this problem because I dont know how to "load" the cars.js after doing the ajax call in users.html.
¿If I load it with $.getScript(), how can I remove the users.js after adding the cars.js?
Thanks.

You can try to build a SPA (Single Page Application). You will have one index html file that uses the other html files as templates. For example you have a div main container whose content is replaced with users.html/cars.html/bills.html upon clicking a link.
Routing helps you get that done without refreshing the page. It also supports history.
Look up dependency injection so that you learn how you can download only the js files you depend on.
If you don't use routing and you only change the page content you lose history which is a really neat thing to have.
SPA with Routing and Templating
Routing with Sammy.js
Examples:
<body>
Cars
Bills
<div id="wrapper"></div>
<script src="jquery.js"></script>
<script src="sammy.js"></script>
<script>
(function() {
app.router = Sammy(function () {
var selector = '#wrapper';
this.get('#/cars', function() {
$.get('cars.html', function (view) {
$(selector).html(view);
});
this.get('#/bills', function() {
$.get('bills.html', function (view) {
$(selector).html(view);
});
});
});
app.router.run('#/cars'); //Link to load on app opening
}());
</script>
</body>

You can call page with $.get() like
$.get( "cars.html", function( data ) {
$(document).html(data);
alert( "Load was performed." );
});
In cars.js use all functions with $(document).ready()
but all functions must be:
$(document).on("yourevent","selector",function(){
});
while you load page cars.js will load if you import it in cars.html page
Read more about jquery.get() and jquery.on()

Related

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>

Laravel routing behavior with PJAX not as expected

I'm building my first lavavel website from scratch and I've run into a behavioral issue with a few routes.
Here is the relevant code for my routes file:
Route::get('work', 'PageController#work');
Route::get('work/{item}', 'PageController#workitem');
And here are the relevant methods:
public function work() {
return view('pages.work');
}
public function workitem($item) {
$v = 'work.'.$item;
if(view()->exists($v)) {
return view($v);
} else {
return view('errors.noitem');
}
}
And here is the relevant part of my view:
#extends('layout')
#section('content')
...
<div class="workflex">
<a class="workitem" href="/work/test"></a>
<a class="workitem" href="/work/test2"></a>
</div>
<div id="loadContent" class="loadContent">
#yield('insert')
</div>
...
#stop
It is worth mentioning that I intend to load the individual workitem pages with PJAX. I have views that the PJAX loads into the the "insert" section based on the URL:
$(document).pjax('a.workitem', '#loadContent');
The user loads the initial work page at the /work subdirectory, and clicks a button to load /work/item pages with PJAX. As the routes suggest, I also want the user to be able to enter a workitem into the URL and be directed to the work page already loaded with that item. This whole system behaves as intended... until I added the following jquery to work.blade.php:
$(document).ready(function() {
$('#loadContent').load("/work/init", function() {
myFade('#loadContent > *', 1); //ignore this function, it's an animation irrelevant to my problem
});
});
This is here as an attempt to load a initial message inside the PJAX loading div #loadContent to tell the user to select a workitem. However, a side effect of this is that now whenever I browser to a /work/item directly (PJAX still loads the pages correctly) the document triggers this jquery and the message overrides the page content.
I was brainstorming ways to allow the work() method in my controller to trigger something that loads this script or passes just the work/init view into the "insert" section.
What do you think would be the best way to solve this? Your answers are greatly appreciated.
I was able to answer my own question. I forgot about the route optional parameters. I changed/added these things:
Route::get('work/{item?}', 'PageController#work');
and in my controller:
public function work($item = 'init') {
$v = 'work.'.$item;
if(view()->exists($v)) {
return view($v);
} else {
return view('errors.noitem');
}
}
Works perfectly now!

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>

Link to leanModal.js works fine in rendered by HTML link but not within React

I am using Lean Modal: http://leanmodal.finelysliced.com.au/ in a Rails app with a React front-end.
When I put the link to the modal in application.html.erb it works fine but when loaded through a React link using the same code, nothing happens.
I have jQuery loaded and checked 10 times if the code is the same. What could cause such an issue?
Here is the link code in React:
<a rel="leanModal" name="login" href="#login">
The template file (html.erb) script:
<script type="text/javascript">
$(function() {
$('a[rel*=leanModal]').leanModal({ top : 200, closeButton: ".modal_close" });
});
And I am loading the modal JS from my application.js file in Rails.
Thanks for any help!
You should wrap things that interact with DOM (e.g. jQuery plugins) in a component.
var LeanModal = React.createClass({
componentDidMount: function(){
$(this.getDOMNode()).leanModal({
top: this.props.top || 200
});
},
render: function(){
return <div>{this.props.children}</div>;
}
});
Note that you also need to provide a componentWillUnmount to handle clean up, and that the plugin can't do things like add/remove elements. Plugins that don't allow cleanup or make destructive changes are incompatible with react.
Sometimes implementing it with just the existing CSS and using react components instead of the jQuery plugin can be very simple and end up with a better result.

Loading data ajax style

I jsut started learning angular.js. Can you guys show me the right way to make a page that initially presents an ajax loader element saying 'Loading data' or something like that. Then after data's been fetched it would update the view and hide the element. I can put stuff in page load event using jquery, but how do you do that using pure angular? So far I figured out how to put that in click event:
<div ng-app="VideoStatus" ng-controller="VideoStatusCtrl">
<button ng-click="getVideos()">get videos</button>
</div>
<script type="text/javascript">
angular.module('VideoStatus', ['ngResource']).run(function(){
// I guess somehow I can start fetching data from the server here,
// but I don't know how to call Controller methods passing the right scope
});
function VideoStatusCtrl($scope, $resource) {
$scope.videoStatus = $resource('/Videos/GetStatuses', { callback: 'JSON_CALLBACK' });
$scope.getVideos = function () {
$scope.videoResult = $scope.videoStatus.get();
console.log('videos fetched');
};
};
</script>
Kudos to Adam Webber & Peter Bacon Darwin
Here is the working plunker
Here is my version plunker that make loading as a directive with modal popup feature
Here is the tutorial to use my version
you only need loading.js and modal.js and reference jQuery and twitterbootstrap css.
in your code,
Only 2 steps you need to do with your code.
Add the following code to HTML
< div data-loading> < /div>
Add LoadingModule module to your application module.
angular.module('YourApp', ['LoadingModule'])

Categories

Resources