Page renders for a second and then disappears - Vue JS - javascript

I'm new to using Vue and am trying to build a simple search feature that takes an input query and returns all users that match the query.
I'm attempting to do this by following along to a video demonstration of it.
I have no clue where I am going wrong as there is no error in my console, however I am currently facing an issue where the page loads and I can see the content for a second and then it flashes white and the page goes blank.
The code for the page looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta id="X-CSRF-TOKEN" content="{{ csrf_token() }}">
<title>Laravel</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css" />
</head>
<body>
<div class="container" id="searchPage">
<h1>Real Time Search</h1>
<form class="form-horizontal" v-on="submit: false">
<div class="form-group">
<label class="control-label">Search:</label>
<input type="text" class="form-control" v-model="query" v-on="keyup: search">
</div>
</form>
<pre>#{{ $data | json }}</pre>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.0.3/vue-resource.min.js"></script>
<script src="assets/app.js"></script>
</body>
</html>
And my app.js script looks like this:
Vue.http.headers.common['X-CSRF-TOKEN'] = document.getElementById('X-CSRF-TOKEN').getAttribute('content');
new Vue({
el: '#searchPage',
data: {
query: '',
users: [],
},
methods: {
search: function() {
this.$http.post('/', { query: this.query } ).then(function(response) {
console.log(response);
}, function(response) {
// error callback
});
}
}
});
Where am I going wrong? Or what is causing this?

There are a couple of things here. Firstly, you are using Vue 2.0. In vue 2.0 the v-on="submit:..."; syntax is deprecated (in fact it looks like this syntax is from 0.12). If you want to stop the form submitting, you now need to add v-on:submit.prevent:
<!--This will stop the form from submitting -->
<form class="form-horizontal" v-on:submit.prevent>
You have a similar issue for v-on="keyup: search" which should be v-on:keyup="search"
<!-- Call the search method on keyup -->
<input type="text" class="form-control" v-model="query" v-on:keyup="search">
It's worth taking a look at the docs at: https://vuejs.org/guide/ to get familiar with the basic 2.0 syntax.

OK, a different, much simpler answer. I've just spent a couple of hours trying to solve the same symptoms. It turns out my problem was this:
Yup, I'd put "=" not "==" on the second condition. Now in VB you'd never have had that problem ...
Quite why this stops the whole page appearing without any errors in the console, I'm not sure, but I have to say in general I'm loving Vue JS (for the first time I can actually write client applications productively).

Related

Linking multiple .html files to one .js file

