The below code to display "Add Date" button and by clicking that button it will display the modal with external mvc view. "CheckDateShow" is the view page here.
<div class="add-dependent left">
<a href="../Home/CheckDateShow" data-toggle="modal" data-target="#myModalAdd">
<img src="../../Reskin/images/banificiary.png" alt="">
<span class="green-btn">Add Date</span>
</a>
</div>
The modal where it would bind given in below code and it exists in same page.
<div class="modal fade dependents-modal" id="myModalAdd">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
The "CheckDateShow" page contains the below code:-
<html>
<head>
<title>..:: Company Logo ::..</title>
<link rel="stylesheet" href="../../css/jquery-ui.css">
<link rel="stylesheet" href="../../css/font-awesome.min.css">
<link rel="stylesheet" href="../../css/bootstrap.css">
<link rel="stylesheet" href="../../css/style.css">
<script src="../../js/jquery-1.10.2.min.js"></script>
<script src="../../js/bootstrap.js"></script>
<script src="../../js/jquery-ui.js"></script>
<script src="../../js/custom.js"></script>
</head>
<body>
<div>
<ul>
<li>
<label for="">Date of Birth:</label>
<div class="input-data date">
<input type="text" class="input-type datepicker">
<i class="fa fa-calendar"></i>
<span class="red">*</span>
</div>
</li>
</ul>
</div>
</body>
</html>
Now by loading this it is showing only a textbox control, but in reality it should display a datepicker rightside of textbox and we can be able to choose a date.
Please help to resolve this issue.
Related
I have an accordion written like this
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
</head>
<body>
<div id="editTournamentAccordionWrapper" class="accordion accordion-flush">
<div class="accordion-item">
<h2 class="accordion-header" id="editTournamentAccordionHeading">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#editTournamentAccordion" aria-expanded="false" aria-controls="editTournamentAccordion">
Card title
</button>
</h2>
<div id="editTournamentAccordion" class="accordion-collapse collapse" aria-labelledby="editTournamentAccordionHeading" data-bs-parent="editTournamentAccordionWrapper">
<div class="accordion-body">
<iframe class="w-100" style="height: 1024px;" src="www.example.com"></iframe>
</div>
</div>
</div>
</div>
</body>
</html>
When i click the first time on the Accordion header, the accordion won't open and the following exception will be threw
Uncaught TypeError: 'querySelectorAll' called on an object that does not implement interface Element. selector-engine.js:18:59
Any idea of the reason? As far as I noticed, this is the minimum code I had to wrote in order to make the bug present
TLDR: A # is missing in the data-bs-parent attribute.
According to the Bootstrap documentation, the data-bs-parent accepts a
selector | jQuery object | DOM element
When you pass in data-bs-parent="id" for the attribute, it is plain text hence belongs to none of the categories. As a result you get the Uncaught TypeError: Illegal invocation
Working example:
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
</head>
<body>
<div id="editTournamentAccordionWrapper" class="accordion accordion-flush">
<div class="accordion-item">
<h2 class="accordion-header" id="editTournamentAccordionHeading">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#editTournamentAccordion" aria-expanded="false" aria-controls="editTournamentAccordion">
Card title
</button>
</h2>
<div id="editTournamentAccordion" class="accordion-collapse collapse" aria-labelledby="editTournamentAccordionHeading" data-bs-parent="#editTournamentAccordionWrapper">
<div class="accordion-body">
Card Body
<!-- <iframe class="w-100" style="height: 1024px;" src="www.example.com"></iframe>-->
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
</body>
</html>
The below given code is not working even after including all the script files.I cannot see the toggle happen on the panel.
What needs to be added to the code?
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="row aet-content-fluid">
<div class="panel-group ud-accordion" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<div class="panel-title">
<h2>
<a role="button" data-parent="#accordion"
data-toggle="collapse" href="javascript:void(0);#tab1" aria-controls="tab1"
class="" aria-expanded="false"><span>Office Information</span>
</a>
</h2>
</div>
</div>
<div id="tab1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body office-detail-panelBody">
This content is straight in the template.
</div>
</div>
</div>
</div>
</div>
</body>
</html>
It took me a while but it seems the problem is in scripts you included.
First you need a jquery included.
And the second: Order is important.
When I set the <head> section to:
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="example.js"></script>
</head>
It worked! Three first inclusions (link and two scripts) is the order recommended by bootstrap creators.
I want to add "back button" panel for my app but only for iphones.
I am using vs2013 Multi Device Hybrid Apps plugin to develope mobile app. After a lot errors and problems I managed to start coding phase, the thing is android devices have panel to "back" or other stuff. But I need to set it also for iphones. Project has "merges" folder, I believe that part using for it. (I dont want to add that extra button for whole project, only iphone is enough for me as you know android devices have panel to "back" or other stuff.)
If its possible; how can I do that? Here is one of my page example ;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Föy</title>
<link href="css/index.css" rel="stylesheet" />
<script src="scripts/jquery-1.8.3.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/login.css" rel="stylesheet" />
<script>
$(document).ready(function () {
$("#btnLogin").click(function () {
window.location = "main.html";
})
});
</script>
</head>
<body>
<div class="container" id="login-block">
<div class="row">
<div class="col-sm-6 col-md-4 col-sm-offset-3 col-md-offset-4">
<h3 class="animated bounceInDown">FÖY Fatura Ödeme Sistemleri</h3>
<div class="login-box clearfix animated flipInY">
<div class="login-logo">
<img src="images/logo.png" alt="Company Logo" />
</div>
<hr />
<div class="login-form">
<div class="alert alert-error hide">
<button type="button" class="close" data-dismiss="alert">×</button>
<h4>Hata!</h4>
İşlem Sırasında Hata Oluştu
</div>
<div>
<input type="text" class="form-control" id="txtUser" placeholder="Bayi Kodu" required />
<input type="password" class="form-control" id="txtPassword" placeholder="Şifre" required />
<button type="button" id="btnLogin" class="btn btn-red">GİRİŞ</button>
</div>
<div class="login-links">
<a href="forgot-password.html">
Şifremi Unuttum?
</a>
<br />
<a href="sign-up.html">
Bayi Değilim? <strong>Bayi Ol!</strong>
</a>
</div>
</div>
</div>
<div class="social-login row">
<div class="fb-login col-lg-6 col-md-12 animated flipInX">
<strong>Facebook</strong> ile bağlan
</div>
<div class="twit-login col-lg-6 col-md-12 animated flipInX">
<strong>Twitter</strong> ile bağlan
</div>
</div>
</div>
</div>
</div>
<script src="cordova.js"></script>
<script src="scripts/platformOverrides.js"></script>
<script src="scripts/index.js"></script>
</body>
</html>
Thank You , Best Regards
Put your platform specific file within the merges\ios\ folder and it should get picked up during build. More information and guidance can be found here
I have a twitter bootstrap nav bar, but evertime I navigate on a link it is clearly reloading the navbar with everything else. Isn't it not supposed to do that? I would like it if it didn't. I'm not sure maybe if I'm doing something wrong in my _Layout or not. Any ideas on why my navbar could be reloading?
<link href="../../bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="../../bootstrap/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/dt-min.js")" type="text/javascript"></script>
<link href="../../Content/Reflection.css" rel="stylesheet" type="text/css" />
#Styles.Render("~/Content/themes/base/css", "~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<header>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<div class="float-left" style="width:315px">
<p class="site-title">#Html.ActionLink("Kinfolk", "Index", "Home", new { #style = "color:Orange" })</p>
</div>
<div class="float-center">
<section id="login">
#Html.Partial("_LoginPartial")
</section>
<nav>
<ul id="menu" class="nav">
<li>
<div class="reflection">
<a href="#Url.Action("AllWallPost", "Home")" title="Home">
<img src="../../Images/home (1).ico" />
</a>
</div>
</li>
<li>
<div class="reflection">
<a href="#Url.Action("UserProfile", "UserProfile")" title="My Profile">
<img src="../../Images/user.ico" />
</a>
</div>
</li>
<li>
<div class="reflection">
<a href="#" title="Events">
<img src="../../Images/calendar_2.ico" />
</a>
</div>
</li>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</header>
<div id="body">
#RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
#RenderBody()
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© #DateTime.Now.Year - My ASP.NET MVC Application</p>
</div>
<div class="float-right">
<ul id="social">
<li>Facebook</li>
<li>Twitter</li>
</ul>
</div>
</div>
</footer>
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
</body>
From the code you provided, it is normal that the page reloads when you click on a link.
If you want the page to change without reloading everything, you'll have to use some Ajax (JavaScript) and a combination of Request.IsAjaxRequest() (controller) and PartialView (view).
There are lots of resources out there with those keywords.
I am trying to get modal data-dismiss action working to close the modal on click. There seems to be an issue that I cannot find documented and hopefully someone here can shed some light on it. Here is the code
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'/>
<title> Modal test </title>
<link href='themes/default/bootstrap/css/bootstrap.css' rel='stylesheet'/>
<link href='themes/default/bootstrap/css/bootstrap-responsive.css' rel="stylesheet"/>
</head>
<body>
<div class="modal" id="myModal">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
<div class="alert alert-block">
<a class="close" data-dismiss="alert" href="#">x</a>
<h4 class="alert-heading">Warning!</h4>
Best check yo self, you're not...
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="themes/default/bootstrap/js/bootstrap.js"></script>
</body>
</html>
is the full suite of bootstrap including bootstrap-modal.js
I put in the <div class="alert alert-block"> for testing the action, it seems to work in the alert but not the modal!
add this code please:
<script type="text/javascript">
$(document).ready(function() {
$('#myModal').modal(); // initialized with defaults
$('#myModal').modal('show'); // open your modal dialog
});
</script>