I'm currently porting a jQTouch web project to jQuery Mobile and have run into the following issue: I need to display a form submit button in the page header, but unless I make the submit button an action in the header (instead of an input of type submit in the content) jQuery Mobile will always render that button as part of the form.
This will work (button will show on the right side of the page header):
<div data-role="header" data-theme="b">
<%: Resources.View.Account.Labels.DoLogOn %>
</div>
Thing is, I'd have to write custom javascript to trigger the submit, which obviously I'd rather not. If, on the other hand I handle this inside the form, i.e.
<% using (Html.BeginForm("LogOn", "Account",
new { returnUrl = Request.QueryString["ReturnUrl"] }, FormMethod.Post,
new { #class = "ui-body ui-body-c" }))
{%>
<fieldset class="ui-grid-a" data-theme="c">
<input data-icon="check"
class="ui-btn-right"
type="submit"
value="<%= Resources.View.Account.Labels.DoLogOn %>" />
</fieldset>
<% } %>
the button will be displayed inside the content.
Is there a way to make jQuery Mobile display the submit button in the header using the latter approach?
I know I'm a few months late, but I came across this post researching another problem. To submit a page from a button in the header you can use the following button markup:
<a href="#" onclick="$('form#Account').trigger('submit')" class = "ui-btn-right" data-role="button" >Logon</a>
I am not familiar with jQTouch, but how about something like the following?
The issue is probably around the css classes used and where you have used them.
<% using (Html.BeginForm("LogOn", "Account",
new { returnUrl = Request.QueryString["ReturnUrl"] }, FormMethod.Post))
{%>
<div data-role="header" data-theme="b">
<fieldset class="ui-grid-a" data-theme="c">
<input data-icon="check"
class="ui-btn-right"
type="submit"
value="<%= Resources.View.Account.Labels.DoLogOn %>" />
</fieldset>
</div>
<div id="Content" class="ui-body ui-body-c">
...content here
</div>
<% } %>
Related
I have searched this a lot on the internet and I am looking for a way in where to display a loading message while asp.net is moving from one page to another. I have tried the load method from JavaScript but it does not work for moving from one page to another so how can I do this when a search button is clicked.
#using (Html.BeginForm("SearchResult", "Home", FormMethod.Get))
{
<section class="search-sec">
<div class="container-fluid">
<form>
<div class="row">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-4 col-md-3 col-sm-12 p-0">
<input type="text" name="searchTitle" class="form-control search-slt" placeholder="Job Title, Skills, Company!">
</div>
<div class="col-lg-4 col-md-3 col-sm-12 p-0">
<input type="text" name="searchLocation" class="form-control search-slt" placeholder="Location">
</div>
<div class="col-lg-4 col-md-3 col-sm-12 p-0">
<button type="submit" value="Create" class="btn btn-danger wrn-btn">Search</button>
</div>
</div>
</div>
</div>
</form>
</div>
</section>
}
If you are not using ajax then you could load the new page with a loading message and remove it when the load is complete. I used this one in one of my projects (https://ihatetomatoes.net/create-css3-spinning-preloader/). Basically you activate or deactivate adding a class to the html body.
In the view where I want to show it before anything else i put this:
<script>
$('body').removeClass('loaded');
</script>
and once everything is loaded :
<script>
//...other stuff
$(document).ready(function () {
setTimeout(function () {
$('body').addClass('loaded');
}, 500);
});
</script>
But you would still have time of wait before reaching the page, you should capture the search click and show the loader before leaving the first page.
Anyways I agree with Jerdine and daremachine, you would have more control loading with ajax the search results and showing them in the same page. Maybe is not possible so I hope the workaround works for you
OP Update
I've figured out the problem and this issue is now closed. Would one day like to find the time to post the solution as an answer here.
I'm having a bit of an issue working with ngMessages inside an ng-form on an Angular Bootstrap tab. Further complicating things, the thing I am validating is a Angular Bootstrap datepicker. So the code is as follows, and as you can see, I've got a datepicker on an ng-form which is on a Tab.
<uib-tab index="5" heading="{{tabs[5].title}}" select="changeCheck($event)">
<ng-form name="{{tabs[5].form}}">
<div class="col-md-9">
...
<div class="col-md-6">
<h4>Add Followup</h4>
<div class="form-group">
<label for="addFollowupDate" class="control-label">Date:</label>
<div class="input-group">
<input type="text" id="addFollowupDate"
class="form-control"
uib-datepicker-popup="{{format}}"
ng-required="true"
ng-model="newFollowup.date"
is-open="addFollowupPopup.opened"
datepicker-options="dateOptions"
close-text="Close"
alt-input-formats="altInputFormats" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="openAddFollowupPopup()"><i class="fa fa-calendar"></i></button>
</span>
<div class="help-block" ng-messages="followupsForm.newFollowup.date.$error" ng-if="followupsForm.newFollowup.date.$invalid && followupsForm.newFollowup.date.$touched">
<div ng-message="required">This field is required</div>
</div>
</div>
</div>
I've assigned that form to the scope using the following line:
$scope.followupsForm = $('ng-form[name="followupsForm"]').data('$formController');
And I have successfully set the control to touched on a submit which does make the border go red:
if ($scope.followupsForm.$invalid) {
angular.forEach($scope.followupsForm.$error, function (formErrorField) {
angular.forEach(formErrorField, function (errorField) {
errorField.$setTouched(); // by setting to touched, the relevant message will display if the field is invalid.
});
});
}
But the ng-message for required does not display.
Any ideas why? Could be a tough one with nested scopes etc. (of the tab and the picker).
I have a log-in page. When the user hits the log-in button the button will calla another action method. that action method will have two parameter. the user provided userid and password. then it do some validation and redirect to another action method according to the outcome. I am struggling with there. i guess this is pretty simple. i am new to MVC. Any help would be appriciated.
View
<div class="container-fluid">
<div class="starter-template">
<h1>Policy Assessment Tool</h1>
<p class="lead">Are You Following Right?</p>
<button type="button" class="btn btn-primary btn-lg" onclick="location.href='#Url.Action("Create","UserDatas")'">Register for a An Account</button>
<h3><strong>OR</strong></h3>
</div>
<div class="row">
<form class="form-signin" role="form" method="post">
<div class="col-lg-4"></div>
<div class="col-lg-4">
<h2 class="form-signin-heading">Please Sign-In to Continue</h2>
<div class="input-group">
<input type="text" name="input_domain_id" class="form-control text-center" placeholder="Domain ID" autofocus required>
<input type="password" name="input_domain_password" class="form-control text-center" placeholder="Domain Password" required>
<div class="col-lg-12">
<p><button class="btn btn-lg btn-primary btn-block" type="submit" onclick="location.href='#Url.Action("Verify_Login", "Ldap_Login_Verify")'">Login</button></p>
</div>
</div><!-- /input-group -->
</div><!-- /.col-lg-4 -->
<div class="col-lg-4"></div>
</form>
</div><!-- /.row -->
</div>
Controller
[HttpPost]
public ActionResult Verify_Login(string input_domain_id, string input_domain_password)
//Log-in Logic
return View("Success")
Instead of using form tag use Html.BeginForm HtmlHelper and pass Model from Controller to View for the best practice. Here is link for you to get Getting Started With MVC5.
Based on the mark up above you need not worry about it, When the form is posted the values will get bound to the parameters of the action method, As the parameter names are similar to the form field names.
The above concept is called model binding. The below two links should give you a good idea on the same.
http://www.codeproject.com/Articles/710776/Introduction-to-ASP-NET-MVC-Model-Binding-An-Absol
http://dotnetslackers.com/articles/aspnet/Understanding-ASP-NET-MVC-Model-Binding.aspx
I have tried to compile a simple example below.
Lets assume there is a view like below.
#model string
#{
ViewBag.Title = "Injection";
}
<h2>Injection</h2>
#using(Html.BeginForm())
{
<div id="formDetails">
#Html.TextBox("UserName")
</div>
<div>
<input type="submit" id="btnTest" value="Click Me" />
</div>
}
The Action method for the same would be like
[HttpPost]
public ActionResult Injection(string UserName)
{
return View("Injection");
}
So when i click on the submit button, The form is posted , Since the ViewName is injection, and there is a corresponding action method called injection it will automatically hit that action method. Since the parameter name of the method and field is the same, What ever value is there in the username textbox will get automatically bound to the method parameter.
I'm having a problem with button groups for bootstrap.
Right now I have jquery ui js called before bootstrap js and the button gorup works fine. However, if i keep this structure, jquery ui dialog buttons do not work, specifically the close button does not show due to conflicting js code.
If i switch the order then the jquery ui dialog close button shows but the button groups for bootstrap are all messed up, because of the conflict between the two js libraries.
I have tried using bootstraps solution:
var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality
Then when calling $(".btn").bootstrapBtn() and testing the button group every time i click a new button in the group i get the error:
cannot call methods on button prior to initialization; attempted to call method 'toggle'
I have done a ton of research and still can't come up with a solution.
Here is my code:
<div id="chartSelector" class="row" style="margin-left:auto;margin-right:auto;width:170px;display:none;">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<input class="barChart" data-target="barChart" type="radio" name="options" id="bar" checked> Bar
</label>
<label class="btn btn-default">
<input class="pieChart" data-target="pie-section" type="radio" name="options" id="pie"> Pie
</label>
<label class="btn btn-default">
<input class="columnChart" data-target="columnChart" type="radio" name="options" id="column"> Column
</label>
</div>
<div class="bar-section k-content">
<div class="chart" id="barChart"></div>
</div>
<div class="container-fluid pie-section k-content">
<div class="row chart" id="pie-section"></div>
</div>
<div class="column-section k-content">
<div class="chart" id="columnChart"></div>
</div>
And my JS to handle the buttons:
$('.btn').button();
$('input[type=radio]').on('change', function () {
var target = "#" + $(this).data("target");
$(".chart").not(target).hide();
$(target).show();
kendo.resize($(".k-content"));
});
PS: Using Jquery UI version 1.11.1 and Jquery version 1.11.1
If you simply Google that error message, you'll see that it's a jQuery UI error message, so $.fn.button at that point in your code is referring to the jQuery UI Button plugin, not the Bootstrap Button plugin.
You need to put the noConflict after you've loaded Bootstrap but before you load jQuery UI, e.g.:
<script src="/foo/jquery.min.js"></script>
<script src="/foo/bootstrap.min.js></script>
<script>
$.fn.bootstrapBtn = $.fn.button.noConflict();
</script>
<script src="/foo/jquery.ui.js"></script>
You will then need to use $(...).bootstrapBtn(...) instead of $(...).button(...) in the rest of your code.
If you're using gulp or Grunt to build your assets (with main-bower-files for example) an option would be not to include the whole of jQueryUI. Just take the parts you need and skip buttons and tooltip. Those two are the ones that conflict the most in my experience.
For example put the following section in your bower.json:
"overrides":
"jqueryui": {
"main": [
"ui/core.js",
"ui/widget.js",
"ui/mouse.js",
"ui/datepicker.js",
"ui/draggable.js",
"ui/droppable.js",
"ui/resizable.js",
"ui/selectable.js"
]
}
Just using the parts you need is also good practise to void page size when loading and sidesteps the conflict problem altogether. Hope this works in your case as well.
edit fixed typo
I know this an old post but I had the same issue. I had Bootstrap 3.0.3 and upgrading it to version >=3.4.1 solved the issue.
$('.btn').button();
$('input[type=radio]').on('change', function() {
var target = "#" + $(this).data("target");
$(".chart").not(target).hide();
$(target).show();
kendo.resize($(".k-content"));
});
<div id="chartSelector" class="row" style="margin-left:auto;margin-right:auto;width:170px;display:non;">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<input class="barChart" data-target="barChart" type="radio" name="options" id="bar" checked> Bar
</label>
<label class="btn btn-default">
<input class="pieChart" data-target="pie-section" type="radio" name="options" id="pie"> Pie
</label>
<label class="btn btn-default">
<input class="columnChart" data-target="columnChart" type="radio" name="options" id="column"> Column
</label>
</div>
<div class="bar-section k-content">
<div class="chart" id="barChart"></div>
</div>
<div class="container-fluid pie-section k-content">
<div class="row chart" id="pie-section"></div>
</div>
<div class="column-section k-content">
<div class="chart" id="columnChart"></div>
</div>
</div>
https://jsfiddle.net/codinglattice/gu4mjaep/29/
Try to move jquery UI js before bootstrap js. This way it works for me.
var bundle = new ScriptBundle("~/bundles/CommonJs")
.Include("~/js/jquery-1.12.4/jquery-ui.js")
.Include("~/js/bootstrap.min.js")
I have the following _Layout.cshtml page that has a bunch of #Html.Action() calls to several partial views.
<div class="wrapper">
<div class="header">
<a style="text-decoration:none;" href="#Url.Action("Index", "Home")"><div class="logo"><p>fisharwe</p><span class="greenText float-right">:</span></div></a>
<div class="searchBar">
#Html.Action("Search", "Item")
</div>
<div id="hearGreenBar"></div>
</div>
<div class="pageContent">
#RenderBody()
</div>
<div class="rightColumn">
<div id="help">
<div id="allHelpContent">
<span id="helpIcon"></span> <span id="helpTitle">help</span> <span id="helpArrow"></span>
</div>
</div>
<div id="userPanel">
#if(!Request.IsAuthenticated)
{
<div id="loginForm">#Html.Action("Login", "User")</div>
<div id="registerForm">#Html.Action("Register", "User")</div>
<hr class="greyLine" />
<div id="recentlyViewedItems">
<div id="recentItemsTitle">
<span class="recentItemsIcon"></span><span class="theRecentTitle">Recently Viewed</span>
</div>
</div>
}
else
{
<div id="userInfoSummary">#Html.Action("Summary", "User")</div>
}
</div>
</div>
</div>
At the top you can see the #Html.Action("Seach", "Item") call which renders a search bar and allows users to search for items/categories/sub-categories...etc. I got this working now, but it generated a new problem! When the user searches for something, and the results are rendered, the Login and Register partials in the sidebar (userPanel) are displaying validation errors such as "Email cannot be empty". I understand that the View is rendered regardless of what partial posted back but there has to be a way to prevent that from happening... Do I have to get rid of partials and render everything into the _Layout.cshtml page? But in that case I need to make this page typed which will cause yet another issue... So what can be done? I'm open to any suggestions...
Thank you.
Do you have different forms for the search and what is in the "userPanel"?. You may want to make sure your search is doing a get and not a post.
#using (Html.BeginForm("Search", "YourController", FormMethod.Get))