Can I debug the below mentioned code on *.cshtml file ? I have used knockout js as my client side java script library.
<div data-bind="ifnot: book()">
<div>
<h2>Add New Book</h2>
</div>
<div>
<label for="name">Name</label>
<input data-bind="value: $root.Name" type="text" title="Name" />
</div>
<div>
<label for="publisher">Publisher</label>
<input data-bind="value: $root.Publisher" type="text" title="Publisher" />
</div>
<div>
<label for="price">Price</label>
<input data-bind="value: $root.Price" type="text" title="Price" />
</div>
<br />
<div>
<button data-bind="click: $root.create">Save</button>
<button data-bind="click: $root.reset">Reset</button>
</div>
</div>
On above code I need to check the values of say "book() or $root.Name ,etc".Can I do that ?
UPDATE:On Fire bug
You'll need to use client side debugging. Either use a developer toolbar (opened with F12 in most browsers) or use Visual Studio Client Script debugging.
After the #nemesv link I did small R&D about this.Below I have mentioned the way you can find the KO binding values of the DOM elements.Hope this will help someone in future.
Link for the Extension : KnockoutJs Context Debugger
The way you can find the KO Values on DOM elements.
Related
Until now I gave been using Avoriaz, but I would like to use Jest now ...
found some tuts... but could not get any hint on testing my contact view component sending POST to an external urk...
<form id="contactForm" action="https://formspree.io/mysite.com" method="POST">
<div class="form-group">
<input type="hidden" name="_next" v-model="next" />
<input type="hidden" name="_language" v-model="language" />
<input type="hidden" name="_subject" value="Contact from my site" />
<input v-model="sendername" ...>
<input v-model="email" ...>
</div>
<div class="form-group">
<div class="uk-margin">
<textarea v-model="message" ...></textarea>
</div>
</div>
<button type="submit" class="btn btn-primary btn-gradient submit">Send</button>
</form>
As the external post URL is only valid for production... I would like mock it and use the _next property as a callback page url...
any useful links to put me on first tracks ?? thanks a lot for feedback
You should prevent submit and post data using axios for example and then mock axios.
<!-- the submit event will no longer reload the page -->
<form v-on:submit.prevent="onSubmit"></form>
It's an easier way to unit-test that.
I am trying append EJS templates using jQuery, I am not sure if what I am doing is right.
views/form/room-form.ejs
<form>
...
<div class="add_room_inputs">
<%- include partials/add_room %>
</div>
<div id="NewAddRoomForm">
<p>Add new form</p>
</div>
...
</form>
\assets\linker\js\custom-functions.js
$(document).ready(function(){
$('#NewAddRoomForm').click(function() {
$('.add_room_inputs').append('<%- include /assets/linker/templates/add-room-input.ejs %>');
});
}
/assets/linker/templates/room-input.ejs
<input name="rooms[]" class="form-control" placeholder="Room Name" type="text">
alternative solution (custom-functions.js file) which fails on file not found
var html = new EJS({url: '/assets/linker/templates/add-room-input.ejs.ejs'}).render();
$('#NewAddRoomForm').click(function() {
$('.add_room_inputs').append(html);
});
How can I implement such thing?
Did you include jst.js in the layout? by default it should be there as you are using Sails JS.
What you're trying to do wont work...
The problem is that the server has already rendered the template and sent the result to the client. Also the client doesn't have access to the view files on the server.
An Ajax framework like KnockoutJS is probably closer to what you are looking for, but there are others.
Here...I decided to make you a fiddle
http://jsfiddle.net/8D34n/23/
SO wants code too so here is a repaste
<form>
<h1 data-bind="text: form_title"></h1>
Add Form
<br><br>
<div id="NewAddRoomForm" data-bind="foreach: form_list">
<div data-bind="text: 'Form '+($index() + 1)"></div>
<input data-bind="value: name" /><br>
<input data-bind="value: age" />
</div>
<br><br>
</form>
View results
I am working on an ASP.NET MVC 4 Project. I want to style data validation errors on my login page with Bootstrap 3.0. When I debug the page and it gives data validation errors, this codes are disappeared in source of my login form:
<form action="/Account/Login" class="col-md-4 col-md-offset-4 form-horizontal well" method="post"><input name="__RequestVerificationToken" type="hidden" value="Zbg4kEVwyQf87IWj_L4alhiHBIpoWRCJ9mRWXF6syGH4ehg9idjJCqRrQTMGjONnywMGJhMFmGCQWWvBbMdmGFSUPqXpx6XaS4YfpnbFm8U1" /><div class="validation-summary-errors"><ul><li>The user name or password provided is incorrect.</li>
</ul></div> <div class="form-group control-group">
<div class="col-md-6 col-md-offset-3">
<input class="input-validation-error form-control" data-val="true" data-val-required="User name alanı gereklidir." id="UserName" name="UserName" placeholder="Kullanıcı Adı" type="text" value="" />
<span class="field-validation-error" data-valmsg-for="UserName" data-valmsg-replace="true">User name alanı gereklidir.</span>
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-3">
<input class="input-validation-error form-control" data-val="true" data-val-required="Password alanı gereklidir." id="Password" name="Password" placeholder="Şifre" type="password" />
<span class="field-validation-error" data-valmsg-for="Password" data-valmsg-replace="true">Password alanı gereklidir.</span>
</div>
</div>
<div class="form-group">
<div class="col-md-4 col-md-offset-4">
<button class="btn btn-default" type="submit">Giriş Yap</button>
</div>
</div>
</form>
How can I style these errors like "for=inputError" property of label with Bootstrap 3?
As it's shown in Bootstrap's docs, you need to apply class has-error to the div that contains the input and has class form-group:
<div class="form-group has-error">
...
</div>
It's a quite ugly to write a condition for each property you want to check and apply class has-error depending on the results of that condition, though you can do it like so:
<div class="form-group #(Html.ViewData.ModelState.IsValidField(Html.IdFor(x => x.UserName)) ? null : "has-error" )">
This takes care of the server side validation. However, there is also client side validation you need to think about. For that you'd need to write some jQuery that would check for existence of class field-validation-error and apply class has-error depending on the result.
You may do it all your self, though I suggest checking out TwitterBootstrapMVC which does all of that automatically for you. All you'd have to write is:
#Html.Bootstrap().FormGroup().TextBoxFor(m => m.UserName)
Disclaimer: I'm the author of TwitterBootstrapMVC. Using it in Bootstrap 2 is free. For Bootstrap 3 it requires a paid license.
I'm having trouble getting Cucumber to "choose" a radio button and hoping someone can give me a sanity check. Without quoting a huge mass of HTML junk, here's the relevant portion (which I collected from print.html). It's within a modal div that is activated by a button. I can "click" that button and see the modal window appear (I'm running it as a #javascript scenario in Selenium).
<div class="modal-body pagination-centered">
<img src="/assets/payment.png" alt="Payment" />
<form novalidate="novalidate" method="post" id="edit_cart_1" class="simple_form edit_cart" action="/carts/complete" accept-charset="UTF-8">
<div style="margin:0;padding:0;display:inline">
<input type="hidden" value="✓" name="utf8" />
<input type="hidden" value="put" name="_method" />
</div>
<div class="control-group hidden cart_property_id">
<div class="controls">
<input type="hidden" name="cart[property_id]" id="cart_property_id" class="hidden" />
</div>
</div>
<div id="payment_fat_buttons" class="fat-buttons">
<div class="vertical-button-wrapper">
<input type="radio" value="cash" name="cart[payment_type]" id="cart_payment_type_cash_pay" data-property-id="1" />
<label for="cart_payment_type_cash_pay">Cash</label>
</div>
<div class="vertical-button-wrapper">
<input type="radio" value="credit" name="cart[payment_type]" id="cart_payment_type_credit_pay" data-property-id="1" />
<label for="cart_payment_type_credit_pay">Credit</label>
</div>
</div>
<div style="display: none;" id="cart_room_number_area_pay">
<div class="control-group string optional cart_room_number">
<label for="cart_room_number_pay" class="string optional control-label">Room number</label>
<div class="controls">
<input type="text" value="" size="50" name="cart[room_number]" id="cart_room_number_pay" class="string optional" />
</div>
</div>
</div>
<input type="checkbox" value="1" style="display: none;" name="receipt" id="receipt" />
<div class="sell-modal-footer">
<input type="submit" value="Complete With Receipt" name="commit" id="cart_complete_with_receipt" data_disable_with="Processing..." class="btn btn-danger" />
<input type="submit" value="Complete Sale" name="commit" data_disable_with="Processing..." class="btn btn-danger" />
</div>
</form>
</div>
I've tried as many different equivalent ways of getting at it that I can think of. Most obviously just by the label, or the ID, like:
choose 'cart_payment_type_cash_pay'
choose 'Cash'
which just gives me the error:
Unable to find radio button "cart_payment_type_cash_pay" (Capybara::ElementNotFound)
I thought it might have something to do with the modal dialog, visibility, etc. but I introduced the ID #payment_fat_buttons just for testing, and when I look for it like this:
find('#payment_fat_buttons').choose('Cash')
it finds that DIV OK, but still not the radio button. I also tried getting at it with :xpath on the whole page, and within a scope like:
within(:xpath, "//div[#id='payment_methods']") do
find(:xpath, ".//input[#id='cart_payment_type_cash_pay']").choose
end
which acts like it can also find the outer DIV, but not the radio button - I get the error:
Unable to find xpath ".//input[#id='cart_payment_type_cash_pay']" (Capybara::ElementNotFound)
Generally, it seems like I can find any arbitrary element around the radio buttons with :xpath or CSS expressions, just not the radio buttons. I can also push the submit buttons on the form without any problem. I tried dropping the data attributes as a test - no difference. Any help would be greatly appreciated. This is driving me nuts because it seems so simple, and yet I'm getting nowhere. I need to choose that for a big segment of Scenarios, so if I can't figure it out, I'll have to resort to something hokey and horrible. Many thanks in advance...
Relevant versions from Gemfile.lock:
rails (3.2.13)
cucumber (1.3.8)
gherkin (2.12.2)
cucumber-rails (1.4.0)
capybara (2.1.0)
selenium-webdriver (2.35.1)
I finally figured this one out. Capybara wasn't finding the radio button because buried deep in my styles was some CSS that hid it in order to change the appearance. Once I realized that, I figured out that I could side-step the whole issue of finding the radio button by just doing a click on the label instead:
find(:xpath, "//label[#for='the_radio_button_id']").click
I didn't realize it was possible to get at radio buttons that way - but in any case, it solves the issue of how to click a radio button that Capybara won't find due to styling or other issues. Hope that helps someone else.
I'm using MVC4 but I imagine this is an issue for anyone using the new Bootstrap 3 version. Since form-control is now width:100% by default, what is the best practice for placing validation messages?
In version 2.x, placing the validation messages in the help-inline span just after the input control worked best to ensure that the message was placed to the right of the control.
But in version 3, they always get pushed to the bottom making all the controls shift down because the validation messages are forced under the control.
<div class="form-group has-error">
<label for="Label" class="col-lg-2 control-label">Label</label>
<div class="col-lg-5">
<input class="form-control input-validation-error" data-val="true" data-val-required="Required" id="Label" name="Label" type="text" value="">
<span class="help-inline"><span class="field-validation-error" data-valmsg-for="Label" data-valmsg-replace="true"><span for="Label" generated="true" class="">Required</span></span></span>
</div>
</div>
I've considered manually setting them on a new column like this (below) but wondering if there was a more acceptable way or a less manual way of dealing with this.
<div class="form-group has-error">
<label for="Label" class="col-lg-2 control-label">Label</label>
<div class="col-lg-5">
<input class="form-control input-validation-error" data-val="true" data-val-required="Required" id="Label" name="Label" type="text" value="">
</div>
<div class="col-lg-5">
<p class="form-control-static"><span class="field-validation-error" data-valmsg-for="Label" data-valmsg-replace="true"><span for="Label" generated="true" class="">Required</span></span></p>
</div>
</div>
I wouldn't say there are "best practices" for presenting form validation errors. It's more of a personal design choice.
Depending on how much JS you want to write, you could get a little slick and insert an input group addon which holds an error message in a tooltip icon, like so...
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-addon">
<i data-toggle="tooltip" title="Error msg here" data-container="body" class="glyphicon glyphicon-question-sign"></i>
</span>
</div>
Honestly though, I think messages appearing below input fields are fine, as long as they don't disturb page layout and push content down when they appear. (Which is just a matter of having a container that displays block and has a a hard-coded height.)