We Keep Coding

Framework7 2 alert(); on Ajax-Form-Submit Event

I would like to use form script on framework7 app.
I have my form on a page displayed by route.js
I have my javascript action on route.js
When I click on button, the alert is displayed two times, I don’t know why.
Here is my Route.js :
{
path: '/contact_catalogue/',
url: './pages_pro/contact_catalogue.html',
on: {
pageInit: function (e, page) {
$$('.convert-form-to-data').on('click', function(){
var formData = app.form.convertToData('#my-form');
alert(JSON.stringify(formData));
});
},
},
},
Here is my contact_catalogue.html :
<div class="page" data-name="contact_catalogue">
<form class="list form-store-data" id="my-form" name="my-form" autocomplete="off">
<ul>
<li>
<div class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Mr/Mme</div>
<div class="item-input-wrap">
<select name="gender">
<option value="male" selected>Mr</option>
<option value="female">Mme</option>
</select>
</div>
</div>
</div>
</li>
<li>
<div class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Nom</div>
<div class="item-input-wrap">
<input type="text" name="name" placeholder="Votre nom" autocomplete="off">
</div>
</div>
</div>
</li>
<li>
<div class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">E-mail</div>
<div class="item-input-wrap">
<input type="email" name="email" placeholder="E-mail" autocomplete="off">
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Demande de catalogue</div>
<div class="item-after">
<label class="toggle">
<input type="checkbox" name="switch" value="yes" id="switch" selected><i class="toggle-icon"></i>
</label>
</div>
</div>
</div>
</li>
</ul>
</form>
<div class="block block-strong row no-margin">
<div class="col-25"></div>
<div class="col"><a class="button convert-form-to-data" id="test" href="#">Envoyer</a></div>
<div class="col-25"></div>
</div>
Thank you for your help,

Check if pageInit fired twice for some reasons
or try
pageInit: function (e, page) {
$(page.$el).on('click', '.convert-form-to-dat', function(){
// do stuff
})
},

knockout js, add additional elements to an array

