Making an interactive textbox in bootstrap - javascript

I want to make an interactive text-box for ajax search results in my site. I want to call ajax and show the result in a text-box.
HTML code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>INIK </title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<?php
session_start();
?>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" 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="#">Brand</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 <span class="sr-only">(current)</span></li>
<?php if ( isset($_SESSION['username']))
{
?>
<li>Logout </li>
<?php
}
?>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" id="search_user" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="navbar-form navbar-right" id="search_list">
</div>
Now the css for id search_List is :
#search_list
{
/*background: #000000;*/
/*display: block;*/
/*overflow: auto;*/
position: absolute;
right: 22%;
z-index: 99;
}
The ajax which adds elements in it is:
$('#search_user').on('keyup',
function (e) {
e.preventDefault();
var search_text = $('#search_user').val();
// var text = $('#post-text').val();
// alert("hello from keyup" + search_text);
// alert(username);
$.ajax(
{
url:'search.php',
type:'POST',
dataType:"json",
data: { search_text : search_text },
success:function(data)
{
$('#search_list').text("");
$.each(data, function(i, item)
{
$('#search_list').addClass("alert alert-success");
$('#search_list').append(item.user_name + "<br>" );
// var html = '<span class="fa fa-minus delete_modal_button">delete</span> <br>';
// $('#list').append(html);
// alert();
});
},
error : function() { console.log(arguments); }
}
);
});
The z-index looks good but the width of text-box is causing issue. It does not work well on changing the width of device. Please help me to solve this.

Related

getElementById returns null even though its in HTML

Im trying to find my element in my HTML file, but it returns null even though its there.
I cant find something wrong with my code, neither in the html.
I read the other suggested threads on stackoverflow and have already wrapped it in an onload function, but it still not seem to work.
This is my JS file
window.onload = run();
function run(){
var archived = localStorage.getItem("arkiv");
console.log(archived)
var array = archived.split(",");
for(var i = 0; i < array.length; i++){
console.log(array[i])
var getUL = document.getElementById("archivedmovies")
console.log(getUL)
var li = document.createElement(li);
li.innerHTML = array[i];
getUL.appendChild(li);
}
};
This is the HTML file
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width-device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://oss.maxcdn.com/jquery.form/3.50/jquery.form.min.js"></script>
<link rel="apple-touch-icon" href="anton.jpg">
<meta name="apple-mobile-web-app-title" content="Movietime">
<link rel="stylesheet" href="css.css">
<link rel="manifest" href="manifest.js">
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192" href="anton.png">
<title>Film-appen</title>
</head>
<body>
<div id="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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="index.html">Film-appen</a>
</div>
<!-- Sidebar Menu Items - These collapse to the responsive navigation menu on small screens -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav side-nav">
<li>
Sök film
</li>
<li>
Ladda upp filer
</li>
<li>
Mina uppladdningar
</li>
<li>
Mitt filmbibliotek
</li>
<li class="container" id="userinfo">
<p><strong>Användare:</strong></p>
<p> Philip </p>
<p><strong>Favoritfilm:</strong></p>
<p id="getFavMovie"> </p>
</li>
</ul>
</div>
</nav>
</div>
<div class="container" id="archivedmovies">
<h4 class="text-center"> Arkiverade filmer </h4>
<ul id="listofmovies">
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js.js"> </script>
</body>
</html>

I believe the issue is not get getElementById returns null
but this line
var archived = localStorage.getItem("arkiv");
Could you please specify if you are really storing the value at localstorage?
Your element is found, check the result before the error (localstorage security error, specific to stackoverflow)
window.onload = run();
function run(){
console.log(document.getElementById("archivedmovies"));
var archived = localStorage.getItem("arkiv");
console.log(archived)
var array = archived.split(",");
for(var i = 0; i < array.length; i++){
console.log(array[i])
var getUL = document.getElementById("archivedmovies")
console.log(getUL)
var li = document.createElement(li);
li.innerHTML = array[i];
getUL.appendChild(li);
}
};
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width-device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://oss.maxcdn.com/jquery.form/3.50/jquery.form.min.js"></script>
<link rel="apple-touch-icon" href="anton.jpg">
<meta name="apple-mobile-web-app-title" content="Movietime">
<link rel="stylesheet" href="css.css">
<link rel="manifest" href="manifest.js">
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192" href="anton.png">
<title>Film-appen</title>
</head>
<body>
<div id="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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="index.html">Film-appen</a>
</div>
<!-- Sidebar Menu Items - These collapse to the responsive navigation menu on small screens -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav side-nav">
<li>
Sök film
</li>
<li>
Ladda upp filer
</li>
<li>
Mina uppladdningar
</li>
<li>
Mitt filmbibliotek
</li>
<li class="container" id="userinfo">
<p><strong>Användare:</strong></p>
<p> Philip </p>
<p><strong>Favoritfilm:</strong></p>
<p id="getFavMovie"> </p>
</li>
</ul>
</div>
</nav>
</div>
<div class="container" id="archivedmovies">
<h4 class="text-center"> Arkiverade filmer </h4>
<ul id="listofmovies">
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js.js"> </script>
</body>
</html>

