I'll preface this by saying that I'm fairly new to Javascript in general, but I'm getting there. I've got an app that's written with Node.js, Express, and uses Bootstrap for the front end.
I'm trying to use Selectize to gain some additional functionality with one of my forms, but I can't get it to work at all. The text input field is present, but it's lacking the functionality/styling that I'm looking for. I'm using Handlebars for templating, and I think my issues may have something to do with that.
I'm lost at this point, and any advice would be super useful.
Here's my simple testing page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<title></title>
<!-- Bootstrap core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="/stylesheets/styles.css" type="text/css" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Open+Sans|Roboto:300|Lora:700" rel="stylesheet" type="text/css">
<!-- Icon -->
<link href="/images/favicon.ico" rel="icon">
<!-- Selectize.js -->
<link href="/stylesheets/selectize.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Testbed2</h1>
<br>
<div class="demo">
<input type="text" value="test" class="demo-default selectized" id="input-tags" tabindex="-1" style="display: block;">
</div>
<script>
var data = [ "option 1", "option 2", "option 3" ];
var items = data.map(function(x) { return { item: x }; });
$('#input-tags').selectize({
delimiter: ',',
persist: false,
maxItems: 2,
options: items,
labelField: "item",
valueField: "item",
sortField: 'item',
searchField: 'item'
});
</script>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.6.14/selectize.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>
To keep your code style and place your scripts at the end of your document, you can try this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<title></title>
<!-- Bootstrap core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="/stylesheets/styles.css" type="text/css" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Open+Sans|Roboto:300|Lora:700" rel="stylesheet" type="text/css">
<!-- Icon -->
<link href="/images/favicon.ico" rel="icon">
<!-- Selectize.js -->
<link href="/stylesheets/selectize.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Testbed2</h1>
<br>
<div class="demo">
<input type="text" value="test" class="demo-default selectized" id="input-tags" tabindex="-1" style="display: block;">
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.6.14/selectize.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script>
var data = [ "option 1", "option 2", "option 3" ];
var items = data.map(function(x) { return { item: x }; });
$('#input-tags').selectize({
delimiter: ',',
persist: false,
maxItems: 2,
options: items,
labelField: "item",
valueField: "item",
sortField: 'item',
searchField: 'item'
});
</script>
</body>
</html>
This way will prevent a jquery error but I'm unfamiliar with selectize to know if this script is working as you intended.
Related
I tried a template where I put the layout in a folder (/views/layout) and named it mainlayout.blade.php.
<!DOCTYPE html>
<html lang="zxx">
<head>
<meta charset="UTF-8">
<meta name="description" content="Ogani Template">
<meta name="keywords" content="Ogani, unica, creative, html">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My Web | {{ $title }}</title>
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght#200;300;400;600;900&display=swap" rel="stylesheet">
<!-- Css Styles -->
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="css/elegant-icons.css" type="text/css">
<link rel="stylesheet" href="css/nice-select.css" type="text/css">
<link rel="stylesheet" href="css/jquery-ui.min.css" type="text/css">
<link rel="stylesheet" href="css/owl.carousel.min.css" type="text/css">
<link rel="stylesheet" href="css/slicknav.min.css" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<!-- Js Plugins -->
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.nice-select.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.slicknav.js"></script>
<script src="js/mixitup.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Then, I create the first page to simulate on how the pages interact. Let's call it PAGE 1 (/views/Frontend)
#extends('Layout.mainlayout')
<!DOCTYPE html>
<html lang="zxx">
<body>
<!-- Listing -->
#foreach ($blog as $post)
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="blog__item">
<div class="blog__item__pic">
<img src="img/blog/blog-2.jpg" alt="">
</div>
<div class="blog__item__text">
<ul>
<li><i class="fa fa-calendar-o"></i> May 4,2019</li>
<li><i class="fa fa-comment-o"></i> 5</li>
</ul>
<h5>{{ $post["title"] }}</h5>
<p>{{ $post["writings"] }} </p>
Selengkapnya <span class="arrow_right"></span>
</div>
</div>
</div>
#endforeach
As you can see, I tried to simulate where I picked data from a 'database', called the 'slugs' and 'writings' variable. To demonstrate this, I build PAGE 1 ROUTE
Route::get('/blog', function () {
$blog_posts = [
[
"title" => "Judul Post 1",
"slug" => "judul-post-1",
"author" => "Author 1",
"images" => "Gambar 1",
"writings" => "Tulisan 1",
],
];
return view('FrontEnd.blog', [
"title" => "Blog",
"blog" => $blog_posts
]);
});
From that one, I tried to redirect it to another page, let's call it PAGE 2 (/views/Frontend)
#extends('Layout.mainlayout')
<!DOCTYPE html>
<html lang="zxx">
<body>
<!-- Content -->
<!-- Content End -->
</body>
To connect those pages, I create PAGE 2 ROUTE, where I use the slugs to name the web page
Route::get('/blog/{slug}', function ($slug) {
return view('FrontEnd.blogdetails', [
"title" => "Blog Details"
]);
});
==================================================================================
My question is, Why is the layout is not applied on PAGE 2? When I tried to access the PAGE 2 independently (basically changes it as the 'home' page), the layout applies/work. Where did I go wrong?
Thanks in advance!
I don't get it, why you are using <!DOCTYPE html> on every inner page. Let me explain how its done correctly.
You need to define a layout under views/layouts let's call it.
<!-- resources/views/layouts/app.blade.php -->
<html>
<head>
<title>App Name</title>
</head>
<body>
<div class="container">
<!-- this is where content will be shown -->
#yield('content')
</div>
</body>
</html>
Now, on the controller we are returning the view.
return view ('frontend.blog.index',compact('data'));
Nex, on this blade file we need to extend the layout.
<!-- resources/views/frontend/blog/index.blade.php -->
#extends('layouts.app')
#section('content')
<p>This is my body content.</p>
#endsection
In this way, you could solve the layout mystery.
For detail, visit https://laravel.com/docs/9.x/blade#defining-a-layout.
Some of the issues I notice on your code:
you are missing the yield field example #yield('content')
next on your view file you need to call #section('content') ... #endsection
#PS:(you can replace content text with body or anything you like.)
I wan't to use Framework7 without ReactJS or Vue. I wanna use pure JS. But when I try to show a dialog, I get a console error:
Uncaught TypeError: n is undefined
Thats my JavaScript code
var app = new Framework7({
root: '#app',
name: 'My App',
theme: 'ios',
domCache: true
});
var mainView = app.views.create('.view-main');
$('.open-alert').on('click', function () {
window.app.dialog.alert('Oops! Testing alert.');
});
and that is the HTML Part:
<!DOCTYPE html>
<html lang="de-DE">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#2196f3">
<meta name="viewport" content="width=device-width, initial-rotate=1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="https://v5.framework7.io/packages/core/css/framework7.bundle.min.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="phone">
<div id="app">
<div class="statusbar"></div>
<div class="view view-main">
<div data-name="home" class="page">
<button class="col button button-fill open-alert">Alert</button>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://v5.framework7.io/packages/core/js/framework7.bundle.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
I searched for some examples, but nothing are work. Maybee I need to add something more?
Newbie JSer here. I'm trying to get a new phrase to appear every time a website page is loaded. However, when I reload the page, the phrase does not appear.
var phrases = [
'Phrase one',
'Phrase two',
'Phrase three'
]
function newPhrase() {
var num = Math.floor(Math.random() * (phrases.length));
document.getElementById('phrase').innerHTML = phrases[num];
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>StickComs: Free Comics for Everyone</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="main.css">
<!-- Bootstrap: Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<!-- Bootstrap: jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Bootstrap: Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<!-- Bootstrap: Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<!-- Google font: Roboto -->
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body onload="newPhrase()">
<!-- Phrase Banner -->
<div class="container-fluid" id="phrase-banner">
<p id="phrase">
<!-- Phrases display here -->
</p>
<script src="generator.js"></script>
</div>
</body>
</html>
I didn't want to edit the OP's answer so here is the code in a runnable format. It seems to work here so I would venture that the generator.js file might not be loaded.
First check the network requests in the developer tools and see if it it successfully loaded.
Second if it is loaded, then since you are using the onload event for the body, the script might have loaded but not been parsed and executed before the event attempts to execute the function (although I believe that should cause an error to be reported).
<!DOCTYPE html>
<html lang="en">
<head>
<title>StickComs: Free Comics for Everyone</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="main.css">
<!-- Bootstrap: Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<!-- Bootstrap: jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Bootstrap: Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<!-- Bootstrap: Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<!-- Google font: Roboto -->
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body onload="newPhrase()">
<!-- Phrase Banner -->
<div class="container-fluid" id="phrase-banner">
<p id="phrase">
<!-- Phrases display here -->
</p>
<script>
var phrases = [
'Phrase one',
'Phrase two',
'Phrase three'
]
function newPhrase() {
var num = Math.floor(Math.random() * (phrases.length));
document.getElementById('phrase').innerHTML = phrases[num];
}
</script>
</div>
</body>
</html>
Use this way to run JavaScript in your simple html page modify generator.js to be like below:
let phrases = [
'Phrase one',
'Phrase two',
'Phrase three'
]
function newPhrase() {
var num = Math.floor(Math.random() * (phrases.length));
document.getElementById('phrase').innerHTML = phrases[num];
}
window.onload = newPhrase;
and remove
onload="newPhrase()"
in the body tag as it actually will not work at all.
HTML entities(®,©,€.. etc) not getting displayed correctly when using knockout bindings.
HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- This is a *view* - HTML markup that defines the appearance of your UI -->
<!--Data appearing via binding-->
<p>Product name: <strong data-bind="text: productName"></strong></p>
<!--Static data-->
<p>Product name:<strong>ABC®EFG</strong></p>
<script src="js/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="js/knockout-3.4.0.js"></script>
<script src="js/script.js" charset="utf-8"></script>
</body>
</html>
Javascript(script.js):
function AppViewModel() {
this.productName = ko.observable("ABC®EFG");
}
// Activates knockout.js
ko.applyBindings(new AppViewModel());
Output:
Changing the binding from text to html fixed the issue.
<p>Product name: <strong data-bind="html: productName"></strong></p>
I have this code:
HTML:
<button id='ro' class='ro'></button>
<button id='eng' class='eng'></button>
JAVASCRIPT:
$('#ro').click(function(){
$('h1').text('Bine aţi venit!');
$('p1').text('Pathifier îşi propune să ajute tinerii din întreaga ţară să işi găsească o facultate cu profilul dorit lăsându-le libertatea să-şi aleagă oraşul potrivit.');
alert('ma-ta');
});
$('#eng').click(function(){
$('h1').text('Welcome');
$('p1').text('Pathifier s goal is to help teens all around Romania to choose the university that fits them best, also allowing them to find the perfect city which has that university ');
});
The two buttons are meant to change the language of the page but I they are not working. Why? What did I do wrong?
My javascript code:
$(document).ready(function () {
//var cow = 'Check out this image <img src="http://image.com" style="border:2px solid #ccc;" /> and one with a width <img src="http://image.com" width="700" align="left" />';
$('#ro').click(function(){
$('h1').text('Bine aţi venit!');
$('p').text('Pathifier îşi propune să ajute tinerii din întreaga ţară să işi găsească o facultate cu profilul dorit lăsându-le libertatea să-şi aleagă oraşul potrivit.');
alert('ma-ta');
});
$('#eng').click(function(){
$('h1').text('Welcome');
$('p').text('Pathifier s goal is to help teens all around Romania to choose the university that fits them best, also allowing them to find the perfect city which has that university ');
});
});
My html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>One Page Wonder - Start Bootstrap Template</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/one-page-wonder.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
</head>
<body>
<button id='ro' class='ro'></button>
<button id='eng' class='eng'></button>
<h1>KLJLKJ</h1>
<p>lkasjdflsj</p>
<h1>KLJLKJ</h1>
<p>lkasjdflsj</p>
<h1>KLJLKJ</h1>
<p>lkasjdflsj</p>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- my js -->
<script src="js/test.js"></script>
</body>
</html>
This works. Make sure you are including jQuery and your js file after jQuery.