Why is this simple Javascript code not running on my website? - javascript

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.

Related

Layout does not applied in Laravel

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.)

How to fix external js jquery script from a html website template into an angular project

Am using a html website template to build an angular project, but am having issues with a custom js script. menu button(to toggle navigation) and some other stuffs in custom.js is not working
i tried linking the scripts files link in index.html, and referenced it in angular.json config file
here is github link to the file https://github.com/donprecious/crtx
here is the index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CREXT | DRD</title>
<!--
<link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="../vendors/nprogress/nprogress.css" rel="stylesheet">
<link href="../vendors/iCheck/skins/flat/green.css" rel="stylesheet">
<link href="../vendors/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.min.css" rel="stylesheet">
<link href="../vendors/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
<link href="../vendors/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet">
<link href="../build/css/custom.min.css" rel="stylesheet">
</head>
<body class="nav-md">
<div class="container body">
<div class="main_container">
<app-root></app-root>
</div>
<!-- jQuery -->
<!-- <script src="assets/vendors/"></script> -->
<script src="assets/vendors/jquery/dist/jquery.min.js"></script>
<script src="assets/vendors/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="assets/vendors/fastclick/lib/fastclick.js"></script>
<script src="assets/vendors/nprogress/nprogress.js"></script>
<script src="assets/vendors/Chart.js/dist/Chart.min.js"></script>
<script src="assets/vendors/echarts/dist/echarts.min.js"></script>
<script src="assets/vendors/gauge.js/dist/gauge.min.js"></script>
<script src="assets/vendors/bootstrap-progressbar/bootstrap-progressbar.min.js"></script>
<script src="assets/vendors/iCheck/icheck.min.js"></script>
<script src="assets/vendors/skycons/skycons.js"></script>
<script src="assets/vendors/Flot/jquery.flot.js"></script>
<script src="assets/vendors/Flot/jquery.flot.pie.js"></script>
<script src="assets/vendors/Flot/jquery.flot.time.js"></script>
<script src="assets/vendors/Flot/jquery.flot.stack.js"></script>
<script src="assets/vendors/Flot/jquery.flot.resize.js"></script>
<script src="assets/vendors/flot.orderbars/js/jquery.flot.orderBars.js"></script>
<script src="assets/vendors/flot-spline/js/jquery.flot.spline.min.js"></script>
<script src="assets/vendors/flot.curvedlines/curvedLines.js"></script>
<script src="assets/vendors/DateJS/build/date.js"></script>
<script src="assets/vendors/jqvmap/dist/jquery.vmap.js"></script>
<script src="assets/vendors/jqvmap/dist/maps/jquery.vmap.world.js"></script>
<script src="assets/vendors/jqvmap/examples/js/jquery.vmap.sampledata.js"></script>
<script src="assets/vendors/moment/min/moment.min.js"></script>
<script src="assets/vendors/bootstrap-daterangepicker/daterangepicker.js"></script>
<script src="assets/js/custom.js"></script>
<script src="assets/js/site.js"></script>
</body>
</html>
Angular.json
"scripts": [
"src/assets/vendors/jquery/dist/jquery.min.js",
"src/assets/vendors/bootstrap/dist/js/bootstrap.min.js",
"src/assets/vendors/fastclick/lib/fastclick.js",
"src/assets/vendors/nprogress/nprogress.js",
"src/assets/vendors/Chart.js/dist/Chart.min.js",
"src/assets/vendors/echarts/dist/echarts.min.js",
"src/assets/vendors/gauge.js/dist/gauge.min.js",
"src/assets/vendors/bootstrap-progressbar/bootstrap-progressbar.min.js",
"src/assets/vendors/iCheck/icheck.min.js",
"src/assets/vendors/skycons/skycons.js",
"src/assets/vendors/Flot/jquery.flot.js",
"src/assets/vendors/Flot/jquery.flot.pie.js",
"src/assets/vendors/Flot/jquery.flot.time.js",
"src/assets/vendors/Flot/jquery.flot.stack.js",
"src/assets/vendors/Flot/jquery.flot.resize.js",
"src/assets/vendors/flot.orderbars/js/jquery.flot.orderBars.js",
"src/assets/vendors/flot-spline/js/jquery.flot.spline.min.js",
"src/assets/vendors/flot.curvedlines/curvedLines.js",
"src/assets/vendors/DateJS/build/date.js",
"src/assets/vendors/jqvmap/dist/jquery.vmap.js",
"src/assets/vendors/jqvmap/dist/maps/jquery.vmap.world.js",
"src/assets/vendors/jqvmap/examples/js/jquery.vmap.sampledata.js",
"src/assets/vendors/moment/min/moment.min.js",
"src/assets/vendors/bootstrap-daterangepicker/daterangepicker.js",
"src/assets/js/custom.js",
"src/assets/js/site.js"
]
},
custom.js file
var CURRENT_URL = window.location.href.split('#')[0].split('?')[0],
$BODY = $('body'),
$MENU_TOGGLE = $('#menu_toggle'),
$SIDEBAR_MENU = $('#sidebar-menu'),
$SIDEBAR_FOOTER = $('.sidebar-footer'),
$LEFT_COL = $('.left_col'),
$RIGHT_COL = $('.right_col'),
$NAV_MENU = $('.nav_menu'),
$FOOTER = $('footer');
this code does not work when i integate the website template, but works when i just click run the template browser
$MENU_TOGGLE.on('click', function() {
console.log('clicked - menu toggle');
if ($BODY.hasClass('nav-md')) {
$SIDEBAR_MENU.find('li.active ul').hide();
$SIDEBAR_MENU.find('li.active').addClass('active-sm').removeClass('active');
} else {
$SIDEBAR_MENU.find('li.active-sm ul').show();
$SIDEBAR_MENU.find('li.active-sm').addClass('active').removeClass('active-sm');
}
$BODY.toggleClass('nav-md nav-sm');
setContentHeight();
});
it seems that the javascript are rendered,
but when i click on button to toggle menu or any control that as to work with jquery it doesnt work

