Typically, you may instantiate a Laravel 5.4 view like so:
Route::get('/', function () {
return view('greeting', ['name' => 'James']);
});
Now I want to use jQuery to perform various front-end tasks on HTML elements defined in the view during the life-cycle of that view - on initialize, on render, on destroy.
I suppose another way of asking this question is: how do I get a client-side javascript function to run after a Laravel view has been loaded?
Just stick your JS in the view, the same as you would do with any HTML page.
Then maybe start moving your JS into separate files.
Then maybe start versioning you assets.
Then maybe take a look at Vue.js.
Mick
Related
I'm fairly new to AngularJS v1.8, so please excuse my ignorance here.
Using a component to load a template into the dom loses any event bindings that exist.
Is there a way to re-initiate these functions, i.e. a JavaScript library loaded on page load?
Or perhaps allow these events to stay 'live' across asynchronous dom manipulation?
I have a number of libraries included on page load and wish to create components to include partials without recreating ALL the functionality I already have.
In my index file I have a basic nav bar and the js to manage events.
<nav-bar></nav-bar>
My angular component looks like this (simplified):
app.component("navBar", {
templateUrl: "components/navBar.html",
});
The included js library has multiple functions that bind events to classes, so this is what is not working:
data-kt-menu-trigger="click"
FYI, this is part of a theme with a huge library of js, surely one can re-initiate these functions and make them available to any dom asynchronously loaded?
Also, we have chosen to stay with v1.8 for various reasons.
I have a website structure
/
/users
/users/wishes
I am using ExpressJS, Jade, and vanilla JS for front-end with 2 separate js files using window.onload function to set up my onclicks. I am expecting that my clients first open / and after this they proceed to the other pages. I have 3 views for each of the pages. Since the website is pretty small I decided not to do overkill by using a JS Framework.
Now I want to minimize my JS files inside a single one, as usual, and load everything in the root. However, it does not seem to work. How should I approach this problem?
You can listen for event instead of replacing window.onload function.
window.addEventListener('load', function() {
console.log('here you go !');
})
But take note, that if listener will be added after event fires, it wont execute.
I'm trying to minimize js/css/html footrpint for the user and to load only the files really needed. I've utilized RequireJS for that.
For my templates I'm trying to implement someting similar to
using section in C# or ///< reference path='...' > in TypeScript
But somehow depending on my template content it does or doesn't instantiate depends-on directive depending on template I have:
Works:
<depends-on path="..\..\test"></depends-on>
<login-form></login-form>
Doesn't work:
<depends-on path="..\..\test"></depends-on>
<login-form></login-form>
<other-directive></other-directive>
Doesn't work:
<div>
<depends-on path="..\..\test"></depends-on>
<login-form></login-form>
</div>
I'm obviously missing the way Angular parses and processes templates.
Is there a way to achieve what I'm trying to do?
OK, the problem was that it didn't wait until all directive template depends on are loaded. To ensure dependencies are loaded, dependent code should be in callback passed to require function.
I am loading an angular 'template' using ajax. This template renders a bootstrap modal form when I call $compile ... this works, everything fine here. But what I need is support of embedding controllers within this lazy loaded 'template' (Preferably I want to handle this client side so on server side everything can just look normal).
The thing is when I use ng-controller inside this template and define a function controller inside a script tag it fails. It tells me it cant find the controller function. I understand why this is happening, the script has not yet been initialized. I am just looking for a solution. How can I make the embedded script tags initialize first? Should I extract them, inject them somewhere and then compile the remainder? Or is there a more elegant way?
Lets have look in AngularJS documentation and show the integration with the browser event loop.
So you can see that AngularJS have its own event loop, which consists of three phases: compile, digest and apply.
When you call compile it will only loads the html markup and insert it. You should call apply also.
With apply you will set the execution scope. This will register an watcher that listens to changes.
I have an edit form that uses an ajax form to submit to the controller. Depending on the data submitted I redirect the user to one of two pages (by returning a partial view). Both pages rely on javascript/jquery and neither use anything common between the pages.
What is the best way to initialise these javascripts on each page? I know there is the AjaxOption OnComplete but both pages are quite dynamic depending on the Model passed and I would rather keep the javascript for both pages seperate rather than having a common method.
Thanks
If you are using jQuery then in the partial pages you can write
$(document).ready(function() {
// put all your javascript initialisation here.
});
Update: Above will not work. So you can try this.
You can call a method on On_PartialLoad() on AjaxOption.OnComplete. Each of this partial can provide there own implementation of On_PartialLoad().
So In Partial1 you can have
function On_PartialLoad(){
//Partial_1 Implementation
}
So In Partial2 you can have
function On_PartialLoad(){
//Partial_2 Implementation
}