Why JavaScript won't run properly on CodeIgniter - javascript

Good evening for You from Indonesia.
Nice to meet You all.
Okay, We have some problem about JavaScript on CodeIgniter.
This is the HTML (view), we want to run a simple JavaScript, just to know that JavaScript can run properly.
But I cannot see the "alert" dialog from JavaScript. What's wrong with this code?
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Aluminium - Persebaran Alumni</title>
<link href="<?php echo base_url('assets/css/bootstrap.min.css');?>" rel="stylesheet">
<link href="<?php echo base_url('assets/css/datepicker3.css');?>" rel="stylesheet">
<link href="<?php echo base_url('assets/css/styles.css');?>" rel="stylesheet">
<!--Icons-->
<script src="<?php echo base_url('assets/js/lumino.glyphs.js');?>"></script>
<!-- javascript menampilkan lokasi saat ini -->
<script type="text/javascript">
function all() {
alert("Hello");
}
var centreGot = false;
</script>
<!-- konfigurasi library googlemaps oleh biostall -->
<?php
echo $map['js']
?>
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body onload="all()">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#sidebar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><span>Aluminium</span> Pencarian Alumni</a>
<ul class="user-menu">
<li class="dropdown pull-right">
<svg class="glyph stroked male-user"><use xlink:href="#stroked-male-user"></use></svg> <?php echo $nama; ?> <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li><svg class="glyph stroked male-user"><use xlink:href="#stroked-male-user"></use></svg> Profile</li>
<li><svg class="glyph stroked cancel"><use xlink:href="#stroked-cancel"></use></svg> Logout</li>
</ul>
</li>
</ul>
</div>
</div><!-- /.container-fluid -->
</nav>
<div id="sidebar-collapse" class="col-sm-3 col-lg-2 sidebar">
<ul class="nav menu">
<li><svg class="glyph stroked dashboard-dial"><use xlink:href="#stroked-dashboard-dial"></use></svg> Dashboard</li>
<li><svg class="glyph stroked table"><use xlink:href="#stroked-table"></use></svg> Tracer Study</li>
<li class="active"><svg class="glyph stroked map"><use xlink:href="#stroked-map"></use></svg> Pencarian Alumni</li>
<li><svg class="glyph stroked line-graph"><use xlink:href="#stroked-line-graph"></use></svg> Informasi Grafik</li>
<li><svg class="glyph stroked pencil"><use xlink:href="#stroked-pencil"></use></svg> Stakeholder</li>
</ul>
<div class="attribution">Template by Medialoot<br/>Icons by Glyphs</div>
</div><!--/.sidebar-->
<div class="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Peta Aluminium</h1>
</div>
</div><!--/.row-->
<div class="row">
<div class="col" id="lat_lng">
<FORM NAME="rd" METHOD="POST" ACTION="index.html">
<INPUT TYPE="text" NAME="long" ID="long" VALUE="">
<INPUT TYPE="text" NAME="lat" ID="lat" VALUE="">
</FORM>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<h3 class="haversin"><?php echo anchor('Alumni/prosesHaversine', 'Haversine');?></h3>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<?php
echo $map['html'];
?>
</div>
</div>
</div> <!--/.main-->
<script src="<?php echo base_url('assets/js/jquery-1.11.1.min.js');?>"></script>
<script src="<?php echo base_url('assets/js/bootstrap.min.js');?>"></script>
<script src="<?php echo base_url('assets/js/chart.min.js');?>"></script>
<script src="<?php echo base_url('assets/js/chart-data.js');?>"></script>
<script src="<?php echo base_url('assets/js/easypiechart.js');?>"></script>
<script src="<?php echo base_url('assets/js/easypiechart-data.js');?>"></script>
<script src="<?php echo base_url('assets/js/bootstrap-datepicker.js');?>"></script>
<script>
$('#calendar').datepicker({
});
!function ($) {
$(document).on("click","ul.nav li.parent > a > span.icon", function(){
$(this).find('em:first').toggleClass("glyphicon-minus");
});
$(".sidebar span.icon").find('em:first').addClass("glyphicon-plus");
}(window.jQuery);
$(window).on('resize', function () {
if ($(window).width() > 768) $('#sidebar-collapse').collapse('show')
})
$(window).on('resize', function () {
if ($(window).width() <= 767) $('#sidebar-collapse').collapse('hide')
})
</script>
</body>
</html>
End this is the JavaScript that we want running properly.
<!-- javascript menampilkan lokasi saat ini -->
<script type="text/javascript">
function all() {
alert("Hello");
}
var centreGot = false;
</script>
I'm sorry if this is just newbie's question. I'm very happy, and thanks a lot for your good advice or suggestion.

