Buttonset does not work anymore after adding div's - jquery-ui

With succes I've created a page that uses the set of radio buttons that are formatted jquery. But as soon as I add the div's need to position the content on the page, the radio buttons are still formatted, but do not act as radio buttons anymore (they act like checkboxes). This is my code, what's wrong with it?
<script>
$(document).ready(function() {
$("#dt_hel").buttonset();
});
</script>
<!-- end script radiobuttons -->
<div class="demo">
<div id="ContentContainerLeft" >
<form id="dt_this_form" name="dt_this_form" action="this.php" method="post">
<p>
</div>
<div id="ContentContainerMiddle" >
<P>
<div id="dt_hel" style="font-size:80%;">
<input type="radio" id="radio1" name="dt_hel" value="0" /><label for="radio1">Lower</label>
<input type="radio" id="radio2" name="dt_hel" value="1" /><label for="radio2">Equal</label>
<input type="radio" id="radio3" name="dt_hel" value="2" checked/><label for="radio3">Higher</label>
</div>
<P></P>
</div>
<div id="TweetContainer" >
<P>
</div> <!-- end tweetcontainer -->
</div><!-- End demo -->
</form>

If you follow the rule of closing the most recent tag before closing older tag (ie set the form opening tag above the tag) then it should work e.g.
<form id="dt_this_form" name="dt_this_form" action="this.php" method="post">
<div class="demo">
<div id="ContentContainerLeft" >
<p>
</div>
<div id="ContentContainerMiddle" >
<P>
<div id="dt_hel" style="font-size:80%;">
<input type="radio" id="radio1" name="dt_hel" value="0" /><label for="radio1">Lower</label>
<input type="radio" id="radio2" name="dt_hel" value="1" /><label for="radio2">Equal</label>
<input type="radio" id="radio3" name="dt_hel" value="2" checked/><label for="radio3">Higher</label>
</div>
<P></P>
</div>
<div id="TweetContainer" >
<P>
</div> <!-- end tweetcontainer -->
</div><!-- End demo -->
</form>

Related

Using ajax in thymleaf, update only part of form

I use SpringBoot, Thymeleaf.
I want to update the value only for part of form in update page.
<form id="form" class="needs-validation col-sm-6" th:action="#{'/user/edit/' + ${userInfo.id}}" th:object="${userInfo}" method="post" novalidate>
<input type="hidden" name="_method" value="put"/>
<input type="hidden" name="id" th:value="${userInfo.id}"/>
<div class="form-group">
<label for="name">Name</label>
<h4 id="name" th:text="${userInfo.name}" th:value="${userInfo.name}"></h4>
<input type="hidden" name="name" th:value="${userInfo.name}"/>
</div>
<hr>
<div class="form-group">
<label for="nickname">Nickname</label>
<input id="nickname" type="text" name="nickname" th:value="${userInfo.nickname}" placeholder="enter nickname" required minlength="2">
</div>
<hr>
<div class="form-group">
<label for="volunteerTime">Volunteer Time</label>
<span id="volunteerTime" th:text="${userInfo.volunteerTime}+'hour'" name="volunteerTime" th:value="${userInfo.volunteerTime}"></span>
<input type="text" size="5px" placeholder="hour"/>
<button type="button" name="action" value="plus" onclick="ajax()">plus</button>
<button type="button" name="action" value="minus" onclick="ajax()">minus</button>
</div>
<div class="form-group">
<input type="submit" value="update">
</div>
</form>
The "volunteerTime" section of the above code seeks to update and show values added to existing data according to the number entered.
The same goes for Minus.

.NET MVC - adding a radio button with new input

