I have just inherited a project that uses the three frameworks mentioned above. Here's a snippet of my template:
<div class="content-header">
<div class="content-header-title">move money to</div>
<div class="content-header-controls">
<dl>
<dd>
<a id="aMoveMoneyCancel">back</a>
</dd>
</dl>
</div>
</div>
<div class="content-edge">
<ul class="triangle-breadcrumb margin-bottom">
<li class="active"><a>DETAILS</a></li>
<li><a>REVIEW</a></li>
<li><a>DONE</a></li>
</ul>
<div class="content-section">
<div class="content-section-header">
<div class="section-title">
move money to...
</div>
</div>
<div class="content-section-body padding">
<form id="moveMoneyToForm">
<input type="hidden" name="moveMoneyToPayeeDocument.FromAccount"
value="{{moveMoneyToPayeeDocument.FromAccount}}" class="required"/>
<div class="accounts">
<div class="planted-stop"> </div>
<div class="sub-section major from-account">
<div class="sub-section-account-header">from account</div>
<div class="sub-section-account-body">
<div id="fromCarouselContainer" class="from-account">
<!--carousel slide generated dynamically-->
<!--moveMoneyTo.accountsCarousel.template-->
</div>
</div>
</div>
<!--<input type="hidden" name="moveMoneyToPayeeDocument.ToAccount" value="{{moveMoneyToPayeeDocument.ToAccount}}" />-->
<div id="toAccountContainer" class="to-account">
{{#if isIrdPayment}}
{{> app_templates_irdPayment.carouselDetail.template}}
{{else}}
{{> app_templates_moveMoneyTo.toAccount.template}}
{{/if}}
</div>
<div class="planted-stop"> </div>
<span class="stretch"></span>
</div>
<div class="sub-sections-container">
<div class="sub-sections-shield"></div>
{{#if isIrdPayment}}
{{> app_templates_irdPayment.amountDescription.template}}
{{else}}
{{#with moveMoneyToPayeeDocument}}
<div class="sub-section major">
<div class="sub-section-header">AMOUNT</div>
<div class="sub-section-body">
<input id="amount" name="moveMoneyToPayeeDocument.Amount"
type="text" step="0.01"
placeholder="Amount" value="{{unformatCurrency Amount}}"
class="required number amount-input"/>
</div>
</div>
<div class="sub-section major">
<div class="sub-section-header">Description</div>
<div class="sub-section-body" id="divDescriptionContainer">
{{> app_templates_moveMoneyTo.description.template}}
</div>
</div>
{{/with}}
{{/if}}
{{#with moveMoneyToPayeeDocument}}
<div class="sub-section major">
<div class="scheduling">
<div class="sub-section-header">SCHEDULING</div>
<div class="sub-section-body">
<div class="transfer-date">
<div id="divTransferDate"
class="input-section move-money-to-recurring-section {{#if isRecurring}} collapse {{else}} in collapse {{/if}}"
{{#unless isRecurring}} style="height: auto;" {{/unless}}>
<div>
<label for="date">Transfer date</label>
<input id="date" class="date-input" type="text" placeholder="Date"
min="{{today this}}"
data-date-min="{{today this}}"
value="{{formatDate TransferDate 'input'}}"/>
</div>
</div>
<div class="input-section last">
<div>
<label class="checkbox">
<input id="recurringTransaction" type="checkbox"
data-target=".move-money-to-recurring-section" data-toggle="collapse"
{{#if isRecurring}} checked="checked" {{/if}}
> Recurring transaction
</label>
</div>
</div>
<div id="divSchedulingDetails" class="move-money-to-recurring-section {{#if isRecurring}} in collapse {{else}} collapse {{/if}} ">
{{#with ScheduleDetails}}
<div id="recurringSection">
{{> app_templates_moveMoneyTo.scheduling.template }}
</div>
{{/with}}
</div>
</div>
</div>
</div>
<div class="buttons-container">
<button id="next" class="btn btn-item btn-primary" disabled="disabled">NEXT</button>
<button id="cancel" class="btn btn-item btn-dark">BACK</button>
</div>
{{/with}}
</div>
</form>
</div>
</div>
</div>
In Chrome this was not working properly, only in Chrome. For some reason the URL it navigated to had a whole bunch of query parameters inserted in the middle. I assume that stuffed up the routing because it went to the view it was supposed to render, but then came back and re-rendered this form again! This is only in Chrome, I couldn't reproduce it in FF or IE9 (haven't tried other versions).
Having gone back through revision history I discovered this form used to look like this:
<div class="content-header">
<div class="content-header-title">move money to</div>
<div class="content-header-controls">
<dl>
<dd>
<a id="aMoveMoneyCancel">back</a>
</dd>
</dl>
</div>
</div>
<div class="content-edge">
<ul class="triangle-breadcrumb margin-bottom">
<li class="active"><a>DETAILS</a></li>
<li><a>REVIEW</a></li>
<li><a>DONE</a></li>
</ul>
<div class="content-section">
<div class="content-section-header">
<div class="section-title">
move money to...
</div>
</div>
<div class="content-section-body padding">
<form id="moveMoneyToForm">
<input type="hidden" name="moveMoneyToPayeeDocument.FromAccount"
value="{{moveMoneyToPayeeDocument.FromAccount}}" class="required"/>
<div class="accounts">
<div class="planted-stop"> </div>
<div class="sub-section major from-account">
<div class="sub-section-account-header">from account</div>
<div class="sub-section-account-body">
<div id="fromCarouselContainer" class="from-account">
<!--carousel slide generated dynamically-->
<!--moveMoneyTo.accountsCarousel.template-->
</div>
</div>
</div>
<!--<input type="hidden" name="moveMoneyToPayeeDocument.ToAccount" value="{{moveMoneyToPayeeDocument.ToAccount}}" />-->
<div id="toAccountContainer" class="to-account">
{{#if isIrdPayment}}
{{> app_templates_irdPayment.carouselDetail.template}}
{{else}}
{{> app_templates_moveMoneyTo.toAccount.template}}
{{/if}}
</div>
<div class="planted-stop"> </div>
<span class="stretch"></span>
</div>
<div class="sub-sections-container">
<div class="sub-sections-shield"></div>
{{#if isIrdPayment}}
{{> app_templates_irdPayment.amountDescription.template}}
{{else}}
{{#with moveMoneyToPayeeDocument}}
<div class="sub-section major">
<div class="sub-section-header">AMOUNT</div>
<div class="sub-section-body">
<input id="amount" name="moveMoneyToPayeeDocument.Amount"
type="text" step="0.01"
placeholder="Amount" value="{{unformatCurrency Amount}}"
class="required number amount-input"/>
</div>
</div>
<div class="sub-section major">
<div class="sub-section-header">Description</div>
<div class="sub-section-body" id="divDescriptionContainer">
{{> app_templates_moveMoneyTo.description.template}}
</div>
</div>
{{/with}}
{{/if}}
{{#with moveMoneyToPayeeDocument}}
<div class="sub-section major">
<div class="sub-section-header">SCHEDULING</div>
<div class="sub-section-body">
<div class="transfer-date">
<div id="divTransferDate"
class="input-section move-money-to-recurring-section {{#if isRecurring}} collapse {{else}} in collapse {{/if}}"
{{#unless isRecurring}} style="height: auto;" {{/unless}}>
<div>
<label for="date">Transfer date</label>
<input id="date" class="date-input" type="text" placeholder="Date"
min="{{today this}}"
data-date-min="{{today this}}"
value="{{formatDate TransferDate 'input'}}"/>
</div>
</div>
<div class="input-section last">
<div>
<label class="checkbox">
<input id="recurringTransaction" type="checkbox"
data-target=".move-money-to-recurring-section" data-toggle="collapse"
{{#if isRecurring}} checked="checked" {{/if}}
> Recurring transaction
</label>
</div>
</div>
<div id="divSchedulingDetails" class="move-money-to-recurring-section {{#if isRecurring}} in collapse {{else}} collapse {{/if}} ">
{{#with ScheduleDetails}}
<div id="recurringSection">
{{> app_templates_moveMoneyTo.scheduling.template }}
</div>
{{/with}}
</div>
</div>
</div>
{{/with}}
</div>
</form>
</div>
<div class="buttons-container">
<button id="next" class="btn btn-item btn-primary" disabled="disabled">NEXT</button>
<button id="cancel" class="btn btn-item btn-dark">BACK</button>
</div>
</div>
</div>
The difference being the location of the buttons were located outside the form and {{with}} blocks. The Backbone view has
'click #next': 'onNext'
I assume this is the click event handler binding? It seems to be bound by id, which I understand means it should not matter where the button lives. Unless... one of the bootstrap classes has specific meaning, and acts as a form submit?
I am new to the Backbone/Handlebars/Bootstrap combo, so I hope I have explained myself reasonably well.
The buttons are inside the form element, quick guess is they are submitting the form!
Add button type as follows :
<button type='button'>
Reference :
https://stackoverflow.com/a/9315482/566092
Related
I'm a beginner and Just started learning Javascript, but this is the problem that I can't solve, and here is my code:
add = document.getElementById("add");
add.addEventListener("click", () => {
console.log("Please wait a while...Updating List...")
tit = document.getElementById('title').value;
des = document.getElementById('descreption').value;
if (localStorage.getItem('name') == null) {
itemJsonArray = []
itemJsonArray.push([tit, des])
localStorage.setItem('name', JSON.stringify(itemJsonArray))
}
else {
itemJsonArrayStr = localStorage.getItem('name')
itemJsonArray = JSON.parse(itemJsonArrayStr)
itemJsonArray.push([tit, des]);
localStorage.setItem('name', JSON.stringify(itemJsonArrayStr))
}
When I do localStorage.getItem('name')
It always shows the following ERROR: Uncaught TypeError: itemJsonArray.push is not a function
at HTMLButtonElement.
});
And here is my HTML code:
<div class="nav">
<div class="float_nav">
<li class="mt" type="none">Home</li>
<li class="mt" type="none"><a target="_blank" href="http://127.0.0.1:5500/Project%201%20(Javascript)/Project1(Clock).HTML">Current Time</a></li>
<li class="mt" type="none"><a target="_blank" href="http://127.0.0.1:5500/Javscript%20Course/Script.HTML">Our Course</a></li>
<li class="mt" type="none"><a target="_blank" href="https://www.youtube.com/watch?v=hKB-YGF14SY&t=12243s">Contact</a></li>
<li class="purple" type="none"><button class="button button-to">
<a class="black" target="_blank" href="http://127.0.0.1:5500/Project%201
%20(Javascript)/Project1(Clock).HTML">
Find Your List</a></button></li>
</div>
</div>
<div class="form">
<div>
<h1 class="space">Todo List</h1>
<label class="space">Title</label><br>
<input id="title" class="space" required type="text" placeholder="Title"><br>
<p>Write your title</p>
<label id="margin-top">Descreption<br>
<textarea id="descreption" name="textarea" id="text" cols="30" rows="3"></textarea>
<div class="check">
<!-- <label class="space" for="check">check</label> -->
<button type="submit" id="add" class="button-2 button-to">Add To List</button>
</div>
</div>
</div>
</div>
<div class="tb">
<div class="td">
<div class="tc">
<p>No.</p>
</div>
<div class="tc">
<p>Title</p>
</div>
<div class="tc">
<p>Descreption</p>
</div>
<div class="br" class="tc">
<p>Actions</p>
</div>
</div>
<div class="tr">
<div class="tc">
<p>1.</p>
</div>
<div class="tc">
<p>Title</p>
</div>
<div class="tc">
<p>Descreption</p>
</div>
<div class="br" class="tc">
<button class="button-to">Delete</button>
</div>
</div>
<div class="tr">
<div class="tc">
<p>1.</p>
</div>
<div class="tc">
<p>Title</p>
</div>
<div class="tc">
<p>Descreption</p>
</div>
<div class="br" class="tc">
<button class="button-to">Delete</button>
</div>
</div>
<div class="tr">
<div class="tc">
<p>1.</p>
</div>
<div class="tc">
<p>Title</p>
</div>
<div class="tc">
<p>Descreption</p>
</div>
<div class="br" class="tc">
<button class="button-to">Delete</button>
</div>
</div>
<div class="tr">
<div class="tc">
<p>1.</p>
</div>
<div class="tc">
<p>Title</p>
</div>
<div class="tc">
<p>Descreption</p>
</div>
<div class="br" class="tc">
<button class="button-to">Delete</button>
</div>
</div>
</div>
<script src="Java.js"></script>
First I thought that It should work, But it did't...
The problem might be that you are not initializing new variables properly. Create them using var, let or const (explaining the difference: link). Your code does work because you are not in strict mode.
If I am mistaken and you do initialize them properly, than add the variable initialization part in your snippets. As Nico Haase suggests, try to console.log your itemJsonArray to see what it is exactly
After calling ngif statement for edit state i get this error in console
Can't bind to 'ngif' since it isn't a known property of 'div'
I must mention that my first condition works well and that i have imported BrowserModule and CommonModule to app.module.ts
This is my tasks.component.html
<div class="container mt-5">
<div *ngIf ="tasks?.length > 0; else noTasks" >
<ul class="list-group" >
<li *ngFor = "let task of tasks" class="list-group-item">
<div class="row">
<div class="col">
<strong> {{task.title}}: </strong> {{task.description}}
</div>
<div class="col-sm-auto">
<button (click)="editTask($event, task)" class="btn btn-link"> Edit </button>
</div>
<div class="col-sm-auto">
<button (click)="deleteTask($event, task)" class="btn btn-link"> Delete </button>
</div>
</div>
<div *ngif="editState && taskToEdit.id == task.id">
<form (ngSubmit)="udpateTask(task)">
<div class="row">
<div class="col-6">
<div class="form-group">
<label>Task title</label>
<input type="text" [(ngModel)]="task.title" name="title" class="form-control">
</div>
</div>
<div class="col-6">
<div class="form-group">
<label>Task Description</label>
<input type="text" [(ngModel)]="task.description" name="description" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<input type="submit" class="btn btn-dark" value="Update Task">
</div>
</div>
</form>
</div>
</li>
</ul>
</div>
<ng-template #noTasks>
<h5>There are no tasks to list</h5>
</ng-template>
This line *ngif="editState && taskToEdit.id == task.id" contains a typo, and should read *ngIf. Please check.
I’ve a strange problem… When I start to compile the form the navbar slowly begins a fading until it disappears altogether. The same behavoiur if I use the tab on the keyboard to move from one input to another. I don’t understand the reason… It appens with the form.. I had the same problem with another form..
I thought that could be a div didn't close. I checked the code but it seems correct... but I don't know another possible cause
this is my html page
<div data-name="users-add" class="page">
<div class="page-content pg-no-padding">
<div class="row justify-content-center">
<div class="col-100 tablet-auto desktop-80">
<div class="block">
<form class="list" id="form-add-user">
<div class="row justify-content-center">
<div class="col-100 tablet-auto desktop-80">
<div class="row justify-content-center">
<h2> Add User</h2>
</div>
<div class="card">
<div class="card-content card-content-padding">
<div class="row justify-content-center margin padding">Compile...</div>
<div class="row">
<div class="col-100 tablet-auto desktop-auto">
<div class="list no-hairlines-md">
<ul>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-input-wrap">
<div class="item-title item-label">Nome</div>
<input type="text" placeholder="" name="first_name">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Surname</div>
<div class="item-input-wrap">
<input type="text" placeholder="" name="last_name">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Email</div>
<div class="item-input-wrap">
<input type="email" placeholder="" name="email">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Password</div>
<div class="item-input-wrap">
<input type="password" placeholder="" name="password">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Confirm password</div>
<div class="item-input-wrap">
<input type="password" placeholder="" name="password_confirm">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Phone</div>
<div class="item-input-wrap">
<input type="tel" placeholder="" name="phone">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Name Company</div>
<div class="item-input-wrap">
<input type="text" placeholder="" name="company">
<span class="input-clear-button"></span>
</div>
</div>
</li>
</ul>
</div>
<!--list-->
</div>
<!--col-->
</div>
<!--row-->
<div class="row justify-content-center margin padding">Role</div>
<div class="row">
<div class="col-100 tablet-auto desktop-auto">
<div class="list no-hairlines-md">
<ul>
<li>
<label class="item-radio item-content">
<input type="radio" name="id_user" value="1" checked />
<i class="icon icon-radio"></i>
<div class="item-inner">
<div class="item-title"> Superadmin </div>
</div>
</label>
</li>
<li>
<label class="item-radio item-content">
<input type="radio" name="id_user" value="2" />
<i class="icon icon-radio"></i>
<div class="item-inner">
<div class="item-title"> Profile A </div>
</div>
</label>
</li>
<li>
<label class="item-radio item-content">
<input type="radio" name="id_user" value="3" />
<i class="icon icon-radio"></i>
<div class="item-inner">
<div class="item-title"> Profile B </div>
</div>
</label>
</li>
</ul>
</div>
<!--list-->
</div>
<!--col-->
</div>
<!--row-->
<div class="block margin padding">
<div class="row">
<div class="col">
<a class="button button-fill" onclick="addUser()">Save</a>
</div>
</div>
<!-- ./ block - save button -->
</div>
<!-- ./ block -->
</div>
<!--card-content-->
</div>
<!--.card-->
</div>
<!--.col-->
</div>
<!--.row-->
</form>
</div>
<!-- ./ block -->
</div>
<!--.col-->
</div>
<!-- .row-->
</div>
<!-- ./ page-content -->
I'm using jQuery dialog to gather the informations from users then append to my desired div. This function works very well, but when comes to edit/update my contents, I have no ideas how to do.
Front-Ends HTML
<li class="description_panel">
<a id="editPanel" href="#"></a>
<a id="closeBtn" href="#" class="closeButton"></a>
<div class="panel_title">
<h2>**Subscribe Here!**</h2>
</div>
<div class="panel_img">
<img width="320px" src="link_to_img_url"/>
</div>
<div class="panel_description">
<p>My paragraph 1</p>
<p>My paragraph 2</p>
</div>
</li>
Edit Panel
<div id="edit-dialog-form" title="Edit Panel">
<form id="formUpdatePanel">
<div class="form-group">
<div class="rows">
<div class="col-md-12">
<div class="col-lg-12">
<h5>Panel title::</h5>
<input style="margin-bottom:20px;" id="updatePanelTitle" class="form-control input-lg" name="title" placeholder="Panel Title" type="text"></input>
</div>
</div>
</div>
<div class="rows">
<div class="col-md-12">
<div class="col-lg-12">
<h5>URL to image: </h5>
<input style="margin-bottom:20px;" id="updatePanelImageURL" class="form-control input-lg" name="imageURL" placeholder="Link to Image URL" type="text"></input>
</div>
</div>
</div>
<div class="rows">
<div class="col-md-12">
<div class="col-lg-12">
<h5>Panel description:</h5>
<textarea id="updatePanelDescription" rows="5" cols="50" style="width:312px"></textarea>
</div>
</div>
</div>
</div>
</form>
</div>
JQuery
$('#editPanel').click(function(){
editDialog.dialog("open");
});
var editDialog = {...};
function updateDialog {
}
How to retrieve all the inputs values and textarea value and display in the dialog input box and update/overwrite the contents again.
I recently went from ember rc8 to 1.0.0 and to ember-data beta-2. When I did this, there were several error messages but this one I cannot figure out:
Uncaught Error: Cannot perform operations on a Metamorph that is not in the DOM.
I am currently in the process of getting into a jsbin to debug but in the meantime I created this album to demonstrate what is going on : Album
Here is the Route when the error is displayed:
App.BadgeBasicRoute = Ember.Route.extend({
model: function(params) {
return this.modelFor('badge');
}
})
and its parent route:
App.BadgeRoute = Ember.Route.extend({
model: function(params) {
return this.store.find('badge',params.badge_id);
},
afterModel: function(params) {
return this.transitionTo('badge.basic', params)
}
});
and here are the templates:
BadgeBasic.hbs
<div class="row">
<div class="col col-lg-12">
<h3>Basic Info</h3>
<hr>
<div class="row page-header-title">
<div class="col col-lg-11">
<h4>Tag Line</h4>
</div>
{{! test comment }}
{{#view App.EditTagLineView}}
<h4 {{bindAttr class=":glyphicon isEditingTagLine:glyphicon-nothing:glyphicon-pencil :edit-button"}}></h4>
{{/view}}
</div>
<p>
{{#if isEditingTagLine}}
{{view Ember.TextField valueBinding="short_description" class="form-control" style="padding-top:10px"}}
<hr>
<button {{action saveTagLine}} class="btn btn-success">Save</button>
{{else}}
{{#if short_description}}
{{short_description}}
{{else}}
No tag line provided
{{/if}}
{{/if}}
</p>
<div class="row page-header-title">
<div class="col col-lg-11">
<h4>
Description
</h4>
</div>
{{#view App.EditDescriptionView}}
<h4 {{bindAttr class=":glyphicon isEditingDescription:glyphicon-nothing:glyphicon-pencil :edit-button"}}></h4>
{{/view}}
</div>
<p>
{{#if isEditingDescription}}
{{view Ember.TextArea valueBinding="full_description" class="form-control" rows="6"}}
<hr>
<button {{action saveDescription}} class="btn btn-success">Save</button>
<span class="glyphicon glyphicon-info-sign"></span> More on Markdown
{{else}}
{{#if full_description}}
{{markdown full_description}}
{{else}}
<span class="text-muted">no description provided</span>
{{/if}}
{{/if}}
</p>
</div>
</div>
<div class="row page-header-title" >
<div class="col col-lg-11">
<h4>
Mentor
</h4>
</div>
<div class="col col-lg-1">
<h4 class="glyphicon glyphicon-pencil edit-button"></h4>
</div>
</div>
{{#if mentor}}
<address>
{{log mentor}}
<strong> {{mentor.employee_preferred_name}}</strong>
<br>
{{#if mentor.phone}}
<abbr title="Phone">P:</abbr> {{mentor.phone}} <br>
{{else}}
<small> no phone number provided </small> <br>
{{/if}}
{{#if mentor.email}}
<abbr title="Email">E:</abbr> {{mentor.email}}
{{else}}
<small> no email number provided </small> <br>
{{/if}}
</address>
{{/if}}
</div>
Category.hbs
<div class="col col-lg-3 menu2">
<ul style="">
<li class="menu2-header">
<button style="background:#5E9EF3;border:none" class="btn btn-sm btn-primary">New</button>
</li>
{{#each badge in badges}}
{{#link-to "badge" badge tagName="li"}}
<h6 style="">
{{badge.type}}
</h6>
<h4 style="">
<strong>{{badge.title}}</strong>
</h4>
<p>
{{badge.short_description}}
</p>
{{/link-to}}
{{else}}
<p class="lead text-center" style="margin-top:2em">
No Badges in {{label}}
</p>
{{/each}}
</ul>
</div>
<div class="col col-lg-7">
{{outlet}}
</div>
Categories.hbs
<div class="col col-lg-2 menu1">
<ul>
{{#each category in model}}
{{#if category.parent}}
{{else}}
<li class="menu1-header" > {{category.label}} </li>
{{#if category.children}}
{{#each child in category.children}}
{{#link-to 'category' child tagName="li"}}
{{child.label}}
{{/link-to}}
{{/each}}
{{/if}}
{{/if}}
{{/each}}
</ul>
</div>
{{outlet}}
Let me know if you need any other information. Any help would be greatly appreciated.
I've run into this a time or two in the past and it's almost always been due to wrapping some handlebars directive in regular html comments. Something like:
<!--
{{#if something}}hey!{{else}}ho!{{/if}}
-->
I ended up rebuilding the badgeBasic.hbs file and it turns out there were unmatched html tags. I do not know why this fixed it but it did.