Using Selectize with Node.js

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.

Can't refresh selectpicker

I'm trying to append some options on the Silvio Moreto's Bootstrap select picker.
When I try to update it after the append, jquery throws this error:
Uncaught TypeError: $(...).selectpicker is not a function
I've read around that It's because select picker is not fully initialized, but if I go to my heading partial, the select picker js and css is included way before the function that tries to update it.
I've also read that this should be done inside a $(function(){}); block. But since the file that is performing the operation is a plain functions file that is called inside a $(function(){}); block the problem shouldn't present.
This is my heading file:
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>GMS</title>
<!-- Fonts -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" integrity="sha384-XdYbMnZ/QjLh6iI4ogqCTaIjrFk87ip+ekIjefZch0Y+PvJ8CDYtEs1ipDmPorQ+" crossorigin="anonymous">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700">
<!-- Styles -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
{{-- <link href="{{ elixir('css/app.css') }}" rel="stylesheet"> --}}
<link rel="stylesheet" href="{{url('css/general.css')}}">
<link rel="stylesheet" href="{{url('css/modal.css')}}">
<link rel="stylesheet" href="{{url('css/status_page.css')}}">
<link rel="stylesheet" href="{{url('css/dropdowns.css')}}">
<link rel="stylesheet" href="{{url('css/animator.css')}}">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">
<!-- Jquery -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<!-- Bootstrap select with live src -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
<!-- AngularJS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<!--
|-----------------------------------
| Custom CSS
|-----------------------------------
-->
#section('css')#show
<!--
|-----------------------------------
| Custom JS
|-----------------------------------
-->
<script src="{{url('js/general.js')}}"></script>
<script src="{{url('js/functions/functions.js')}}"></script>
<script src="{{url('js/functions/animator.js')}}"></script>
<script src="{{url('js/app/gms.js')}}"></script>
<script src="{{url('js/app/controllers/auth_controller.js')}}"></script>
<script src="{{url('js/app/controllers/redirect_controller.js')}}"></script>
<script src="{{url('js/app/controllers/changelog_controller.js')}}"></script>
<script src="{{url('js/app/factories/changelog_factory.js')}}"></script>
#section('js')#show
This is the function that performs the changes in the select:
function fillContracts(contracts) {
for(var i = 0; i < contracts.length; i++)
{
console.log('Iterating');
console.log('Contract ID: ' + contracts[i].id);
console.log('Contract TITLE: ' + contracts[i].titolo);
$('#selectpicker').html('<option>Test1</option><option>Test2</option>').selectpicker('refresh');
}
console.log('Done');
}
The file containing this function is injected in the heading using Blade. The Laravel's template engine. When I check the page source, it's correctly included after the select picker.
If it might help, the data that I try to append comes from a AJAX call. But I can't figure out what's wrong...
Thanks for any help!
Update
I'm still trying to figure out what's wrong. The problem is that I keep getting the error when I try to use the selectpicker plugin. But I can't understand what's missing...
Bootstrap CSS:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
Jquery:
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
Bootstrap-select.min.css
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">
And the bootstrap-select.min.js:
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>

how i was able to solve it is by putting
Bootsrap select.js as the last script inclusion
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
if it continues to give you issue.
avoid selectpicker(refresh) and populate select box by javascript means
<script>
document.getElementById("selectboxID").innerHTML = '<option>Test1</option><option>Test2</option>';
</script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>

Getting RangeError: using angular.js and php

