I am trying to generate a hidden div with a rails partial inside it. My intention is to use that hidden div as target for fancybox to open the edit form in a popup.
My partial code looks like:
<div style="display:none">
<div id="inline-edit-form-<%=feed_item.id%>" class="inline-edit-form">
<%= form_for (feed_item) do |f| %>
<%=render :partial => 'calendars/form', :locals => { :f => f }%>
<% end %>
</div>
</div>
Now, in Chrome, the layout is as intended and the partial is hidden initially. Fancybox manages to render this partial when its source link is clicked and things work fine. But in Firefox, the hidden DIV is not hidden by default and all controls are displayed. I checked HTML DOM structure on both Chrome and Firefox and there are huge differences.
Markup in Chrome (correct):
<div style="display:none">
<div id="inline-edit-form-596" class="inline-edit-form">
<form accept-charset="UTF-8" action="/calendars/596" class="edit_calendar" d="edit_calendar_596" method="post"></form>
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="✓">
<input name="_method" type="hidden" value="put">
<input name="authenticity_token" type="hidden" value="">
</div>
<div>
<label for="calendar_event">Event</label><br>
<input class="inline-edit-input" id="calendar_event" name="calendar[event]" size="30" type="text" value="Interesting event">
</div>
The above markup is correct and what is expected. The shocking markup in Firefox is:
<div style="display: none;">
<div class="inline-edit-form" id="inline-edit-form-598">
</div>
</div>
<div style="margin: 0pt; padding: 0pt; display: inline;"></div>
<div>
<label for="calendar_event">Event</label><br>
<input type="text" value="Another interesting important event" size="30"
name="calendar[event]" id="calendar_event" class="inline-edit-input">
</div>
This mark up is not only incorrect, its not even rendering the FORM tag at all. I checked and rechecked my CSS and DOM structure but Firefox simply choses to screw the layout.
Any help?
Thanks for the hint. There was one validation error which fixed the error. The error was that I was including inside the table. After moving the hidden divs outside the table, the issue got resolved.
Related
I'm having difficulty getting Bootstrap's button addons to work in my MVC view. I'm using the latest NuGet version of ASP.NET MVC (5.1 rc1) and Bootstrap (3.03).
I have the following in my view (now that I've pared it back to just hand-coded HTML rather than using Html.EditorFor(), in an attempt to getting it to work):
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
#Html.ValidationSummary(true)
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" />
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
<div class="col-lg-6">
</div>
</div>
This generates the following HTML:
<form action="xxx" method="post">
<input name="__RequestVerificationToken" type="hidden" value="T3k..." />
<div class="form-horizontal">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" />
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
<div class="col-lg-6">
</div>
</div>
</div>
</form>
The problem is that, when this is displayed in the browser (Chrome 32 / IE 11), there's a big gap between the input box and the button. Like this:
If I reduce the size of the div surrounding the input-group div to col-lg-3 or smaller, it's fine. But anything larger than that leaves a gap.
It's as though there's a maximum size on the input - and indeed, all my inputs do seem to be smaller their container div...
What could be causing this?
The default Site.css stylesheet that comes with a new MVC 5 project has a rule that limits the max-width of inputs. What you're getting is the result of the control spanning the full available width like it's supposed to, but then the input, itself, is being constrained to a defined width. Just comment out that piece of the stylesheet and everything will work as it should.
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
It's a pretty egregious shortcut the team seems to have taken in order to quickly build the sample site.
I was trying the following test in my Rails app:
test "markup need for store.js.coffee is in place" do
get :index
assert_select '.store .entry > img', 3
assert_select '.entry input[type=submit]', 3
end
The test is all ok, I haven't failures or errors, but I can't understand what assert_selects are looking for in my HTML.
I will try to explain myself in a better way: is assert_select '.entry input[type=submit]', 3 looking for exact 3 fields of input type=submit inside the .entry element? and What is the first asser_select looking for?
This is the HTML where assert_selects act
<body class="store">
<div id="columns">
<div id="main">
<h1>Your Pragmatic Catalog</h1>
<div class="entry">
<img height="95px" src="/assets/cs.jpg" alt="Cs">
<h3>CoffeeScript</h3>
<p> CoffeeScript is JavaScript done right. It provides all of JavaScript's functionality wrapped in a cleaner, more succinct syntax. In the first book on this exciting new language, CoffeeScript guru Trevor Burnham shows you how to hold onto all the power and flexibility of JavaScript while writing clearer, cleaner, and safer code. </p>
<div class="price_line">
<span class="price">$36.00</span>
<form class="button_to" method="post" data-remote="true" action="/line_items?product_id=2">
<div>
<input type="submit" value="Add to Cart">
<input type="hidden" value="H5APP93C0onJsfliaMRqww+ER0u/hTZAjvGIeMluHIo=" name="authenticity_token">
</div>
</form>
</div>
</div>
<div class="entry">
<img height="95px" src="/assets/hp.jpg" alt="Hp">
<h3>Harry Potter</h3>
<p>Mago</p>
<div class="price_line">
<span class="price">$15.00</span>
<form class="button_to" method="post" data-remote="true" action="/line_items?product_id=5">
<div>
<input type="submit" value="Add to Cart">
<input type="hidden" value="H5APP93C0onJsfliaMRqww+ER0u/hTZAjvGIeMluHIo=" name="authenticity_token">
</div>
</form>
</div>
</div>
<div class="entry">
<img height="95px" src="/assets/ruby.jpg" alt="Ruby">
<h3>Programming Ruby 1.9 & 2.0</h3>
<p> Ruby is the fastest growing and most exciting dynamic language out there. If you need to get working programs delivered fast, you should add Ruby to your toolbox. </p>
<div class="price_line">
<span class="price">$49.95</span>
<form class="button_to" method="post" data-remote="true" action="/line_items?product_id=3">
<div>
<input type="submit" value="Add to Cart">
<input type="hidden" value="H5APP93C0onJsfliaMRqww+ER0u/hTZAjvGIeMluHIo=" name="authenticity_token">
</div>
</form>
</div>
</div>
<div class="entry">
<img height="95px" src="/assets/rtp.jpg" alt="Rtp">
<h3>Rails Test Prescriptions</h3>
<p>
<em>Rails Test Prescriptions</em>
is a comprehensive guide to testing Rails applications, covering Test-Driven Development from both a theoretical perspective (why to test) and from a practical perspective (how to test effectively). It covers the core Rails testing tools and procedures for Rails 2 and Rails 3, and introduces popular add-ons, including Cucumber, Shoulda, Machinist, Mocha, and Rcov.
</p>
<div class="price_line">
<span class="price">$34.95</span>
<form class="button_to" method="post" data-remote="true" action="/line_items?product_id=4">
<div>
<input type="submit" value="Add to Cart">
<input type="hidden" value="H5APP93C0onJsfliaMRqww+ER0u/hTZAjvGIeMluHIo=" name="authenticity_token">
</div>
</form>
</div>
</div>
</div>
</div>
</body>
Good question. I'm working through the same book - Agile Web Development with Rails 4. It's good stuff.
To answer your question:
The first assert_select is looking for exactly 3 image elements that are direct children of the .entry element which is below the .store element on the dom tree.
The second is, as you suggest, looking for 3 inputs fields of the type submit that are below the .entry element on the dom tree.
First select is looking for img placed as first child of element with .entry class, which is descendant of element with class .store
http://css-tricks.com/child-and-sibling-selectors/
I have a fairly simple form created in a partial view and loading the form on a jquery dialog. The view is tightly bound to a model. When the user clicks on the submit button with out entering any inputs, I need to show the validation messages.
<div>
<form method="post" enctype="multipart/form-data" id="ssimForm" action="Home/ProcessUploadedFile"
onsubmit="return false;">
<div>
<h3>
Select the file to be uploaded :</h3>
<span>
<input type="file" name="UploadFileName" id="UploadFileName" /></span>
</div>
<div>
<h3>
Select the date range :</h3>
<span class="uslabel">From Date(MM/dd/yyyy): </span>
<input class="usdate" id="usfromdate" name="StartDate" type="date" />
<span class="uslabel">To Date(MM/dd/yyyy): </span>
<input class="usdate" id="ustodate" name="EndDate" type="date" />
</div>
<div>
<br />
<input type="submit" id="submitButton" name="submitButton" value="Process File" />
</div>
#Html.ValidationSummary()
<div class="message-success">
<span>#ViewBag.Confirmation</span>
</div>
<div class="message-error">
<span>#ViewBag.Error</span>
</div>
</form>
</div>
Now comes the actual problem. when I submit the form I am able to see the validationSummary object populated with the messages, but they are not getting rendered on the screen.
I am able to see the messages if I replace the content of the dialog with the response from the jquery ajax call, that fetches the entire view from the server side. I do not want to take this approach as I beleive this is not the correct way to return validation summary in MVC.
Am I missing something? Any help is appreciated.
I don't know why you don't have the #using (Html.BeginForm()) { } block.
Here is my blog post for a quick and easy way to set up Validation Summary + Unobtrusive Validation for MVC3+.
http://geekswithblogs.net/stun/archive/2011/01/28/aspnet-mvc-3-client-side-validation-summary-with-jquery-validation-unobtrusive-javascript.aspx
I am using bootstrap-sass 2.0.0 in my gemfile, but I am having trouble getting both prepended and appended content added to an input tag in a form to work.
I got on FireBug with FireFox and copied the exact html that they use for the example on the twitter bootstrap site, copied here:
div class="control-group">
<label class="control-label" for="appendedPrependedInput">Append and prepend</label>
<div class="controls">
<div class="input-prepend input-append">
<span class="add-on">$</span>
<input id="appendedPrependedInput" class="span2" type="text" size="16">
<span class="add-on">.00</span>
</div>
</div>
</div>
But I get the prepended text facing the wrong way (it looks like the appended tag) so it kind of looks like this: [span)[.....input....][span) instead of this: (span][.....input.....][span) .
Also appended buttons do not register as being appended (also with copied code from the example) like so: (....input....) (button) instead of (....input.....][button)
Any ideas on how I can get to this: (span][....input....][button) ? I already tried the code below:
<form class="form-inline">
<div class="control-group">
<div class="controls">
<div class="input-prepend input-append">
<span class="add-on">Search</span>
<input id="search" class="input-xlarge" type="text" size="16">
<button class="btn" type="button">Go!</button>
</div>
</div>
</div>
</form>
I appreciate any and all help!
You have the right idea, you just have to put everything that is either to be appended/prepended or have something appended/prepended to it on one line with no spaces.
Like this:
<form class="form-inline">
<div class="control-group">
<div class="controls">
<div class="input-prepend input-append">
<span class="add-on">Search</span><input id="search" class="input-xlarge" type="text" size="16"><button class="btn" type="button">Go!</button>
</div>
</div>
</div>
</form>
I tested this on my own Bootstrap setup and it displays properly.
Dazed and confused here... The field in question is a boolean, and I want the UI to be a checkbox (or a yes/no or on/off jQuery slider). Each time I try to add in this checkbox input, I end up getting a
Microsoft JScript runtime error: DOM Exception: HIERARCHY_REQUEST_ERR (3)
error.
Here's the HTML+Razor
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>End Game:</legend>
#Html.TextBoxFor(model => model.HandicapSession.WinByTwo, new { #type="checkbox" })
<label for="WinByTwo">Win By Two?</label>
</fieldset>
</div>
Here's the generated HTML:
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>End Game:</legend>
<input data-val="true" data-val-required="The WinByTwo field is required." id="HandicapSession_WinByTwo" name="HandicapSession.WinByTwo" type="checkbox" value="False" />
<label for="WinByTwo">Win By Two?</label>
</fieldset>
</div>
Apparently this error occurs when there are conflicting or overlapping id's as jQuery Mobile creates its checkbox widget
$.widget( "mobile.checkboxradio", $.mobile.widget, { ...etc...
But how do I use the HTML and/or razor to make a simple checkbox work in jQuery Mobile?
If the problem with jQuery Mobile really is duplicate names for the HTML tags, then you'll have to render your own input type=checkbox tag in HTML, as the ASP.NET MVC Html.CheckBoxFor helper method will render an input type=hidden tag with a duplicate name value. See this post for a discussion.
The hidden form tag is there because if you submit an unchecked checkbox to the server, the form value for that field isn't included. So a hidden input tag is included with value=false so that if the checkbox is unchecked, the value false is still submitted. The model binding process in MVC will filter out the duplicate form values for you, but if you're having a client-side problem with the duplicate name attributes, you'll have to render your own checkbox and label in HTML, then handle the fact that no value will be submitted for the HandicapSession.WinByTwo property when the box is unchecked. If no other property for HandicapSession is submitted, then that whole object will be null.
So, you can manually create the checkbox input and still load the checked and value attributes from your model, as desired, but you can run into model binding problems where the value for WinByTwo will still be false even when the box is checked.
Note also that the for attribute on your label doesn't match the ID of the checkbox in your sample. You need the full HandicapSession_WinByTwo.
The following manually creates the input tags:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
<div data-role="page">
<div data-role="content">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>End Game:</legend>
<input type="checkbox" id="HandicapSession_WinByTwo" name="HandicapSession.WinByTwo" #(Model.HandicapSession.WinByTwo ? "checked=checked" : "") value="#(Model.HandicapSession.WinByTwo.ToString().ToLower())" />
<label for="HandicapSession_WinByTwo">Win By Two?</label>
</fieldset>
</div>
</div>
</div>
The HTML output is as follows for a checked checkbox on load:
<div data-role="page">
<div data-role="content">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>End Game:</legend>
<input type="checkbox" id="HandicapSession_WinByTwo" name="HandicapSession.WinByTwo" checked=checked value="true" />
<label for="HandicapSession_WinByTwo">Win By Two?</label>
</fieldset>
</div>
</div>
</div>
The best would be just to use the MVC helper methods, so I'm not sure if you'd tried the following. The default Html.CheckBoxFor and Html.LabelFor helper methods work with jQuery Mobile 1.0a4.1 or 1.1.0 just fine. The following works for me:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
<div data-role="page">
<div data-role="content">
#using (Html.BeginForm())
{
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>End Game:</legend>
#Html.CheckBoxFor(m => m.HandicapSession.WinByTwo)
#Html.LabelFor(m => m.HandicapSession.WinByTwo, "Win By Two?")
<input type="submit" id="SubmitForm" value="submit" />
</fieldset>
</div>
}
</div>
</div>
This produces the HTML output:
<div data-role="page">
<div data-role="content">
<form action="/Mobile/Mobile" method="post">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>End Game:</legend>
<input checked="checked" data-val="true" data-val-required="The WinByTwo field is required." id="HandicapSession_WinByTwo" name="HandicapSession.WinByTwo" type="checkbox" value="true" />
<input name="HandicapSession.WinByTwo" type="hidden" value="false" />
<label for="HandicapSession_WinByTwo">Win By Two?</label>
<input type="submit" id="SubmitForm" value="submit" />
</fieldset>
</div>
</form>
</div>
</div>
Fix might be pretty simple.
Choice 1: Go scorched earth and turn off Ajax based navigation. This will ensure that unique IDs stay unique. This will ensure that you never encounter this issue again. Only downside is that you lose the pretty little transitions from page to page (someone call the whambulance). You can do this by setting up a global configuration script...
script src="jquery.js"
script src="custom-scripting.js"
script src="jquery-mobile.js"
inside that you'll override the ajax settings to disable them...
$(document).bind("mobileinit", function(){
$.mobile.ajaxEnabled = false;
});
Choice 2: Call pages that are going to require this uniqueness with a link that has an attribute of rel='external' or target='_black' which will accomplish the same thing without disabling all ajax based navigation. If you are reaching the page as a results of a form post, you can use data-ajax='false' on the form tag to accomplish a clean load.