Bootstrap modals and Kendo UI divs

[Ben]

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;

$.post("http://myurl/tools/email_form.php",{

"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);

});

[Dimo]

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