Related

Error in setting user roles in php using access column in mysql

I have a login/register website. both admin and users are in the same table in mysql.
My users table is below:
There is certain pages where only admins can visit. I have made an access column and put the values like in the image. I have the following php code for checking whether its admin or not
<?
include("config.php");
session_start();
$user_email=$_SESSION['email'];
$check_user="select * from users WHERE user_email='$user_email'";
$run=mysqli_query($dbcon,$check_user);
while($row = $run->fetch_assoc())
{
$user_name=$row['user_name'];
}?>
<div class="sing"><?php
if ($_SESSION['access'] != 'admin') {
header("Location: login.php");
}
else if (isset($_SESSION['email']) && $_SESSION['email'] == true) {
echo " &nbsp You logged in as " . $_SESSION['email'] ;
echo "<div style='float: right;'><a href='logout.php'>logout</a>&nbsp</div>";
}
else{}
?>
<!DOCTYPE html>
<html>
<head>
<title>Nurses Pulse </title>
<!--/tags -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="application/x-javascript">
addEventListener("load", function () {
setTimeout(hideURLbar, 0);
}, false);
function hideURLbar() {
window.scrollTo(0, 1);
}
</script>
<!--//tags -->
<link rel="icon" type="image/png" href="images/imageedit_2_5125240109.gif"/>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/appointment_style.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/font-awesome.css" rel="stylesheet">
<!-- //for bootstrap working -->
<link href="//fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,600,600i,700" rel="stylesheet">
</head>
<body>
<!-- header -->
<div class="header" id="home">
<div class="content white">
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">
<h1 style="color:#e50000"><span class="fa fa-heartbeat" aria-hidden="true"></span>Nurses Pulse </h1>
</a>
</div>
<!--/.navbar-header-->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<nav>
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown">
Exams <b class="caret"></b>
<ul class="dropdown-menu">
<li>PROMETRIC</li>
<li class="divider"></li>
<li>HAAD</li>
<li class="divider"></li>
<li>MOH</li>
<li class="divider"></li>
</ul>
</li>
<li>About Us</li>
</ul>
</nav>
</div>
<!--/.navbar-collapse-->
<!--/.navbar-->
</div>
</nav>
</div>
</div>
<!-- banner -->
<!--//banner -->
<!-- about -->
<!-- emergency -->
<!-- //emergency -->
<!-- services -->
<div class="services">
<div class="container">
<h3 class="heading-agileinfo" style="color:#e50000"><span>Sorry! You Have Timed Out!</span></h3>
<div class="services-top-grids">
<div> </div><br>
<br>
<?php
$session_value=(isset($_SESSION['correct_score']))?$_SESSION['correct_score']:'';
$session_value2=(isset($_SESSION['not_correct_score']))?$_SESSION['not_correct_score']:'';
echo "<div class='div-left'> Number Of Correct Answers = " . $session_value . "</div>";
echo "<div class='div-left'> <br>Number Of Wrong Answers = " . $session_value2 . "</div>";
?>
</div>
<div class="services-bottom-grids">
<div class="clearfix"></div>
</div>
</div>
</div>
<!-- //services -->
<!-- Clients -->
<!-- //Clients -->
<!--/icons-->
<!--//icons-->
<!-- footer -->
<div class="footer_top_agile_w3ls">
<div class="container">
<div class="col-md-3 footer_grid">
<h3>About Us</h3>
<p>NursesPulse is for those who are preparing for the staff nurse entrance exam for abroad.
</p>
</div>
<div class="col-md-3 footer_grid">
<h3>Other Services</h3>
<ul class="footer_grid_list">
<li><i class="fa fa-angle-right" aria-hidden="true"></i>
<a href="exambooking.php" >Book Exam </a>
</li>
<li><i class="fa fa-angle-right" aria-hidden="true"></i>
Course Materials
</li>
<li><i class="fa fa-angle-right" aria-hidden="true"></i>
<a href="membership.php" >Membership </a>
</li>
<!-- <li><i class="fa fa-angle-right" aria-hidden="true"></i>
Nurses Pulse Demo.
</li>
<li><i class="fa fa-angle-right" aria-hidden="true"></i>
Nurses Pulse Demo.
</li> -->
</ul>
</div>
<div class="col-md-3 footer_grid">
<h3>Contact Info</h3>
<ul class="address">
<li><i class="fa fa-map-marker" aria-hidden="true"></i>Team Pulse, Kannur <span>Kerala.</span></li>
<li><i class="fa fa-envelope" aria-hidden="true"></i>nursespulse#gmail.com</li>
<li><i class="fa fa-phone" aria-hidden="true"></i>+91 95444 12311</li>
</ul>
</div>
<div class="col-md-3 footer_grid ">
<h3>Sign up for our Newsletter</h3>
<p>Get Started For Free</p>
<div class="footer_grid_right">
<form action="#" method="post">
<input type="email" name="Email" placeholder="Email Address..." required="">
<input type="submit" value="Submit">
</form>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
<div class="footer_wthree_agile">
<p>© 2018 Nurses Pulse. All rights reserved | Design by Bluroe Labs</p>
</div>
<!-- //footer -->
<!-- bootstrap-modal-pop-up -->
<div class="modal video-modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
Nurses Pulse
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<img src="images/g7.jpg" alt=" " class="img-responsive" />
<p></i></p>
</div>
</div>
</div>
</div>
<!-- //bootstrap-modal-pop-up -->
<!-- js -->
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script>
$('ul.dropdown-menu li').hover(function () {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function () {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
</script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</body>
</html>
The code is not working, it's redirecting me to login page even if its admin who logs in.
Can anyone help me?
Thanks in advance.
try this one
while($row = $run->fetch_assoc())
{
$user_name=$row['user_name'];
$_SESSION['access'] = $row['access']; //define here
}?>
<div class="sing"><?php
if ($_SESSION['access'] != 'admin') {
header("Location: login.php");
}

Laravel,PHP - Error when returning my blade view

My master blade view wont display the search results from autocomplete form.Its just refreshing the page and stays the same .I used TypeAhead plugin in my master .My search form is in my master .Any ideas what can be the issue?
My routes:
Route::get('search',array('as'=>'search','uses'=>'AutoCompleteController#search'));
Route::get('autocomplete',array('as'=>'autocomplete','uses'=>'AutoCompleteController#autocomplete'));
My Controller:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\Product;
class AutoCompleteController extends MainController {
public function search()
{
return view('master');
}
public function autocomplete(Request $request)
{
if( !empty(request('query'))){
$data = Product::select("title")
->where("title","LIKE","%{$request->input('query')}%")
->get();
dd('justrandom');
$dataJson =$data->toJson();
return view('master', compact('dataJson'));
}else{
return view ('master', ['dataJson' => false]);
}
}
}
My master blade:
<head>
<meta charset="UTF-8">
<title>#if (!empty($title) )
{{ $title }}
#else
MySite
#endif</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link href="{{ asset('css/style.css') }}" rel="stylesheet" type="text/css"/>
<link href="{{ asset('carousel.css') }}" rel="stylesheet"/>
<script>var BASE_URL = "{{ url('')}}/";</script>
</head>
<header>
<!-- NAVBAR
================================================== -->
<body>
<div class="navbar-wrapper">
<div class="container-fluid">
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="{{ url('/')}}">MySite</a>
</div>
<div id="navbar" class="navbar-collapse collapse" >
<ul class="nav navbar-nav">
#if( !empty($menu))
#foreach($menu as $item)
<li>{{ $item['link'] }}</li>
#endforeach
#endif
<li>Shop</li>
<li>
<a href="{{ url('shop/checkout')}}">
<img width="20" src="{{ asset('images/shopping-cart.png')}}">
<div id="total-cart">
#if(! Cart::isEmpty())
{{Cart::getTotalQuantity()}}
#endif
</div>
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
#if(Session::has('user_id'))
<li>{{ Session::get('user_name') }}</li>
#if( Session::has('is_admin'))
<li>CMS DASHBOARD</li>
#endif
<li>Logout</li>
#else
<li>Sign In</li>
<li>Sign Up</li>
#endif
</ul>
<div class="row">
<div class="container">
<form method="GET" action="" class="navbar-form navbar-right">
<div class="input-group">
<input type="text" name="find" class="typeahead form-control" aria-label="Search here..." placeholder="Search here..." autocomplete="off" value="">
<div class="input-group-btn">
<button type="submit" class="btn btn-default" style="height: 34px; width: 40px" ><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
</div>
</nav>
</div>
</div>
</header> <br><br><br><br>
#if(!empty($dataJson))
#foreach(json_decode($dataJson, true) as $value)
{{ $value['record1']['record 2'] }}
#endforeach
#endif
<div class="container" >#yield('carousel')</div> <br><br>
<main>
<div class="container">
#include ('inc.sm')
#include ('inc.errors')
#yield('content')
</div>
</main>
<br><br><br>
<footer>
<div class="container">
<hr>
<div class="row">
<div class="col-md-12" >
<p class="text-center" style="font-size: 18px;" >MySite © {{ date('Y') }} </p>
</div>
</div>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.1/bootstrap3-typeahead.min.js"></script>
<script src="{{ asset('js/script.js') }}" type="text/javascript"></script>
<script type="text/javascript">
var path = "{{ route('autocomplete') }}";
$('input.typeahead').typeahead({
source: function (query, process) {
return $.get(path, { query: query }, function (data) {
return process(data);
});
}
});
</script>
My master blade view wont display the search results from autocomplete form.Its just refreshing the page and stays the same .I used TypeAhead plugin in my master .My search form is in my master .Any ideas what can be the issue?
You seem to have a syntax error, here:
#if(!empty($dataJson))
#foreach(json_decode($dataJson, true) as $value)
{{ $value['record1']['record 2'] }}
#endforeach
$endif
That $endif should surely be #endif ..?

CSS and Javascript aren't working inside my localhost PHP folder

Hello I am trying to implement a page that I originally designed in html and css with javascript in a PHP file. There doesn't seem to be anything wrong with the CSS and javascript as they work alright in the original html file. When I brought the code over to a php file it was originally working properly. Now the sidebar won't collapse and the buttons seem to have reverted back to the original default style. The exact same thing happens when I open the html file through localhost although it works find if I open it in a browser. I'm trying to back track and figure out what I changed that caused this. I'm new to PHP so any help is appreciated.
My PHP code:
<?php
include('database.php');
session_start();
if(!isset($_SESSION['id']) && !isset($_SESSION['type'])){
header('location: Index.php');
}
?>
<html>
<head>
<title>Yasalade</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-
1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
crossorigin="anonymous">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-
theme.min.css" integrity="sha384-
fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r"
crossorigin="anonymous">
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
integrity="sha384-
0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
crossorigin="anonymous"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<link rel="stylesheet" href="Style.css">
<script
src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js">
</script>
</head>
<body>
<!-- Sidebar -->
<div id="wrapper">
<div class="overlay"></div>
<!-- Sidebar -->
<nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper"
role="navigation">
<ul class="nav sidebar-nav">
<li class="sidebar-brand">
<a href="Main.html">
Eventses
</a>
</li>
<li>
<span class="glyphicon glyphicon-th-list">Main</span>
</li>
<li>
<span class="glyphicon glyphicon-user">Profile</span>
</li>
<li>
<span class="glyphicon glyphicon-glass">Events</span>
</li>
<li>
<span class="glyphicon glyphicon-cog">Settings</span>
</li>
<li>
<span class="glyphicon glyphicon-envelope">Messages</span>
</li>
<li>
Logout
</li>
</ul>
</nav>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<button type="button" class="hamburger is-closed" data-toggle="offcanvas">
<span class="hamb-top"></span>
<span class="hamb-middle"></span>
<span class="hamb-bottom"></span>
</button>
</div>
<!-- /#page-content-wrapper -->
</div>
<!-- /#wrapper -->
<!-- Main body -->
<div class="container" align="right">
<div class="col-sm-10">
<div class="bs-calltoaction bs-calltoaction-primary">
<div class="row">
<div class="col-md-9 cta-contents">
<h2 class="cta-title">Event Title</h2>
<center><img src="default.png" alt="pic"></center>
<div class="cta-desc">
<p3>Insert info about event</p3>
</div>
</div>
Analyse</button>
</div>
</div>
<div class="bs-calltoaction bs-calltoaction-primary">
<div class="row">
<div class="col-md-9 cta-contents">
<h2 class="cta-title">Event Title</h2>
<center><img src="default.png" alt="pic"></center>
<div class="cta-desc">
<p3>Insert info about events</p3>
</div>
</div>
Analyse</button>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function () {
var trigger = $('.hamburger'),
overlay = $('.overlay'),
isClosed = false;
trigger.click(function () {
hamburger_cross();
});
function hamburger_cross() {
if (isClosed == true) {
overlay.hide();
trigger.removeClass('is-open');
trigger.addClass('is-closed');
isClosed = false;
} else {
overlay.show();
trigger.removeClass('is-closed');
trigger.addClass('is-open');
isClosed = true;
}
}
$('[data-toggle="offcanvas"]').click(function () {
$('#wrapper').toggleClass('toggled');
});
});
</script>
As other users pointed out the bootstrap and JQuery weren't the latest versions. It works fine now.

Checkbox select JavaScript for displaying required result by backend php

This is my product page
I want to use checkbox for my product page by jquery.. So that customer can easily find their required product with this checkbox . Please do help me as i am in very early stage of jquery.
Thanks in advance
<!DOCTYPE HTML>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7 " lang="sv"><![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8 ie7" lang="sv"><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9 ie8" lang="sv"><![endif]-->
<!--[if gt IE 8]> <html class="no-js ie9" lang="sv"><![endif]-->
<html lang="sv">
<script src="assets/js/jquery-1.11.0.min.js"></script>
<body id="rims" class="category category-14 category-falgar hide-right-column lang_sv">
<div id="page">
<div class="columns-container">
<div id="columns" class="container">
<!-- Breadcrumb -->
<div class="breadcrumb clearfix">
<a class="home" href="index.php" title="Återgå till Startsidan"><i class="icon-home"></i></a>
<span class="navigation-pipe" >></span>
<span class="navigation_page">Fälgar</span>
</div>
<!-- /Breadcrumb -->
<div id="slider_row" class="row">
<div id="top_column" class="center_column col-xs-12 col-sm-12"></div>
</div>
<div class="row">
<div id="left_column" class="column col-xs-12 col-sm-3">
<!-- Block layered navigation module -->
<div id="layered_block_left" class="block">
<p class="title_block">Sök Fälgar</p>
<div class="block_content
<form action="#" id="layered_form">
<div>
<div class="layered_filter">
<div class="layered_subtitle_heading">
<span class="layered_subtitle">Storlek</span>
</div>
<ul id="" class="col-lg-12 ">
<?php include 'php/config.php';
$sql =mysql_query("select * from size");
while($row=mysql_fetch_array($sql)){
?>
<li class="nomargin hiddable col-lg-6">
<input type="radio" class="radio" name="size" id="size<?php echo $row['size']?>" value="<?php echo $row['size']?>" />
<label for="layered_id_attribute_group_86">
<?php echo $row['size']?>
</label>
</li>
<?php
}
?>
</ul>
</div>
<div class="layered_filter">
<div class="layered_subtitle_heading">
<span class="layered_subtitle">Bredd</span>
<!--<span class="layered_close">
</span>-->
</div>
<ul id="ul_layered_id_attribute_group_4" class="col-lg-12 layered_filter_ul">
<?php include 'php/config.php';
$sql =mysql_query("select * from width");
while($row=mysql_fetch_array($sql)){
?>
<li class="nomargin hiddable col-lg-6">
<input type="radio" class="radio" name="layered_id_attribute_group_33" id="layered_id_attribute_group_33" value="33_4" />
<label for="layered_id_attribute_group_33">
<?php echo $row['width']?>
</label>
</li>
<?php
}
?>
</ul>
</div>
<div class="layered_filter">
<div class="layered_subtitle_heading">
<span class="layered_subtitle">Bultmönster</span>
<!--<span class="layered_close">
</span>-->
</div>
<ul id="ul_layered_id_attribute_group_2" class="col-lg-12 layered_filter_ul">
<?php include 'php/config.php';
$sql =mysql_query("select * from bolt");
while($row=mysql_fetch_array($sql)){
?>
<li class="nomargin hiddable col-lg-6">
<input type="radio" class="radio" name="layered_id_attribute_group_8" id="layered_id_attribute_group_8" value="8_2" />
<label for="layered_id_attribute_group_8">
<?php echo $row['bolt']?>
</label>
</li>
<?php
}
?>
</ul>
</div>
<div class="layered_filter">
<div class="layered_subtitle_heading">
<span class="layered_subtitle">ET</span>
<!--<span class="layered_close">
</span>-->
</div>
<ul id="ul_layered_id_attribute_group_6" class="col-lg-12 layered_filter_ul">
<?php include 'php/config.php';
$sql =mysql_query("select * from offset");
while($row=mysql_fetch_array($sql)){
?>
<li class="nomargin hiddable col-lg-6">
<input type="radio" class="radio" name="layered_id_attribute_group_205" id="layered_id_attribute_group_205" value="205_6" />
<label for="layered_id_attribute_group_205">
<?php echo $row['offset']?>
</label>
</li>
<?php
}
?>
</ul>
</div>
</div>
<input type="hidden" name="id_category_layered" value="14" />
</form>
</div>
<div id="layered_ajax_loader" style="display: none;">
<p>
<img src="images/loader.gif" alt="" />
<br />Laddar...
</p>
</div>
</div>
<!-- /Block layered navigation module -->
</div>
<!-- Left Panel end -->
<div id="center_column" class="center_column col-xs-9 col-sm-9" >
<h1 class="page-heading product-listing"><span class="cat-name">Fälgar </span>
</h1>
<div class="content_sortPagiBar clearfix">
<div class="sortPagiBar clearfix">
<!-- /Sort products -->
<!-- nbr product/page -->
<!-- /nbr product/page -->
</div>
<div class="top-pagination-content clearfix">
<!-- Pagination -->
<div id="pagination" class="pagination clearfix">
<form class="showall" action="" method="get">
<div>
<input type="hidden" name="id_lang" value="9" />
<input type="hidden" name="id_category" value="14" />
<input type="hidden" name="controller" value="category" />
<input name="n" id="nb_item" class="hidden" value="1098" />
</div>
</form>
</div>
<?php
$sql =mysql_query("select * from items ");
$num_rows = mysql_num_rows($sql);
?>
<div class="product-count">
Visar <?php echo $num_rows; ?> artiklar
</div>
<!-- /Pagination -->
</div>
</div>
<!-- Products list -->
<!--ul-->
<div class="product_list grid row">
<?php
while($row=mysql_fetch_array($sql)){
?>
<!--li-->
<div class="ajax_block_product col-xs-6 col-sm-6 col-md-4 first-in-line first-item-of-tablet-line first-item-of-mobile-line">
<div class="layered" itemscope itemtype="http://schema.org/Product" >
<div class="layered_filter" >
<div class="product-image-container" >
<a class="product_img_link"href="#" title="<?php echo $row['model_name']?> " itemprop="url">
<img class="replace-2x img-responsive" src="admin/itempics/<?php echo $row['itemno']?>.jpg" alt="<?php echo $row['model_name']?> " title="<?php echo $row['cname']?> " width="250" height="250" itemprop="image" />
</a>
<div class="content_price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta itemprop="priceCurrency" content="SEK" />
</div>
</div>
</div>
<div class="layered_filter">
<h5 itemprop="name">
<a class="product-name" href="#" title="<?php echo $row['model_name']?> " itemprop="url" >
<b><?php echo $row['model_name'], $row['cname'], $row['itemno'], $row['size'], $row['width'], $row['offset'], $row['colour']?></b>
</a>
</h5>
<p class="product-desc" itemprop="description">
<?php echo $row['model_name']?>
</p>
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer" class="content_price">
<span itemprop="price" class="price product-price">
<?php echo $row['price']?> ,00 kr
</span>
<meta itemprop="priceCurrency" content="SEK" />
</div>
<div style="margin-bottom:10px;" class="button-container">
<a class="button ajax_add_to_cart_button btn btn-default" href="index.php?con=8" id="rims_add_cart<?php echo $row['items_id']; ?>" rel="nofollow" title="Lägg till i varukorgen" data-id-product="1338" data-value="<?php echo $row['items_id']; ?>" >
<span>Lägg till i varukorgen</span>
</a>
<a style="margin-top:5px;" itemprop="url" class="button lnk_view btn btn-default" href="index.php?con=11 & itemno=<?php echo $row['items_id']; ?>" title="View">
<span>Mer</span>
</a>
</div>
<div class="product-flags">
</div>
<script>
$("#rims_add_cart<?php echo $row['items_id']; ?>").click(function() {
var addcart = $(this).data('value');
$.ajax({
type: "GET",
url: "session_cart_items.php",
data: {addsessioncart : addcart},
//cache: false,
});
//alert($(this).data('value'));
});
</script>
</div>
<div class="functional-buttons clearfix">
</div>
</div><!-- .product-container> -->
</div><!--li end-->
<?php
}
?>
</div><!--ul end-->
</div>
</div>
</div>
</div>
</div><!-- #center_column -->
</div><!-- .row -->
</div><!-- #columns -->
</div><!-- .columns-container -->
<!-- Footer -->
</div><!-- #page -->
<script type="text/javascript" src="assets/js/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="assets/js/jquery.ui.mouse.min.js"></script>
<script type="text/javascript" src="assets/js/jquery.ui.slider.min.js"></script>
<script type="text/javascript" src="assets/js/jquery.ui.widget.min.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$('input[type="checkbox"]').click(function() {
if ($('input[type="checkbox"]:checked').length > 0) {
$('.layered >div').hide();
$('input[type="checkbox"]:checked').each(function() {
$('.layered >div[data-category=' + this.id + ']').show();
});
} else {
$('.layered >div').show();
}
});
</script>
</div>
</body>
</html>
This is my code for the above.. I am using php as backend .