I have an app where I want to add extra elements to an item in an array, I have created a fiddle of what I'm trying to achieve.
So the user starts the app, they click next fill in some details of an item and a description, they then should click next and fill in a price for the item(this is where I'm stuck). This example works up to a point, as in whenever I try and implement the price part I seem to be getting it wrong. You'll see once I click next the item is added to the array, however how do add more elements to the current item in the array. In case I've not made sense the logic should be:
Start
Page one (enter name and description)
Page two (enter price)
I understand I could do this all on one page but I don't want to I want knockout to be able to add a price after the name and description page. I would also like to be able to go back and amend the item. Can you anybody help in seeing what I should be doing next?
When I insert the name and description, do I have to also make an empty element in the array for the price? Then once the price is entered somehow insert this into the price element in the array? Not sure how/if this should be implemented.
This is my first knockout app so I be surprised if what I've actually done is correct, any help or pointers gratefully received :)
My code is below:
$(function() {
var main = new stuff();
ko.applyBindings(main, $('#ko')[0]);
});
function Item(data) {
this.itemname = ko.observable(data.itemname);
this.itemdescription = ko.observable(data.itemdescription);
this.itemenabled = ko.observable(data.itemenabled);
}
function stuff() {
var self = this;
self.items = ko.observableArray([]);
self.newItemName = ko.observable();
self.newItemDescription = ko.observable();
self.newItemEnabled = ko.observable();
// Operations
self.addItem = function() {
self.items.push(new Item({
itemname: this.newItemName(),
itemdescription: this.newItemDescription(),
itemenabled: this.newItemEnabled()
}));
};
};
//jquery stuff
$('#start').on('click', function(e) {
$("#page1").show(500);
$('#panel1').css('visibility', 'visible').hide().fadeIn().removeClass('hidden');
$("#start").hide(500);
})
$('#back').on('click', function(e) {
$("#panel1").hide(500);
$("#page1").hide(500);
$("#start").show(500);
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="submit" class="btn btn-primary" id="start">Start</button>
<div id="ko">
<div class="panel panel-default hidden" id="panel1">
<div id="page1">
<form data-bind="submit: addItem">
<div class="panel panel-default" style="padding: 15px 0px 0px 0px;" id="panel2">
<div class="container">
<div class="form-group row">
<label for="inputItemName" class="col-lg-3 col-form-label">Enter Item Name</label>
<div class="col-lg-8">
<input type="text" class="form-control form-control-lg" id="inputItemName" data-bind="value: newItemName" placeholder="">
</div>
</div>
<div class="form-group row">
<label for="textareaItemDescription" class="col-lg-3 col-form-label">Enter Item Description</label>
<div class="col-lg-8">
<textarea class="form-control" id="textareaItemDescription" rows="3" data-bind="value: newItemDescription"></textarea>
</div>
</div>
<div class="form-group row">
<div class="col-sm-offset-3 col-sm-9">
<label class="custom-control custom-checkbox checkbox-inline no_indent" style="font-weight:bold;">
<input type="checkbox" class="custom-control-input" checked="checked" data-bind="checked: newItemEnabled">
<span class="custom-control-indicator"></span>
<span class="custom-control-description" style="padding-bottom: 2px;">Enabled</span>
</label>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-primary" id="back">Back</button>
<div class="pull-right">
<button type="submit" class="btn btn-primary" id="next1">Next</button>
</div>
</form>
</div>
</div>
<ul data-bind="foreach: items, visible: items().length > 0">
<li>
<input data-bind="value: itemname" style="color: black;" />
</li>
<li>
<input data-bind="value: itemdescription" style="color: black;" />
</li>
<li>
<input type="checkbox" data-bind="checked: itemenabled" />
</li>
</ul>
</div>

Ok, so I have added a new observable to track the page number along with basic functions to increment/decrement the number then I simply add the new item after the price has also been added.
$(function() {
var main = new stuff();
ko.applyBindings(main, $('#ko')[0]);
});
function Item(data) {
this.itemname = ko.observable(data.itemname);
this.itemdescription = ko.observable(data.itemdescription);
this.itemenabled = ko.observable(data.itemenabled);
this.price = ko.observable(data.itemprice);
}
function stuff() {
var self = this;
self.items = ko.observableArray([]);
self.newItemName = ko.observable();
self.newItemDescription = ko.observable();
self.newItemEnabled = ko.observable();
self.newItemPrice = ko.observable();
self.page = ko.observable(1);
// Operations
self.next = function() {
if (self.page() === 2) {
self.addItem();
}
self.page(self.page() + 1)
}
self.back = function() {
if (self.page() == 1) {
$("#panel1").hide(500);
$("#page1").hide(500);
$("#start").show(500);
}
self.page(self.page() - 1);
}
self.addItem = function() {
self.items.push(new Item({
itemname: this.newItemName(),
itemdescription: this.newItemDescription(),
itemenabled: this.newItemEnabled(),
itemprice: this.newItemPrice(),
}));
};
};
//jquery stuff
$('#start').on('click', function(e) {
$("#page1").show(500);
$('#panel1').css('visibility', 'visible').hide().fadeIn().removeClass('hidden');
$("#start").hide(500);
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="submit" class="btn btn-primary" id="start">Start</button>
<div id="ko">
<div class="panel panel-default hidden" id="panel1">
<div id="page1">
<form data-bind="submit: next">
<div class="panel panel-default" style="padding: 15px 0px 0px 0px;" id="panel2">
<div class="container" data-bind="if: page() == 1">
<div class="form-group row">
<label for="inputItemName" class="col-lg-3 col-form-label">Enter Item Name</label>
<div class="col-lg-8">
<input type="text" class="form-control form-control-lg" id="inputItemName" data-bind="value: newItemName" placeholder="">
</div>
</div>
<div class="form-group row">
<label for="textareaItemDescription" class="col-lg-3 col-form-label">Enter Item Description</label>
<div class="col-lg-8">
<textarea class="form-control" id="textareaItemDescription" rows="3" data-bind="value: newItemDescription"></textarea>
</div>
</div>
<div class="form-group row">
<div class="col-sm-offset-3 col-sm-9">
<label class="custom-control custom-checkbox checkbox-inline no_indent" style="font-weight:bold;">
<input type="checkbox" class="custom-control-input" checked="checked" data-bind="checked: newItemEnabled">
<span class="custom-control-indicator"></span>
<span class="custom-control-description" style="padding-bottom: 2px;">Enabled</span>
</label>
</div>
</div>
</div>
</div>
<div class="container" data-bind="if: page() == 2">
<div class="form-group row">
<label for="inputPrice" class="col-lg-3 col-form-label">Enter Price</label>
<div class="col-lg-8">
<input type="text" class="form-control form-control-lg" id="inputPrice" data-bind="value: newItemPrice" placeholder="">
</div>
</div>
</div>
<button type="button" data-bind="click: back" class="btn btn-primary" id="back">Back</button>
<div class="pull-right">
<button type="submit" class="btn btn-primary" id="next1">Next</button>
</div>
</form>
</div>
</div>
<ul data-bind="foreach: items, visible: items().length > 0">
<li>
<input data-bind="value: itemname" style="color: black;" />
</li>
<li>
<input data-bind="value: itemdescription" style="color: black;" />
</li>
<li>
<label for="price">Price</label>
<input id="price" data-bind="value: price" style="color: black;" />
</li>
<li>
<input type="checkbox" data-bind="checked: itemenabled" />
</li>
</ul>
</div>

Jquery - Cloning collapsible divs

So im trying to build the front end of a form builder however i've run into a problem when trying to clone collapsible elements. Im an absolute beginner at jquery so sorry for the dirty code.
When an element is cloned and it is nested under itself with a modified sortable jquery plugin, any one of the bottom levels collapsible's will open the collapsible of the top level parent (but not any of the other nested elements).
My jquery is:
var count = 1;
$("#displayUpload").click(function() {
var clonecount = 'Uploadpanel' + count;
var cloneobject = $("#toggleUpload").clone(true).appendTo(".sortable").show();
$("#Uploadpanel", cloneobject).attr('id', clonecount);
$(cloneobject, this.id).on("click", (".edit", ".panel-title"), function() {
$("#" + clonecount, this.id).collapse('toggle');
});
$(cloneobject).on("click", ".remove", function() {
$(cloneobject).remove();
});
count = count + 1;
});
Html:
<li id="toggleUpload" data-role="main" class="js-form-element" style="display: none">
<div>
<div class="panel panel-default" data-role="collapsible" id="panel3">
<div class="panel-heading">
<h4 class="panel-title" data-target="#Uploadpanel"
href="#Uploadpanel">
<a data-target="#Uploadpanel"
href="#Uploadpanel" class="edit">
File upload
</a>
<span class="btn-group pull-right">
<a data-target="#Uploadpanel"
href="#Uploadpanel" class="collapsed">Edit</a>
<span class="padding-line">|</span>
<a class="remove" href="#">Delete</a>
</span>
</h4>
</div>
<div id="Uploadpanel" class="panel-collapse collapse">
<div class="panel-body">
<div class="margin-bottom-20">
<p class="font-italic">Label:</p>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Label">
</div>
<div class="margin-bottom-20">
<p class="font-italic">Placeholder text:</p>
<input type="text" class="form-control" placeholder="Placeholder message">
</div>
<div class="margin-bottom-5">
<div class="checkbox">
<label>
<input id="required" type="checkbox"> Required
</label>
</div>
</div>
<div class="margin-bottom-20">
<p class="font-italic">Validation message:</p>
<input type="text" class="form-control" id="validation" placeholder="Validation message">
</div>
<div>
<div class="row">
<div class="col-sm-6">
<p class="font-italic">Form input size:</p>
<div class="form-group">
<select name="form_select">
<option value="0">100% (1 in a row)</option>
<option value="0">33% (3 in a row)</option>
<option value="0">50% (2 in a row)</option>
</select>
</div>
</div>
<div class="col-sm-6">
<p class="font-italic">Form position:</p>
<div class="form-group">
<select name="form_select">
<option value="0">Left</option>
<option value="0">Middle</option>
<option value="0">Right</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
Any help would be great,
Thanks

There can be some issues using clone on objects that already has event handlers. I had this issue for a while, and I just resolved it by creating a function that generates a new jQuery object, instead of cloning an existing one.

Closing Dynamically created DIV

So I have a section to add a color and I got it to dynamically create a copy of the div with a new ID for each dynamic div.
The problem is that once the div is created, I don't know how to close it (i.e. remove it from DOM via a "close" action). I know it's because it's dynamic content. You cant bind event likes the static content, it's will not bind to the elements because they don't appear at the time you bind. I just don't know how to go about getting it to close.
The div I want to close starts with "Color" + incremented number. I hope I explained this correctly and any help would be appreciated. Thanks.
<div class="col-xs-12" style="max-width: 800px">
<div class="col-md-12">
<h3>COLOR ROTATION</h3>
<!--Begin color rotation well-->
<div id="color">
<div class="well well-sm">
<div class="row">
<div class="col-md-6">
<div class="form-group"><a><span class="glyphicon glyphicon-remove-sign" aria-hidden="true" style="padding-right: 2px;"></span></a>
<label class="control-label">Color 1</label>
<input class="form-control" maxlength="100" placeholder="Enter Color" required="required" type="text" />
</div>
</div>
<div class="col-md-6">
<label class="control-label">DROPDOWNS REQUIRED?</label>
<div class="form-inline">
<div class="radio">
<label>
<input name="optradio" type="radio" />Yes</label>
</div>
<div class="radio">
<label>
<input name="optradio" type="radio" />No</label>
</div>
</div>
</div>
</div>
</div>
</div>
<!--End color rotation well-->
</div>
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span><a id="addcolor">Add Color</a>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button">Next</button>
Here's the link to the working example:
jsfiddle

Sure, see this updated fiddle;
Essentially you want to bind an event to the document using .on(), like:
$(document).on('click', '.remove', function(e){
$(this).closest('.color-wap').remove();
});
I added the .color-wrap class to the #color div to avoid working with duplicated ID's via cloning, and added the .remove class to the remove button

1)Use the .on() to bind events on dynamically created elements
2)jquery selector ^ can help in selecting the div with id of color-number.
3).animate() to toggle height of the div or .remove if you want to completly remove the element.
$(function() {
var count = 0;
$('#addcolor').click(function() {
count++;
var clonediv = $('#color');
$(clonediv).clone().insertBefore('#color');
$(clonediv).attr("id", "color" + count);
});
$(document).on("click", ".glyphicon-remove-sign", function() {
$(this).closest("div[id^='color']").animate({"height":"toggle"});
//$(this).closest("div[id^='color']").remove();
})
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="col-xs-12" style="max-width: 800px">
<div class="col-md-12" id="test">
<h3>COLOR ROTATION</h3>
<!--Begin color rotation well-->
<div id="color">
<div class="well well-sm">
<div class="row">
<div class="col-md-6">
<div class="form-group"><a><span class="glyphicon glyphicon-remove-sign" aria-hidden="true" style="padding-right: 2px;"></span></a>
<label class="control-label">Color 1</label>
<input class="form-control" maxlength="100" placeholder="Enter Color" required="required" type="text" />
</div>
</div>
<div class="col-md-6">
<label class="control-label">DROPDOWNS REQUIRED?</label>
<div class="form-inline">
<div class="radio">
<label>
<input name="optradio" type="radio" />Yes</label>
</div>
<div class="radio">
<label>
<input name="optradio" type="radio" />No</label>
</div>
</div>
</div>
</div>
</div>
</div>
<!--End color rotation well-->
</div>
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span><a id="addcolor">Add Color</a>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button">Next</button>
</div>

jQuery .closest returns undefined

I've got the code below which works fine, however the jquery to add the items doesnt find the data-parent-room value and just returns undefined. This is the only thing not working :(
HTML:
<div id="inventoryRooms">
<!--BOX SHART-->
<div class="widget box formHolder" data-parent-room="1">
<!--ROOM NAME-->
<form class="widget-header rooms">
<input type="text" placeholder="Type Room name" name="roomName[]" class="form-input add-room-input input-width-xxlarge">
<input type="hidden" class="roomId" name="roomId[]">
<input type="hidden" class="inventoryId" name="inventoryId[]" value="<?=$_GET['inventory_id']?>">
<div class="toolbar no-padding">
<div class="btn-group">
<span class="btn saveRoom"><i class="icon-ok"></i> Save Room</span>
</div>
</div>
</form>
<!--/END-->
<!--GENERIC ROW TITLES-->
<div class="widget-header header-margin hide">
<div class="row row-title">
<div class="col-md-3"><h5>ITEM</h5></div>
<div class="col-md-3"><h5>DESCRIPTION</h5></div>
<div class="col-md-3"><h5>CONDITION</h5></div>
<div class="col-md-2"><h5>PHOTOGRAPH</h5></div>
<div class="col-md-1 align-center"><h5><i class="icon-cog"> </i></h5></div>
</div>
</div>
<!--/END-->
<!--ADD ITEM-->
<div class="items">
</div>
<!--/END-->
<div class="toolbar-small">
<div class="btn-group">
<span class="btn addItem"><i class="icon-plus"></i> Add Item</span>
<span data-toggle="dropdown" class="btn dropdown-toggle"><i class="icon-gear"></i> Options<span class="button-space"></span><i class="icon-angle-down"></i></span>
<ul class="dropdown-menu pull-right">
<li><i class="icon-trash"></i> Delete Room</li>
</ul>
</div>
</div>
</div>
</div>
jQuery:
$(document).on('click','.addItem', function(){
$('<!--ROW START-->\
<form class="widget-content item">\
<div class="row">\
<div class="col-md-3"><input type="text" class="form-control" name="itemName[]"></div>\
<div class="col-md-3"><textarea class="auto form-control" name="itemDescription[]" cols="20" rows="1" style="word-wrap: break-word; resize: vertical;"></textarea></div>\
<div class="col-md-3"><textarea class="auto form-control" name="itemCondition[]" cols="20" rows="1" style="word-wrap: break-word; resize: vertical;"></textarea></div>\
<input type="hidden" class="itemId" name="itemId[]" value="">\
<input type="hidden" name="itemInventoryId[]" value="<?=$_GET["inventory_id"]?>">\
<input type="hidden" name="itemParent[]" value="'+$(this).closest().attr('data-parent-room')+'">\
<div class="col-md-2">\
<div class="fileinput-holder input-group">\
<input id="fileupload" type="file" name="files[]" data-url="uploads/">\
</div>\
</div>\
<div class="col-md-1 align-center"><i class="save icon-ok large"> </i> <i class="delete icon-trash large"> </i></div>\
</div>\
</form>\
<!--/ROW END-->').fadeIn(500).appendTo($(this).parents().siblings('.items'));
$(this).parent().parent().siblings('.widget-header, .header-margin, .hide').removeClass('hide').fadeIn();
});
Like i say, it all works fine apart from that damn data-parent-room value. Any help is appreciated! using jQuery 1.10.1

You need to pass a selector to closest
//since the attribute data-parent-room is for the `formHolder` element
$(this).closest('.formHolder').att('data-parent-room')
or
//find the closest element with attribute data-parent-room
$(this).closest('[data-parent-room]').att('data-parent-room')
instead of using .att('data-parent-room'), you can use .data('parentRoom') also

You need to tell what closest parent you want in selector. Pass the class you have with div having attribute data-parent-room
$(this).closest('.widget.box.formHolder').attr('data-parent-room')
It would be better if you use data() instead of attr for addressing data
$(this).closest('.widget.box.formHolder').data('parent-room')

$(this).closest('[data-parent-room]').data('parent-room');