Sapper router appending instead of replacing - javascript

If i click on a link in my sapper application, the new route is appended to the _layout <slot> instead of replacing it.
The following is an example, first, the DOM before the link was clicked:
<div id="sapper>
<main>
<!-- This is is the index.svelte page -->
</main>
</div>
Then after clicking a link:
<div id="sapper>
<main>
<!-- This is the index.svelte page -->
</main>
<main>
<!-- This is a subpage -->
</main>
</div>
Has anyone encountered this before? How could I troubleshoot this?

Related

Katex auto rendering not working in a Vue project

I'm trying to implement this Katex auto-rendering extension: https://katex.org/docs/autorender.html, it looks for specific delimiters to find katex strings and renders them in the HTML.
I've followed the instructions and added the CDN to the header of my index.html like so:
<!-- KATEX AUTO RENDERING -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/katex#0.12.0/dist/katex.min.css"
integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X"
crossorigin="anonymous"
/>
<script type="module">
import renderMathInElement from "https://cdn.jsdelivr.net/npm/katex#0.12.0/dist/contrib/auto-render.mjs";
renderMathInElement(document.body);
</script>
As a test, I put the following in my <body> tag of my index.html:
<body>
<div>
<div>
The formula $a^2+b^2=c^2$ will be rendered inline, but $$a^2+b^2=c^2$$
will be rendered as a block element.
</div>
<br />
<div>
The formula \(a^2+b^2=c^2\) will be rendered inline, but \[a^2+b^2=c^2\]
will be rendered as a block element.
</div>
</div>
<div id="app"></div>
</body>
It works perfectly, I can see the katex rendered on the screen.
But now I want to add these types of katex formula strings in my other Vue components. I put the exact same formula div in my Home.vue component's template:
<template>
<div>
<app-header></app-header>
<div>
<div>
The formula $a^2+b^2=c^2$ will be rendered inline, but $$a^2+b^2=c^2$$
will be rendered as a block element.
</div>
<br />
<div>
The formula \(a^2+b^2=c^2\) will be rendered inline, but \[a^2+b^2=c^2\]
will be rendered as a block element.
</div>
</div>
<textbook-selection></textbook-selection>
<app-footer></app-footer>
</div>
</template>
But the katex is not rendered. Why does this happen?
I'm using Vue v2.6.11 with Katex v0.12.0, with vue-cli, vue-router, babel, if those are of any relevance.

How to put JavaScript in Laravel make:auth

Hello everyone so new to laravel here, I just want to ask how to put JS into the file that automatically created when running php artisan ui vue --auth, because whenever I try to add it into resources/views/auth/register.blade.php I get
[Vue warn]: Error compiling template:
Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as , as they will not be parsed.
sorry for random question I just want to know how, and also how to add css, thank you so much in advance
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Dashboard</div>
<div class="card-body">
#if (session('status'))
<div class="alert alert-success" role="alert">
{{ session('status') }}
</div>
#endif
You are logged in!
</div>
</div>
</div>
</div>
more code here since they dont allow
#endsection
You're trying to add a <script> to your blade #section, which is why you're getting that error. There are a few ways to do this.
1.. Add your script tags to views/layouts/app.blade.php right before the </body> tag, for example:
<script></script>
</body>
</html>
2.. Place them in your <head> tag and add the defer attribute
<script defer></script>
Your register.blade.php and any other view that extends app.blade.php will now have access to these scripts because it extends the app.blade.php layout.
3.. Use the Blade #stack directive to push your script to a stack. Stacks can be named, in this example lets simply use the name scripts. Add this to register.blade.php
#push('scripts')
<script></script> <!-- Add your JS file or JS code -->
#endpush`
Now in the <head> tag of your app.blade.php you can place #stack('scripts')
Note: Only register.blade.php will load this script, any other view that extends app.blade.php will not have access to it.

Introducing redux in existing web application (JSP) with ReactJS

