Meteor: Bootstrap Modal breaks when handlebars values change -


i'm making modal handle payments, , want use handlebars helpers form validation.

here's html:

<div class="modal fade" id="paymentmodal" tabindex="-1" role="dialog" aria-labelledby="paymentmodallabel" aria-hidden="true">     <div class="modal-dialog">         <div class="modal-content">             <div class="modal-body">                 <form id="paymentmodalform" class="form-horizontal">                     ...                     <div class="form-group">                         <div class="col-xs-offset-3 col-xs-9">                             <!-- session helper go-between session -->                             <button {{session 'paymentforminputsvalid'}} type="submit" class="btn btn-primary">                                 make payment                             </button>                         </div>                     </div>                     ...                 </form>             </div>         </div>     </div> </div>

here's backing js:

template.paymentmodal.events({     'keyup .paymentforminput': function(e, t) {         var valid = t.findall('.paymentforminput').every(function(item) {             return !!item.value.trim();         });         session.set('paymentforminputsvalid', valid ? '': 'disabled');     } });

paymentforminputsvalid set correctly, when keyup event happens, modal disappears, , black .modal-backdrop remains , doesn't allow changes. locks user out , page has refreshed.

also, had button more semantic handlebars, this:

<button {{#unless session 'paymentforminputsvalid'}}disabled{{/unless}}     type="submit" class="btn btn-primary">     make payment </button>

but broke submit button, , made display this:

enter image description here

very broken.

how can modals play nice handlebars? should go different strategy form?

thanks in advance!

update

i have solution cobbled together. template being inserted modal:

<template name="paymentmodalbutton">     <button type="submit" class="btn btn-primary" {{paymentforminputsvalid}}>         make payment     </button> </template>  <!-- in appropriate place --> <div class="form-group">     <div class="col-xs-offset-3 col-xs-9">         {{> paymentmodalbutton}}     </div> </div>

but, still can't handle handlebars {{#if}} blocks, such 1 wanted use: 

{{#unless session 'paymentforminputsvalid'}}disabled{{/unless}}

this still breaks button rendering. easier , more semantic have behavior, if can figure out delightful.

update

i dug elements, , here's button looks like.

<button <!--data:8trm3tvlatwn9qaw9--=""> type="submit" class="btn btn-primary"&gt;     make payment </button>

frankly can't make sense of , why it's breaking. it's being generated this, valid , works in other contexts:

<button {{#unless session 'paymentforminputsvalid'}}disabled{{/unless}} type="submit" class="btn btn-primary">     make payment </button>

thanks!

<div class="modal fade" id="paymentmodal" tabindex="-1" role="dialog" aria-labelledby="paymentmodallabel" aria-hidden="true">     <div class="modal-dialog">         <div class="modal-content">             <div class="modal-body">                  {{> someothertemplate}}

it's hack until new blaze ui comes out.

the reason fails because template changed, entire template redrawn, twitter bootstrap code not applied.


Comments

Post a Comment

Popular posts from this blog

Android layout hidden on keyboard show -

i have strange problem layout. when tap on edittext , keyboard shown edittext stay on bottom , when tap on to hide keyboard , keyboard hides , edittext go should when want input text. when tap again, keyboard shown , edittext goes down behind keyboard... <relativelayout android:layout_width="match_parent" android:layout_height="match_parent" > <scrollview android:layout_width="match_parent" android:layout_height="fill_parent" android:above="@+id/rl_commands"> <textview android:layout_width="match_parent" android:layout_height="wrap_content"/> </scrollview> <relativelayout android:layout_width="match_parent android:layout_height="24dp" android:id="@+id/rl_commands" android:alignparentbottom="true"> ...
Read more

google app engine - 403 Forbidden POST - Flask WTForms -

i have flask application running on google app engine. trying submit form built using wtform , keep getting following error. 403 forbidden: don't have permission access requested resource. either read-protected or not readable server. location.html (part of code) <form method=post action="/home/location"> .... <button type="submit" class="btn btn-primary" value="submit"> directions </button> </form> main.py @app.route('/home/location', methods=['post', 'get']) def location(): form = cfcdirections.direction(request.form) print(request.method) if request.method == 'post' , form.validate(): print("after if") directions = cfcdirections() street_no = directions.no street = directions.street suburb = directions.suburb postcode = directions.postcode ...
Read more

git - Possible to change Gitlab repository creation schema? -

my gitlab repos path set : data/git/repositories if user called superman creates new project gitlab automatically setup git repos path : data/git/repositories/superman/projectname does know can configure ? don't want have owners name in repos path. if want user's name in repository's path, set group project, , work against group's repository/ies. repositories lay in: /path/repositories/projectgroup/projectname thoug, gitlab somehow works github, each user has own personal repositories, can sync development branches , make merge requests group's repositories sets of commits, it's easier track modifications' ownership through forks. have @ tutorial such one how create , use it.
Read more