I am new to C# and .NET MVC. I have a View page with a radio button with two options, those are tied to a controller. When I try to add a new radiobutton by copying the radio button code in the View page, the newly added radiobuttons act like a continuation of the existing radiobuttons with the same input. I would like to differentate both radio buttons and use the input from the newly added radiobuttons elsewhere. Parts from my controller and Viewpage are below. Please ask me if you need more information.
Viewpage:
<div class="form-group">
<div class="control-label col-md-2"></div>
<div class="col-md-10">
<div class="clearfix">
<div class="pull-left inline-radio">
<input type="radio" name="radiobtn" value="1" class="clsradio" />
<label for="radiobtn">#kisanResources.App_GlobalResources.ResourceProductionMaterial.locale</label>
</div>
<div class="pull-left inline-radio">
<input type="radio" name="radiobtn" value="2" class="clsradio" />
<label for="radiobtn">#kisanResources.App_GlobalResources.ResourceProductionMaterial.foreign</label>
</div>
</div>
</div>
</div>
// ....
<div class="form-group">
<div class="control-label col-md-2"></div>
<div class="col-md-10">
<div class="clearfix">
<div class="pull-left inline-radio">
<input type="radio" name="radiobtn" value="3" class="clsradio" />
<label for="radiobtn">#kisanResources.App_GlobalResources.ResourceProductionMaterial.locale</label>
</div>
<div class="pull-left inline-radio">
<input type="radio" name="radiobtn" value="4" class="clsradio" />
<label for="radiobtn">#kisanResources.App_GlobalResources.ResourceProductionMaterial.foreign</label>
</div>
</div>
</div>
</div>
When I add the second radiobutton with values 3 and 4, I want it to be treated as a different input, not the same as the first radiobutton.
Can you help me with this?
Thanks!
You will need to give the second radio button a different name, so in the below code I have given it the name="radiobtn2"
<div class="clearfix">
<div class="pull-left inline-radio">
<input type="radio" name="radiobtn" value="1" class="clsradio" />
<label for="radiobtn">#kisanResources.App_GlobalResources.ResourceProductionMaterial.locale</label>
</div>
<div class="pull-left inline-radio">
<input type="radio" name="radiobtn2" value="2" class="clsradio" />
<label for="radiobtn">#kisanResources.App_GlobalResources.ResourceProductionMaterial.foreign</label>
</div>
</div>
So within a form no two radio buttons should have the same name attribute if you want them to perform different actions.
I would also suggest reading id vs. name
Try this solution , it should fix your problem, it seems you are referring two different ratio buttons with same name radiobtn. that is causing issue.
Here i updated two radio buttons names like
<input type="radio" name="radiobtnFirst" value="3" class="clsradio" />
<input type="radio" name="radiobtnSecond" value="4" class="clsradio" />
Complete Form:
<div class="form-group">
<div class="control-label col-md-2"></div>
<div class="col-md-10">
<div class="clearfix">
<div class="pull-left inline-radio">
<input type="radio" name="radiobtn" value="1" class="clsradio" />
<label for="radiobtn">#kisanResources.App_GlobalResources.ResourceProductionMaterial.locale</label>
</div>
<div class="pull-left inline-radio">
<input type="radio" name="radiobtn" value="2" class="clsradio" />
<label for="radiobtn">#kisanResources.App_GlobalResources.ResourceProductionMaterial.foreign</label>
</div>
</div>
</div>
</div>
// ....
<div class="form-group">
<div class="control-label col-md-2"></div>
<div class="col-md-10">
<div class="clearfix">
<div class="pull-left inline-radio">
<input type="radio" name="radiobtnFirst" value="3" class="clsradio" />
<label for="radiobtn">#kisanResources.App_GlobalResources.ResourceProductionMaterial.locale</label>
</div>
<div class="pull-left inline-radio">
<input type="radio" name="radiobtnSecond" value="4" class="clsradio" />
<label for="radiobtn">#kisanResources.App_GlobalResources.ResourceProductionMaterial.foreign</label>
</div>
</div>
</div>
</div>

Redirect to a specific site after login via spring security

