I have a map inside a dynamic tab:
<div id="tabs">
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs" id="prodTabs">
<li class="active">Map_locations</li>
<li>Comments</li>
<% if shopper_signed_in? %>
<li>Add Comments</li>
<% end %>
</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane active" id="map">
<div id="map"></div>
the tabs are dynamic:
<script>
$('#tabs').on('click','.tablink,#prodTabs a',function (e) {
e.preventDefault();
var url = $(this).attr("data-url");
if (typeof url !== "undefined") {
var pane = $(this), href = this.hash;
// ajax load from data-url
$(href).load(url,function(result){
pane.tab('show');
});
} else {
$(this).tab('show');
}
});
</script>
and I'm trying to show the map fit to bounds according to the two markers I have. But one marker is showing half, and only if I zoom out the map appears correct. But I don't want the value of the zoom to be so zoomed out. Any ideas on how to fix this issue?
<script>
handler = Gmaps.build('Google');
handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
markers = handler.addMarkers(<%=raw #hash.to_json %>);
handler.bounds.extendWith(markers);
handler.fitMapToBounds();
handler.getMap().setZoom(15);
});
</script>
Related
I have a UL on my page which is acting as navigation (it works fine). I copied some jQuery code to keep the classes as they are on page reload (through location.reload()) but can't set it up as I don't know much javascript.
and my HTML code :
<!-- TABS NAVIGATION -->
<div id="tabs-nav">
<div class="row">
<div class="col-lg-12 text-center">
<ul id="myTab" class="tabs-1 ico-55 red-tabs clearfix">
<!-- TAB-1 LINK -->
<li class="tab-link current" data-tab="tab-1">
<span class="flaticon-pizza"></span>
<h5 class="h5-sm">Pizze</h5>
</li>
<!-- TAB-2 LINK -->
<li class="tab-link " data-tab="tab-2">
<span class="flaticon-burger"></span>
<h5 class="h5-sm">Panini</h5>
</li>
</ul>
</div>
</div>
</div>
<!-- END TABS NAVIGATION -->
<!-- TABS CONTENT -->
<div id="tabs-content">
<?php include_once "inc/db_connect.php"; ?>
<!-- TAB-1 CONTENT -->
<div id="tab-1" class="tab-content current">
<table class="editableTable sortable">
<!-- sql query -->
</table>
</div>
<!-- END TAB-1 CONTENT -->
<!-- TAB-2 CONTENT -->
<div id="tab-2" class="tab-content">
<div class="row">
<!-- database query -->
</div>
</div>
<!-- END TAB-2 CONTENT -->
</div>
<!-- END TABS CONTENT -->
the way I intend to use location.reload
$(document).ready(function () {
$('.editableTable').SetEditable({
onAdd: function () {
$.ajax({
type: 'POST',
url: "action.php",
dataType: "json",
data: { action: 'add' },
success: function () {
location.reload();
},
});
}
});
$('li').on('show.bs.tab', function(e) {
localStorage.setItem('activeTab', $(e.target).class('current'));
});
var activeTab = localStorage.getItem('activeTab');
if(activeTab){
$('#myTab li[href="' + activeTab + '"]').tab('show');
}
});
Saving $(e.target).class('current') won't work. There is no .class() method...
It seems you wish to use the href to open the tab... But there is no href!
So I think you should use the data-tab.
$(document).ready(function(){
console.log("Page just loaded")
$('li').on('show.bs.tab', function(e) {
localStorage.setItem('activeTab', $("li.current").data('tab')); // Change is here -- Save the data-tab value
console.log("a data-tab value was saved to localStorage")
});
var activeTab = localStorage.getItem('activeTab');
if(activeTab){
console.log("There is an activeTab value stored:" , activeTab)
// Loop all li to find the one having a data-tab == activeTab
$('#myTab li').each(function(){
if($(this).data("tab") === activeTab){
$(this).tab('show');
}
});
}
})
I need to hide or show charts depending on the selected value, but it is not working and not showing the error in console. I made the javascript code with an alert and it works, so I guess the problem is not about the "if" logic
Here is the HTML code
<div class="row">
<!-- Left col -->
<section class="col-lg-12 connectedSortable">
<!-- Custom tabs (Charts with tabs)-->
<div class="nav-tabs-custom">
<!-- Tabs within a box -->
<ul class="nav nav-tabs pull-right">
<li class="active"></li>
</ul>
<div class="tab-content no-padding">
<!-- Morris chart - Sales -->
<div class="chart tab-pane active" id="revenue-chart" style="position: relative; height: 300px;"></div>
</div>
</div>
</section>
</div>
<select class="target" id="opcion">
<option value="mes1" selected="selected">Hace 1 mes</option>
<option value="mes2">Hace 2 meses</option>
<option value="mes3">Hace 3 meses</option>
</select>
and this is the Javascript Snippet
$( ".target" ).change(function() {
if(document.getElementById('opcion').value == "mes1") {
$('.box ul.nav a').on('shown.bs.tab', function () {
area.redraw();
area2.hidden = true;
});
}
if(document.getElementById('opcion').value == "mes2") {
$('.box ul.nav a').on('shown.bs.tab', function () {
area2.redraw();
area.hidden = true;
});
}
if(document.getElementById('opcion').value == "mes3") {
alert( "Mes 3" );
}
});
any help will be appreciated
I solved it by using the chart js function called "Redraw". Thanks anyways
I have a page that looks like this:
HTML
<div class="alert alert-dismissable">
<div class="form-group text-center">
<div id="Section">
<div class="row">
<div class="col-md-12">
<input type="text" id="SearchText" class="form-control link-search" placeholder="Document Name..." style="width:20%;margin-left: 43%;" />
</div>
</div>
<div class="row">
<div class="col-md-6">
<input type="submit" value="Search" id="ButtonSearch" class="btn btn-default SearchButtons" style="float: right; margin-right: -2%;" />
</div>
<div class="col-md-6">
<input type="reset" value="Clear Search" id="ButtonClearSearch" class="btn btn-default SearchButtons" style="margin-left: -69%;" />
</div>
</div>
</div>
</div>
</div>
<div class="row" style="margin-top: 2%;">
<div class="col-md-6">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<a data-toggle="collapse" href="#edoccollapse3">Panel One</a>
</h3>
</div>
<div id="edoccollapse3" class="panel-collapse collapse">
<div class="panel-body">
<ul class="my-ul">
<li>Test Document 1</li>
<li>Test Document 2</li>
<li>Test Document 3</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<a data-toggle="collapse" href="#edoccollapse2">Panel Two</a>
</h3>
</div>
<div id="edoccollapse2" class="panel-collapse collapse">
<div class="panel-body">
<ul class="my-ul">
<li>Test Document 4</li>
<li>Test Document 5</li>
<li>Test Document 6</li>
<li>Test Document 7</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
jQuery
$(function() {
$("#SearchText").keyup(function(event) {
if (event.keyCode == 13)
search($(this).val());
});
$('#ButtonSearch').click(function() {
search($("#SearchText").val());
});
function search(keyword) {
var textboxValue = keyword.toLowerCase();
$('.panel-body').each(function() {
var exist = false;
$(this).find('.my-ul li').each(function () {
if ($(this).find('a').text().toLowerCase().indexOf(textboxValue) !== -1) {
exist = true;
}
});
if (exist === false) {
$(this).parent().removeClass('in');
} else {
$(this).parent().addClass('in');
}
});
}
// When user wants to clear search
$("#ButtonClearSearch").click(function() {
$("#SearchText").val("");
$('.panel-body').each(function() {
$(this).parent().removeClass('in');
});
$('#SearchText').blur(function () {
if ($.trim(this.value) == null) {
$(this).val($(this).attr('placeholder','Document Search'));
}
});
});
});
My Goal
I would like to display an alert if the user types in a word that doesn't match any document names, saying "No documents found that match what the user typed in". Also, currently when a user doesn't type in anything and clicks search, every panel opens. If the textbox is empty and the user tries to search.. I would like an alert to pop-up saying "No value to search". I am lost on where to put this code because the jQuery is using .each and I don't need an alert for every item that it is searching.
Example in Action
Bootply
You could add a class to your documents, like documents and then loop through each of these documents, filter by one that the html contains the search terms and check for the length of the remaining array. Something like
$('input').on('change', function(value) {
var val = $('input').val();
var array = $('.documents').filter(function(index, item) {
return item.innerHTML.indexOf(val) !== -1;
})
if(array.length == 0) {
alert("No documents found that match " + val);
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<li class="documents">doc 1</li>
<li class="documents">doc 2</li>
<li class="documents">doc 3</li>
<li class="documents">doc 4</li>
</div>
<input type="text">
Hello please try following this : https://www.bootply.com/VSh5pyBz5E
I have used console.log instead of alert in above bootply.
alert shown in below code.
Only change is in js code :
$(function() {
$("#SearchText").keyup(function(event) {
if (event.keyCode == 13)
search($(this).val());
});
$('#ButtonSearch').click(function() {
let searchVal = $("#SearchText").val();
if(!searchVal){
alert("No value to search");
return;
}
search(searchVal);
});
function search(keyword) {
var textboxValue = keyword.toLowerCase();
var exist = false;
$('.panel-body').each(function() {
$(this).find('.my-ul li').each(function () {
if ($(this).find('a').text().toLowerCase().indexOf(textboxValue) !== -1) {
exist = true;
}
});
if (exist === false) {
$(this).parent().removeClass('in');
} else {
$(this).parent().addClass('in');
}
});
if(!exist){
alert("No documents found that match what the user typed in");
}
}
// When user wants to clear search
$("#ButtonClearSearch").click(function() {
$("#SearchText").val("");
$('.panel-body').each(function() {
$(this).parent().removeClass('in');
});
$('#SearchText').blur(function () {
if ($.trim(this.value) == null) {
$(this).val($(this).attr('placeholder','Document Search'));
}
});
});
});
I am trying to show a google map on a bootstrap tab, however the map only shows correctly when the tab is clicked on the second time. On the first click, there is a lot of grey area and the map needs to resize.
I've looked at this but nothing there helps.
js:
<script type="text/javascript">
$('a[href="#sectionB"]').on('shown', function (e) {
initMap();
});
function initMap() {
var uluru = {lat: -34.031342, lng: 18.577419};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
center: uluru,
mapTypeId: 'satellite'
});
var marker = new google.maps.Marker({
position: {lat: -34.031342, lng: 18.577419},
map: map
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=MYKEYHERE&callback=initMap">
</script>
html:
<div class="col-md-12">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#sectionA">Details</a></li>
<li><a data-toggle="tab" id = "sectionb" href="#sectionB" onclick="initMap(); return false;">Location</a></li>
</ul>
<div class="tab-content">
<div id="sectionA" class="tab-pane fade in active">
<div class="col-md-8" style = "padding-top: 3%">
</div>
</div>
<div id="sectionB" class="tab-pane fade">
<div class="row">
<div class="col-md-8">
<div id ="map" style="width:400px;height:400px;">
</div>
</div>
</div>
i don't want Google SDK, i have following code..i but its show error when i use tag its working fine but i am using angularjs its show error , normal page with script in page its working fine..how to define initMap method in angular
ReferenceError: google is not defined
export default class locationComponent {
/*#ngInject*/
constructor($http, $scope, $q, socket, $document) {
this.$http = $http;
this.$scope = $scope;
this.$q = $q;
this.socket = socket;
this.$document = $document;
this.initMap();
}
initMap() {
var myLatLng = new google.maps.LatLng(parseFloat(-25.363),parseFloat(131.044)); //{lat: inputlng, lng: inputlat};
console.log('latutye');
var map = new google.maps.Map(document.getElementById('mapsss'), {
zoom: 15,
center: myLatLng,
mapTypeIds: ['roadmap', 'terrain']
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
}
}
<div class="inner-wrapper">
<section role="main" class="content-body">
<header class="page-header">
<h2> Current Location</h2>
<div class="right-wrapper pull-right">
<ol class="breadcrumbs">
<li>
<a href="/dashboard">
<i class="fa fa-home"></i>
</a>
</li>
<li><span></span></li>
<li><span>Location</span></li>
</ol>
<a class="sidebar-right-toggle" data-open="sidebar-right"><i class="fa fa-chevron-left"></i></a>
</div>
</header>
<div class="modal-backdrop fade in" id="loading_div" style="display:none;">
<div class="loader"></div>
</div>
<div class="row">
<div class="col-lg-12">
<section class="panel">
<header class="panel-heading">
<div class="panel-actions">
</div>
<h2 class="panel-title"> Current Location </h2>
</header>
<div class="panel-body">
<div class="form-group">
<div style="height: 500px;" id="mapsss" class="panel-body">
</div>
</div>
</div>
</section>
</div>
</div>
</section>
</div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR KEY&callback=initMap">
</script>
Use this in controller
$window.initMap = function () { /// }