I am building a project with laravel. The layout is pretty similar to the Pinterest layout (also known as masonry) and it shows different types of rooms:
The layout was implemented in such a way that the images are placed in horizontal order. To do that I followed this tutorial.
This is the code for the layout:
HTML:
<script src="https://unpkg.com/masonry-layout#4/dist/masonry.pkgd.min.js"></script>
<div class="grid products-by-room" data-masonry='{ "itemSelector": ".grid-item"}' style="margin-top: 8rem">
#foreach ($rooms as $room)
<div class="grid-item" data-category="{{ $room->data_category}}" style="border: 7px solid #fff">
<a href="#zoomImg{{ $room->id }}" data-bs-toggle="modal" data-bs-target="#zoomImg{{ $room->id }}">
<div class="img-wrapper">
<img src="{{ $room->img }}" alt="" class="img-fluid shade">
<div class="overlay">
<i class="fa fa-search-plus icon"></i>
</div>
</div>
</a>
<div class="text-left mt-3 mb-5">
<p class="product-subtitle">{{ $room->name }}</p>
<h4 class="product-title">Shop the Look</h4>
<a class="product-price-link" href="#getPriceByRoom{{ $room->id }}" data-bs-toggle="modal" data-bs-target="#getPriceByRoom{{ $room->id }}">get price</a>
</div>
</div>
#endforeach
</div>
CSS:
.grid-item img {
width: 100%;
font-size: 0;
}
.grid-item {
width: 100%;
}
#media (min-width: 768px) {
.grid-item {
width: 33.333%;
}
}
I created a filter that displays only the rooms that are checked, but it is not working as I intended. It does filter the rooms correctly, but it leaves a lot of empty spaces around them.
This is the filter:
HTML:
<div class="modal-backdrop-filters"></div>
<div id="mySidenav" class="sidenav">
<div class="top-header-filters">
<h3 class="title-filters">FILTERS</h3>
<a id="closebtn" class="closebtn filter-close-btn">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"
style="border: none; background-color: #fff;">
<span aria-hidden="true">×</span>
</button>
</a>
</div>
<div class="header-filters">
<h4 class="title-filters">Categories</h4>
</div>
<div class="round" id="r-group">
<form>
<label class="label-filter" style="margin-top: 3rem;"><input type="checkbox" name="room" value="office"><span class="label-text"> Office</span></label><br>
<label class="label-filter"><input type="checkbox" name="room" value="bedroom"/><span class="label-text">Bedroom</span></label><br>
<label class="label-filter"><input type="checkbox" name="room" value="living-room"/><span class="label-text">Living Room</span></label><br>
<label class="label-filter"><input type="checkbox" name="room" value="dining-room"/><span class="label-text">Dining Room</span></label><br>
<label class="label-filter"><input type="checkbox" name="room" value="library"/><span class="label-text">Library</span></label><br>
<label class="label-filter"><input type="checkbox" name="room" value="hallway"/><span class="label-text">Hallway</span></label><br>
<label class="label-filter"><input type="checkbox" name="room" value="kitchen"/><span class="label-text">Kitchen</span></label><br>
<label class="label-filter"><input type="checkbox" name="room" value="bar"/><span class="label-text">Bar</span></label><br>
<label class="label-filter"><input type="checkbox" name="room" value="entryway"/><span class="label-text">Entryway</span></label><br>
</form>
</div>
<button id="applyBtn" class="apply-filters-btn">APPLY</button>
</div>
</div>
SCRIPT:
$(function(){
$('form').find("input").on('change',function(){
let selected = [];
$('form').find("input").each(function(){
if(jQuery(this).is(":checked")){
selected.push(jQuery(this).val());
}
})
if(!selected.length){
$(".products-by-room > div").show();
return;
}
$(".products-by-room > div").hide();
$(".products-by-room > div").each(function(){
const category = jQuery(this).attr('data-category');
const categorySplitted = category.split(' ');
categorySplitted.forEach((cat)=>{
if(selected.indexOf(cat) !== -1){
jQuery(this).show();
}
});
});
});
});
The problem is, when I select a room such as "dining room" this is the result I get, the images are shown in their original spot and lots of white spaces aroun them:
This is the result I intended, all dining rooms in the same row, with no spaces around:
Is there a way I can achieve this? Thanks in advance!
I want to show an section when the checkbox is checked on another section, and show it with an animation from the top. I have the following code for the input that is in another section .
<div className="continue" id="first">
<button className="btn-continue">
Contratar Plano
<input type="checkbox" id="reveal-email" role="button"/>
</button>
</div>
<section className="plan-section" id="plan-section">
<div className="next">
<i class="arrow down"></i>
</div>
<div className="form-block">
<form className="form">
<div className="plan-form">
<div className="input-block">
<label htmlFor="name">Nome</label>
<input type="text" name="name" id="name" onChange={props.handleChange} required className="input" />
</div>
<div className="continue">
<button className="btn-continue" id="plan-continue" disabled={props.step.isLast()} onClick={props.next}>
<span className="btn-text">Contratar Plano</span>
<img className="check-btn" src={check} />
</button>
</div>
</div>
</form>
</div>
</section>
Also showing the section I need to show; this section has a default display:none.
Its a classic JS task. Use an onclick event to check if the checkbox is checked and then to change the section from display: none to display: block . Also Add an onclick event so that JS is triggered.
function showSection() {
var showSection = document.getElementById("reveal-email"),
planSection = document.getElementById("plan-section");
if (showSection.checked == true) {
planSection.style.display = "block";
} else {
planSection.style.display = "none";
}
}
#plan-section {
display: none;
}
<div className="continue" id="first">
<button className="btn-continue">Contratar Plano
<input type="checkbox" id="reveal-email" onclick="showSection()">
</button>
</div>
<section className="plan-section" id="plan-section">
<div className="next">
<i class="arrow down"></i>
</div>
<div className="form-block">
<form className="form">
<div className="plan-form">
<div className="input-block">
<label htmlFor="name">Nome</label>
<input type="text" name="name" id="name" onChange={props.handleChange} required className="input" />
</div>
<div className="continue">
<button className="btn-continue" id="plan-continue" disabled={props.step.isLast()} onClick={props.next}>
<span className="btn-text">Contratar Plano</span>
<img className="check-btn" src={check} />
</button>
</div>
</div>
</form>
</div>
</section>
One recommendation regarding your code:
<button className="btn-continue">
Contratar Plano
<input type="checkbox" id="reveal-email" role="button"></input>
</button>
It's not a good practice to group checkbox and some text into button, in HTML you can use label for that.
If JS solution is acceptable, you need to follow these steps:
Find your checkbox button and section in the DOM
Add event listener which will trigger callback function after each change of the checkbox state
In the callback function you need to trigger style for your section.
The full code is below:
var checkbox = document.getElementById('reveal-email');
var section = document.getElementById('plan-section');
checkbox.addEventListener('change', onChange)
function onChange() {
if (this.checked) {
section.style.display = "block";
} else {
section.style.display = "none";
}
}
<div className="continue" id="first">
<button className="btn-continue">
Contratar Plano
<input type="checkbox" id="reveal-email" role="button"/>
</button>
</div>
<section className="plan-section" id="plan-section" style="display:none">
<div className="next">
<i class="arrow down"></i>
</div>
<div className="form-block">
<form className="form">
<div className="plan-form">
<div className="input-block">
<label htmlFor="name">Nome</label>
<input type="text" name="name" id="name" onChange={props.handleChange} required className="input" />
</div>
<div className="continue">
<button className="btn-continue" id="plan-continue" disabled={props.step.isLast()} onClick={props.next}>
<span className="btn-text">Contratar Plano</span>
<img className="check-btn" src={check} />
</button>
</div>
</div>
</form>
</div>
</section>
I am trying to disable the save button untill date is not picked. it is disabled but its not able to enbale untill i dont press any key from the keyboard.please tell me what i am doing wrong and thanks in advance.
<div class = "form-group" ng-class="{ 'has-error' : Form.fromTime.$invalid && !Form.fromTime.$pristine }">
<label for = "fromTime"> From Time:
<img src = "images/required.gif" alt = "Required" class = "required-star">
</label>
<div class='input-group date' id='fromTime' >
<input type='text' class="form-control" name="fromTime" ng-model = "fromTime" required />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<p ng-show="Form.fromTime.$invalid && !Form.fromTime.$pristine" class="help-block">From Time is required.</p>
</div>
<button type="button" class="col-sm-2 btn btn-primary" ng-click="scheduleCall()" style="margin-left:10px;" ng-disabled="Form.$invalid"> Save </button>
change:
ng-disabled="Form.$invalid"
to:
ng-disabled="Form.fromTime.$invalid"
You have to use like below
ng-disabled="Form.fromTime.$invalid"
Formname: Form;
Input field name : fromTime;
Input field state: $invalid
If i understand your problem correctly, you need to use a date input.
Now save button will be disabled until a valid date is picked.
function Ctrl($scope) {
$scope.fromTime = '';
$scope.scheduleCall = function() {};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<div ng-app>
<div ng-controller="Ctrl">
<form name="Form">
<div class="form-group"
ng-class="{ 'has-error' : Form.fromTime.$invalid && !Form.fromTime.$pristine }">
<label for="fromTime">From Time:</label>
<div class='input-group date' id='fromTime'>
<input type='date' class="form-control" name="fromTime" ng-model="fromTime" required />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<p ng-show="Form.fromTime.$invalid && !Form.fromTime.$pristine"
style="font-size: 11px; color: red;">
From Time is required.
</p>
</div>
<button type="button" ng-click="scheduleCall()" ng-disabled="Form.$invalid">Save</button>
</form>
</div>
</div>
Description:
Drag and drop form elements to build a form that will be displayed later.
Needed:
- input and textarea formfields need to have id's in order after they have been sorted. I need to reference the answer to the questions and the instructions. Right now if they are sorted, I would not know what order to display them in later when viewing the record. there may be a better way, but Im stuck now.
Sort issue: The sortable area does not work until after the drag drop event. There are default fields that need to be sorted right away.
Here is the fiddle: http://jsfiddle.net/htscraig/vhkGD/3/
<div class="vf">
<div id="edit_menu">
<p style="text-align: center; margin: -5px 5px 5px;">Form Elements Menu</p>
<button href="#" id="questions_toggle" style="margin-left: 9px;">Questions<span id="questions_status"> show</span>
</button>
<button id="answers_toggle" href="#">Answer Type<span id="answers_status"> show</span>
</button>
<button id="instructions_toggle" href="#">Instructions<span id="instructions_status"> show</span>
</button>
<div id="questions">
<div style="text-align: center;">
<h3>VF-300 Questions<h3></div>
<div class="item">
<li style="float:left, height:40px, width:200px">
<textarea class="" cols="43" rows="3"style="border: medium none; width: 240px;" name="vf300-Q1" form="GeneralVerdict">Did <? echo $all_pla;?> and <? echo $all_def;?> enter into a contract?</textarea>
</li>
<span class="delete"><button>Delete Line</button></span>
</div>
<div class="item">
<li style="float:left, height:40px, width:200px">
<textarea class="mooeditable" cols="43" rows="4" style="border: medium none; width: 240px;" name="vf300-Q2" form="GeneralVerdict">[Did <? echo $all_pla;?> do all, or substantially all, of the significant things that the contract required <? echo "[him/her/it]";?> to do?</textarea>
</li>
<span class="delete"><button>Delete Line</button></span>
</div>
<div class="item">
<textarea class="mooeditable" cols="43" rows="6" style="border: medium none; width: 240px;" name="vf300-Q3" form="GeneralVerdict">[or]
[Was <? echo $all_pla;?> excused from having to do all, or substantially all, of the significant things that the contract required <? echo "[him/her/it]";?> to do?</textarea>
<span class="delete"><button>Delete Line</button></span>
</div>
<hr>
</div>
<div id="answers">
<div style="text-align: center;"><h3>VF-300 Answer Formats<h3></div>
<div class="item">
<input type="radio" value="Yes" name="yes-no" style="width: 20px ! important; margin-left: 30px; margin-bottom: 4px;">Yes
<input type="radio" value="No" name="yes-no" style="width: 20px ! important; margin-left: 30px; margin-bottom: 4px;">No
<span class="delete" style="opacity: 0.7;"><button>Delete Line</button></span>
</div>
<div class="item"><span>Answer 222222</span>
<span class="delete"><button>Delete Line</button></span>
</div>
<div class="item"><span>Answer 333333</span>
<span class="delete"><button>Delete Line</button></span>
</div><hr>
</div>
<div id="instructions">
<div style="text-align: center;"><h3>Juror Instructions<h3></div>
<div class="item"><textarea class="" cols="43" rows="5" style="border: medium none; width: 240px; margin-left: 15px;" name="vf300-i2" form="GeneralVerdict">If your answer to [either option for] question 2 is yes, then answer question 3. If you answered no [to both options], stop here, answer no further questions, and have the presiding juror sign and date this form.]</textarea>
<span class="delete"><button>Delete Line</button></span>
</div>
<div class="item"><textarea class="" cols="43" rows="4" style="border: medium none; width: 240px; margin-left: 15px;" name="vf300-i3" form="GeneralVerdict">If your answer to question 3 is yes, then answer question 4. If you answered no, stop here, answer no further questions, and have the presiding juror sign and date this form.]</textarea>
<span class="delete"><button>Delete Line</button></span>
</div>
<div class="item"><textarea class="" cols="43" rows="5" style="border: medium none; width: 240px; margin-left: 15px;" name="vf300-i4" form="GeneralVerdict">If your answer to [either option for] question 4 is yes, then answer question 5. If you answered no [to both options], stop here, answer no further questions, and have the presiding juror sign and date this form.</textarea>
<span class="delete"><button>Delete Line</button></span>
</div><hr>
</div>
</div>
<div id="edit_right">
<div class="info"><h1>CoPO Verdict Builder</h1>Drag and drop form elements in box. Drag elements into position to sort</div>
<ol>
<div id="edit_area">
<div class="item_dz" id="1">
<li style="float:left, height:40px, width:200px">
<textarea class="" cols="43" rows="3"style="border: medium none; width: 240px;" name="vf300-Q1" form="GeneralVerdict">Did <? echo $all_pla;?> and <? echo $all_def;?> enter into a contract?</textarea>
</li>
<span class="delete"><button>Delete Line</button></span>
</div>
<div class="item_dz">
<input type="radio" value="Yes" name="yes-a1" style="width: 20px ! important; margin-left: 30px; margin-bottom: 4px;">Yes
<input type="radio" value="No" name="no-a1" style="width: 20px ! important; margin-left: 30px; margin-bottom: 4px;">No
<span class="delete" style="opacity: 0.7;"><button>Delete Line</button></span>
</div>
<div class="item_dz">
<li style="float:left, height:40px, width:200px">
<textarea class="" cols="43" rows="4" style="border: medium none; width: 240px;" name="vf300-Q2" form="GeneralVerdict">[Did <? echo $all_pla;?> do all, or substantially all, of the significant things that the contract required <? echo "[him/her/it]";?> to do?</textarea>
</li>
<span class="delete"><button>Delete Line</button></span>
</div>
<div class="item_dz">
<input type="radio" value="Yes" name="yes-a2" style="width: 20px ! important; margin-left: 30px; margin-bottom: 4px;">Yes
<input type="radio" value="No" name="no-a2" style="width: 20px ! important; margin-left: 30px; margin-bottom: 4px;">No
<span class="delete" style="opacity: 0.7;"><button>Delete Line</button></span>
</div>
<div class="item_dz">
<textarea class="" cols="43" rows="6" style="border: medium none; width: 240px; margin-left: 15px;" name="vf300-Q3" form="GeneralVerdict">[or]
[Was <? echo $all_pla;?> excused from having to do all, or substantially all, of the significant things that the contract required <? echo "[him/her/it]";?> to do?</textarea>
<span class="delete"><button>Delete Line</button></span>
</div>
<div class="item_dz">
<input type="radio" value="Yes" name="yes-a2b" style="width: 20px ! important; margin-left: 30px; margin-bottom: 4px;">Yes
<input type="radio" value="No" name="no-a2b" style="width: 20px ! important; margin-left: 30px; margin-bottom: 4px;">No
<span class="delete" style="opacity: 0.7;"><button>Delete Line</button></span>
</div>
<div class="item_dz"><textarea class="" cols="43" rows="5" style="border: medium none; width: 240px; margin-left: 15px;" name="vf300-i2" form="GeneralVerdict">If your answer to [either option for] question 2 is yes, then answer question 3. If you answered no [to both options], stop here, answer no further questions, and have the presiding juror sign and date this form.]</textarea>
<span class="delete"><button>Delete Line</button></span>
</div>
</div>
</div>
</ol>
</div>
window.addEvent('domready', function () {
$$('.item').addEvent('mousedown', function (event) {
if (event.target == this.getParent().getElement('.delete button')) return;
event.stop();
// `this` refers to the element with the .item class
var item = this;
var clone = item.clone().setStyles(item.getCoordinates()).setStyles({
opacity: 0.7,
position: 'absolute'
}).inject(document.body);
var drag = new Drag.Move(clone, {
droppables: $('edit_area'),
onDrop: function (element, droppable) {
if (!droppable) {
item.removeClass('item_dz');
item.addClass('item');
item.tween('background-color', '#c0c0c0', '#fff');
} else {
item.removeClass('item');
item.addClass('item_dz');
item.clone().inject(edit_area);
edit_area.highlight('#4679BD', '#AFD2FF');
item.removeClass('item_dz');
item.addClass('item');
var mySortables = new Sortables('', {
clone: true,
opacity: 0.4,
});
setTimeout(function () {
mySortables.addLists(edit_area);
}, 1);
}
element.dispose();
},
onEnter: function (dragging, edit_area) {
edit_area.tween('background-color', '#9FFF8F');
},
onLeave: function (dragging, edit_area) {
edit_area.tween('background-color', '#fff');
},
onCancel: function (dragging) {
dragging.destroy();
edit_area.tween('background-color', '#fff');
}
});
drag.start(event);
});
$$('.delete').addEvents({
mouseover: function () {
this.tween('opacity', '1');
this.getParent(['.item_dz']).fade(0.3);
this.getParent(['.item_dz']).tween('background-color', '#fff', '#FF9F9F');
},
mouseleave: function () {
this.tween('opacity', '0.7');
this.getParent(['.item_dz']).fade(1);
this.getParent(['.item_dz']).tween('background-color', '#FF9F9F', '#fff');
}
});
// start delegation relays
window.addEvent('click:relay(.delete)', function () {
if (confirm('Delete this line item?')) {
this.getParent(['.item_dz']).destroy();
this.destroy();
} else {
// Do nothing
}
})
window.addEvent('mouseover:relay(.delete)', function () {
this.tween('opacity', '1');
this.getParent(['.item_dz']).fade(0.3);
this.getParent(['.item_dz']).tween('background-color', '#fff', '#FF9F9F');
})
window.addEvent('mouseleave:relay(.delete)', function () {
this.tween('opacity', '0.7');
this.getParent(['.item_dz']).fade(1);
this.getParent(['.item_dz']).tween('background-color', '#FF9F9F', '#fff');
})
//end delegation relays
// menu toggle menus start
var status = {
'true': ' show',
'false': ' hide'
};
// questions slide start
var questionsSlide = new Fx.Slide('questions');
// set default slide as hidden
questionsSlide.hide();
$('questions_toggle').addEvent('click', function (event) {
event.stop();
questionsSlide.toggle();
$('questions_status').set('text', status[questionsSlide.open]);
});
// questions slide end
// answers slide start
var answersSlide = new Fx.Slide('answers');
// set default slide as hidden
answersSlide.hide();
$('answers_toggle').addEvent('click', function (event) {
event.stop();
answersSlide.toggle();
$('answers_status').set('text', status[answersSlide.open]);
});
// answers slide end
// instructions slide start
var instructionsSlide = new Fx.Slide('instructions');
// set default slide as hidden
instructionsSlide.hide();
$('instructions_toggle').addEvent('click', function (event) {
event.stop();
instructionsSlide.toggle();
$('instructions_status').set('text', status[instructionsSlide.open]);
});
// instructions slide end
// menu toggle menus end
$('textarea').mooEditable();
});
The sortables is only added after the first drop event. To have the .item_dz sortable from the beggining you can add this line directly after the domeready function opening: http://jsfiddle.net/ke7nq/
var sortableItem_dz = new Sortables().addItems($$('.item_dz'));
I would suggest you change the HTML for .item_dz a bit so it would include both the question and the Yes/No element. Something like the exmple under so each block would be inside a item_dz:
<div class="item_dz">
<textarea class="" cols="43" rows="6" style="border: medium none; width: 240px; margin-left: 15px;" name="vf300-Q3" form="GeneralVerdict">[or] [Was <? echo $all_pla;?> excused from having to do all, or substantially all, of the significant things that the contract required <? echo "[him/her/it]";?> to do?</textarea>
<span class="delete"><button>Delete Line</button></span>
<input type="radio" value="Yes" name="yes-a2b" style="width: 20px ! important; margin-left: 30px; margin-bottom: 4px;" />Yes
<input type="radio" value="No" name="no-a2b" style="width: 20px ! important; margin-left: 30px; margin-bottom: 4px;">No<span class="delete" style="opacity: 0.7;" />
<button>Delete Line</button>
</span>
</div>
To get all the elements after you are done dropping/sorting you can do
var questions = document.getElements('.item_dz');
// or to get just the ID's:
// var questions = document.getElements('.item_dz').map(function(el){ return el.get('id'); });
or use the .serialize() method: http://mootools.net/docs/more/Drag/Sortables#Sortables:serialize
I have a html template like following which is generally a form
<script type="text/template" id="brands-form">
<legend class="label label-info">
<fmt:message key="......"/>
</legend>
<fieldset <# if (typeof brandId === 'undefined') { #>class="hide"<# } #>>
<legend>
<# if (typeof brandId === 'undefined') { #>
<span class="font-small"><font color="gray"><fmt:message key="....."/></font></span>
<# } else { #>
<span class="font-small"><font color="gray"><fmt:message key=".."/></font></span>
<# } #>
</legend>
<div class="control-group">
<span class="control-label font-small" for="name">
<b><fmt:message key="daydiary.brand.add.title"/></b>
</span>
<div class="controls">
<input name="name" type="text" required="required" size="30" maxlength="50" class="input-xlarge span11" value="<#= name #>" />
</div>
</div>
<div class="control-group">
<span class="control-label font-small" for="name">
<b><fmt:message key="..."/></b>
</span>
<div class="controls">
<img id="brandImage" name="brandImage" class="avatar-large" src="<# if (typeof brandId === 'undefined') {#>/img/default_brand_picture.jpg<#}else{#><#= brandImage #><#}#>" />
<input type="file" id="brandImageFileUpload" name="brandImageFileUpload"/>
</div>
</div>
<div class="control-group">
<span class="control-label font-small" for="description">
<b><fmt:message key="....."/></b>
</span>
<div class="controls">
<textarea name="description" class="input-xlarge span11" required="required" style="resize:none" maxlength="750"><#= description #></textarea>
</div>
</div>
<div class="control-group">
<span class="control-label font-small" for="showPro">
<b><fmt:message key="....."/></b>
</span>
<div class="controls">
<input type="radio" name="showPro" value="true" <# if (showPro) { #> checked<# } #>>
<span class="label label-info"><fmt:message key="....."/></span>
<input type="radio" name="showPro" value="false" <# if (!showPro) { #> checked<# } #>>
<span class="label label-info"><fmt:message key="...."/></span>
</div>
</div>
<div class="control-group">
<span class="control-label font-small" for="proDescription">
<b><fmt:message key="..."/></b>
</span>
<div class="controls">
<textarea name="proDescription" class="input-xlarge span11" style="resize:none" maxlength="700"><#= proDescription #></textarea>
</div>
</div>
<div class="form-actions alert-info">
<# if (typeof brandId === 'undefined') { #>
<button type="submit" class="btn btn-info btn-mini">
<fmt:message key="...."/>
</button>
<button type="reset" class="btn btn-mini">
<fmt:message key="....."/>
</button>
<# } else { #>
<button type="submit" class="btn btn-info btn-mini">
<i class="icon-edit"></i> <fmt:message key="..."/>
</button>
<# } #>
</div>
</fieldset>
When i do like following on form submit
this.model.set('name', form.find('[name="name"]').val());
this.model.set('description', form.find('[name="description"]').val());
this.model.set('proDescription', form.find('[name="proDescription"]').val());
this.model.set('showPro', form.find('[name="showPro"]:checked').val() === 'true');
everything works well but when i do
this.model.set('imageData',form.find('[name="imageData"]').val());
the html form element values are getting reset to "".It's very surprising to me.
I have no idea were the values getting vanished?? I am using backbone technology if someone need more info.
backbone code
app.View.EditBrand = Backbone.View.extend({
tagName: 'form',
attributes : {
'class' : 'form-horizontal row-fluid'
},
initialize: function(){
this.model.bind('change', this.render, this);
},
template:_.template($('#brands-form').html()),
template_success: _.template($('#notifications-brand-edit-success').html()),
template_error: _.template($('#notifications-brand-edit-error').html()),
events:{
'submit': 'submit'
},
render: function(){
this.delegateEvents();
this.$el.html(this.template(this.model.toJSON()));
this.$("#brandImageFileUpload").change(function() {
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#brandImage').attr('src', e.target.result);
$('#imageData').val(e.target.result);
},
reader.readAsDataURL(this.files[0]);
}
},
submit: function(e){
e.preventDefault();
var form = $(e.target);
this.model.set('name', form.find('[name="name"]').val());
this.model.set('description', form.find('[name="description"]').val());
this.model.set('proDescription', form.find('[name="proDescription"]').val());
this.model.set('showPro', form.find('[name="showPro"]:checked').val() === 'true');
this.model.set('imageData',form.find('[name="imageData"]').val());
var self = this;
self.model.save(null, {
success: function(){
notifications('success' , self.template_success());
},
error: function(){
notifications('error' , self.template_error());
}
});
}
});