I have coded a sign up page:
<div class="container">
<div class='fheader'>
<g:message code="springSecurity.login.header" />
</div>
<g:if test='${flash.message}'>
<div class='login_message'>
${flash.message}
</div>
</g:if>
<form action='${postUrl}' method='POST' id='loginForm'
class="form-signin" autocomplete='off'>
<h2 class="form-signin-heading">Please sign in</h2>
<input type='text' class="form-control" name='j_username'
id='username' placeholder="Username" /> <input type='password'
class="form-control" name='j_password' id='password'
placeholder="Password" />
<p id="remember_me_holder">
<input type='checkbox' class='checkbox'
name='${rememberMeParameter}' id='remember_me'
<g:if test='${hasCookie}'>checked='checked'</g:if> /> <label
class="checkbox" for='remember_me'><g:message
code="springSecurity.login.remember.me.label" /></label>
</p>
<!-- <label class="checkbox"> <input type="checkbox"
value="remember-me"> Remember me
</label> -->
<input class="btn btn-lg btn-primary btn-block" type='submit'
id="submit" value='${message(code: "springSecurity.login.button")}' />
</form>
</div>
<!-- /container -->
<script type='text/javascript'>
<!--
(function() {
document.forms['loginForm'].elements['j_username'].focus();
})();
// -->
</script>
Into the page I have integrated the spring-security-core:2.0-RC2 plugin.
However, when I start the server and try to log in with my created users I get nothing. No notification that it worked, no redirect.
In fact I just want to redirect to my main page mapped as "/"(view:"/index") in the URLMappings.groovy
How to change the redirect?
I really appreciate your answer!
In your config file:
grails.plugins.springsecurity.successHandler.defaultTargetUrl="/someController/someAction"

Vertical Alignment on JQuery Mobile Grid

I am attempting to set up a page using JQuery Mobile, where I have a 3 column grid, with a label, a text input and a set of horizonally-aligned radio-buttons. For some reason Grid-element c sets it's height larger than the other 2, and I can't seem to force the first 2 cells to align with it.
An example of the code is at: http://jsfiddle.net/5WSj4/1/
Here is the code in question
<div data-role="page" id="page_fullDialog">
<div id="dialog_main" data-role="content">
<fieldset class="ui-grid-b">
<div class="ui-block-a" style="width:30%">
<label style="vertical-align:top" data-mini="true" for="leagueNameInput">League Name:</label>
</div>
<div class="ui-block-b" style="width:10%">
<input type="text" style="vertical-align:top" data-mini="true" name="leagueNameInput" id="leagueNameInput" maxlength="4" value="" data-mini="true" />
</div>
<div class="ui-block-c" style="width:60%; text-align: right;">
<div data-role="fieldcontain" data-mini="true">
<fieldset data-role="controlgroup" data-mini="true" data-type="horizontal">
<!-- <legend>Difficulty:</legend> -->
<input type="radio" name="difficulty" id="difficultyEasy" value="choice-1" />
<label for="difficultyEasy">Easy</label>
<input type="radio" name="difficulty" id="difficultyMedium" value="choice-2" checked="checked" />
<label for="difficultyMedium">Medium</label>
<input type="radio" name="difficulty" id="difficultyHard" value="choice-2" />
<label for="difficultyHard">Hard</label>
</fieldset>
</div>
</div>
</fieldset>
</div>
</div>
Any help with this would be greatly appreciated.
For some bizarre reason, ui-controlgroup has a top margin of 0.5em. Overriding it in the fieldset element solves the problem, i.e.
style="margin-top: 0px;"

Jquery Mobile Dialog with Form

I have a JQuery Mobile dialog with a form on it:
<form action="send" method="post">
<input type="text"/>
<input type="submit" />
</form>
What I want is that when the form is submitted, I just want to close the dialog or go back to the previous page. How to do it with JQM.
Try adjust next sample to your solution:
<div data-role="popup" id="popupLogin" data-theme="a" class="ui-corner-all">
<form>
<div style="padding:10px 20px;">
<h3>Please sign in</h3>
<label for="un" class="ui-hidden-accessible">Username:</label>
<input type="text" name="user" id="un" value="" placeholder="username" data-theme="a" />
<label for="pw" class="ui-hidden-accessible">Password:</label>
<input type="password" name="pass" id="pw" value="" placeholder="password" data-theme="a" />
<button type="submit" data-theme="b">Sign in</button>
</div>
</form>
</div>

Resources