Dynamically added content on template don't respond to Javascript/AJAX/Jquery in CodeIgniter

This is my sample code for the template.
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>WebLAB</title>
<link rel="stylesheet" href="<?php echo base_url()?>assets/css/bootstrap.css" />
</head>
<body class="container">
<header class="panel-heading" role="navigation">
<a class="navbar-brand" href="<?php echo base_url(); ?>">WebLAB</a>
<nav>
<ul class="nav nav-tabs" role="tablist">
<li>Register</li>
<li>About this site</li>
</ul>
</nav>
</header>
<section class="container">
<!--- Dynamic content is loaded here!-->
<?php if(isset($content)) echo $content; ?>
</section>
<footer class="panel-footer text-center">
<span><small>All Rights Reserved | © <?php echo date('Y'); ?> Christ the King College-ICT Team</small></span>
</footer>
<script type="text/javascript" src="<?php echo base_url()?>assets/js/jQuery-1.10.2.js"></script>
<script type="text/javascript" src="<?php echo base_url()?>assets/js/bootstrap.js"></script>
</body>
</html>
This code below is the content I am LOADING to the code above (It's embedding the content dynamically). My problem is that the Javascript code I am trying to apply to an element doesn't respond. I have tried also adding the script on the main page above.
<script type="text/javascript">
$(document).ready(function(){
$('#jq').click(function(){
alert("Hi");
});
});
</script>
<section class="col-md-8">
<p>
<h2 id="jq">Register Your Account here to Login!</h2>
<p>
<article>
<p>
You can only access your account when the admin
approves your request for registration.
</p>
</article>
</section>
<section class="col-md-4">
<form method="post" class="regform" action="<?php echo base_url();?>portal/register" role="form">
<div class="form-group">
<label for="Username" id="sample">Username:</label>
<input type="Username" class="form-control" id="Username" name="username" placeholder="example#mail.com" required>
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" name="password" required>
</div>
<div class="form-group">
<label for="pwd">Retype-Password:</label>
<input type="password" class="form-control" id="pwd" name="repassword" required>
</div>
<button type="submit" class="btn btn-default">Register</button>
</form>
</section>
I am using this technique in CodeIgniter 3 controller.
public function registration() {
$data = null;
$data['content'] = $this->load->view('pages/registration', $data, true);
$this->load->view('template/temp_portal.php', $data);
}
Sorry for the messy code. Your help is much appreciated. This is just a sample code BTW.
Your problem is you are using jquery before loading the library. load your JS file including jquery library in your head tag. It will work i.e
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>WebLAB</title>
<link rel="stylesheet" href="<?php echo base_url()?>assets/css/bootstrap.css" />
<script type="text/javascript" src="<?php echo base_url()?>assets/js/jQuery-1.10.2.js"></script>
<script type="text/javascript" src="<?php echo base_url()?>assets/js/bootstrap.js"></script>
</head>
<body class="container">
<header class="panel-heading" role="navigation">
<a class="navbar-brand" href="<?php echo base_url(); ?>">WebLAB</a>
<nav>
<ul class="nav nav-tabs" role="tablist">
<li>Register</li>
<li>About this site</li>
</ul>
</nav>
</header>
<section class="container">
<!--- Dynamic content is loaded here!-->
<?php if(isset($content)) echo $content; ?>
</section>
<footer class="panel-footer text-center">
<span><small>All Rights Reserved | © <?php echo date('Y'); ?> Christ the King College-ICT Team</small></span>
</footer>
</body>
</html>
Try this and check your console what error showing now
Double check your jQuery library link is ok or not

Categories