for quick reference I have attached the image of what I want.
I would like to update (change the content) without updating the whole page (without refreshing the page). Clicking on the links or buttons on the whitebox should fetch the data from the database and that is to be displayed in the redbox. Of course first thing you would write as an answer will be "Ajax!!!", but as I'm new to laravel framework, I want to know what is the best way to achieve this, should I write the javascript directly in the view or in the controller, and how to do it through controller? If you need any more info please let me know.
Revised question, is there any other better way other then the ones answered
First we need to set up some routes. You can also do this with controllers.
Route::get('home', function()
{
return View::make('home');
});
Route::get('someRoute', function()
{
return View::make('someView');
});
For the home view, I'd add a scripts section:
//home.php
<html>
<head>
<script>
$('a.ajax').click(function(e){
e.preventDefault();
var pageURL = $(this).attr('href');
$('#ajaxContent').load(pageURL);
});
</script>
</head>
<body>
<div class="wrapper">
Click Here
<div id="ajaxContent"></div>
</div>
</body>
</html>
In case you're using blade templating, here's an implementation
//main.blade.php
<html>
<head>
#yield('styles')
</head>
<body>
<div class="wrapper">
#yield('content')
</div>
#section('scripts')
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
#show
</body>
</html>
//home.blade.php
#extends('main')
#section('content')
Click Here
<div id="ajaxContent"></div>
#stop
#section('scripts')
#parent
$('a.ajax').click(function(e){
e.preventDefault();
var pageURL = $(this).attr('href');
$('#ajaxContent').load(pageURL);
});
#stop
it would be better for you if you use jQuery to do this update using ajax functionality.
and a simple code can be like this
$('a.ajax').click(function(e){
e.preventDefault();
var pageURL = $(this).attr('href');
$('#divID-to-be-updated').load(pageURL);
});
more about ajax functionality inside jQuery can be read from http://jqapi.com/#p=load
Related
So basically I have this code where I click on the image, it gets html file and should display it on the same page. It does display it but on another page, my guess is that it's not actually loading js file for some reason. Anyone can help?
View:
#extends('layouts.master')
#section('title', 'Best programmer ever')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="{{asset('/js/template.js')}}" rel="javascript" type="text/javascript"></script>
#section('content')
#endsection
#section('template')
<!-- #foreach ($templates as $template)
{{$template->image}}
{{$template->file}}
#endforeach
-->
<div class= "template_class">
<a class="content-link" href="templates/template1.html">
<img id = "image" src="{{ asset($template->image )}}"/>
</a>
</div>
#show
JavaScript:
$(function(){
$('.content-link').click(function(e){
e.preventDefault();
$('.content').load(this.href)
.fail(function()( alert('Oops...something went wrong')));
});
});
alert("hello");
It doesn't even show alert so that's why I think it is not loading it.
The <script> tags are out of the #section sections.
Try changing it like this:
#section('content')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="{{asset('/js/template.js')}}" rel="javascript" type="text/javascript"></script>
#endsection
If it doesn't work, check if the JS files are really included in your browser. (Open the Chrome Dev Tools and check the DOM)
I am new to angularjs. From this web site https://angular-ui.github.io/bootstrap/ I got typeahead directive for my angularjs project but my limit and filter are not working here is my code.
When I type "c" in the text field I want only 8 records to be displayed but instead all records are displayed.
plunker
http://plnkr.co/edit/RhwHmKwSxWBh3rp0u85O?p=preview
angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('TypeaheadCtrl', function($scope, $http) {
$scope.getLocation = function(val) {
return $http.get('http://maps.googleapis.com/maps/api/geocode/json', {
params: {
address: val,
sensor: false
}
}).then(function(response){
return response.data.results.map(function(item){
return item.formatted_address;
});
});
};
});
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<script type="text/ng-template" id="customTemplate.html">
<a>
<img ng-src="http://upload.wikimedia.org/wikipedia/commons/thumb/{{match.model.flag}}" width="16">
<span bind-html-unsafe="match.label | typeaheadHighlight:query"></span>
</a>
</script>
<div class='container-fluid' ng-controller="TypeaheadCtrl">
<h4>Asynchronous results</h4>
<pre>Model: {{asyncSelected | json}}</pre>
<input type="text" ng-model="asyncSelected" placeholder="Locations loaded via $http" typeahead="address for address in getLocation($viewValue) | filter:$viewValue |limitTo:8" typeahead-loading="loadingLocations" class="form-control">
<i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"></i>
</div>
</body>
</html>
I know this is an old question, but I'll go ahead and answer it anyway for future reference:
This is a known behaviour when loading via $http as the limit would apply to the promise when calling your get method, which would result in it not applying to the actual result set by the time your promise resolves.
See issue #1740 in ui.bootstrap repository for more information on this.
The work around for this is either rolling your own filter function and return a promise from that filter instead of fetching the records directly or implement a limit parameter in the API and limit it server side.
This fiddle has the starter kit recreated, with and extra button that alters the model.
http://jsfiddle.net/UjacC/1/
However, when clicking change, the array changes, but the view is not being updated. Why?
<title>Ember Starter Kit</title>
<body>
<script type="text/x-handlebars">
<h2>Welcome to Ember.js</h2>
<button id="btnChange">change model</button>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
<ul>
{{#each item in model}}
<li>{{item}}</li>
{{/each}}
</ul>
</script>
<script>
$(document).ready(function(){
console.log(stuff);
$("#btnChange").click(function(){
stuff.push("d");
console.log("change",stuff);
});
});
</script>
</body>
App = Ember.Application.create();
var stuff = ["a","7","b","c"];
App.Router.map(function() {
// put your routes here
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return stuff;
}
});
Instead of stuff.push you need to use Embers pushObject which will notify listeners of an object that there was a change to it.
EDIT:
Here's the updated jsfiddle: http://jsfiddle.net/UjacC/2/
I am trying to get my AJAX .load function to have back/reload/bookmark capability.
I am using the jquery plugin history.js.
My content is being loaded in my content div from another html file using anchor points within that to specify which div to select the information from (depending on link clicked).
Currently, i have managed to get the plugin to change the address but the back/reload functionality is not working.
This is the plugin code i am using: https://github.com/balupton/jquery-history/blob/master/scripts/jquery.history.js
Head:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="core.js"></script>
<script type="text/javascript" src="path.js"></script>
<script type="text/javascript" src="back.js"></script>
Navigation:
<div id="leftnav">
<p class="leftnavtext">
<a class="navlinks" id="about2" href="#/about">ABOUT</a> <br>
<a class="navlinks" id="process2" href="#/process">PROCESS</a> <br>
<a class="navlinks" id="materials2" href="#/materials">MATERIALS</a> <br>
<a class="navlinks" id="pricing2" href="#/pricing">PRICING</a>
</p>
AJAX Javascript code:
$(document).ready(function(){
$("#about2").click(function(){
$("#content").load("content.html #about");
});
$("#process2").click(function(){
$("#content").load("content.html #process");
});
$("#materials2").click(function(){
$("#content").load("content.html #materials");
});
$("#pricing2").click(function(){
$("#content").load("content.html #pricing");
});
$("#pricing3").click(function(){
$("#content").load("content.html #pricing");
});
$("#infinite1").click(function(){
$("#content").load("content.html #infinite");
});
});
back.js Code (path.js is the plugin.):
function nav_event(hash) {
// Some sort of navigation happened, update page
}
$(document).ready(function(){
$.history.init(nav_event);
$.history.load('#/about');
}
$(document).ready(function(){
$.history.init(nav_event);
$.history.load('#/process');
}
$(document).ready(function(){
$.history.init(nav_event);
$.history.load('#/materials');
}
$(document).ready(function(){
$.history.init(nav_event);
$.history.load('#/pricing');
}
$(document).ready(function(){
$.history.init(nav_event);
$.history.load('#/infinite');
}
Can anyone see where im going wrong with this? Or can they suggest a better plugin to use?
Thanks
if (navigator.userAgent.match('MSIE')!=null) {return false;} /*prevent IE crash*/
window.addEventListener("popstate", function(e) {window.location = lastURL; });
window.history.pushState({"html": newURL,"pageTitle": newURL},"", newURL);
I stole this from another answer.
Unfortunately it does not work in IE.
further reading:
http://html5doctor.com/history-api/
http://diveintohtml5.info/history.html
How can I get Backbone router + Kendo UI Mobile (tabstrip) to work together?
I am just getting started with Backbone and have been looking at using it with a UI. I was able to do this with Backbone and jQuery Mobile (JQM) by disabling JQM's routing as outlined in this post: http://coenraets.org/blog/2012/03/using-backbone-js-with-jquery-mobile/
// Disable JQM routing
$(document).bind("mobileinit", function () {
$.mobile.ajaxEnabled = false;
$.mobile.linkBindingEnabled = false;
$.mobile.hashListeningEnabled = false;
$.mobile.pushStateEnabled = false;
});
// Backbone Router
// Create backbone view, append it to the body, and then use JQM to change to that page
home: function () {
page = new HomeView();
page.render();
$('body').append( $(page.el) );
$.mobile.changePage( $(page.el), {changeHash:false} );
}
Working through the Kendo UI Mobile docs, I have this working page:
<!DOCTYPE html>
<html>
<head>
<title>My App</title>
<link href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.mobile.all.min.css" rel="stylesheet" />
</head>
<body>
<section data-role="layout" data-id="default">
<header data-role="header">
<div data-role="navbar">My App</div>
</header>
<!--View content will render here-->
<footer data-role="footer">
<div data-role="tabstrip">
<a class="tab-a" data-icon="home" href="#home">Home</a>
<a class="tab-a" data-icon="bookmarks" href="#about">About</a>
</div>
</footer>
</section>
<div data-role="view" data-layout="default" id="home">Home Page</div>
<div data-role="view" data-layout="default" id="about">About Page</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script>
<script>
var app = new kendo.mobile.Application();
</script>
</body>
</html>
It has a tabstrip with 2 buttons that enables you to switch between the 2 views.
I can get it to work with a Backbone router - whereby the routes "home" and "about" are called as the tabstrip buttons are clicked, but cannot work out how to intercept the click events, enabling me to generate a view, append it to the DOM, and then ensure that the relevant tabstrip button class is changed to represent the selected state.
I tried adding a class to the tabstrip links - $('.tabstrip-link').click( function () { alert( 'Clicked' ); } ) - but to no avail (sporadically fired). How can I remove the views from between the body tags, and generate these via a Backbone route, append them to the Layout between the header and footer sections, and then let the tabstrip change go about it's business?
You may need to disable the Kendo Router if you wish to use the Backbone router. The Kendo Router in mobile is not designed to be disabled. However at first glance, the following worked for me, if placed before creating your application.
kendo.mobile.Application.prototype._startHistory = function() {};
kendo.mobile.Application.prototype.router = {destroy: function() {}};
It works because Pane has it's own History management if the router is not created.