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.
Related
I'm building a website with phpfox and want to use intro.js to provide a guided tour of the website.
How can I do that, please?
This is for Phpfox 4.7.7 . I already tried extracting the downloaded intro.js folder to my project and adding the dependencies to the HTML code as shown on the website via AdminCp/themes/material/Edit/html
The bottom of the HTML code looked like this after linking the JavaScript:
</footer>
{{ js }}
<div class="nav-mask-modal"></div>
<script type="text/javascript" src="intro.js"></script>
</body>
</html>
I also created a button via AdminCp/Blocks/add block and input the below code in the php/html edit box:
<a class="btn btn-large btn-primary" href="javascript:introJs().setOption('showProgress',true).start;">Get a demo tour</a>
and finally, I added the below to an element in the HTML:
<div id="section-header" data-step="1" data-intro="Welcome">
<div class="sticky-bar">
<div class="container sticky-bar-inner h-6 {% if setting('user.hide_main_menu') == true %}setting-hide-menu{% endif %}">
<div class="mr-2 site-logo-block">
{{ logo }}
</div>
...
</div> <!-- Added by edit! -->
</div> <!-- Added by edit! -->
</div> <!-- Added by edit! -->
I expected a guided tour to start after clicking the button, but instead was redirected to a page with the message
Page not found
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 need some help over here, I'm trying to load 'NgMap' module, to render a Google Map in my application builded with Ionic Framework. I get the right response in my browser, without any error in my developer console, but when I emulate the App in Android or going to Ionic View with my iPhone, i get a blank screen. I don't know what I am doing wrong, i'll appreciate any help. Here is my code:
index.html:
<script src="//maps.google.com/maps/api/js"></script>
<script src="//rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.min.js"></script>
app.js:
angular.module('starter', ['ionic', 'ui.router', 'starter.controllers', 'ngMap'])
map.html:
<ion-view view-title="Get Directions">
<ion-content data-tap-disabled="true">
<div class="row nomargin">
<div class="col text-center">
<h4>7810 NW 98th Street </br> Miami Lakes, FL 33016</h4>
</div>
</div>
<div class="row nomargin">
<div class="col">
<button class="button button-block map-button">
<h4>Open in Maps</h4>
</button>
</div>
</div>
<div class="row nomargin nopadding">
<div class="col nomargin nopadding">
<map class="map-height" center="25.862359, -80.324403" zoom="13">
<marker position="[25.862359, -80.324403]" />
</map>
</div>
</div>
</ion-content>
As I said, I'm not getting any error in my browser and the map render properly, but in the emulator or Ionic View, appears a white screen. Thanks in advance.
PD: Sorry for my awful english
I had similar issue. I installed GapDebug in my case the error was that the App running in 'Android emulator' could not find the two external libraries used for 'ngMap':
<script src="//maps.google.com/maps/api/js"></script>
<script src="//rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.min.js"></script>
Screenshot of the error caught by using GapDebug:
I had to change the tags to include "https(http can also work)" to make it work:
<script src="https://maps.google.com/maps/api/js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.min.js"></script>
Changing these links also fixed the "Ionic View- Blank page" issue.
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.