after navigate to another page, bootstrap dropdown become unusable - javascript

I had 3 .php files, they are index.php, load_file.php,and register.php
In index.php, contain navigation, and each navigation has dropdown list, i call this navigation and the dropdown from database. and also index.php has link to register.php, note : load_file.php included in this file
In load_file.php, contain code to check value of page, by using if($_GET['page']),and trigger every value with switch-case
register.php, just a normal form
My problem is, after I navigate to register.php by typing ?page=register in browser, my dropdown in index.php file become unusable
::UPDATE::
this is my index.php file
<?php
session_start();
require_once './model/functions.php';
if(isset($_GET["category"])){
$index_page= $_GET["category"];
$index_sub_page= null;
}elseif (isset ($_GET["sub_category"])) {
$index_sub_page = $_GET["sub_category"];
$index_page= null;
}else{
$index_sub_page= null;
$index_page= null;
}
if($_POST){
$username = $_POST["username"];
$password = $_POST["password"];
if(check_username_and_password_from_users($username, $password)){
$_SESSION["username"] = $username;
}
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Learn Bootstrap</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
</head>
<body>
<div id="TopContainer" class="container">
<div class="pull-right navbar-default">
<ul class="nav navbar-nav">
<?php if(isset($_SESSION["username"])){ ?>
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown"><?php echo $_SESSION["username"]; ?></a>
<div class="dropdown-menu" style="padding: 17px;">
Logout
</div>
</li>
<?php }else{ ?>
<!--dropdown here -->
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown" id="login">Dropdown</a>
<div class="dropdown-menu" style="padding:17px;">
<form id="loginform" method="post" action="index.php" class="form">
<div class="form-group">
<input class="form-control" type="text" name="username" id="username" placeholder="username">
</div>
<div class="form-group">
<input class="form-control" type="password" name="password" id="password" placeholder="password">
</div>
<input type="submit" value="Submit">
</form>
</div>
</li>
<li>Register</li>
<?php } ?>
<li>FAQs</li>
<li>Twitter</li>
<li>Facebook</li>
</ul>
</div>
</div>
<div id="logo" class="container">
<div class="col-md-6">
<a class="navbar no-margin" href="#"><img src="picture/LogoSaya.png"></a>
</div>
<div class="col-md-6">
<div class="col-md-6 pull-right">
<div class="input-group input-group-sm">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input type="text" class="form-control" placeholder="Search for...">
</div>
</div>
</div>
</div>
<nav class="container">
<div class="navbar navbar-default">
<ul class="nav navbar-nav">
<?php
$subject_set = find_all_subjects();
while($subject = mysqli_fetch_assoc($subject_set)){
?>
<li>
<a id="dLabel" data-target="#" href="?subject=<?php echo urlencode($subject["id"]);?>" data-toggle="dropdown" aria-haspopup="true" role="button">
<?php echo $subject["name"];?>
<span class="caret"></span>
</a>
<!--dropdown here -->
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<?php
$page_set = find_pages_from_subjects($subject["id"]);
while($page = mysqli_fetch_assoc($page_set)){
?>
<li>
<?php echo $page["name"];?>
<ul>
<?php
$sub_page_set = find_sub_pages_from_pages($page["id"]);
while($sub_page = mysqli_fetch_assoc($sub_page_set)){
?>
<li>
<?php echo $sub_page["name"];?>
</li>
<?php
}
clear_result($sub_page_set);
?>
</ul>
</li>
<?php
}
clear_result($page_set);
?>
</ul>
</li>
<?php
}
clear_result($subject_set);
?>
</ul>
</div>
</nav>
<div class="container">
<?php
include "load_files.php"; //this is to load the files
?>
</div>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</body>
</html>
to navigate register.html, i use this code
<li>Register</li>
as you can see, i put code on below in index.php
<?php
include "load_files.php"; //this is to load file
?>
and this is my load_files.php
<?php
if($_GET){
switch ($_GET['page']) {
case 'register':
if(!file_exists("register.html")){
die("Sorry Empty Page");
}
include 'register.html';
break;
default:
break;
}
}
?>

Seems like an event handler issue. I'd look at how you are adding event handlers and see if the handler is getting wiped out somehow.

::SOLVED::
My problem is, after I navigate to register.php by typing ?page=register in browser, my dropdown in index.php file become unusable
this problem happen because, i had 2
<script src="jquery.js"></script>
, inside index.php and register.html .by remove the one inside register.html will solve the problem

Related

jquery autocomplete suggestions come at the bottom of the page

I got a registration form where the user has to pick up one of the possible options or register his own university. For that, I thought It would be a great idea to be using jquery autocomplete functionality because it seemed pretty straight forward but here we go again.
This is the code that I'm using just for testing it out
$(document).ready(function(){
$("#name").autocomplete({
source: [
"Apple",
"Orange",
"bananna"
],
select: function(event, selectedData){
console.log(selectedData);
}
})
})
And here's the one that I am using for the actual page.
The problem that I occur is that the suggestions come at the bottom of the page instead of being weather above or below the actual input. How could I possibly display them as a dropdown below the actual input?
$(document).ready(function(){
$("#name").autocomplete({
source: [
"Apple",
"Orange",
"bananna"
],
select: function(event, selectedData){
console.log(selectedData);
}
})
})
<!--
=========================================================
* Now UI Kit - v1.3.0
=========================================================
* Product Page: https://www.creative-tim.com/product/now-ui-kit
* Copyright 2019 Creative Tim (http://www.creative-tim.com)
* Licensed under MIT (https://github.com/creativetimofficial/now-ui-kit/blob/master/LICENSE.md)
* Designed by www.invisionapp.com Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="apple-touch-icon" sizes="76x76" href="http://bedford-computing.co.uk/hackathon//assets/img/apple-icon.png">
<link rel="icon" type="image/png" href="http://bedford-computing.co.uk/hackathon//assets/img/favicon.png">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>
IUSCH | Register university
</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
<!-- Fonts and icons -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<!-- CSS Files -->
<link href="http://bedford-computing.co.uk/hackathon//assets/css/bootstrap.min.css" rel="stylesheet" />
<link href="http://bedford-computing.co.uk/hackathon//assets/css/now-ui-kit.css?v=1.3.0" rel="stylesheet" />
<link href="http://bedford-computing.co.uk/hackathon/assets/css/animate.css" rel="stylesheet" />
<!-- CSS Just for demo purpose, don't include it in your project -->
<link href="http://bedford-computing.co.uk/hackathon//assets/demo/demo.css" rel="stylesheet" />
</head>
<body class="login-page sidebar-collapse">
<!-- Navbar -->
<nav class="navbar navbar-expand-lg bg-primary fixed-top navbar-transparent " color-on-scroll="400">
<div class="container">
<div class="navbar-translate">
<a class="navbar-brand" href="<?php echo base_url() . 'welcome'?>">
HOME
</a>
<a class="navbar-brand" href="<?php echo base_url() . 'scenarious'?>">
SCENARIOS
</a>
<a class="navbar-brand" href="<?php echo base_url() . 'user/contact_us'?>">
CONTACT US
</a>
<button class="navbar-toggler navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-bar top-bar"></span>
<span class="navbar-toggler-bar middle-bar"></span>
<span class="navbar-toggler-bar bottom-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse justify-content-end" id="navigation" data-nav-image="<?php echo base_url(); ?>assets/img/blurred-image-1.jpg">
<?php if ($this->session->userdata('email') != ''): ?>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="<?php echo base_url() . 'user/my_account'?>">My profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?php echo base_url() . 'user/logout'?>">Logout</a>
</li>
</ul>
<?php else: ?>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="<?php echo base_url() . 'user'; ?>">Login</a>
</li>
<li class="nav-item">
<div class="dropdown">
<a class="nav-link" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Register
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="<?php echo base_url() . 'register_user'?>">Student</a>
<a class="dropdown-item" href="<?php echo base_url() . 'register_uni'?>">University</a>
</div>
</div>
</li>
</ul>
<?php endif; ?>
</div>
</div>
</nav>
<!-- End Navbar -->
<div class="page-header clear-filter" >
<div class="page-header-image" style="background-image:url(http://bedford-computing.co.uk/hackathon/assets/img/uni/UoB_JimStephenson-23-WebRes.jpg)"></div>
<div class="content">
<div class="container">
<div class="col-md-4 ml-auto mr-auto">
<div class="card card-signup animated shake" data-background-color="orange" style="margin-top:10%">
<form class="form" method="post" action="<?php echo base_url(); ?>register_uni/validation">
<div class="card-header text-center">
<h3 class="card-title title-up">Register University</h3>
<div class="logo-container">
</div>
</div>
<div class="card-body">
<span class="text-danger">
<?php echo form_error('name');?>
<?php echo form_error('contact_first_name');?>
<?php echo form_error('contact_last_name');?>
<?php echo form_error('university_id');?>
</span>
<div class="input-group no-border input-lg">
<input type="text" name="name" id="name" class="form-control" placeholder="University name">
</div>
<div class="input-group no-border input-lg">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="now-ui-icons users_circle-08"></i>
</span>
</div>
<input type="text" name="contact_first_name" placeholder="Contact first name" class="form-control" />
</div>
<div class="input-group no-border input-lg">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="now-ui-icons users_circle-08"></i>
</span>
</div>
<input type="text" name="contact_last_name" placeholder="Contact last name" class="form-control" />
</div>
<div class="input-group no-border input-lg">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="now-ui-icons users_circle-08"></i>
</span>
</div>
<input type="text" name="contact_email" placeholder="Contact email" class="form-control" />
</div>
</div>
<div class="card-footer text-center">
<input type="submit" name='register_uni' class="btn btn-neutral btn-round btn-lg">
</form>
</div>
</div>
</div>
</div>
</div>
<!-- Core JS Files -->
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> type="text/javascript"></script>
<script src="http://bedford-computing.co.uk/hackathon/assets/js/core/popper.min.js" type="text/javascript"></script>
<script src="http://bedford-computing.co.uk/hackathon/assets/js/core/bootstrap.min.js" type="text/javascript"></script>
<!-- Plugin for Switches, full documentation here: http://www.jque.re/plugins/version3/bootstrap.switch/ -->
<script src="http://bedford-computing.co.uk/hackathon/assets/js/plugins/bootstrap-switch.js"></script>
<!-- Plugin for the Sliders, full documentation here: http://refreshless.com/nouislider/ -->
<script src="http://bedford-computing.co.uk/hackathon/assets/js/plugins/nouislider.min.js" type="text/javascript"></script>
<!-- Plugin for the DatePicker, full documentation here: https://github.com/uxsolutions/bootstrap-datepicker -->
<script src="http://bedford-computing.co.uk/hackathon/assets/js/plugins/bootstrap-datepicker.js" type="text/javascript"></script>
<!-- Control Center for Now Ui Kit: parallax effects, scripts for the example pages etc -->
<script src="http://bedford-computing.co.uk/hackathon/assets/js/now-ui-kit.js?v=1.3.0" type="text/javascript"></script>
</body>
</html>
UPDATE: I've found this after a couple of hours https://bugs.jqueryui.com/ticket/8391
If you have a div with "position:fixed" and an input tag inside, the
autocomplete menu will scroll with the rest of the page. Instead, it
should stay with the input tag.
That answered my question. Admins might close it, cheers.
I've found this after a couple of hours https://bugs.jqueryui.com/ticket/8391
If you have a div with "position:fixed" and an input tag inside, the
autocomplete menu will scroll with the rest of the page. Instead, it
should stay with the input tag.

Get value in looping, send to another page and call catch data using that value

I use session to send that value to other page, but mysql syntax does not display the data using that value. It doesnt show the error on MySQL syntax. Can someone help me? and Explain why mysql syntax cannot read the session? or I need to assign new variable for session on the pakejlist.php page?
the value already call from DB and display on A HREF link on food.php , i want to get that value on pakejlist.php mysql syntax.
and what I achieve is nothing.. the syntax just fine but the data doesnt came out.
//food.php
<?php include("../kahwin/Connections/conn.php"); ?>
<!DOCTYPE html>
<html>
<head>
<title>Kahwin Ringkas</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/kahwin/index.php">Walimatul Urus</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="page-header">
<h1>Carian Katering</h1>
</div>
<?php
session_start();
$_SESSION['id'] = $row['v_id'];
mysql_select_db($database_conn, $conn);
$sql = mysql_query("SELECT * FROM vendor WHERE type = 'Katering'") or die (mysql_error());
while ($row = mysql_fetch_array($sql)) {
?>
<div class="col-md-4">
<?php echo '<img src="data:image;base64, '.$row['img'].'" class="img-thumbnail">' ?>
<h4><?php echo $row['companyName']?></h4>
<p><?php echo $row['address']?>, <?php echo $row['code']?> <?php echo $row['city']?>, <?php echo $row['state']?><br><?php echo $row['contact']?><br><?php echo $row['email']?><br></p>
View Package<br>
</div>
<?php }
?>
</div>
</body>
</html>
//pakejlist.php
<?php include("../kahwin/Connections/conn.php"); ?>
<!DOCTYPE html>
<html>
<head>
<title>Kahwin Ringkas</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/kahwin/index.php">Walimatul Urus</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
<!-- Page Content -->
<div class="container">
<!-- Page Heading -->
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Senarai Pakej</h1>
</div>
</div>
<!-- /.row -->
<!-- Project One -->
<?php
//$vid = $_REQUEST['id'];
session_start();
mysql_select_db($database_conn, $conn);
$sql = mysql_query("SELECT * FROM pakej WHERE v_id = '" .$_SESSION['id']. "' ") or die (mysql_error());
while ($result = mysql_fetch_array($sql)) {
?>
<div class="row">
<div class="col-md-6">
<h3><?php echo $result['name_p']?></h3>
<h4>$ <?php echo $result['harga']?></h4>
<p><?php echo $result['descr']?></p>
<a class="btn btn-primary" href="#">Add to cart <span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
<div class="col-md-5"></div>
</div>
<?php }
?>
<!-- /.row -->
<hr>
</body>
</html>
In food.php, you are initialising session variable $_SESSION['id'] = $row['v_id'] , outside mysql_fetch_array loop. So $row['v_id'] is empty. Also if you initialize that from within the loop, it will be overwritten and will have the value from the last row.
In the loop,
View Package<br>
The value in anchor tag does not mean anything. It is not valid. So you can try this instead..
View Package<br>
And in the pakejlist.php you will have change to
$sql = mysql_query("SELECT * FROM pakej WHERE v_id = '" .$_GET['v_id']. "' ") or die (mysql_error());
Hope this helps...

JQuery input form is not working

I have two input fields, one for sorting one for the radius.
I want it to work if I set the sortby it should save and resubmit with the order I've selected, and the radis would work the same way, without getting the two input fields messing up each other. Right now whatever I set for radius is go over by the sortby field, even it get posted as a value and displayed under the wrong input.
Someone please look it over and help me to solve this.
Thank you, I would really appreciate any help with this problem.
<head>
<meta charset="utf-8">
<title>Dropdown Menus</title>
<link rel="stylesheet" href="style.css">
<script src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function($) {
$('ul li').on('click', function() {
$('input#shortby').val($(this).data('val'));
$('#order').submit();
});
});
$(document).ready(function($) {
$('ul li').on('click', function() {
$('input#radius').val($(this).data('val'));
$('#order').submit();
});
});
</script>
</head>
<body>
<?php
echo "POST VALUE: ". $_POST['shortby'];
echo "POST VALUE: ". $_POST['radius'];
?>
<form action="index.php" method="post" id="order">
<input id="shortby" type="hidden" value="" name="shortby">
<section class="container">
<div class="dropdown">
<div>Sort By: <?php echo $_POST['shortby']; ?>
<ul>
<li data-val="Featured" ><a href="#" >Featured</a></li>
<li data-val="Name" ><a href="#" >Name</a></li>
<li data-val="Price (Highest)"><a href="#" >Price (Highest)</a></li>
<li data-val="Price (Lowest)" ><a href="#" >Price (Lowest)</a></li>
</ul>
</div>
</div>
</section>
<br>
<br>
<br>
<br>
<input id="radius" type="hidden" value="" name="radius">
<section class="container">
<div class="dropdown">
<div>Radius: <?php echo $_POST['radius']; ?>
<ul>
<li data-val="10"> <a href="#" >10</a></li>
<li data-val="20"> <a href="#" >20</a></li>
<li data-val="30"> <a href="#" >30</a></li>
<li data-val="40"> <a href="#" >40</a></li>
<li data-val="50"> <a href="#" >50</a></li>
</ul>
</div>
</div>
</section>
</form>
See the problem is that you are setting the same data, i.e. val in both cases. Check the following
<script type="text/javascript">
$(document).ready(function($) {
$('input#shortby').val(<?php echo (isset($_POST['shortby'])) ? json_encode($_POST['shortby']) : ''; ?>);
$('input#radius').val(<?php echo (isset($_POST['radius'])) ? json_encode($_POST['radius']) : ''; ?>);
$('ul li').on('click', function() {
var shortbyVal, radiusVal;
if($(this).data('val') === undefined){
radiusVal = $(this).data('val2');
shortbyVal = $('input#shortby').val();
}
else if($(this).data('val2') === undefined){
shortbyVal = $(this).data('val');
radiusVal = $('input#radius').val();
}$('input#shortby').val(shortbyVal);
$('input#radius').val(radiusVal);
$('#order').submit();
});
});
</script>
</head>
<body>
<?php
echo "POST VALUE: ". $_POST['shortby'];
echo "POST VALUE: ". $_POST['radius'];
?>
<form action="1.php" method="post" id="order">
<input id="shortby" type="hidden" value="" name="shortby">
<section class="container">
<div class="dropdown">
<div>Sort By: <?php echo $_POST['shortby']; ?>
<ul>
<li data-val="Featured" ><a href="#" >Featured</a></li>
<li data-val="Name" ><a href="#" >Name</a></li>
<li data-val="Price (Highest)"><a href="#" >Price (Highest)</a></li>
<li data-val="Price (Lowest)" ><a href="#" >Price (Lowest)</a></li>
</ul>
</div>
</div>
</section>
<br>
<br>
<br>
<br>
<input id="radius" type="hidden" value="" name="radius">
<section class="container">
<div class="dropdown">
<div>Radius: <?php echo $_POST['radius']; ?>
<ul> <!-- Observe the change in data-val to data-val2 -->
<li data-val2="10"> <a href="#" >10</a></li>
<li data-val2="20"> <a href="#" >20</a></li>
<li data-val2="30"> <a href="#" >30</a></li>
<li data-val2="40"> <a href="#" >40</a></li>
<li data-val2="50"> <a href="#" >50</a></li>
</ul>
</div>
</div>
</section>
</form>
This should be a good workaround for that

Ajax respondText isnt working

In my ajax i have a var named ajax for some reason when I run ajax.respondText.
In the php code I ask it to return the username of the one log in. Well it is echoing out the name of the user but is also echoing of the header of my website in the mix as you can see here - Andrew at the bottom of the first set of code. That is the only thing that should be echoed out not the html that is ahead it.
<DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Better Gamerz United</title>
<link rel="icon" href="http://www.bettergamerzunited.com/favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" href="http://www.bettergamerzunited.com/favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<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 title="" class="navbar-brand " href="index.php">
<img src="img/BGU Logo.png" />
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Recrutment</li>
<li>Servers</li>
<li>Forums</li>
<li>Contact Us</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a class="navbar-link" href="login.php">Login</a></li>
<li><a class="navbar-link" class="navbar-link"class="navbar-link" href="signup.php">Register</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-->
</nav>
</header>
Andrew
What could cause my header to be included in to my response so I did went alittle deeper and ran a console.log just the var ajax. which provided me this
XMLHttpRequest {statusText: "OK", status: 200, responseURL: "http://www.bettergamerzunited.com/login.php", response: "<DOCTYPE html>↵<html>↵<head>↵ <meta charset="UTF-8…iv><!-- /.container-->↵ </nav>↵</header>↵↵ Andrew", responseType: ""…}onabort: nullonerror: nullonload: nullonloadend: nullonloadstart: nullonprogress: nullonreadystatechange: function () {ontimeout: nullreadyState: 4response: "<DOCTYPE html>↵<html>↵<head>↵ <meta charset="UTF-8">↵ <title>Better Gamerz United</title>↵ <link rel="icon" href="http://www.bettergamerzunited.com/favicon.ico" type="image/x-icon"/>↵ <link rel="shortcut icon" href="http://www.bettergamerzunited.com/favicon.ico" type="image/x-icon"/>↵ <link rel="stylesheet" href="css/bootstrap.css">↵ <link rel="stylesheet" href="css/main.css">↵</head>↵<body>↵ <header>↵ <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">↵ <div class="container">↵ <!-- Brand and toggle get grouped for better mobile display -->↵ <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 title="" class="navbar-brand " href="index.php">↵ <img src="img/BGU Logo.png" />↵ </a>↵ </div>↵↵ <!-- Collect the nav links, forms, and other content for toggling -->↵ <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">↵ <ul class="nav navbar-nav">↵ <li class="active">Home</li>↵ <li>Recrutment</li>↵ <li>Servers</li>↵ <li>Forums</li>↵ <li>Contact Us</li>↵ </ul>↵ <ul class="nav navbar-nav navbar-right">↵ <li><a class="navbar-link" href="login.php">Login</a></li>↵<li><a class="navbar-link" class="navbar-link"class="navbar-link" href="signup.php">Register</a></li>↵↵ </ul>↵ </div><!-- /.navbar-collapse -->↵ </div><!-- /.container-->↵ </nav>↵</header>↵↵ Andrew"responseText: "<DOCTYPE html>↵<html>↵<head>↵ <meta charset="UTF-8">↵ <title>Better Gamerz United</title>↵ <link rel="icon" href="http://www.bettergamerzunited.com/favicon.ico" type="image/x-icon"/>↵ <link rel="shortcut icon" href="http://www.bettergamerzunited.com/favicon.ico" type="image/x-icon"/>↵ <link rel="stylesheet" href="css/bootstrap.css">↵ <link rel="stylesheet" href="css/main.css">↵</head>↵<body>↵ <header>↵ <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">↵ <div class="container">↵ <!-- Brand and toggle get grouped for better mobile display -->↵ <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 title="" class="navbar-brand " href="index.php">↵ <img src="img/BGU Logo.png" />↵ </a>↵ </div>↵↵ <!-- Collect the nav links, forms, and other content for toggling -->↵ <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">↵ <ul class="nav navbar-nav">↵ <li class="active">Home</li>↵ <li>Recrutment</li>↵ <li>Servers</li>↵ <li>Forums</li>↵ <li>Contact Us</li>↵ </ul>↵ <ul class="nav navbar-nav navbar-right">↵ <li><a class="navbar-link" href="login.php">Login</a></li>↵<li><a class="navbar-link" class="navbar-link"class="navbar-link" href="signup.php">Register</a></li>↵↵ </ul>↵ </div><!-- /.navbar-collapse -->↵ </div><!-- /.container-->↵ </nav>↵</header>↵↵ Andrew"responseType: ""responseURL: "http://www.bettergamerzunited.com/login.php"responseXML: nullstatus: 200statusText: "OK"timeout: 0upload: XMLHttpRequestUploadwithCredentials: false__proto__: XMLHttpRequest
Which the response is my header.
What I am asking is to please view my code below and trying to help me understand why this is happening. I'm confused and I have tried everything that I can to fix it.
File WIth Problem
<?php
include 'core/init.php';
include 'includes/overall/header.php';
// If user is already logged in, header that weenis away
if($user_ok == true){
header("location: user.php?u=".$_SESSION["username"]);
exit();
}
// AJAX CALLS THIS LOGIN CODE TO EXECUTE
if(isset($_POST["e"])){
// GATHER THE POSTED DATA INTO LOCAL VARIABLES AND SANITIZE
$e = mysqli_real_escape_string($mysqli, $_POST['e']);
$p = md5($_POST['p']);
// GET USER IP ADDRESS
$ip = preg_replace('#[^0-9.]#', '', getenv('REMOTE_ADDR'));
// FORM DATA ERROR HANDLING
if($e == "" || $p == ""){
echo "login_failed";
exit();
} else {
// END FORM DATA ERROR HANDLING
$sql = "SELECT id, username, password FROM users WHERE email='$e' AND activated='1' LIMIT 1";
$query = mysqli_query($mysqli, $sql);
$row = mysqli_fetch_row($query);
$db_id = $row[0];
$db_username = $row[1];
$db_pass_str = $row[2];
if($p != $db_pass_str){
echo "login_failed";
exit();
} else {
// CREATE THEIR SESSIONS AND COOKIES
$_SESSION['userid'] = $db_id;
$_SESSION['username'] = $db_username;
$_SESSION['password'] = $db_pass_str;
setcookie("id", $db_id, strtotime( '+30 days' ), "/", "", "", TRUE);
setcookie("user", $db_username, strtotime( '+30 days' ), "/", "", "", TRUE);
setcookie("pass", $db_pass_str, strtotime( '+30 days' ), "/", "", "", TRUE);
// UPDATE THEIR "IP" AND "LASTLOGIN" FIELDS
$sql = "UPDATE users SET ip='$ip', lastlogin=now() WHERE username='$db_username' LIMIT 1";
$query = mysqli_query($mysqli, $sql);
echo $db_username;
exit();
}
}
exit();
}
?>
<script>
function emptyElement(x){
_(x).innerHTML = "";
}
function login(){
var e = _("email").value;
var p = _("password").value;
var status = _("status");
if(e == "" || p == ""){
status.innerHTML = "Fill out all of the form data";
} else {
_("loginbtn").style.display = "none";
status.innerHTML = 'please wait ...';
var ajax = ajaxObj("POST", "login.php");
ajax.onreadystatechange = function() {
if(ajaxReturn(ajax) == true) {
if(ajax.responseText == "login_failed"){
status.innerHTML = "Login unsuccessful, please try again.";
_("loginbtn").style.display = "block";
} else {
console.log(ajax.responseText); //debugging use
window.location = "user.php?u="+ajax.responseText; // This is where the header is being added. I need the word anderw here with out my header being included.
}
}
}
ajax.send("e="+e+"&p="+p);
}
}
</script>
<html>
<div class="container background">
<p class="heading-title">Log In</p>
<form id="loginform" class="form-horizontal" onsubmit="return false">
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email Address</label>
<div class="col-sm-10">
<input type="test"10 name="email" onfocus="emptyElement('status')" maxlength="88" class="form-control" id="email" value="" autocomplete="off" placeholder="Please enter your email">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" name="password" onfocus="emptyElement('status')" maxlength="16" class="form-control" id="password" value="" autocomplete="off" placeholder="Please enter your password">
<li class=""><a class="navbar-link" href="#">Forgot your password?</a></li>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 ">
<span class='pull-right text-danger' id="status"></span>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" id="loginbtn" onclick="login()" class="btn btn-primary pull-right">Log In</button><br><br>
</div>
</div>
</form>
</div>
</html>
<?php
include 'includes/overall/footer.php';
?>
This is coming from either of the following two includes at the top of your php script:
include 'core/init.php';
include 'includes/overall/header.php';
So restrict the unwanted output or file inclusion in time of an ajax call.

attaching handler to dynamic created elements..

I am trying to attach handler to dynamic created element I am doing this but it isn't work
custom1.js
$(document).ready(function(){
var kart=[];
var found=0;
$(".adTo").on("click",function(){
var name,quantity,price,temp;
name=$(this).parent().children(".name").html().toString();
price=$(this).parent().children(".price").html().toString().substring(2,this.length);
found=0;
temp=kart.length;
for(var i=0;i<kart.length;i++)
{
console.log(kart[i].name);
if((kart[i].name==name))
{
console.log("ni");
kart[i].quantity++;
$(".cartStatus").children("#"+name).children(".quantity").html("Quantity: "+kart[i].quantity);
kart.price=kart.price+parseInt(kart[i].price);
$("#totalCartA").html("Total Amount:"+kart.price);
found=1;
break;
}
}
if(found==0)
{
console.log("ni1");
kart[kart.length]={
"name":name,
"quantity":1,
"price":price
};
$("#cartStatus").append("<div id='"+name+"' class='cartItems mt8'><div class='lf'>"+(temp+1)+"</div><div class='lf mr10'>"+kart[temp].name+"</div><div id='"+name+"' class='reduction rf mr10'>Remove[x]</div><div class='clr bdr'></div><div class='lf quantity'>Quantity: "+kart[temp].quantity+"</div><div class='mr10 rf'>Price: "+kart[temp].price+"</div><div class='clr'></div></div>");
$("#totalCartP").html("Products:"+kart.length);
kart.price=kart.price+parseInt(kart[temp].price);
}
});
$(".reduction").on('click',function(){
console.log('nitin');
console.log($(this));
$(this).parent().remove();
kart.splice(temp, 1);
regenKart(1,temp);
});
function regenKart(howMany, indexFrm){
for(var i=indexFrm; i<(kart.length );i++)
{
kart[i].index=kart[i].index-howMany;
console.log('a');
}
}
});
and this is my view page...
<!DOCTYPE html>
<html>
<head>
<!--script src="/js/jquery.min.js"></script-->
<link rel="stylesheet" href="/css/ekart/style.css" type="text/css" media="all" />
</head>
<body>
<div class="container">
<div class="header">
<div class="logo">EKART</div>
<ul class="menuLinks">
<li>Home</li>
<li>About Us</li>
<li>Products</li>
<li>Services</li>
<li>Feedback</li>
<li>Contact</li>
</ul>
<div class="clr"></div>
</div>
<!--div class="welComeBar">
<div class="lf mt5">
Welcome Shopper name
</div>
<div class="rf mt5">
<a class="logout" href="javascript:void(0);">Logout</a>
</div>
<div class="clr"></div>
</div-->
<div class="seacrhBar">
<div class="mt5">
<form id="user" action="/do/ekart/userindex/searchproduct/" method="POST" enctype="multipart/form-data">
<select name="category" name="category" id="category">
<option value="">Select your category...</option-->
<?php
foreach($result as $row)
{
echo "<option value='".$row['cat_name']."'> ".$row['cat_name']." </option>";
}
?></select>
<input type="text" value="" name="product" placeholder="Enter Product Name" />
<input type="submit" value="GO" />
</form>
</div>
<div class="clr"></div>
</div>
<div class="mainBody">
<div class="itemWrapper" style= <?php $visible="";echo "'display:".$visible.";'"?> >
<?php foreach($products as $row) { ?>
<div class="itemS">
<div class="name"><?php echo $row['Pro_name'];?></div>
<div class="image"><img src="data:image/jpeg;base64,<?php echo base64_encode($row['image']);?>" alt="No photo" height="100" width='145'/> </div>
<div class="price">Rs <?php echo $row['cost'];?></div>
<a class="adTo" href="javascript:void(0);">Add To Cart</a>
</div>
<?php }?>
</div>
<div id="cartStatus" class="cartStatus">
<div class="yourCart mt8">Your Cart</div>
<div class="yourCart mt8" id="totalCart"><span id="totalCartP">Products:0</span><span class="rf" id="totalCartA">Total Amount: 0</span></div>
<div class="cartStatus1"></div>
</div>
<div class="clr"></div>
</div>
<div class="footer">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Products</li>
<li>Services</li>
<li>Feedback</li>
<li>Contact</li>
X </ul>
<div class="clr"></div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="/js/custom1.js"></script>
</body>
</html>
I am dynamically creating a division cartItems in which there is a subdivision with tag remove i want that when this tag is clicked the cartItem is automatically removed from cart list. I have assign reduction as class name to this division but found myself unable to attach this division with handler using this class name.I have also print "nitin" on console inside this handler to check weather handler is attached with remove tag or not but nothing gets printed on console.I dont know what to do now..
When using on() for dynamic elements, the syntax is
$("#cartStatus").on('click', '.reduction', function() { ...
where you pass in an element that exists at the time of binding the event, and where the second argument after the event is the selector to filter on.

Categories

Resources