Looks more a problem with your local storage array perhaps? If I code archived by hand the loop is run and object found....
window.onload = run();
function run(){
var archived = 'asddasdasd,asdsdasdas'
console.log(archived)
var array = archived.split(",");
for(var i = 0; i < array.length; i++){
console.log(array[i])
var getUL = document.getElementById("archivedmovies")
alert(getUL);
var li = document.createElement(li);
li.innerHTML = array[i];
getUL.appendChild(li);
}
}
http://jsfiddle.net/1hwdaL4c/3/

Navigation toggle button in bootstrap 3 not dropping down (Javascript issue?)

Upon making the screen a smaller size, my navigation toggle button is not showing the navigation menu when I click on it. I have racked my brains to solve this and think JavaScript is not active. Despite this, I still cant make it work properly.
JQuery is working and has been placed before JavaScript.
I've tried the web link to JS but this does not seem to work.
I've tried moving the JS files in my folder about and this again doesn't seem to work.
Code is below,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
.navbar-brand {font-size:180%;}
.myImage {width:100%;
height:600px;
background-size:cover;}
.background {background-color:black;}
</style>
</head>
<body>
<div class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<div class="navbar-brand"></div>
<!--Nav toggle button on mobile-->
<button class="navbar-toggle"
data-toggle="collapse"
datatarget=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home
<li class="">About
<li class="">Download
</ul>
<!--log in section-->
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="email"
placeholder="Email"
class="form-control">
</div>
<div class="form-group">
<input type="password"
placeholder="Password"
class="form-control">
</div>
<button type="button" class="btn btn-success">Log In</button>
</form>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
Thanks for your help.

You've made a typo on data-target:
<button class="navbar-toggle"
data-toggle="collapse"
datatarget=".navbar-collapse">
Instead it should be:
<button class="navbar-toggle"
data-toggle="collapse"
data-target=".navbar-collapse">

Trying to implement $http in AngularJS

I'm trying to implement simple http service in AngularJS by fetching data from an api in json format. its a blog post and i am trying to show it in my blog. The data is received in my console but is not displaying in my blog. Please help. It uses Bootstrap in the front end. Here is a screenshot.
http://imgur.com/a/8p24h
var a = angular.module('Blog', []);
a.controller('BlogControl', function($http) {
var b = this;
this.heading = 'My Angular Blog';
this.subheading = 'Made by Anurag';
this.baseurl = 'https://projectsapi.edwisor.com/api/blogs/';
$http({
method: "GET",
url: this.baseurl + "all"
})
.then(function Success(response) {
console.log(response);
this.bpost = response.data.data;
});
})
<!DOCTYPE html>
<html ng-app="Blog">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>My Angular Blog</title>
<!-- Bootstrap Core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Theme CSS -->
<link href="css/clean-blog.min.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body ng-controller="BlogControl as newBlog">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-custom navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
Menu <i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="index.html">Start Bootstrap</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 navbar-right">
<li>
Home
</li>
<li>
About
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Page Header -->
<!-- Set your background image for this header on the line below. -->
<header class="intro-header" style="background-image: url('img/home-bg.jpg')">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<div class="site-heading">
<h1>{{newBlog.heading}}</h1>
<hr class="small">
<span class="subheading">{{newBlog.subheading}}</span>
</div>
</div>
</div>
</div>
</header>
<!-- Main Content -->
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<div class="post-preview" ng-repeat="bl in newBlog.bpost">
{{bl.bodyHtml}}
</div>
<hr>
<!-- Pager -->
<ul class="pager">
<li class="next">
Older Posts →
</li>
</ul>
</div>
</div>
</div>
<hr>
<!-- jQuery -->
<script src="vendor/jquery/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- Contact Form JavaScript -->
<script src="js/jqBootstrapValidation.js"></script>
<script src="js/contact_me.js"></script>
<!-- Theme JavaScript -->
<script src="js/clean-blog.min.js"></script>
<!-- Important JavaScripts -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-route.min.js"></script>
<script src="angular/app.js" type="text/javascript"></script>
</body>
</html>

this is not the instance of the controller inside the callback. Try to capture it outside and then assign bpost on the captured instance:
var that = this;
$http({
method: "GET",
url: this.baseurl + "all"
})
.then(function Success(response) {
console.log(response);
that.bpost = response.data.data;
});

try this npm module anngularjs-requester--http

My navbar won't collapse after loading page on div through js

