i want to save vue js code Inside div in database using mongo db
i create ws to save page Inside mongoDb using nodejs
when i click save button to save code vue js Inside html
save(){
var vm=this;
var page={
"id":"2",
"page":vm.$el.innerHTML
}
console.log("hh"+vm.$el.innerHTML);
var HTTPpOST=axios.create({
baseURL: `http://localhost:3000/api/product/2`,
headers: {
Accept:'application/json'
}
})
HTTPpOST.put('',page).then(function(response){
}) .catch(function(error){
var vm=this;
console.log("error"+error);
})
i only get html code without vue js code
how can i get both and save them bothin my databse?
this is html :
<div id="app" ref="foo">
<ul>
<li v-for="prod in products">
<h1 style="color:red">{{prod.fields.name}}</h1>
<p>{{prod.fields.description}}</p>
</li>
</ul>
<button #click="save">save</button>
</div>
Try prerendering using Nuxt.js or webpack with vue-server-renderer. Server side rendering helps you to get that elements expanded by Vue.js and you will be having fully rendered webpage.
Look at Vue - Server Side Rendering
Related
I followed the guidelines that provided by google to integrate new google sign in. I created HTML using Code generator that provided by Google.
Here I have attached the complete code
<svelte:head>
<title>Home</title>
<meta name="description" content="Svelte demo app" />
</svelte:head>
<section>
<div class="h-screen">
<div
id="g_id_onload"
data-client_id="534101779287-bm07dc8v4ln4kulqbql61nsglcku74vg.apps.googleusercontent.com"
data-context="use"
data-ux_mode="redirect"
data-login_uri="http://localhost:5173/auth/callback"
/>
<div class="bg-red-300 h-80">
<div
class="g_id_signin"
data-type="standard"
data-shape="rectangular"
data-theme="outline"
data-text="signin_with"
data-size="medium"
data-logo_alignment="left"
data-width="180"
/>
</div>
</div>
</section>
It works fine for the first time render of the page.
When we are refreshing the page using Command+R or by clicking reload icon from the browser, Sign in button disappears.
A hard reload is server-side rendered when using SvelteKit. The code is probably incompatible with that or the execution order is wrong.
Check the console for errors and move code that has to run on the client to onMount. You can also turn off server-side rendering for specific pages using the ssr page option as a last resort.
For now I created component using Javascript, Here I have added the answer.
I declared google as global variable in app.d.ts
// See https://kit.svelte.dev/docs/types#app
// for information about these interfaces
declare global {
const google: any;
namespace App {
}
}
export {};
I created a svelte file to create a svelte component for sign in button
let canvas: any; //Created a variable to optain a reference to rendered div element
<div class="g_id_signin"
bind:this={canvas}/>
In onMount
onMount(async () => {
google.accounts.id.initialize({
client_id: "534101779287-bm07dc8v4ln4kulqbql61nsglcku74vg.apps.googleusercontent.com",
ux_mode: "redirect",
context: "use",
login_uri: "http://localhost:5173/auth/callback"
});
google.accounts.id.renderButton(canvas, {
width: '220',
theme: 'outline',
size: 'large',
type: 'standard',
text: 'signin_with',
shape: 'rectangular',
logo_alignment: 'left',
});
});
This code will work in initial render, Hard reload (Command+shift+R) and Reload (Command+R)
I am making this post, as so far with my React program, I have used React Drop-Zone to create a drag drop place, but what I am trying to do is when a local html file is button submitted, I want it to go to a specific / then grab the data from the new local / url.
I'm wondering whether this is possible with just React, or will I need to use Express to create a server, so on submit it uploads it to finish the task?
Upload Local Html File > go to specific / > once inside grab data from page.
Is this possible? or is a API needed?
import React from 'react';
import { useDropzone } from 'react-dropzone';
function DropZoneComponent({ open }) {
const { getRootProps, getInputProps, acceptedFiles } =
useDropzone({});
const files = acceptedFiles.map((file) => (
<li key={file.path}>
{file.path} - {file.size} bytes
</li>
));
return (
<div className="container">
<div {...getRootProps({ className: "dropzone" })}>
<input {...getInputProps()} />
<p>Drag The Html File Here</p>
</div>
<aside>
<ul>{files}</ul>
</aside>
</div>
);
}
export default DropZoneComponent;
I'm trying to apply CSS to this EJS file but no matter what kind of styling I apply nothing works. Here is the code sample:
itemEdit.ejs
<%- include("partials/header.ejs", {title: ` - Items`, body_id: `items`} )%>
<%- include("partials/navbar.ejs", {bg: `dark`})%>
<div class="edit-container">
<div class="row">
<h1>Edit item</h1>
<a href="/items">
<<<-Back to items page</a>
<form action="/itemEdit/item-edit/<%= item._id%>" method="post">
<input type="text" name="name" placeholder="enter item name">
<input type="text" name="description" placeholder="enter item description">
<button class="btn btn-primary" type="submit">Submit</button>
</form>
</div>
<%- include("partials/footer.ejs")%>
index.ejs
app.get('/itemEdit/:id', isLoggedIn, (req, res) => {
// Query for session user object
User.findById({ _id: req.user._id },
(err, doc) => {
if (err) { console.log(err); }
else {
const { userInventory } = doc
for (let i = 0; i < userInventory.length; i++) {
if (userInventory[i]._id == req.params.id) {
res.render('itemEdit.ejs', {
item: userInventory[i], // Item object
user: doc // Session user object
})
}
}
}
})
})
This is what I added to the CSS to test if it's working.
style.css
.edit-container {
background-color: red;
}
Even after I added the red background it doesn't show that styling. The CSS is loaded from the header.ejs file and I can confirm that it works on all the other EJS files except this one. Could it be because I have it inside an IF statement and that's why the CSS won't apply and even the FOOTER won't display properly even though it works on all the other EJS pages.
Any help is appreciated!
UPDATE
After playing around in the console, I noticed that the app is treating the itemEdit.ejs file as a folder. See screenshot:
console. What would be the reason for this? I never made it into a folder, it's only a simple EJS file.
You can do this easily with express if added as dependencies.
$npm install express
Make a folder named "public" in your projects folder.
In public folder you can create your css folder.
Then in your index.ejs:
const express = require("express");
const app = express();
app.use(express.static("public"));
Basically gives EJS permission to load static files in public folder and no more need for internal css.
have you tried this format : href='/stylesheets/style.css' ?
without the '/' it will look in the relative path which would become
'/itemEdit/stylesheet/style.css'
you can also check the path of the requested file by opening the debug window and going to the 'network' panel, then do a F5 to reload the page and you'll see all files being loaded
at this point you can click on specific file (in this case style.css) and check the full path that the browser is using to get the file
I had the same problem, I narrowed it down to this line of code in the header partial file <link rel="stylesheet" href="css/styles.css">.
I had my css in a public folder as well so there shouldn't be a problem.
Adding a / in front of css folder like this:
<link rel="stylesheet" href="/css/styles.css">
Fixed it without destroying the rest of the code. I don't know what that does i guess i got more reading to do. Hope this helps
We have this AngularJS SP application (smart-mirror) in electron browser, which has user createable extensions.
the extensions are small snippets of html that use angular directives
and use controllers and services.
to install an extension, one has to edit the main page and insert the script tags for the controller and service functions and a <div ng-include= ...> for the snippet of HTML
hardcoded this single page app works great.
but I want to add the capability to this app (opensource) to dynamically load those elements somehow...
adding the tags to the dom works, BUT are not processed correctly.
the HTML is processed before the scripts (from the inserted tags) are run, and when the ng-include inserts the HTML snippet, then controllers are not defined yet...
the body (with the extensions in hard-coded positions commented out)
<body ng-controller="MirrorCtrl" ng-cloak>
<div class="top">
<div class="top-left">
<!-- <div ng-include="'plugins/datetime/index.html'"></div>
<div ng-include="'plugins/calendar/index.html'"></div> -->
</div>
<div class="top-right">
<!-- <div ng-include="'plugins/weather/index.html'"></div>
<div ng-include="'plugins/traffic/index.html'"></div>
<div ng-include="'plugins/stock/index.html'"></div>
<div ng-include="'plugins/tvshows/index.html'"></div>
<div ng-include="'plugins/ha-display/index.html'"></div> -->
</div>
</div>
...
...
<script src="filename.service"/>
<script src= filename.controller"/>
</body>
the calendar extension html (inserted into specific div area of the page)
<ul ng-controller="Calendar" class="calendar fade" ng-show="focus == 'default'" ng-class="config.calendar.showCalendarNames ? 'show-calendar-names' : ''">
<li class="event" ng-repeat="event in calendar" ng-class="(calendar[$index - 1].label != event.label) ? 'day-marker' : ''">
<div class="event-details">
<span class="day">
<span ng-bind="event.startName"></span>
<span ng-if="event.startName != event.endName"> - <span ng-bind="event.endName"></span></span>
</span>
<div class="details calendar-name" ng-bind="event.calendarName"></div>
<span class="summary" ng-bind="event.SUMMARY"></span>
<div class="details" ng-if="event.start.format('LT') != event.end.format('LT')">
<span ng-if="event.startName != event.endName"><span ng-bind="event.start.format('M/D')"></span> <span ng-bind="event.start.format('LT')"></span> - <span ng-bind="event.end.format('M/D')"></span> <span ng-bind="event.end.format('LT')"></span></span>
<span ng-if="event.startName == event.endName"><span ng-bind="event.start.format('LT')"></span> - <span ng-bind="event.end.format('LT')"></span></span>
</div>
<div class="details" ng-if="event.start.format('LT') == event.end.format('LT')">All day</div>
</div>
</li>
</ul>
the calendar extension controller (used by the html)
function Calendar($scope, $http, $interval, CalendarService) {
var getCalendar = function(){
CalendarService.getCalendarEvents().then(function () {
$scope.calendar = CalendarService.getFutureEvents();
}, function (error) {
console.log(error);
});
}
getCalendar();
$interval(getCalendar, config.calendar.refreshInterval * 60000 || 1800000)
}
console.log("registering calendar controller")
angular.module('SmartMirror')
.controller('Calendar', Calendar);
the calendar extension service (used by the controller, shortened for this discussion)
(function () {
'use strict';
function CalendarService($window, $http, $q) {
...
...
return service;
}
console.log("registering calendar service")
angular.module('SmartMirror')
.factory('CalendarService', CalendarService);
} ());
so a user wanting to add an extension would have to create these files,
and edit the main page HTML and insert them
<div ng-include src="filename.html"></div>
in the right place and then add the
<script src="filename.service" >
and
<script src="filename.controller">
in the right place and order, service needs to be done before the controller,
as controller uses service.
anyhow, it's easy to add code to locate all the extensions and dynamically insert elements into the dom in their respective places... but...
in the hard coded, the scripts are added after the html in the body
so, I added a new script (processed when the page is loaded), which locates and inserts all the elements to support the extensions in the right places..
and then the script ends.... (last one in the hard-coded HTML) and the HTML directives are processed and boom, the dynamically added scripts have not been loaded or processed, so the controllers are not found...
I CAN create a temp HTML file with all this info in it and load THAT instead of dealing with the dynamic loading, but I think its better to resolve this
I have tried creating my own angular directive and compiling that in, but get stuck in a loop
<divinc src="filename.service"></divinc>
the inserted div is correct, as a child of the divinc directive
angular.module('SmartMirror')
.directive("divincl", ["$compile" ,function($compile){
return {
priority: 100,
terminal: true,
compile: function(scope, element, attrs) {
var html = "<div ng-include=\"" + element['incl']+ "\" onload='function(){console.log(\'html loaded\')}'></div>"
var templateGoesHere = angular.element(document.getElementById(element['id']));
templateGoesHere.html(html);
//document.body.innerHTML='';
var v= $compile(templateGoesHere);
//scope.$apply();
return function linkFn(scope) {
v(scope) // Link compiled element to scope
}
}
}
}]);
advice on how to solve this problem.. Thanks
In order to make an angularjs 1.7 application load dynamically extensions, there are 2 ways:
either use "nested angularjs applications", which is clearly an advanced use of angularjs and will require you to communicate between 2 angularjs applications, to use $scope.$apply to tell the other app to update etc..
either don't load them dynamically in the frontend, but in your backend when generating the html page which contains the application. Try to list all the extensions from the start.
I recommend you to forget the use of ng-include too, and the fact of trying to add <script></script> inside a directive of your application.
First, you need to re-understand how an angularjs application is started.
When you load your main application, you have a script in which angular.module, angular.directive, angular.value, angular.config, angular.run ... calls are made. This is the declaration step
If you declare a module MyApp and that in your html you have a DOM element with ng-app="MyApp", angularjs will automatically run angular.bootstrap() on this DOM element in order to start MyApp. The execution of the application starts here. You cannot declare anything anymore in the module MyApp.
Secondly, I think that <script></script> code inside templates is sanitized and removed by angular. Plus, even if you execute the code, since the declaration step has finished, you are not supposed to create new directives or register new services, it won't work.
A good way is that when you load your plugin, you:
Load the script of the plugin from the start, it must declare a new module like MyPlugin1.
In the directive which will contain the plugin, put the code of the link I sent you, which makes possible to insert a sub-application. In the end you will have a <div ng-app="MyPlugin1"></div> inside your directive's template
Then call angular.bootstrap on that node, which will make possible to start the sub application.
If you do this, you can run the sub application, but you didn't pass it parameters. In order to pass it parameters, you can put the code of the module MyPlugin1 inside a function, in order to have an application factory. Then use app.value('param1', parameter1) to initialize the app.
For example:
function declarePlugin1(myParam1, myParam2) {
var app = angular.module('MyPlugin1', []);
// app.directive();
app.value('myParam1', myParam1);
app.value('myParam2', myParam2);
}
And inside the directive call declarePlugin1("test", 42);, which will declare the application MyPlugin1 with the initialized values, and then angular.bootstrap to tell angularjs to start this application.
You can pass callbacks too, in order to communicate between the 2 applications.
this is one of my first projects with vue.
Basically, I am trying to display an image from a URL from an array.
On the webpage, the URL is in the image back but the actual image is not displaying.
This is in my main vue class
<div id="painting">
<ul v-if="artwork && artwork.length">
<li v-for='(artworks, index) in artwork' :key='index'>
<img v-bind:src="artworks.thumbnailUrl" />
</li>
</ul>
<router-view/>
</div>
then the script code:
<script>
import axios from 'axios';
export default {
data() {
return {
artwork: []
}
},
created() {
axios.get(`http://localhost:9000/artwork`)
.then(response => {
this.artwork = response.data;
})
.catch(e => {
this.errors.push(e)
})
}
}
</script>
This is what it looks like on the web, the url is there but no picture
I have declared a width and a height of the image as well with css
I should mention i getting the information from the database in a node project and connecting by a port number
I am pretty new to stack so I would love any feedback, cheers
From you screenshot code, this looks fine. I can see the image by writing similar HTML
<li>
<img data-v-xcxcc src="http://www.tate.org.uk/art/images/work/A/A00/A00007_8.jpg" />
</li>
https://jsfiddle.net/y2m75usk/
Try clearing your cache or reload the page by Holding the Ctrl key and press the F5 key.
Thanks!