This is a migrated thread and some comments may be shown as answers.

Bootstrap modals and Kendo UI divs

1 Answer 350 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Ben
Top achievements
Rank 1
Ben asked on 06 Mar 2013, 05:21 PM
Hi,

I have a Bootstrap modal setup as below, with DIVs that are supposed to be linked to the Kendo UI divs.

However, upon clicking the submit button, the form is not hidden (visible: hideMain) and the message is not presented (visible: confirmed).  Despite the divs and JS being setup correctly. 

What should happen is that when "send message" is clicked, the form div should hide and the message div should appear.

   <!-- Button to trigger modal -->
    <a href="#emailModal" role="button" class="btn btn-primary" data-toggle="modal">Email Us</a>
    <!-- Modal -->
    <div id="emailModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="emailModalLabel" aria-hidden="true">
    <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="emailModalLabel">Email Us</h3>
    </div>
    <div class="modal-body">
<!-- Email Form -->
<div data-bind="visible: hideMain">
<form>
<fieldset>
<p><label>Title</label><br />
<select data-bind="source: titles, value: title"></select><br />
<label>First Name</label><br />
<input type="text" data-bind="value: firstName" /><br />
<label>Last Name</label><br />
<input type="text" data-bind="value: lastName" /><br />
<label>Company Name </label><br />
<input type="text" data-bind="value: companyName" /><br />
<label>Email Address</label><br />
<input type="text" data-bind="value: emailAddress" /><br />
<label> Phone Number</label><br />
<input type="text" data-bind="value: phone" /><br />
<label>Subject Name</label><br />
<select data-bind="source: subjects, value: subject"></select><br />
<label>Message Body</label><br />
<textarea data-bind="value: message" cols="100" rows="10"></textarea></p>
</fieldset><br/>
<p><label class="checkbox"><br />
<input type="checkbox" data-bind="checked: agreed"> I agree to your terms & conditions and privacy policy<br />
</label></p>
<div class="form-actions">
<p><button data-bind="enabled: agreed, click: register" class="btn btn-primary">Send message</button></p>
</div>
</form>
</div>
<!-- End Email Form -->
<!-- Confirm Message -->
<div data-bind="visible: confirmed">
<p><span data-bind="text: message"></span></p>
</div>
<!-- End confirm Message -->
    </div>
    <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <!-- <button class="btn btn-primary" data-bind="enabled: agreed, click: register">Save changes</button> -->
    </div>
    </div>
<!-- end modal -->


$(document).ready(function() {
//jQuery(document).ready(function($) {
var viewModel = kendo.observable({
title:"Mr",
titles:["Mr","Mrs","Ms","Dr","Sir","Prof"],
firstName: "",
lastName: "",
companyName: "",
emailAddress:"",
phone:"",
subject:"Sales Request",
subjects:["Sales Request","Literature Request","Recruitment Question","Comment","Other Request"],
message:"",
agreed: false,
confirmed: false,
hideMain:true,
messageID:"",
register: function(e) {
var that = this;
"title":viewModel.get("title"),
"firstName":viewModel.get("firstName"),
"lastName":viewModel.get("lastName"),
"companyName":viewModel.get("companyName"),
"emailAddress":viewModel.get("emailAddress"),
"phone":viewModel.get("phone"),
"subject":viewModel.get("subject"),
"message":viewModel.get("message")
},
function(data) {
that.set("messageID", data.message);
console.log(data.message);
},"json");
e.preventDefault();
this.set("confirmed", true);
this.set("hideMain",false);
},
startOver: function() {
this.set("confirmed", false);
this.set("agreed", false);
this.set("hideMain", true);
this.set("firstName", "");
this.set("lastName", "");
this.set("companyName", "");
this.set("emailAddress", "");
this.set("phone", "");
this.set("subject", "Sales Request");
this.set("message", "");
this.set("messageID", "");
this.set("title","Mr");
}
});
kendo.bind($("form"), viewModel);
});

1 Answer, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 08 Mar 2013, 10:11 AM
Hello Ben,

Does the scenario work if the form is not inside a modal popup? If yes, then the problem is caused by the fact that the form is moved in the DOM. In this case you need to first create the modal popup and then create the Kendo UI MVVM bindings.

All the best,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
General Discussions
Asked by
Ben
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Share this question
or