I'm Having a problem with a JQuery I pass the links like:
<link href="{{asset('plugins/archivos_admin/bjqs-1.js')}}">
<link href="{{asset('plugins/archivos_admin/organictabs.js')}}">
them I make the script:
<script>
$(function() {
$("#example-one").organicTabs();
$("#example-two").organicTabs({
"speed": 200
});
});
</script>
and I used in the index.blade.php:
<div id="example-one" align="center"> <-- It's called here.
<ul class="nav">
<!--
<li class="fecha-nav">
<span class="tit_fecha_num" align="center"> 22 </span>
<span class="tit_fecha" align="center"> DE OCTUBRE DE 2015 </span>
</li>
-->
<li class="espacio-nav"> </li>
<li class="nav-one">MAÑANA</li>
<li class="nav-two"><a href="#tarde" class="current" >TARDE</a></li>
<li class="nav-three">NOCHE</li>
</ul>
<div id="prueba" align="center">
<div class="list-wrap" align="center">
<ul style="position: relative; top: 0px; left: 0px; display: none;" id="manana" >
</ul>
<ul id="tarde">
</ul>
<!--- noche -->
<ul style="position: relative; top: 0px; left: 0px; display: none;" id="noche" >
<!---->
</ul>
</div> <!-- END List Wrap -->
</div> <!-- prueba -->
</div> <!-- END Organic Tabs (Example One) -->
It didn't work and it show me in the browser this error:
Uncaught TypeError: $(...).organicTabs is not a function
Any idea who can i fix this problem.
Script files (.js files) can't be loaded by the browser when called by a <link> tag, for this you need to use the <script> tag like so:
<script src="{{asset('plugins/archivos_admin/bjqs-1.js')}}"></script>
<script src="{{asset('plugins/archivos_admin/organictabs.js')}}"></script>
In this answer on SO, it's being explained a bit more.
Using this should cause the error to disappear.
Hope this helps!
Apparently the system cannot find the JS file. So, try to change the calls to:
<script src="{{asset('/plugins/archivos_admin/bjqs-1.js')}}">
<script src="{{asset('/plugins/archivos_admin/organictabs.js')}}">
Check if the file is correctly found.
Related
I have a small e-commerce project where i am trying to build cart
I am using the following stack Node.js, Express.js, Ejs(templating)
The issue is I have 2 js Files
Index.js (the main controller file for node js)
showProducts.js (Normal Js File)
So Basically i want to export a function or module from show Products.js file to call it in index.js. The error i am getting is document is not defined.
I am a newbie on Node js. I have roughly looked into Browserify and JSDOM but i am confused are those the Solution to the problem.
I have been stuck onto this problem since 2 days please help.
// Index.js File the Controller
const express = require("express");
const app = express();
const mysql = require("mysql");
const bodyParser = require("body-parser");
const fileUpload = require("express-fileupload");
const uuid = require("uuid");
const kam = require("./public/js/showProducts"); // I am requring it here
kam(); // calling the function
//Showproducts Normal Js file
function kam() {
console.log("kamran is the best in the world");
}
module.exports = kam;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Latest compiled and minified CSS -->
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
/>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="scss/all.css" />
<title>Products</title>
</head>
<style>
.product-box li {
float: left;
list-style-type: none;
width: 300px;
border: 1px solid rgba(0, 0, 0, 0.2);
padding: 10px;
text-align: center;
}
.filter-cat {
display: none;
}
.show {
display: block;
}
/* Add a light grey background on mouse-over */
.btn:hover {
background-color: #ddd;
}
/* Add a dark background to the active button */
.btn.active {
background-color: #666;
color: white;
outline: 0;
box-shadow: none;
}
.bag-btn {
background: black;
color: white;
border: transparent;
padding: 5px 10px;
}
</style>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container">
<div class="row">
<div class="col-3">
<!-- Brand -->
<a class="navbar-brand" href="#">Kamran</a>
</div>
<!-- Links -->
<div class="col-9">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/">Home </a>
</li>
<li class="nav-item">
<a class="nav-link" href="products">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="cart"
>Cart <span class="badge"></span
></a>
</li>
<button>
<a style="float: right;" href="addProducts">Backend </a>
</button>
</ul>
</div>
</div>
</div>
</nav>
<div class="space-50"></div>
<div class="container">
<h1>Our Products</h1>
<div class="space-50"></div>
<div class="search-bar text-center">
<input
type="text"
id="search-bar"
placeholder="Search Products"
onkeyup="searchProducts()"
/>
</div>
<div class="space-30"></div>
<div id="myBtnContainer" class="text-center">
<button class="btn active" onclick="filterSelection('all')">
All Products
</button>
<button class="btn" onclick="filterSelection('cable')">Cables</button>
<button class="btn" onclick="filterSelection('charger')">
Car Charger
</button>
<button class="btn" onclick="filterSelection('powerbank')">
Power Bank
</button>
<button class="btn" onclick="filterSelection('glass')">
Tempered Glass
</button>
</div>
<div class="space-50"></div>
<div class="products-area">
<div class="row">
<% for (var i = 0; i < data.length; i++) { %>
<ul class="product-box text-center filter-cat">
<li class="single-product">
<p><%= data[i].id %></p>
<img src="<%= data[i].productImage %>" width="50%" />
<h3><%= data[i].productName %></h3>
<h4>Rs. <%= data[i].productPrice %></h4>
<div class="space-20"></div>
<button class="bag-btn" onclick="addCart();">Add To Bag</button>
</li>
</ul>
<% } %>
</div>
</div>
</div>
<script src="./js/showProducts.js"></script>
</body>
</html>
The issue is document is not available in node.js environment. You have 2 options to solve this issue.
Option 1. Create 2 files
Create a file for server side part (for nodejs) and another file for client side (and access document here). You can include second file in your html file.
Option 2. Split node.js part of the file
You can check if the file is running on server side and run specific code here. Here's an example:
const isNode = typeof window === 'undefined';
if (isNode) {
function kam() {
console.log("kamran is the best in the world");
}
// Note that module.exports is not available on browser js
module.exports = kam;
} else {
function filterSelection() {
document.doSomething();
}
}
Conclusion
I prefer to place server side and client side code in different files (1st option) because it will make its easy to maintain code, also it will not leak server-side code to clients (users will not able to view server code by using developer tools).
i have build one web which include sidebar and the main content. I included the sidebar with ng-include , but the sidebar is not able to function.
<html>
<head>
<link href="lepwww/css/maincss.css" rel="stylesheet">
</head>
<body ng-app="myapp" ng-controller="dataController">
<div class="main-container">
<div ng-include="templates"></div>
</div>
<!-- Angular JS Scripts -->
<script src="lepwww/css/angular-1.6.1/angular.js"></script>
<script src="lepwww/css/angular-1.6.1/angular-animate.min.js"></script>
<script src="lepwww/css/angular-1.6.1/angular-aria.min.js"></script>
<script src="lepwww/css/angular-1.6.1/angular-messages.min.js"></script>
<script src="lepwww/vendors/svg-assets-cache/svg-assets-cache.js"></script>
<script src="lepwww/vendors/angular-material/angular-material.js"></script>
<script>
var app = angular.module("myapp", ['ngMaterial', 'ngMessages', 'material.svgAssetsCache']);
app.filter('startFrom', function () {
return (input, start) => {
start = +start; //parse to int
return input.slice(start);
}
});
app.controller("dataController", ["$scope", "$http", "$element",
function ($scope, $http, $element) {
$scope.templates = 'view/layout/sidebar.html';
}
]);
</script>
<script src="lepwww/vendors/jquery/dist/jquery.min.js"></script>
<script src="lepwww/js/dialog/zebra_dialog.js"></script>
<!-- Bootstrap -->
<script src="lepwww/vendors/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="lepwww/js/test.js"></script>
<script src="lepwww/js/utils.js"></script>
</body>
</html>
If i copy direct the code to replace the nginclude, but able to function.
This is my sidebar code:
<div class="col-md-3 left_col">
<div class="left_col scroll-view">
<div class="navbar nav_title" style="border: 0;">
<a href="console.html" class="site_title">
<div class="profile_pic">
<img src="lepwww/images/lep_icon.png" alt="..." width="50" height="50">
</div>
<span>LEP-DMS</span>
</a>
</div>
<div class="clearfix"></div>
<!-- sidebar menu -->
<div id="sidebar-menu" class="main_menu_side main_menu" style=" margin-top:12px">
<div class="menu_section">
<h3>General</h3>
<ul class="nav side-menu">
<li>
<a>
<i class="fa fa-home"></i>Home
<span class="fa fa-chevron-down"></span>
</a>
<ul class="nav child_menu">
<li>
Dashboard
</li>
</ul>
</li>
<li>
<a>
<i class="fa fa-tv"></i> Inventory
<span class="fa fa-chevron-down"></span>
</a>
<ul class="nav child_menu">
<li id="li_hardware">
Hardware
</li>
<li id="li_software" class="">
Software
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
I tried to include the javascript file inside also, still not working.
Tried the method to switch the jquery file and angularjs file(The position of javascript file changed, still not able to work).
Any idea how does this problem occur? Since i check the console also not found any error for this.
Thanks.
If you couldn't find any error in console, that's mean either the code doesn't being trigger or the code being trigger but selector select nothing(it also could be selector undefined but well handle in your code snippet, that probably why it doesn't output undefined exception)
Next if it get trigger, check whether or not your sidebar javascript call before ng-include, simply use break point to verify.
If it is trigger before, you can simply a <script>... <your js code to make sidebar work> ...</script> under the end of your ng-include file. Manually call the function again, at this point, it should work since your html component appear in DOM.
Aloha,
I am trying to a make a Chrome App that replaces the Chrome Dev Editor. Here is what I have currently:
background.js
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('backstage.html', {
'outerBounds': {
'width': 1036,
'height': 583
}
});
});
backstage.html
<!DOCTYPE html>
<html>
<head>
<title>Celestia Pro</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel = "stylesheet" href = "material.css">
<link rel = "stylesheet" href = "material.min.css">
<link rel = "stylesheet" href = "styles.css">
</head>
<body>
<!-- The drawer is always open in large screens. The header is always shown,
even in small screens. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer
mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<div class="mdl-layout-spacer"></div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable
mdl-textfield--floating-label mdl-textfield--align-right">
<label class="mdl-button mdl-js-button mdl-button--icon"
for="fixed-header-drawer-exp">
<i class="material-icons">search</i>
</label>
<div class="mdl-textfield__expandable-holder">
<input class="mdl-textfield__input" type="text" name="sample"
id="fixed-header-drawer-exp">
</div>
</div>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Title</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
</nav>
</div>
<main class="mdl-layout__content">
<div class="page-content">
<style>
.demo-card-wide.mdl-card {
width: 100%;
}
.demo-card-wide > .mdl-card__title {
color: #fff;
height: 176px;
background: url('welcome-card.jpg') center / cover;
}
.demo-card-wide > .mdl-card__menu {
color: #fff;
}
div.start-cards {
padding-top: 25px;
padding-left: 50px;
padding-right: 50px;
}
</style>
<div class="start-cards" align = center>
<div class="demo-card-wide mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Welcome to Celestia Pro</h2>
</div>
<div class="mdl-card__supporting-text">
Celestia Pro is a new integrated development environment (IDE) that allows developers to create Chrome apps quickly and efficiently. We're still in our baby stages, but we hope this tool works for you.
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" onclick="runWizard()">
Get Started
</a>
<script>
</script>
</div>
</button>
</div>
</div>
</div>
</main>
</div>
</div>
<script src = "./material.min.js">
<script src = "./material.js">
</body>
</html>
This seems all fine and dandy until I try to make the Get Started button I mention actually open something. I want it to open a page called 'backstage2.html', but no matter what combination I try, it doesn't seem to work. Here is what I have tried.
The <a href=""> method
Using the chrome.app.window.current and/or chrome.app.window.create script by adding a script to the button ("runWizard()")
None of these seem to work. I want to be able to open backstage2.html in the same Chrome app windows! How can I do this, if it is even possible? Any help is extremely appreciated.
You may want to use web components and import the file in your main file. Then you can use it as regular web component.
Other option is to send the request to the background page where you can hold a reference to opened window. This reference has contentWindow property which is a JavaScript's window object. You can use it to replace the content of man window (after you read new file data using e.g. fetch).
You may use webview into backstage.html (or in a new window).
Could be...
backstage.html:
<a id="wizard" class="···">Get Started</a>
<!-- onclick doesn't work by CSP (see note bellow) ··· -->
<webview></webview>
<!-- ··· -->
<script src="./main.js"></script>
main.js:
onload = function {
// ···
document.querySelector('#wizard').addEventListener('click', runWizard);
// ···
};
// ···
function runWizard() {
// ···
document.querySelector('webview').src = 'backstage2.html';
// ···
};
CSP -Content Security Policy-, note:
"You can’t use inline scripting..."
#abarisone: Thanks!
Use href ="your html file" target = "_self"
I have this example in a file called: navigation.html in a folder off the root called: IMPORTS
<!-- Navigation -->
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- This is the section that doesn't work -->
<a class="brand" href="#" data-target=".pe-container">The Book Cover</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li>
About
</li>
<li class="divider-vertical"></li>
<li>
Books
</li>
<li class="divider-vertical"></li>
<li>
Blog
</li>
<li class="divider-vertical"></li>
<li>
Contact
</li>
<li class="navigation-right"><i class="sprite sprite-twitter"></i></li>
<li class="navigation-right"><i class="sprite sprite-facebook"></i></li>
<li class="navigation-right"><i class="sprite sprite-google"></i></li>
</ul>
</div>
</div>
</div>
Then in the index page I have this:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Load the Metatag Files Partial -->
<link rel="import" href="partials/metatags.html" />
<!-- Load the CSS Files Partial -->
<link rel="import" href="partials/css-files.html" />
<!-- Load the JS Files Partial -->
<link rel="import" href="partials/js-files.html" />
<title>Title Goes here/title>
</head>
<body id="page">
<div id="container" class="contain">
<!-- Navigation -->
<div id="navBarMain" class="navbar navbar-inverse navbar-fixed-top"></div>
<!-- End Navigation -->
</div>
</body>
</html>
And finally the JQuery that loads the div...
// JQUery Fancy Box
$(document).ready(function() {
//Load Imports
//Navigation
$("#navBarMain").load("imports/navigation.html");
//This is the menu system
$(function() {
$('.nav a, .brand, a[data-target]').click(function() { //This is what's not working
$('html, body').animate({
scrollTop: $($(this).attr('data-target')).offset().top - 50
}, 500);
});
});
});
The problem is, when I place the "navigation.html" file BACK into the div on the index page, the menu at the top of page works. BUT, when I load the "navigation.html" page as is, the menu click event does nothing. I know there's a call that's wrong so if you could help, it would be greatly appreciated. OF NOTE: There are NO Javascript errors in the console even with breakpoints, nothing happens. The code LOADS initially and stops at the breakpoint, but when I click on the menu, nothing, nada, ziltch....
Try attaching the events in the callback function of .load:
$(function() {
$("#navBarMain").load("imports/navigation.html", function() {
$('.nav a, .brand, a[data-target]').click(function() { //This is what's not working
$('html, body').animate({
scrollTop: $($(this).attr('data-target')).offset().top - 50
}, 500);
});
});
});
I'm using the "DynamicPage" jQuery plugin to make my pages not reload when navigating. On the index page is a image slider plugin called "Coin-Slider". The dynamic page works fine, except when I click to go back to the index page where the image slider is. For some reason (from what I can tell) the Coin-Slider ready function isn't activating when it goes back to the index. May be something to do with the URL, as host.com/index.php works but host.com/#index.php does not. Any reason why it's doing this? I've tried including the ready function in the DynamicPage function in the js file to execute whenever the page changes, but it didn't help. Page is included below.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css.css" rel="stylesheet" type="text/css" />
<title>Liberty Design, Scarborough</title>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type='text/javascript' src='js/jquery.ba-hashchange.min.js'></script>
<script type='text/javascript' src='js/dynamicpage.js'></script>
<script type="text/javascript" src="coin-slider/coin-slider.min.js"></script>
</head>
<body>
<div id="nav-back"></div>
<div id="wraps">
<div id="left-wrap"></div>
<div id="right-wrap"></div>
</div>
<div style="background:url(images/layout/shadow-bottom.png) no-repeat bottom center; width:900px; margin:0 auto; padding-bottom: 26px;">
<div id="page-wrap">
<div id="header">
<div id="banner">
<div id="social"><img src="images/layout/facebook.png" alt="Like us on Facebook!" /></div>
</div>
</div>
<navbar>
<div id="nav">
<div style="background:url(images/layout/gradient-up.png) repeat-x;height:20px;position:relative;top:-20px; z-index:999;"></div>
<ul id="navbar">
<li>Home</li>
<li>Facilities</li>
<li>Staff</li>
<li>Where are we?</li>
<li>Contact</li>
</ul>
</div>
</navbar>
<section id="main-content">
<div id="guts">
<!-- Content Start -->
<div style="background:url(images/layout/sides.png) center center no-repeat; height:373px;">
<div id="gamesHolder">
<div id="games">
<img src="images/banner_img/1335800583.png" alt="Welcome" />
<span>
<b>Welcome</b><br/>
Welcome to Liberty
</span>
<img src="images/banner_img/1335800633.png" alt="shop front" />
<span>
<b>shop front</b><br/>
this is the front of the shop
</span>
<img src="images/banner_img/" alt="staff #3" />
<span>
<b>staff #3</b>
<br/>this is the description for staff #3
</span>
<img src="images/banner_img/" alt="staff #1" />
<span>
<b>staff #1</b><br/>
this is staff #1
</span>
<img src="images/banner_img/" alt="asdas" />
<span>
<b>asdas</b><br/>
sdasdas
</span>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('#games').coinslider({ navigation: true, height:325, width: 595, hoverPause: true, delay: 5000,});
});
</script>
</div>
</section>
<div id="footer">
<!-- Cosmetics for the footer -->
<div id="footer-back"></div>
<div id="footer-wraps">
<div id="footer-left-wrap"></div>
<div id="footer-right-wrap"></div>
</div>
<div style="background:url(images/layout/gradient-up.png) repeat-x;height:20px;position:relative;top:-20px;"></div>
<center style="position:relative; top:-8px; color:#999;">Liberty Design, Scarborough - Website by Chain.</center>
</div>
</div>
</div>
</body>
</html>
Ok, mydomain.com and mydomain.com/#anything are the same, they point to your default file which can be index.php, index.html or whatever. The browser doesn't refresh while it navigates to the same file but diffrent hash tags like: from file#hashA to file#hashB or from file to file#hashRandom or from file#index.php to file. Since the page doesn't refresh (gets loaaded) the document ready doesn't gets fired either (it already got fired the first time the page got loaded).
First fix to your problem:
instead of linking to mydomain.com/#index.php link to mydomain.com or mydomain.com/index.php
Second fix is:
<script>
$(document).ready(function() {
var sliderInit = false;
$('#games').coinslider({ navigation: true, height:325, width: 595, hoverPause: true, delay: 5000,});
// Adding fix
$('#idOfLinkThatGetsClicked').click(function () {
if (!sliderInit) {
$('#games').coinslider({ navigation: true, height:325, width: 595, hoverPause: true, delay: 5000,});
sliderInit = true;
}
});
});
</script>