I am a beginner in web application. When I tried to use Bootstrap to modify the table, I do not understand why it will take around half second to change to the format I want.
When the page was loaded, the options look like:
(https://i.stack.imgur.com/lAiYh.png)
But after less than 1 second, it will change back to the look I want:
(https://i.stack.imgur.com/9MEnf.png)
May I know how can I improve this situation so that I can get the format I want directly?
Thanks in advance.
I tried to download the script files and css files required and loaded it locally, but the problem is still existed. I want to know how can I skip that 1 second waiting time.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css"/>
<script>
$(document).ready(function()
{
$('#multiple-checkboxes').multiselect({
includeSelectAllOption: true,
});
var multipleCancelButton = new Choices('#class_duties', {
removeItemButton: true,
searchEnabled: true,
searchChoices: true,
searchFloor: 1,
noResultsText: 'No results found',
noChoicesText: 'No choices to choose from',
itemSelectText: 'Press to select',
selectAll: true,
});
});
</script>
</head>
<body>
<div class="container">
<div class="col-md-10">
<link rel="stylesheet" href="https://res.cloudinary.com/dxfq3iotg/raw/upload/v1569006288/BBBootstrap/choices.min.css?version=7.0.0">
<script src="https://res.cloudinary.com/dxfq3iotg/raw/upload/v1569006273/BBBootstrap/choices.min.js?version=7.0.0"></script>
<select id="class_duties" name="class_duties[]" placeholder="Select the Position" multiple>
<option>Option A</option>
<option>Option B</option>
</select>
</div>
</div>
</body>
</html>
Video:
https://streamable.com/5hju8q
Related
Today I'm learning bootstrap 3 for the first time. I successfully apply a class for my button element. I used event handler to create more buttons on click with createElement() method. In these newly created buttons, however, I failed to apply the the same class. Is the button created with createElement() method different from button originally in the body?
Here is the link to CodePen: https://codepen.io/bqw5354/pen/abZPRYm
<html lang="en">
<head>
<title>Bootstrap Button</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<button type="button" id="button1" class="btn-primary">1st</button>
<script>
document.getElementById("button1").addEventListener("click", function(){
var btn = document.createElement("button");
btn.id = "button2"
btn.class = "btn-primary";
btn.innerHTML = "2nd";
document.body.appendChild(btn);
document.getElementById("button2").addEventListener("click", function(){
var btn = document.createElement("button");
btn.id = "button3"
btn.class = "btn-primary";
btn.innerHTML = "3nd";
document.body.appendChild(btn);
})
})
</script>
</body>
</html>
Use btn.className instead of btn.class
It will work!
I have been fighting this issue for quite some time now, and have been (still) unable to print my div with its styling.
Currently, my script is:
$('#printMeButton').click(function () {
//alert("a");
var data = document.getElementById('thisPrintableTable').outerHTML;
var mywindow = window.open('', data);
mywindow.document.write('<html><head><title>Print Me!!!</title>');
// mywindow.document.write('<link rel="stylesheet" type="text/css" href="Site.css" media="screen">');
mywindow.document.write('</head><body>');
mywindow.document.write(data);
mywindow.document.write('</body></html>');
mywindow.document.close();
mywindow.focus();
mywindow.print();
mywindow.close();
return true;
});
which is nested within a $(document).ready function.
When I include the desired stylesheet (currently commented out), Nothing appears in the print preview.
I also have some script that has an effect on the appearance of the table, and, as such, I believe this may hold the key of having these included into the popup window.
How can i include this into the new popup?
Could someone please suggest a way of printing this as it stands?
Edit History
removed space at end of </head><body>
Changed var data to have outerHTML instead of innerHTML
Altered Question/details from better understanding of issue
Try to open a local html file using window.open with css linked within it. And set the content html to be printed to the local html file using js.
Here is the page to be printed:-
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="test.css" rel="stylesheet" type="text/css" />
<script src="jquery.js"></script>
</head>
<body>
<div id="print">
<div class="red">TODO write content</div>
</div>
<button id="print_btn">Print</button>
<script>
$('#print_btn').click(function(){
var newWindow = window.open('print.html','_blank');
$(newWindow).load(function(){
$(newWindow.document).find('body').html($('#print').html());
});
})
</script>
</body>
</html>
The css file test.css is linked here, and I'm opening print.html at the time of window.open, the test.css is also linked in the print.html
Now, in print.html I'll write:-
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="test.css" rel="stylesheet" type="text/css" />
</head>
<body>
</body>
</html>
Since you provide an empty string as a new window's URL (the first parameter of the open function), the page inside it most likely can't figure out where your stylesheet is (as it's address is "relative to nothing"). Try specifying an absolute URL to your stylesheet.
Also, there is media="screen" attribute that should be changed to media="print"
mywindow.document.write('<link rel="stylesheet" type="text/css" href="http://my.site/Site.css" media="print"')
The issue can be solved by introducing some delay time before executing mywindow.close(); method. Seems that some time is needed for CSS to be applied (loaded), like this:
$('#printMeButton').click(function () {
var content = document.getElementById(id).innerHTML;
var mywindow = window.open('', 'Print', 'height=600,width=800');
mywindow.document.write('<!DOCTYPE html><html dir="rtl"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Print</title>');
mywindow.document.write('<link rel="stylesheet" type="text/css" href="/static/css/styles.css" />');
mywindow.document.write('</head><body >');
mywindow.document.write(content);
mywindow.document.write('</body></html>');
mywindow.document.close();
mywindow.focus()
mywindow.print();
// this is needed for CSS to load before printing..
setTimeout(function () {
mywindow.close();
}, 250);
return true;
});
We can use this inline style.
var divToPrint = document.getElementById('DivIdToPrint');
var newWin=window.open('','Print-Window');
newWin.document.open();
newWin.document.write('<html>' +
'<style>' +
".btn-petty-cash-split{display: none}"+
".btn-petty-cash-split{display: none}"+
'</style>' +
'<body onload="window.print()">'+divToPrint.innerHTML+'</body></html>');
newWin.document.close();
setTimeout(function(){
newWin.close();
window.location.reload();
},10);
What's wrong with this code, the basic example if not working. all of the files are in one folder so the path is not the problem, but still this code is not working, how this will work with Web ApI ..?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.11.1.min.js"></script>
<script src="typeahead.bundle.min.js"></script>
<link href="examples.css" rel="stylesheet" />
<script type="text/javascript">
$('input#search-box').typeahead({
name: 'name',
local: ['yasser', 'shyam', 'sujesh', 'siddhesh', 'vaibhav']
});
</script>
</head>
<body>
<input type="textbox" placeholder="Search Song" id="search-box" class="typeahead" />
</body>
</html>
Looks like for the very basic example you need to bind a method to the source
http://jsfiddle.net/f9DFC/
$('input#search-box').typeahead(
{
minLength: 1,
},
{
name: 'name',
displayKey: 'value',
//This needs to me a function, not an array.
source: substringMatcher( ['yasser', 'shyam', 'sujesh', 'siddhesh', 'vaibhav'])
});
My view can't find layout. But everything looks fine. My structure is shown below:
And my view is shown below:
#model xxx.Web.Model.Home.IndexModel
#{
ViewBag.Title = "Index";
Layout = "~/Views/_MainLayout.cshtml";
}
And my layout is shown below:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="utf-8">
<title>Bootstrappage:Free Bootstrap Template (bootstrap 2.3.1 version)</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!--
<link rel="stylesheet" href="themes/style/bootstrap.min.css" />
<link rel="stylesheet" href="themes/style/bootstrap-responsive.min.css" />
-->
<link rel="stylesheet/less" type="text/css" href="../../themes/less/bootstrap.less">
<script src="../../themes/js/less/less.js" type="text/javascript"></script>
<link rel="shortcut icon" href="assets/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
<script type="text/javascript">
$(function () {
#RenderSection("DocumentReady", false)
});
</script>
</head>
<body data-offset="40">
#{Html.RenderAction("Header", "Partial");}
#{Html.RenderAction("Navbar", "Partial");}
#RenderBody()
#{Html.RenderAction("Footer", "Partial");}
<script src="themes/js/lib/jquery-1.9.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Also my controller is shown below:
public ActionResult Index()
{
IndexModel model = new IndexModel();
HomeModelFactory modelFactory = new HomeModelFactory();
model.Files = modelFactory.CreateIndexModel();
return View(model);
}
And exception:
Why I am getting this exception? It was working well.
And the full contents of the View / Controller as well please?
Some possible scenarios without looking at the View / Controller are;
- Some sections are missing (e.g. "DocumentReady")
- The view is trying to resolve model properties which are not set (i.e null)
You might check your properties setting on your _MainLayout.cshtml file. I had this same problem (the Layout page could not be found in the search path) until I set the VisualStudio properties BuildAction to Content. I had copied the file and renamed it, and the property had been set to 'none'.
This is your problem: Layout = "~/Views/_MainLayout.cshtml";
The _Layout reference should be Layout = "~/Views/Shared/_MainLayout.cshtml";
Dont make these type of mistakes again!
below is part of my head section in HTML. i found that the content of my page always load before the jquery.css such that the layout is so plain and return to the desired layout after 0.5 second loading time. What should I modify the code in order to avoid the plain content? is it related to the deviceready? in before, href is to the hyperlink, after that, i change it to a local file. i surprised that even a local file, it use 0.5 second to load it, instead of loading it instantly.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" charset="utf-8" src="cordova-2.3.0.js"></script>
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" href="jquery.mobile-1.0a1.min.css" />
<script src="jquery-1.4.3.min.js"></script>
<script src="jquery.mobile-1.0a1.min.js"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
document.addEventListener("backbutton", onBackKeyDown, false);
document.addEventListener("menubutton", showConfirm, false);
}
</head>
Try moving the line that loads Cordova-2.3.0.js below the lines that load your CSS. So something like:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" href="jquery.mobile-1.0a1.min.css" />
<script type="text/javascript" charset="utf-8" src="cordova-2.3.0.js"></script>
<script src="jquery-1.4.3.min.js"></script>
<script src="jquery.mobile-1.0a1.min.js"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
document.addEventListener("backbutton", onBackKeyDown, false);
document.addEventListener("menubutton", showConfirm, false);
}
</head>
It works after i change jquery mobile and jquery to latest version............