I want to create a simple login and sign up page. I have created them separately using atom, and they were saved inside the same folder inside my computer. I added a css file and was able to link it to both fine.
Now comes the problem.
Note: This is just a fun little project which is why I only used localStorage.
I created a .js file inside my website folder.
//SIGN UP PAGE
function create(){
var un = document.getElementById("username").value;
var pw = document.getElementById("password").value;
localStorage.setItem(username, un);
localStorage.setItem(password, pw);
window.location.href = "file:///C:/Users/User/OneDrive/Desktop/Social_Share/ssprofile.html";
}
//LOGIN PAGE
function login(){
if(document.getElementById("usernamel") === localStorage.getItem(username)){
if(document.getElementById("passwordl") === localStorage.getItem(password)){
window.location.href = "file:///C:/Users/User/OneDrive/Desktop/Social_Share/ssprofile.html";
}else{
document.getElementById("errormsg").innerHTML = "Incorrect Password or username";
}
}else{
document.getElementById("errormsg").innerHTML = "Sorry, this account does not exist";
}
}
And made it to add values to the localStorage when create account button is pressed.
<script src="ssjavascript.js"></script>
This is the exact same code I used for both the html files to connect to the js files, and yet, only one works. No matter what, only one of the html files can connect to the js file. I've copied and pasted multiple times. I've tried different tags. I've tried everything I can think of and this is where I beg the internet myself for answers.
To test If it is working, I created an onclick() function to a button and told it to bring me to a separate page. None of it worked, I checked my spelling about 10 times now as well.
Also, Whenever I test the files I open them in browser, so I don't get any error messages. And I can't test them in atom because it just shows the code in a scroll box on view.
Edit:
ssjavascript.js:11 Uncaught ReferenceError: Invalid left-hand side in assignment
at login (ssjavascript.js:11)
at HTMLInputElement.onclick (sslogin.html:22)
This is what I got when clicking the button on the non-working page.
login is referring to the button clicked
ssjavascript.js is referring to the file I used to hold the javascript
sslogin.html is the page file
I don't know if this helps, I've lost track quite a bit.
Full Code:
Sign Up page
<!DOCTYPE html>
<html>
<head>
<title>
Sign Up
</title>
<link rel="stylesheet" href="sscss.css">
</head>
<body>
<div id="logo">
</div>
<div id="logo2">
</div>
<div id="usernametxt">
Username:
</div><input id="username">
<div id="passwordtxt">
Password:
</div><input id="password"><br><br>
<div id="security">
For the sake of security,<br>we suggest creating a unique<BR>password specific for this site.<br>
You are also limited to 1<br>account, creating a new one<br>will erase previous data.
</div><br><br>
<input type="button" id="submit" onclick="create()" value="Create Account"><br><br>
Already Have One? Log In
<script type="text/javascript" src="ssjavascript.js">
</script>
</body>
</html>
Log in page
<!DOCTYPE html>
<html>
<head>
<title>
Log In
</title>
<link rel="stylesheet" href="sscss.css">
</head>
<body>
<div id="logo">
</div>
<div id="logo2">
</div>
<div id="usernametxt">
Username:
</div><input id="usernamel">
<div id="passwordtxt">
Password:
</div><input id="passwordl"><br><br><br><br>
<input type="button" id="submitl" onclick="login()" value="Login"><br><br>
Don't Have an Account? Create One
<br><br>
<div id="errormsg">
</div>
<script type="text/javascript" src="ssjavascript.js">
</script>
</body>
</html>
the javascript file is already up above, and the profile page is just a blank until I actually figure out how to get someone there.
Also, I changed the Javascript to compare the value to localStorage instead of assigning but it seems to still not work as intended.
EDIT:
Thanks for the suggestions. Even if none of them singularly worked, I still wouldn't have fixed my problem if you guys haven't pushed me to do some more searching.
I found out, that using "" saved my variables as strings, so I used '' and it worked exactly how I wanted.
Again, thanks a lot for your help. :)

Run a hidden javascript function with in a page

Hello i am creating a form in which user have to find password to access the other page.As I am hard codding correct password in my if condition.Some users will inspect it and know the password.So I am struggling to hide my if statement or even all JavaScript code from being inspected.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Login Form</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./login/style.css"><script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<!-- partial:index.partial.html -->
<div class="login">
<h1>Login</h1>
<form method="post">
<input type="password" id="password" name="p" placeholder="Password" required="required" />
<button type="button" value="Login" onclick="checkPassword()" class="btn btn-primary btn-block btn-large">login</button>
</form>
</div>
<!-- partial -->
<script src="./login/script.js"></script>
</body>
</html> <script>
function checkPassword(){
if(document.getElementById('password').value == 'layriix'){
location.href = "https://gunsellerlayr.000webhostapp.com/gunseller.html";
} else {
alert('Wrong Password!');
return false;
}
}
</script>
Since, I can't comment. I will try to list out everything in an elucidated manner.
Firstly, answering your main question, there is no way to hide client-side code, that is the JavaScript that you are serving to the browser. You can maybe try obfuscating it, but if it is being served to a client, you cannot really hide it.
Now, what you are attempting to do, is frankly not a thing you should be doing. Passwords on the client side are in no way a method to validate somebody. What you would want to look into is sending this password as a body of https post request, and then doing the validation of the password server side.
Secondly, there also happens to be absolutely no method of preventing a user going to the page, that you are trying to prevent them from going to. Instead of trying to even write the password. They can simply copy and paste it in the url window, or run the location.href in the console.
To put it better, if you want to authenticate somebody, you HAVE to do it server side and secondly you have to prevent access to the page, from users that are not logged in.
You can obfuscate it, but there's no way of protecting it completely.
Tool Link : obfuscator.io

How to enable button onClick functions and java script in wordpress post

