The hierarchy of the page is as follows:
<div ng-include="'partials/navbar.html'"></div>
<div ng-view></div>
<div ng-include="'partials/footer.html'" id="footer"></div>
This is the main index.html which also contains all scripts sources.
In ng-view there's another index which uses header partial:
div ng-include="'partials/header_search.html'"></div>
This header_seatch partial contains angular based input-form
<form name="searchLocation" ng-submit="search()">
<div class="input-group">
<input type="text" name="location" ng-model="location" ng-autocomplete ng-change="error = false"/>
<div class="input-group-addon">
<button type="submit">Search</button>
</div>
</div>
<span ng-if="error">No such address</span>
</form>
And here comes the issue I have - the following form does not respond when placed inside the header partial. When I copy/paste it inside the index view everything works perfectly fine. Does angular have any confusion with ng-stuff placed in partials? What should I modify to make it work inside the header partial?
Thanks in advance!
ng-include has it's own scope, which is terribly confusing. I'd recommend replacing the ng-include's with directives.
Otherwise this should work:
<form name="searchLocation" ng-submit="$parent.search()">
<div class="input-group">
<input type="text" name="location" ng-model="$parent.location" ng-autocomplete ng-change="error = false"/>
<div class="input-group-addon">
<button type="submit">Search</button>
</div>
</div>
<span ng-if="$parent.error">No such address</span>
</form>
Please note using $parent is bad practice and should be avoided.
Related
https://codepen.io/chris-arin-pine/pen/BaZmboz
Edited to show login form:
https://codepen.io/boudra/pen/YXzLBN
<head>
<title>Login Form Using HTML And CSS Only</title>
</head>
<body class="login">
<div class="container" id="container">
<div class="form-container log-in-container">
<form action="#">
<h1>Login</h1>
<div class="social-container">
<i class="fa fa-facebook fa-2x"></i>
<i class="fab fa fa-twitter fa-2x"></i>
</div>
<span>or use your account</span>
<input type="email" placeholder="Email" />
<input type="password" placeholder="Password" />
Forgot your password?
<button>Log In</button>
</form>
</div>
<div class="overlay-container">
<div class="overlay">
<div class="overlay-panel overlay-right">
<h1>HTML CSS Login Form</h1>
<p>This login form is created using pure HTML and CSS. For social icons, FontAwesome is used.</p>
</div>
</div>
</div>
</div>
Check the codepen. I have been trying to get the Login Form to cooperate with the existing CSS and they all clash.
SOLVED:
Maybe it isn't the best answer but it is working perfectly.
I created the witch page with its own IDs and then IFRAMED the login form ontop of it. Unless I get some other solutions, it's kind of what we're going with.
EDIT: I used the iframe command in HTML to call a separate page, the one containing the LOGIN modal, and positioned it on top of the WITCH Landing Page so that the CSS did not clash. It seemed no matter what else I did the CSS would clash. Whether I wasn't closing } CSS calls correctly or # using selectors or ID correctly I don't know. I am learning. Might seem basic to some but for now I will iframe.
<nav>
<div class="nav-wrapper green lighten-2">
<form>
<div class="input-field">
<input id="search" type="search" required>
<label class="label-icon" for="search"><i class="material-icons">search</i></label>
<i class="material-icons">close</i>
</div>
</form>
</div>
</nav>
Hello, I have the above materialize html from the website that initializes the visual component of a searchbar, but as of now it is not very functional. How do I make is so that when I type and search, it redirects me to a specific HTML page?
Use the Angular or React or PHP to make it dynamic,
Using only a HTML you canot make it dynamic.
So, I'm having the same issue present on this question
Bootstrap-UI Typeahead display more than one property in results list?
And, I already modified the plunker on the answer to my linking and needs
http://plnkr.co/edit/FdkvCUUD3ob7dt256Bgd?p=preview
But then, I realize they are using the 0.5 version of angular-ui, and angular 1.0.5
On my project, i'm using angular 1.4.9 and anguilar-ui 1.3.3 but somehow, my results are not showing or show as undefined
Controller
app.controller('testController', ['$scope', function ($scope) {
$scope.sites = JSON.parse("[{\"SITE_CODE\":\"CODE1\",\"SITE_NAME\":\"NAME1\",\"ADDRESS\":\"\"},{\"SITE_CODE\":\"CODE2\",\"SITE_NAME\":\"NAME2\",\"ADDRESS\":\"\"},{\"SITE_CODE\":\"CODE3\",\"SITE_NAME\":\"NAME3\",\"ADDRESS\":\"\"},{\"SITE_CODE\":\"CODE4\",\"SITE_NAME\":\"NAME4\",\"ADDRESS\":\"\"}]");
}]);
HTML
<div class="row">
<div class="col-xs-4">
<div class="typeahead">
<input type="text" class="form-control" ng-model="test" uib-typeahead="site as site.SITE_CODE for site in sites"
typeahead-no-results="noResults" typeahead-popup-template-url="siteList.html" />
</div>
</div>
</div>
<div class="row" ng-show="noResults">
<div class="col-sm-6">
<i class="glyphicon glyphicon-remove"></i> No Results Found
</div>
</div>
</div>
<script type="text/ng-template" id="siteList.html">
<div class="row">
<a tabindex="-1">
<div class="col-xs-4">
<span ng-bind-html-unsafe="match.model.SITE_CODE | typeaheadHighlight:query"></span>
</div>
<div class="col-xs-4">
<span ng-bind-html-unsafe="match.model.SITE_NAME | typeaheadHighlight:query"></span>
</div>
</a>
</div>
</script>
Any idea what am I missing?
Silly me, I just found out my issue
I was setting typeahead-popup-template-url instead of typeahead-template-url
After making this change, and adding ngSanitize to my module, everything went better than expected.
Now, I need to figure out a way to show the total of results, as I'll be only showing a fraction to the amount of results
I'm looking to create a search function in CodeIgniter.
My view file has been splitted in two parts:
Header part, that contains the search bar
<?php echo form_open('controller/live_search');?>
<div class="toolbar-icon-bg hidden-xs" id="toolbar-search">
<div class="input-group">
<span class="input-group-btn"><button class="btn" type="button"><i class="ti ti-search"></i></button></span>
<input type="text" name="search" id="search" class="form-control" placeholder="Search...">
<span class="input-group-btn"><button class="btn" type="button"><i class="ti ti-close"></i></button></span>
</div>
</div>
<?php echo form_close();?>
Body part, that contains the result of the search.
<div class="static-content-wrapper">
<div class="static-content">
<div class="page-content">
<ol class="breadcrumb">
<li class="">Home</li>
<li class="active">Search</li>
</ol>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="panel panel-white">
<div class="panel-heading">
<h2><!-- Panel --></h2>
</div>
<div class="panel-body">
<div style="clear:both;"></div>
<div id="update"><!-- search results will be added here --></div>
</div>
<div class="panel-footer">
<span class="text-gray"><em>Footer</em></span>
</div>
</div>
</div>
</div>
</div> <!-- .container-fluid -->
</div> <!-- #page-content -->
</div>
In my controller I've written the following code:
public function live_search()
{
//load page template
$this->load->view('templates/header');
$this->load->view('templates/sidebar');
$this->load->view('templates/live_search');
$this->load->view('templates/footer');
}
I would like to "activate" the "live_search" public function simply selecting the search field. Just to give you an example, you can think to the search function of Netflix. When you select the search bar, a black page is loaded automatically and start typing you see the results of your search.
So, when I select the search text field my script should load the "templates/live_search" page.
How could I do this?
Thanks for your kind support.
DOM manipulation like this isn't done in CodeIgniter on the server, its done client site in JS. You need JS to listen for the search input focus, and then either AJAX in your "live search page" (not exactly clear on what you want there), or load everything on initial page load, and then just show the "live search page" on focus of the search bar.
If you're using jQuery it might look something like this:
$('body').on("focus","#search",function(){
$('.live-search-container').show()
//or do an ajax call
});
I have two files. One is an index.html, which essentially is the frame for my website, and the other a main.html which holds the template for my homepage. I have the following code right before all my scripts are imported.
<div class="container">
<div class="well" ng-view=""></div>
<div class="footer">
<p translate="footer">Well hello there Mr. Footer</p>
</div>
</div>
All my typeahead and controllers are imported in my scripts. This defaults to pulling my main.html because of the routed controller. The issue is that when I put the following code into my index.html, the typeahead works fine, but as as soon as I move it into my main.html it stops working. All of my javascript is being ran from files, so it shouldn't be a conflict of which loads first... Thoughts?
<div ng-controller="employeeController">
<table>
<center>
<div id="the-basics">
<input type="text"
ng-model="text"
ng-change="get(text, 'name')"
class="typeahead"
id="search"
placeholder="Search Employees..."/>
</div>
<button class="btn btn-primary btn-md" ng-click="get(text, 'name')">
<span class="glyphicon glyphicon-search"></span>
</button>
</center>
</table>
</div>
Here is a somewhat similar question that was never answered:
Bootstrap Typeahead Not Registering in AngularJS ng-view
I was able to resolve this issue by putting another script import for the controllers directly into the main.html.