I have a Price Range button that when clicked will open a popover. In that popover, there are two input boxes. A Min Rent box and a Max Rent box. Once values are entered in that box I would like the Price Range box to now display the values that were previously entered. Something like $2000 to $2500. I have looked and looked on Google and other StackOverflow questions and answers, but I am not sure how to accomplish this. Any help would be greatly appreciated!
Erb File:
<div class="col-md-2 col-xs-6">
<a tabindex="0" class="button btn-transparent" id="listing-price-selector" role="button" data-toggle="popover">Price Range <span class="caret"></span></a>
</div>
<div id="listing-price-content" style="display: none;">
<div class="container-fluid">
<div class="row">
<div class="col-xs-6">
<div class="input-group input-group-sm">
<span class="input-group-addon" id="basic-addon1">$</span>
<%= f.text_field :min_price, class: "form-control", placeholder: "Min Rent", data: { "binding-name" => "min-price" } %>
</div>
</div>
<div class="col-xs-6">
<div class="input-group input-group-sm">
<span class="input-group-addon" id="basic-addon1">$</span>
<%= f.text_field :max_price, class: "form-control", placeholder: "Max Rent", data: { "binding-name" => "max-price" } %>
</div>
</div>
</div>
</div>
</div>
JS File:
$('#listing-price-selector').popover( {
html: true,
trigger: 'manual',
placement: 'bottom',
template: '<div class="popover price-range-pop" role="tooltip"><div class="arrow"></div><div class="popover-content"></div></div>',
content: function() {
return $('#listing-price-content').html();
}
});
I think what you need is to trigger a function from a change event (keyup) on either of the inputs inside the popover.
The tricky thing here, at least to me, is that the content of the popover is dynamically generated, so trying to assign an event handler for those elements at page load won't work.
What does work is to assign the event handler once those elements have been generated.
There are events that are fired for the popover itself that you can assign a handler on, and that will get you where you need.
$("[data-toggle='popover']").on('shown.bs.popover', function(){
$("#listing-price-selector").next().find("#min-price").keyup(modPrice);
$("#listing-price-selector").next().find("#max-price").keyup(modPrice);
});
and then modPrice can be a function to fix the value of the price range box. Something like:
function modPrice(){
var mn = $("#listing-price-selector").next().find("#min-price").val();
var mx = $("#listing-price-selector").next().find("#max-price").val();
mn = (mn == "") ? 0 : mn;
mx = (mx == "") ? 0 : mx;
$("#listing-price-selector").text(mn + " to " + mx);
}
In there you can do a lot more processing, such as making sure max is over min, or whatever you like.
Hope this helps!
PS - got the popover events from W3Schools ref page: http://www.w3schools.com/bootstrap/bootstrap_ref_js_popover.asp
PPS - and for fun, I made a snippet example, here it is:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-2 col-xs-6">
<a tabindex="0" class="button btn-transparent" id="listing-price-selector" role="button" data-toggle="popover">Price Range <span class="caret"></span></a>
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon" id="basic-addon1">$</span>
<input type="text" id="priceBox" />
</div>
<div id="listing-price-content" style="display: none;">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div class="input-group input-group-sm">
<label>Min</label>
<span class="input-group-addon" id="basic-addon1">$</span>
<input type="text" id="min-price" />
</div>
</div>
<div class="col-xs-12">
<div class="input-group input-group-sm">
<label>Max</label>
<span class="input-group-addon" id="basic-addon1">$</span>
<input type="text" id="max-price" />
</div>
</div>
</div>
</div>
</div>
<script>
$('#listing-price-selector').popover( {
html: true,
trigger: 'click',
placement: 'bottom',
template: '<div class="popover price-range-pop" role="tooltip"><div class="arrow"></div><div class="popover-content"></div></div>',
content: function() {
return $('#listing-price-content').html();
}
});
$("[data-toggle='popover']").on('shown.bs.popover', function(){
$("#listing-price-selector").next().find("#min-price").keyup(modPrice);
$("#listing-price-selector").next().find("#max-price").keyup(modPrice);
});
$("[data-toggle='popover']").on('hide.bs.popover', function(){
modPrice();
});
function modPrice(){
var mn = $("#listing-price-selector").next().find("#min-price").val();
var mx = $("#listing-price-selector").next().find("#max-price").val();
mn = (mn == "") ? 0 : mn;
mx = (mx == "") ? 0 : mx;
$("#priceBox").val(mn + " to " + mx);
$("#listing-price-selector").text(mn + " to " + mx);
}
</script>
Related
I'm trying to make live search with Jquery with the data from API, but i have some problem:
The suggestion still appear even the search box si empty
When i bluring the search box the suggestion search still appear
I can't submit the form with pressing the enter button, i must click the button on the from
$(document).ready(function() {
let api = "https://corona.lmao.ninja/v2/countries/";
$("#search").keyup( function() {
$("#result").html('');
let searchField = $("#search").val();
let expression = new RegExp( searchField, "i" );
$.getJSON( api, function( data ) {
$.each( data, function( key, value ) {
if( value.country.search(expression) != -1 /*|| value.continent.search(expression) */ )
{
$("#result").append(`<li class="list-group-item c">${value.country} <img src="${value.countryInfo.flag}" class="img-thumbnail"></li>`)
}
} );
} );
} );
$("#result").on("click", "li", function() {
$("#search").val($(this).text());
$("#result").html('');
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row py-4">
<div class="search__wrapper col-12 text-center text-center">
<form id="covidSearch">
<i class="fw-bolder text-center fs-6 font-monospace">API by <a target="_blank" class="link-dark" href="https://corona.lmao.ninja/v2/countries/">disease.sh</a></i>
<h4>Search by Country</h4>
<input type="text" name="search" id="search" placeholder="Country Name" class="text-muted fs-6">
<button type="submit" class="fw-bold text-white">Search</button> <br>
<!-- LOADING ANIMATION WILL BE HERE -->
</form>
<!-- LIVE SEARCH SUGGESTION -->
<ul class="list-group text-center fw-bolder suggestionSearch" id="result"></ul>
</div>
</div>
I am using Magnific Pop up on a project, currently I have it on a ASP MVC project as a Modal:
Modal
div id="js_DeleteNewSongsPopup" class="theme-primary ajax-form popup-basic admin-form mfp-with-anim modalPopup">
<div class="panel">
<div class="panel-heading">
<span class="panel-title">
<i class="fa fa-ban "></i>Reject Selected Song
</span>
</div>
#* Information Body *#
<div class="panel-body p25">
<div class="section row">
<div class="col-md-12 text-center">
<h3>
Are you sure you want to <b class="text-danger">reject</b> the selected Songs?
</h3>
<p>
Please note, these will be <b class="text-danger">deleted</b> and no longer accessable
</p>
</div>
</div>
</div>
#* Form Body *#
<div class="panel-footer">
<div class="text-center">
<fieldset>
<input type="button" class="btn btn-primary js_CancelForm" value="Cancel" data-bind="click: function(){ $.magnificPopup.close(); }">
<input type="button" class="btn btn-danger js_DeleteNewSongsButton" value="Delete" data-bind="click: $root.submitDeleteNewSongs">
</fieldset>
</div>
</div>
</div>
<button title="Close (Esc)" type="button" class="mfp-close">×</button>
JavaScript
/* Delete New Songs Popup*/
$(document).on("click",
".js_DeleteNewSongs",
function (e) {
e.preventDefault();
var popup = $("#js_DeleteNewSongsPopup");
$.magnificPopup.open({
removalDelay: 500, //delay removal by X to allow out-animation,
items: {
src: $(popup)
},
callbacks: {
beforeOpen: function (e) {
this.st.mainClass = 'mfp-slideUp';
},
close: function () {
}
},
midClick: true
// allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
});
return false;
});
Any ideas as there is no console errors being reported. I am also unsure why it is working on another page, when the mark-up is identical
Try:
$('body').removeClass('panel-body p25');
Or
$('body').removeClass('theme-primary ajax-form popup-basic admin-form mfp-with-anim modalPopup');
Basically you need to remove the "modal" class.
Ended up using:
$('.js_CancelForm').on("click", function () {
$.magnificPopup.close();
});
Now the Popup closes as expected.
I'm trying to develop a Load-More button using Javascript calling an API done with PHP.
So far, so good. I can load the new objects in a range i += i + 4 (I load three new comments everytime I press the button).
This is my load-more button:
$(document).ready(function () {
$(".load-more").on('click', function () {
var tab = $(this).data('tab');
var next_page = $(this).data('next-page');
console.log(next_page);
console.log(tab);
$.get($(this).data('url') + '?tab=' + tab + '&page=' + next_page, function (data) {
addNewQuestions($.parseJSON(data));
});
});
});
And for every object loaded I want to print each of these html blocks.
<div class="question-summary narrow">
<div class="col-md-12">
<div class="votes">
<div class="mini-counts"><span title="7 votes">
{if $question['votes_count']}
{$question['votes_count']}
{else}
0
{/if}
</span></div>
<div>votes</div>
</div>
<div {if $question['solved_date']}
class="status answered-accepted"
{else}
class="status answer-selected"
{/if}
title="one of the answers was accepted as the correct answer">
<div class="mini-counts"><span title="1 answer">{$question['answers_count']}</span></div>
<div>answer</div>
</div>
<div class="views">
<div class="mini-counts"><span title="140 views">{$question['views_counter']}</span></div>
<div>views</div>
</div>
<div class="summary">
<h3>
<a href="{questionUrl($question['publicationid'])}" class="question-title" style="font-size: 15px; line-height: 1.4; margin-bottom: .5em;">
{$question['title']}
</a>
</h3>
</div>
<div class = "statistics col-sm-12 text-right" style="padding-top: 8px">
<span>
<i class = "glyphicon glyphicon-time"></i>
<span class="question-updated-at">{$question['creation_date']}</span>
</span>
<span>
<i class = "glyphicon glyphicon-comment"></i>
<span class="question-answers">{$question['answers_count']}</span>
</span>
</div>
</div>
</div>
The problem is that I have several conditions, as {if$question['votes_count']} and I'm struggling because I don't know how get those variables when rendering the html.
Then I found something but I can't figure out how to adapt to my case
On that addNewQuestions I think that a good approach would be:
function addNewQuestions(objects) {
$.each(objects, function (i, object) {
console.log(object);
var lastItem = $('div.active[role="tabpanel"] .question-line:last');
var newLine = lastItem.clone(true);
var newObject = newLine.find('.question-col:eq(' + i + ')');
newObject.find('.question-info-container').attr('data-id', object.publicationid);
newObject.find('.vote-count').html(object.votes);
updateTitleAndLink(newObject.find('.question-title'), object);
lastItem.after(newLine);
});
}
function updateTitleAndLink(questionTitle, object) {
questionTitle.attr('href', questionTitle.data('base-question-url') + object.publicationid);
questionTitle.html(object.title);
}
But nothing happens and I can't figure out why.
Any idea or suggestion?
Kind regards
I'm currently building a nifty little 'talent point distributor' view, similar to what popular RPG games offer. I didn't want a huge wall of HTML code for all the buttons and textboxes, so I created a template to which I pass two parameters:
the name of the stat I want to alter
the initial value of the stat
The template renders correctly, and I notice that when I log the results to the console, the variable seems to be changed correctly. However, the displayed value does not change and will always stay at 0.
Here is the template itself:
<template name="attributeStepper">
<div class="row" style="margin: 1em;">
<div class="col-sm-3 col-md-2">
<h4>{{toUpper attribute}}</h4>
</div>
<div class="col-sm-6 col-md-4">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default btn-value-dec">
<span class="glyphicon glyphicon-chevron-down"></span>
</button>
<button type="button" class="btn btn-default disabled">{{attributeValue}}</button>
<button type="button" class="btn btn-default btn-value-inc">
<span class="glyphicon glyphicon-chevron-up"></span>
</button>
</div>
</div>
</div>
</template>
Here is the helper I defined for the template:
Template.attributeStepper.helpers({
toUpper : function(str) {
return str.substring(0, 1).toUpperCase() + str.substring(1);
}
})
Template.attributeStepper.events({
'click .btn-value-inc' : function(event, tmpl) {
tmpl.data.attributeValue ++;
},
'click .btn-value-dec' : function(event, tmpl) {
tmpl.data.attributeValue --;
}
});
And this is how I call the templates from the actual view:
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Attributes</h3>
</div>
{{ >attributeStepper attribute="strength" attributeValue="0"}}
{{ >attributeStepper attribute="courage" attributeValue="0"}}
{{ >attributeStepper attribute="intelligence" attributeValue="0"}}
{{ >attributeStepper attribute="agility" attributeValue="0"}}
{{ >attributeStepper attribute="dexterity" attributeValue="0"}}
{{ >attributeStepper attribute="intuition" attributeValue="0"}}
{{ >attributeStepper attribute="charisma" attributeValue="0"}}
</div>
I hope you can make any sense out of this and tell me what I'm doing wrong, because I feel like I'm not following the mindset behind Meteor correctly yet.
Cheers!
There is nothing wrong but also nothing reactive in your code. For the attributeValue you should use a template based ReactiveVar which is created at the onCreate Event
Template.attributeStepper.onCreated(function() {
if (! _.isUndefined(this.data.startingValue))
this.attributeValue = new ReactiveVar(Number(this.data.startingValue));
else
this.attributeValue = new ReactiveVar(0);
})
You can use some initialValue from Template as you like
See complete example at the MeteorPad I created for you.
http://meteorpad.com/pad/Zw7YnnW57uuGKcu3Q/MultipleTemplateUsage
This should solve your question
Cheers
Tom
Do you have idea about reactive-var in meteor (Meteor Doc) or you can also use Session instead of reactive-var (ReactiveVar is similar to a Session variable)
Have a look at changes as per your code.
Here is the template(.html)
<template name="attributeStepper">
<div class="row" style="margin: 1em;">
<div class="col-sm-3 col-md-2">
<h4>{{toUpper attribute}}</h4>
</div>
<div class="col-sm-6 col-md-4">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default btn-value-dec">
<span class="glyphicon glyphicon-chevron-down"></span>
</button>
<button type="button" class="btn btn-default disabled">{{getAttributeValue}}</button>
<button type="button" class="btn btn-default btn-value-inc">
<span class="glyphicon glyphicon-chevron-up"></span>
</button>
</div>
</div>
</div>
</template>
Here is helpers for your template(.js)
Template.attributeStepper.created = function(){
this.attributeValue = new ReactiveVar(parseInt(this.data.attributeValue));
}
Template.attributeStepper.helpers({
toUpper : function(str) {
return str.substring(0, 1).toUpperCase() + str.substring(1);
},
getAttributeValue : function(){
return Template.instance().attributeValue.get();
}
});
Template.attributeStepper.events({
'click .btn-value-inc' : function(event, tmpl) {
tmpl.attributeValue.set(tmpl.attributeValue.get()+1)
},
'click .btn-value-dec' : function(event, tmpl) {
tmpl.attributeValue.set(tmpl.attributeValue.get()-1)
}
});
Template.attributeStepper.created = function(){...} method called before your template's logic is evaluated for the first time.
I'm trying to update an ng-model when a radio button is checked. Although my radio buttons are actually images and my radio buttons are being updated by a function using arrows to cycle through them.
For some reason my $scope.transaction only updates when I actually click the image rather than changing the image using the arrows. Any idea why?
HTML
<div ng-repeat="contact in contacts"
ng-show="showContactID == {{contact.contact_id}}">
<div class="radio text-center">
<label>
<input type="radio"
value="{{contact.contact_id}}"
ng-checked="showContactID == {{contact.contact_id}}"
ng-model="transaction.contact_id">
<img src="public/img/profiles/{{contact.contact_id}}.jpg"
class="img-circle"
height="150">
<h4>{{contact.contact_name}}</h4>
</label>
</div>
</div>
<div class="row text-center">
<div class="col-xs-6">
<a class="btn"
ng-click="changeContact('prev')">
<i class="fa fa-chevron-left fa-2x"></i></a>
</div>
<div class="col-xs-6">
<a class="btn"
ng-click="changeContact('next')">
<i class="fa fa-chevron-right fa-2x"></i></a>
</div>
</div>
CSS
.transaction .form-group.contacts input {
display: none;
}
.transaction .form-group.contacts .radio {
padding-left: 0;
}
JavaScript
$scope.changeContact = function(which){
var currentContactID = $scope.showContactID;
var newContactID = 0;
if(which){
angular.forEach($scope.contacts, function(contact, key){
if(contact.contact_id == currentContactID){
if($scope.contacts[which == 'next' ? key + 1 : key - 1] == undefined){
newContactID = $scope.contacts[which == 'next' ? 0 : $scope.contacts.length - 1].contact_id;
}
else{
newContactID = $scope.contacts[which == 'next' ? key + 1 : key - 1].contact_id;
}
}
});
$scope.showContactID = newContactID;
}
};
Whenever you calls changeContact function , also update transaction.contact_id value with newContactID in same function.