I am trying to add the below codes to Wordpress, however, wordpress always gives me error 404 whenever I try to update. I'm new to coding. So would appreciate some help.
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
</head>
<body>
Code 1: <input type="text" id="code1">
<br>
<p id="code1ans"></p>
Code 2: <input type="text" id="code2">
<br>
<p id="code2ans"></p>
Code 3: <input type="text" id="code3">
<br>
<p id="code3ans"></p>
Code 4: <input type="text" id="code4">
<br>
<p id="code4ans"></p>
<button onclick="myFunction()">Submit</button>
<script>
function myFunction() {
var code1 = document.getElementById("code1").value;
var code2 = document.getElementById("code2").value;
var code3 = document.getElementById("code3").value;
var code4 = document.getElementById("code4").value;
document.getElementById("code1ans").innerHTML = code1;
document.getElementById("code2ans").innerHTML = code2;
document.getElementById("code3ans").innerHTML = code3;
document.getElementById("code4ans").innerHTML = code4;
}
</script>
</body>
</html>
Wordpress uses the template hierarchy, so I'm guessing you want this code to execute on a specific page or perhaps you want it to run on every page load?
Wordpress uses a system of hooks called filters and actions to run things at certain times. One of them is https://codex.wordpress.org/Plugin_API/Action_Reference/wp_enqueue_scripts which allows you to load scripts. Here you can also add code run the script only on specific pages. You should add your script here based on the documentation.
Your question doesn't appear to specify where you are putting your code.

Why isn't my JS function working when I call it through "onchange" in an html form?

Okay, I should preface this by saying I'm pretty new to JS and HTML.
I am attempting to write a simple page that will take the value a user types into the form and use it to make a call to the Spotify api via my findArtist() function. I've set the project up with npm and have the proper dependencies in the node-modules directory and all of that stuff.
Here is my code:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>My Title</title>
</head>
<body>
<header>
<h1>My Header</h1>
</header>
<section>
<form>
Search for an artist! <br/>
<input type="text" name="searchrequest" value="" onchange="findArtist()">
</form>
</section>
<script>
function findArtist () {
var artistName = document.getElementsByName("searchrequest")[0].value;
spotifyApi.searchArtists(artistName)
.then(function(data) {
console.log(data.body);
}, function(err) {
console.error(err);
});
}
</script>
</body>
</html>
When I type something in the search bar, I expect to see the call occur in my browsers console, where the JSON should be logged thanks to findArtist(), but nothing happens. Is this because I am attempting to use node when I should be using plain JS? Do I have to setup a server to make the call? I'm rather confused as to what my actual problem is.
I would like to add that I realize using onchange to call my function is going to put me over my api limit, so a suggestion on a better way to call the function would be appreciated as well.
Thanks for the help.
onchange detects changes only after you lose focus or blur from the textbox.
As this answer says oninput might just be the right method to look upto.

Interactive share through JS not rendering

Can someone explain to me why the following code isn't working? I have copied the code from Google and I need the "onshare" facility which I don't believe is available through the standard HTML. There are no JS errors - and nothing renedered:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<script src="https://apis.google.com/js/platform.js" async defer></script>
</head>
<body>
<h1 style="font-family:arial;font-size:15px;">google_test</h1> <div id="sharePost"></div>
<script>
var options = {
contenturl: 'https://plus.google.com/pages/',
contentdeeplinkid: '/pages',
clientid: 'YOUR ID HERE',
cookiepolicy: 'single_host_origin',
prefilltext: 'Create your Google+ Page too!',
calltoactionlabel: 'CREATE',
calltoactionurl: 'http://plus.google.com/pages/create',
calltoactiondeeplinkid: '/pages/create',
onshare: function(response){
alert(response);
}
};
gapi.interactivepost.render('sharePost', options);
</script>
</body>
</html>
After some investigation (5/1/15) I discovered that in the response (net panel in firebug) I was getting an error back in a hidden text box. This was because my origin url was wrong, but now I get the following:
<input type="hidden" id="error" value="true" />
<input type="hidden" id="response-form-encoded" value="state=887621045%7C0.2365188186&error=immediate_failed&num_sessions=1&session_state=MY_SESSION_ID" />
Any idea what this might mean?
You load Google api with async defer. Therefore it is not ready when you create the share link.
Either you should render the share link only after the page is loaded ( using the domready event ), or remove the 'async defer' attributes.
The answer is so simple - thanks to http://wheresgus.com/iodemos/demotargetipost/ for helping me see it. In the example above,
<div id="sharePost"></div>
Simply needs a content such as this:
<div id="sharePost"><button>hello world</button></div>
In fact you don't even need the button!! Why on earth the documentation doesn't have this I don't know - so have reported the documentation as not being great. Additionally you should note that the callbackurl and calltoactionurl both need the same protocols - again their examples differ.

Categories