I'm migrating a web application Java/jsp to a reactjs.
The pages are built with jsp templates, which compose the final HTML.
So I cannot use (yet) Reactjs to render my entire application, but just for render some component into the DOM.
So I have a mixed rendering, like this
<html>
</html>
<body>
<header></header> <!-- JSP code -->
<div id="myComponent"></div> <!-- this is rendered by react -->
<article></article> <!-- JSP code -->
<div id="myOtherComponent"></div> <!-- this is rendered by react -->
<footer></footer> <!-- JSP code -->
</body>
Everyhting works fine so far, so I'm trying to introduce Redux to handle the state, but I got stucked when I should render the <Provider /> component as the docs says, since I don't have an entry point for my application.
So I tried adding one, wrapping all my app code into a div:
<html></html>
<body>
<div id="app">
<header></header>
<!-- etc... -->
</div>
</body>
And then in my index.js
render(
<Provider store={store}>
<div />
</Provider>,
window.document.getElementById('app')
);
But of course it doesn't work, all my page is blank now, and the block <div id="app"> is empty
Does this Provider element must include all my components in order to work? Can I use Redux with this mixed setup?
I'm kind of lost, any help would be great.
The Provider component should wrap all the components that will use your Redux store via connect(). Redux documentation recommends just wrapping all components in Provider because there is no problem since you're just using a single store.
In React you shouldn't need to ever put elements directly in the body because this is done dynamically.
Here is an example of what your main application files should look like:
index.html
<!doctype html>
<html lang="en">
<head>
... some scripts/css...
</head>
<body>
<div id="root">
// intentionally nothing here. will be dynamically inserted via React later
</div>
</body>
</html>
entry.tsx:
ReactDOM.render(
<Provider store={store}>
<header></header> <!-- JSP code -->
<div id="myComponent"></div> <!-- this is rendered by react -->
<article></article> <!-- JSP code -->
<div id="myOtherComponent"></div> <!-- this is rendered by react -->
<footer></footer>
</Provider>,
document.getElementById('root')
);
To make an entry point simply add the following to your webpack config file:
module.exports = {
entry: './entry.tsx',
...
}
This is the barebones of a React-Redux application that you should follow when you are ready to transition.

Script inside of script tag in html page is not getting executed when used with ui-router

I am building a single page web application using Angular and UI-Router. In my index.html page, I currently have these three elements, a navbar directive, a ui-view and a footer directive as shown below:
<body>
<div class="container-fluid">
<div class="row">
<cep-navbar></cep-navbar>
</div>
<ui-view></ui-view>
<div class="row">
<cep-footer></cep-footer>
</div>
</div>
<!-- All the bower script dependencies-->
<!-- build:js js/lib.js -->
<!-- bower:js -->
<!-- endbower -->
<!-- endbuild -->
<!-- All the custom script dependencies-->
<!-- build:js js/app.js -->
<!-- inject:js -->
<!-- endinject -->
<!-- inject:template:js -->
<!-- endinject -->
<!-- endbuild -->
</body>
Module which contains the navbar directive defines the route as follows:
(function() {
'use strict';
angular.module('CEPAdmin.base.components')
.config(['$stateProvider', routeConfig]);
function routeConfig($stateProvider) {
$stateProvider.state('search', {
url: '/search',
templateUrl: 'src/app/pages/search/search.html',
controller: 'SearchController'
});
}
})();
I load in the search state by clicking on one of the links in navbar directive which injects of the search.html page in ui-view on the index.html page. But the problem is the script inside the script tag never executes. Here is my search.html page.
<script type="text/javascript">
console.log('Test me');
window.alert('Test me bro');
</script>
<h1>Hello World!!</h1>
Why is it that the script inside of scripts tag in search.html page not getting executed whenever my search state is loaded?
Link to plunk : https://plnkr.co/edit/RaX5Jsd5zqAfbwGE0i8o
Upon investigating it further, I got to know that stripped down version of jquery that angular uses (jQLite) has some DOM limitations which prevents it from executing a script file in partial view.
Solution
Reference a jQuery script before referencing Angular in your index.html. This makes angular to use jQuery instead of jQlite. Just doing this solved my problem.

How do get JQuery to work when I am using AngularJS partials?

I have the below code. However, my JQuery wont run when the #id and .classes it is looking for are in partials when viewing this static page. How do I get it to work?
<body ng-app>
<h2>JQuery wont run if code it is looking for is in a Partial</h2>
<div ng-include="'_includes/partials/menu.html'" ></div>
<br />
<h2>JQuery will work if the code it is looking for is here on the page (DOM)</h2>
<div class="container">
<div class="row">
<div class="col-xs-12">
<ul class="nav">
<li><a>Home</a></li>
<li><a>About</a></li>
<li><a>Services</a></li>
</ul>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="_includes/scripts/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<script src="_includes/scripts/custom.js"></script>
</body>
It is not a good practice to try to find html elements and modify them in an AngularJS app as you would normally do in a JQuery enabled html. Instead, try to implement whatever you are thinking of only using Angular.
Anyway you want to use ng-directives instead jQuery calls.

Categories

Resources