I'm having troubles with my navbar because somehow when I get to see the collapse button and click one of the options that appear there when i try to collapse it, it gets stuck and won't get to normal unless I refresh the page.
This is the html that works with the page
<!DOCTYPE html>
<html>
<head>
<title>Main Page</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="../css/bootstrap.css">
<link rel="stylesheet" href="../css/Style.css">
</head>
<body>
<div class="">
<header>
<nav class="navbar navbar-inverse" id="nav">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-1">
<span class="sr-only">Menu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Ans Dashboard
</div>
<div class="collapse navbar-collapse text-center" id="navbar-1">
<ul class="nav navbar-nav">
<li class="" data-target="customer_main"><span class="glyphicon glyphicon-user"></span><?php echo " Customers";?></li>
<li class="" data-target="inventorypage"><span class="glyphicon glyphicon-th-list"></span><?php echo " Inventory";?></li>
<li class="" data-target=""><span class="glyphicon glyphicon-signal"></span><?php echo " Stats";?></li>
<li class="" data-target=""><span class="glyphicon glyphicon-asterisk"></span><?php echo " Settings";?></li>
</ul>
<div class="navbar-right text-center">
<ul class="nav navbar-nav">
<form method="post" class="nav navbar-nav">
<li><p class="navbar-text"><?php echo "Welcome"?><p></li>
<li><button type="submit" name="logout" id="logout" class="btn btn-danger btn-sm navbar-btn"><span class="glyphicon glyphicon-off"></span><?php echo " Log out";?>
<?php
include("logout.php");
?>
</button></li>
</form>
</ul>
</div>
</div>
</div>
</nav>
</header>
</div>
<!-- end of navbar-->
<div id="content">
<!-- Js page loads here -->
</div>
<script src="../js/jquery-3.1.1.min.js"></script>
<script src="../js/mainpage.js"></script>
<script src="../js/bootstrap.min.js"></script>
</body>
</html>
This is the javascript that loads the pages once the navbar area is clicked (mainpage.js)
$(document).ready(function()
{
var trigger = $('#navbar-1 ul li'), container = $('#content');
trigger.on('click', function(){
var $this = $(this), target = $this.data('target');
container.load(target + '.php');
trigger.removeClass("active");
$this.addClass("active");
return false;
});
});
EDIT: Already solved the problem, it had to with the pages being loaded had some problems with the way they were structured.

I have updated your code, please check the my fiddle link appended below,
$(document).ready(function() {
var trigger = $('#navbar-1 ul li'),
container = $('#content');
trigger.on('click', function() {
var $this = $(this),
target = $this.data('target');
container.load(target + '.php');
trigger.removeClass("active");
$this.addClass("active");
return false;
});
});
fiddle
Thanks.

Change class li to active on load page (window.load)

I have a dynamic page that have a main structure and the different content loads in another page. I have a menu with active class, but it's doesn't apply because the page doesn't reload, it's a # url.
The main structure is:
<html lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>ArqOS Scheduler</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/styles.css" rel="stylesheet">
<link rel="stylesheet" href="css/responsiveslides.css">
<link rel="stylesheet" href="css/demo.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:600' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,900,500,700' rel='stylesheet' type='text/css'>
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="divHead"></div>
<div class="divBody"></div>
<div class="footerrow"> </div>
JQuery:
$(window).load( function(){
$('nav navbar-nav li a').click(function() {
$('li').removeClass();
$(this).parent().addClass('active');
});
$('.divHead').load("head.html");
$('.divBody').load("home.html");
$('.footerrow').load("foot.html");
});
function fLoadPage(page){
$('.divBody').load(page);
}
DivHead, DivBody and footerrow loads in another document, and all it's called on the main menu here (in the head.html):
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div style="width: 171px;">
<a class="navbar-brand" href="index.html">ArqOS Scheduler</a></div>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Nodes</li>
<li>Tasks</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
Nodes and tasks.html have only the main content, not the nav and the footer (this is done to avoid repeating content such as header or footer). Because the url is #, it's not reload the page, so the class active doesn't apply to the new page, how can i solve this?
This is the foot.html:
<div class="col-sm-4">
<p class="info"> Copyright 2014 © xxx</p>
</div>
<div class="col-sm-8 text-right">
<p class="info2"> Acerca de | Contacto | Encontrar trabajo | Política de privacidad </p>
</div>
Thanks.

try this
$(window).load( function(){
$(document).on("click",".navbar-nav li a" ,function() {
$('.navbar-nav li').removeClass("active");
$(this).parent().addClass("active");
return false;
});
$('.divHead').load("head.html");
$('.divBody').load("home.html");
$('.footerrow').load("foot.html");
});

I think your event doesn't gets triggered properly. Check out this post to see how you would listen to a hashchange event. Also there is a jQuery plugin that would enable this functionality.

<li>Nodes</li>
Did you mean this?

Categories