I am attempting to implement a modal dialog inside of my MVC3 application. Right now I'm just fiddling with it. Here is my code:
#model AROrdering.Models.Category
#{
ViewBag.Title = "Browse";
Layout = null;
}
<html>
<head>
<title>test</title>
<link href="#Url.Content("~/Content/testbootstrap.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/testbootstrap.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/testjquery-1.9.1.js")" type="text/javascript"></script>
<script>
$(document).ready(function () {
$('#showGame').click(function () {
$('#gameModal').modal('show');
});
});
</script>
</head>
<body>
<div class="container">
<div id="gameModal" class="modal hide fade in">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>This is a Modal Heading</h3>
</div>
<div class="modal-body">
<h4>Text in a modal</h4>
<p>You can add some text here.</p>
</div>
<div class="modal-footer">
Call to action
Close
</div>
</div>
<button id="showGame" class="btn btn-primary btn-large">Show Game Listing</button>
</div>
</body>
</html>
If I implement this exact html in a plain html page outside of the app, the modal dialog works. But when I move the code over, it does not. I am using the same css and javascript files. Does anyone have an idea of why this breaks when I move over to MVC3?
jQuery needs to load before the bootstrap javascript. Fix the order of your script references and it should work.
Related
Upon clicking on the text box, which is supposed to be showing a date picker for me to choose the date, but it is not showing at all, I wanted it to be shown upon clicking on it.
<div class="row">
<div class='col-sm-6'>
<input type='text' class="form-control" id='datetimepicker4' />
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker4').datetimepicker();
});
</script>
</div>
It seems that you haven't used script links for JQuery and/or datetimepicker.
You can try this:
$(function() {
$('#datetimepicker4').datetimepicker();
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-6">
<input type='text' class="form-control" id='datetimepicker4' />
</div>
</div>
</div>
As we discussed remove the script tag completely from HTML window, and remove tag except the actual JS from JS window.
Your Code pen's code should look like this:
Hi Guys I have a problem about bootstrap bootstrap.min.css jquery.min.js and bootstrap.min.js are already included in my project but I cannot use well well-sm class and when I add manually by links this time divs engage you can see in the picture. where is the problem I don't understand?
my code :
#model xx.Web.Models.MiniRepairViewModel
#{
Layout = null;
}
<div class="pageWrapper">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
#Html.Action("Breadcrumb", "Manage")
<div class="TextBody">
<div class="container">
#Html.Action("LeftMenu", "Manage") //menu engage
<div class="col-threeQuarters">
#using (Ajax.BeginForm("MiniRepairServiceAdd", "Ajax", new AjaxOptions { OnSuccess = "jsFilt", OnFailure = "OnFailure" }))
{
<ul class="Form">
<li class="oneColumsFull">
#Html.DropDownListFor(x => x.GetCityModel.a, (IEnumerable<SelectListItem>)ViewBag.CitiesList, "select", new { name = "x", id = "y" })
</li>
<li id="ilce" class="twoColumsFull" style="display:none;">
</li>
<li class="oneColums"><input type="text" name="serviceName" id="serviceName" placeholder="Service"></li>
<li class="button"><input class=".bh-sl-reset" id="reset" type="button" value="clear" onclick="javascript: window.location.reload();"></li>
<li class="button"><input type="submit" value="search" name="search"></li>
</ul>
}
<div id="myDiv" class="well well-sm"> </div> //not working
</div>
</div>
</div>
</div>
I am not sure if colThreeQuarters is a bootstrap class, the actual class is col
<div class="container">
<div class="row">
<div class="col-md-9> // 3quarters
</div>
</div>
</div>
You Need to include headtag before Bodytag and add the bootstrap cdn in that head and write you js cdn at bottom of body tag.
SO the code structure will be like this
<html>
<head>
<bootstrap cdn>
</head>
<body>
your content
...
..
<js cdns>
</body>
</html>
This is because you are not loading your bootstrap cdn at right place. You should load all your scripts files inside your head tag as #yashwardhan said.
this mean:
Go to your code, find </head> tag and load all your scripts and css file just before this tag.
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
and use the right bootstrap syntax. colThreeQuarters is not a bootstrap class
Why you should do this, is explained here:-
Where should I put <script> tags in HTML markup?
I am using bootstrap to toggle the div element. I am using the following code, its working for its default behavior i.e. to hide the toggled content in the beginning.
I want to show the toggled content at the beginning and so using "collapse in" bootstrap class as suggested on their site. But still its giving its default behavior to hide the content at the beginning.
Code snippet
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">+ Datum</button>
<div id="demo" class="collapse in">
<div>
<label>Attributes (Element) </label>
</div>
</div>
Note: All the necessary files for working of bootstrap have been added i.e. bootstrap and jquery file.
Can anyone help me with this ?
Your Code Working Fine .some How bootstrap.min.js , & css Missing .
Check Live Demo Here
Snippet Example
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">+ Datum</button>
<div id="demo" class="collapse in">
<div>
<label>Attributes (Element) </label>
</div>
</div>
Please verify the following things.
You have included bootstrap js and css and jQuery
As well as the jQuery version is latest.
I have attached a sample snippet. This seems to be working perfect for me.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">+ Datum</button>
<div id="demo" class="collapse in">
<div>
<label>Attributes (Element) </label>
</div>
</div>
</div>
</body>
</html>
Thanks for your concern and comments, those were helpful. Issue got resolved, in our project solution we were having some bootstrap overridden classes, so "collapse in" class was conflicting with one of those overridden classes.
cheers..
Essentially, I want to make a colorbox pop up upon clicking the link "About Us" as seen on "Inline HTML" under Other Content Types at Inline HTML example. However, the link doesn't do anything. I have also double checked the files in the header and they do link to the right directory.
<head>
<link rel="stylesheet" href="../../../Colorbox/example1/colorbox.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../../../Colorbox/jquery.colorbox-min.js"></script>
<script>
$(document).ready(function(){
$(".inline").colorbox({inline:true, width:"50%"});
});
</script>
</head>
<body>
<div id="copyright" class="container">
<p>© All rights reserved. | <a class='inline' href="#inline_content">About Us</a> | <a class ="contact">Contact Us</a></p>
</div>
<div style='display:none'>
<div id='inline_content' style='padding:10px; background:#fff;'>
<p><strong>This is a test.</strong></p>
</div>
</div>
</body>
I am trying to load some external data into a JQTouch app using JSON. My problem is I don't know what js to use and where to put it.
My html is very simple - a few divs for the pages in the app.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript"> google.load("jquery", "1.4.2"); </script>
<script type="text/javascript" src="jqtouch/jqtouch.min.js" charset="utf-8"></script>
<script type="text/javascript"> $.jQTouch(); </script>
<script src="javascripts/cricket.js" type="text/javascript"></script>
<style type="text/css" media="screen">#import "jqtouch/jqtouch.min.css";</style>
<style type="text/css" media="screen">#import "themes/apple/theme.css";</style>
<title>Cricket</title>
</head>
<body>
<!-- "Main Menu" -->
<div id="home" class="current">
<div class="toolbar">
<h1>Cricket</h1>
</div>
<ul class="rounded">
<li class="arrow">Clubs</li>
<li class="arrow">Fixtures</li>
<li class="arrow">Twitter</li>
</ul>
<ul class="rounded">
<li class="arrow">About</li>
</ul>
</div>
<!-- "Clubs" - Will contain the list of clubs -->
<div id="clubs">
<div class="toolbar">
<h1>Clubs</h1>
<a class="button back" href="#">Back</a>
</div>
<div id="clubslist">
Loading....
</div>
</div>
<!-- "Fixtures" - Will contain the list of fixtures -->
<div id="fixtures">
<div class="toolbar">
<h1>Fixtures</h1>
<a class="button back" href="#">Back</a>
</div>
<ul class="rounded">
<li>Loading....</li>
</ul>
</div>
<!-- "Twitter" - Will contain the tweets -->
<div id="twitter">
<div class="toolbar">
<h1>Twitter</h1>
<a class="button back" href="#">Back</a>
</div>
<ul class="rounded">
<li>Loading tweets....</li>
</ul>
</div>
<!-- "About" - Will contain info about the app/contact -->
<div id="about">
<div class="toolbar">
<h1>About</h1>
Back
</div>
just some text
</div>
Then this is the script that I think I need to use to load the external data (from clubs.php).
<script type="text/javascript">
$.getJSON('http://www.mydomain.com/clubs.php', function(data) {
$.each(data, function(i,item){
$('clubslist').append('<li>' + item.club_name + '</li>');
});
});
</script>
My question is where do I need to putthis and how does it get triggered?
I think I need to put this in a separate JS file (I have already got one called cricket.js which i linked to in the head of the html file). Then I assume I need something to trigger the JS to run... like PageAnimationEnd or similar?
For what it's worth, this is what the clubs.php returns
{"posts":[{"post":{"club_id":"1","club_name":"ABC Cricket Club","club_postcode":"AB12 3DE"}},{"post":{"club_id":"2","club_name":"Beston Cricket Club","club_postcode":"NG1 9XY"}}]}
My ideal situation is that when the user clicks on the 'Clubs' link on the menu page, this fires the page animation where the user then sees 'Loading'. In the background, the Javascript is fired, retrieves the data from clubs.php and then appends it in to the #clublist div.
I think I am close, but missing the final finishing touch. All suggestions appreciated!
Tom
In my pages I do the following, in this example I am pulling a table from a backend script.
function prevOrders()
{
$("#chkPrevOrd").html('Please wait')
$.ajax({
type: "POST",
url: "http://"+document.domain+"/store.php",
data: { method: "prevOrders"},
dataType: "json",
timeout: ajaxTimeout,
success: function(data){
if (data.prevOrders)
{
$("#prevOrderStatus").html(data.prevOrders);
$("#chkPrevOrd").html('Update')
}
},
error: function() {
alert('This is taking too long. You could try again now, or wait and try again later.');
}
});
}
#prevOrderStatus is a DIV on this page, #chckPrevOrd is just a button to let the user know what is happening. you would JQT.Goto('cointainer div for #chkPrevOrd') to go to this page if #chkPrevOrd was actually on a different page.