i am getting the following error while routing the page using angular.js.
Error:
RangeError: Maximum call stack size exceeded
at $ (http://oditek.in/Gofast/js/angularjs.js:73:115)
at K (http://oditek.in/Gofast/js/angularjs.js:62:39)
at h (http://oditek.in/Gofast/js/angularjs.js:54:410)
at http://oditek.in/Gofast/js/angularjs.js:53:480
at http://oditek.in/Gofast/js/angularjs.js:55:397
at r (http://oditek.in/Gofast/js/angularjs.js:60:200)
at x (http://oditek.in/Gofast/js/angularroute.js:6:364)
at link (http://oditek.in/Gofast/js/angularroute.js:7:92)
at $ (http://oditek.in/Gofast/js/angularjs.js:73:89)
at K (http://oditek.in/Gofast/js/angularjs.js:62:39) <!-- ngView: -->
I am explaining my code below.
index.html:
<!DOCTYPE html>
<html lang="en" ng-app="Channabasavashwara">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>...:::WELCOME TO Channabasavashwara Institude of Technology:::...</title>
<!-- PACE LOAD BAR PLUGIN - This creates the subtle load bar effect at the top of the page. -->
<link href="css/pace.css" rel="stylesheet">
<script src="js/pace.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/angularjs.js" type="text/javascript"></script>
<script src="js/angularroute.js" type="text/javascript"></script>
<script src="controller/loginRoute.js" type="text/javascript"></script>
<!-- GLOBAL STYLES - Include these on every page. -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700,300italic,400italic,500italic,700italic' rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel="stylesheet" type="text/css">
<link href="icons/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link rel="shortcut icon" href="img/favicon.png">
<!-- PAGE LEVEL PLUGIN STYLES -->
<!-- THEME STYLES - Include these on every page. -->
<link href="css/style.css" rel="stylesheet">
<link href="css/plugins.css" rel="stylesheet">
<link href="css/chosen.css" rel="stylesheet">
<!-- THEME DEMO STYLES - Use these styles for reference if needed. Otherwise they can be deleted. -->
<link href="css/demo.css" rel="stylesheet">
<!-- PAGE LEVEL PLUGIN STYLES -->
<!-- THEME STYLES - Include these on every page. -->
<link href="css/load.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<!-- THEME DEMO STYLES - Use these styles for reference if needed. Otherwise they can be deleted. -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div ng-view>
</div>
<!-- GLOBAL SCRIPTS -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.slimscroll.min.js"></script>
<script src="js/jquery.popupoverlay.js"></script>
<script src="js/defaults.js"></script>
<!-- Logout Notification Box -->
<!-- /#logout -->
<!-- Logout Notification jQuery -->
<script src="js/logout.js"></script>
<!-- HISRC Retina Images -->
<!-- THEME SCRIPTS -->
<script src="js/flex.js"></script>
<script src="js/dashboard-demo.js"></script>
<script src="js/chosen.jquery.js" type="text/javascript"></script>
<script src="js/prism.js" type="text/javascript"></script>
<script src="js/shortcut.js"></script>
<!-- HISRC Retina Images -->
<!-- THEME SCRIPTS -->
<link rel="stylesheet" type="text/css" href="calendar/tcal.css" />
<script type="text/javascript" src="calendar/tcal.js"></script>
<script src="js/newbill.js"></script>
<script src="controller/loginController.js" type="text/javascript"></script>
<script src="controller/dashboardController.js" type="text/javascript"></script>
</body>
</html>
Here i have a login page first going to bind.When user will logged in successfully the dashboard page should display but its throwing the above error.
loginRoute.js:
var Admin=angular.module('Channabasavashwara',['ngRoute']);
Admin.config(function($routeProvider){
$routeProvider
.when('/',{
templateUrl: 'dashboardview/login.html',
controller: 'loginController'
})
.when('/dashboard',{
templateUrl: 'dashboardview/dashboard.html',
controller: 'dashboardController'
});
})
loginController.js:
var loginAdmin=angular.module('Channabasavashwara');
loginAdmin.controller('loginController',function($scope,$http){
$scope.user_name = '';
$scope.user_pass = '';
$scope.user_login=function(){
if($scope.user_name==''){
alert('user name filed should not keep blank');
}else if($scope.user_pass==''){
alert('password filed should not keep blank');
}else{
var userData={'user_name':$scope.user_name,'user_pass':$scope.user_pass};
console.log('user',userData);
$http({
method: 'POST',
url: "php/Login/login.php",
data: userData,
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
}).then(function successCallback(response){
console.log('response',response);
alert(response.data['msg']);
location.href='#dashboard';
},function errorCallback(response) {
alert(response.data['msg']);
});
}
}
});
Here i am getting the login page first.After finishing the successfully login it should redirect to dashboard page but this error is coming.Please help me to resolve this error.

Add $location in your controller.
loginAdmin.controller('loginController',function($scope,$http, $location){
and replace location.href='#dashboard'; with
$location.path('/dashboard');

Categories

Resources