I am trying to implement bootstrap file input form GitHub in asp.net.
Below is my .aspc file code
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/bootstrap.min.js"></script>
<script src="bootstrap-fileinput/js/fileinput.js"></script>
<link href="bootstrap-fileinput/css/fileinput.css" rel="stylesheet" />
<title></title>
<script>
$("#input-id").fileinput({
'showUpload': false,
'maxFileCount': 5,
'showPreview': false,
'mainClass': "input-group-lg"
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="input-id" type="file" class="file-loading" multiple>
</div>
</form>
</body>
</html>
It works. But I need to customize it.
I do not want preview of files ('showPreview': false)
I do not want to show Upload button ('showUpload': false)
I want to limit number of files ('maxFileCount': 5)
I have used required plugins for customization.
But Still I get default preview/output.
Can someone help with this?
Thanks for your help.
Your code has minor errors. You need to add "multiple" directive to your input tag and change class to: "file-loading".
<form id="form1" runat="server">
<div>
<input id="input-id" type="file" class="file-loading" multiple>
</div>
</form>
And here is a working demo: https://jsfiddle.net/16jut54d/
Related
I hope to click "Upload Files" lable to display a foreground windows which include extra content, Submit and Close buttons in a html web page.
I write the following code, but it's ugly, and orginal UI is damaged when the is shown.
Is there a good way to do that? or a good control can do that?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>WiFi File Transfer</title>
<meta charset="utf-8" />
<script src="js/jquery1.10.2.min.js?isassets=1" type="text/javascript"></script>
<script src="js/user.js?isassets=1" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#UploadWindows").hide();
$("#UploadFile").click(function() {
$("#UploadWindows").show();
});
$("#Close").click(function() {
$("#UploadWindows").hide();
});
});
</script>
</head>
<body>
<div id="container">
<div id="header">
<a href="#">
<span id="UploadFile">Upload Files</span>
</a>
</div>
<div id="UploadWindows">
<form action="" method="post" enctype="multipart/form-data">
Please select files to upload <br />
<input type="file" name="myupload" multiple="multiple" />
<br />
<input type="submit" value="Upload Files" />
<br />
<span id="Close">Close</span>
</form>
</div>
<div id="Div1">
Other Content!
</div>
</div>
</body>
</html>
BTW, I think the edit popup window of stackoverflow is very good, I don't know if there is simple way do to it.
I keep getting this syntax error on the browser. I am not sure what am I missing here.
Basically I am trying to make a request to an external web api which takes an array of checked check box values as parameters passed in query parameter.
Here is my javascript.
function lookup() {
var query = document.getElementById("sform").value;
// var res = PageMethods.lookupfromjs_Click(query, onSuccess, onError);
var dttypeList;
$('#Button1').click(function() {
$('input[type=\"checkbox\"]').each(function(){
dttypeList.push(this.name);
alert( $.toJSON(dttypeList));
});
});
}
Here is the html
<!DOCTYPE html>
<head runat="server">
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" type="text/javascript"></script>
<script src="Scripts/lookup.js" type="text/javascript"></script>
<script src="Scripts/getdatatype.js" type="text/javascript"></script>
</head>
<body>
<section class="webdesigntuts-workshop">
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" >
</asp:ScriptManager>
<div>
<asp:TextBox type="search" name="search" id="sform" placeholder="What are you looking for?" runat="server" />
<asp:TextBox type="search" name="hdnText" id="hdnText" runat="server" />
<button id="Button1" onclick="lookup()" type="button">Search</button>
</div>
<div>
<p> </p>
</div>
<div>
<button id="Getdtbtn" type="button" onclick="getDatatypes()">Get Datatypes</button>
</div>
</form>
</section>
</body>
</html>
Does the lookup function even need to be declared? With the limited HTML snippet you posted, I tried to cobble something closer together resembling what you may have been trying to achieve:
var query = document.getElementById('sform').value;
var dtypeList = [];
$('#Button1').click(function() {
$('input[type="\checkbox\"]').each(function() {
dtypeList.push(this.name);
alert(JSON.stringify(dtypeList));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="sform">
<label for="Hello">Hello</label>
<input type="checkbox" name="Hello">
<label for="World">World</label>
<input type="checkbox" name="World">
<button id="Button1" type="button">Search</button>
</form>
This still loops through all of the checkboxes and spits them out to an alert once you click the button.
Also, please refer to this post about $.toJSON(): https://stackoverflow.com/a/7759630/3611025
The following code does not drop down and up the div when clicked,It doesn't perform anything.But Im trying the exact code that works here http://jsfiddle.net/vNeXq/
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script>
$('#login').click(function(){
$('#loginForm').slideToggle('fast');
});
</script>
</head>
<body>
<div id="loginWrapper">
<a id="login">Login</a>
<div id="loginForm">
<form name="login" method="post">
<input type="text" name="username" placeholder="Username" />
<input type="password" />
<input type="submit" value="Login" />
</form>
</div>
</div>
</body>
CSS File
#loginWrapper
{
width:400px;
background-color:#F0F0F0;
}
#login
{
cursor:pointer;
}
#loginForm
{
display:none;
}
Pretty sure you haven't included jQuery. The jQuery library is necessary for the script you want to run. You can download a copy of jQuery from here or you can use a copy hosted from Google. jQuery has to be included before the code you want to run.
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="loginWrapper">
<a id="login">Login</a>
<div id="loginForm">
<form name="login" method="post">
<input type="text" name="username" placeholder="Username" />
<input type="password" />
<input type="submit" value="Login" />
</form>
</div>
</div>
<!-- INCLUDE JQUERY -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#login').click(function(){
$('#loginForm').slideToggle('fast');
});
}):
</script>
</body>
</html>
If you have included jQuery in your project you maybe want to wrap your code with a function that executes when the page is loaded, so you are sure everything is there:
$(document).ready(function(){
$('#login').click(function(){
$('#loginForm').slideToggle('fast');
});
})
You can try like:
<script>
$(document).ready(function(){
$(document).on('click','#login',function(){
$('#loginForm').slideToggle('fast');
});
});
</script>
It seems that are your not including the jQuery library in the head of the html file.
Include the jquery library (it should be before your script):
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
In order for jQuery to modify the html document it must wait until the page is ready. You can do this by putting your function into:
$(document).ready(function() {
// your code here
});
So your script will end up looking like:
$(document).ready(function() {
$('#login').click(function(){
$('#loginForm').slideToggle('fast');
});
});
I've got this form with bootstrap but I can't find why it's not working properly ant I've no idea why.
HEAD>>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<link href="css/bootstrap-theme.css" rel="stylesheet" type="text/css"/>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
<link href="css/corrections.css" rel="stylesheet" type="text/css"/>
<script src="js/JQuery-2.1.1-min.js" type="text/javascript"></script>
<title></title>
</head>
<body>
--> code here
</body>
HTML >>
<div class="col-lg-4">
<form class="form-inline well">
<div class="form-group">
<label class="sr-only" for="text">Some label</label>
<input id="text" type="text" class="form-control" placeholder="Text here">
</div>
<button type="submit" class="btn btn-primary pull-right">Ok</button>
<div class="alert alert-danger" style="display:none">
<h4>Error</h4>
Required amount of letters is 4
</div>
<div class="success alert-success" style="display:none">
<h4>Success</h4>
You have the required amount of letters
</div>
</form>
</div>
JS >>
<script>
$(function () {
$("form").on("submit", function () {
if ($("input").val().length < 4) {
$("div.form-group").addClass("has-error");
$("div.alert").show("slow").delay(4000).hide("slow");
return;
} else if ($("input").val().length > 3) {
$("div.form-group").addClass("has-success");
$("div.success").show("slow").delay(4000).hide("slow");
return;
}
});
});
</script>
the alert class shows everytime, any idea why?
The use of $("input") here is unusual. That selector will pull back all elements on the page that are <input>s, which is almost certainly not what you mean. (If there are other inputs on the page, you might get exactly what you're describing.) Use a more precise selector, like $("#text"), and maybe use debug to output the value of val().length so you know what you're evaluating.
(On a side note, "text" is not a very useful name for a text input, and your else-if seems redundant, but they probably aren't causing problems in your code.)
I'm using asp.net web forms. I have DynamicDataField with some jquery.mobile widjets:
<head>
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile- 1.3.2.min.css" />
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"> </script>
<script>
function go() {
////some code
};
</script>
</head>
<div>
<div data-role="rangeslider" class="searchBlock">
<label for="range-1a">Комнат:</label>
<input name="range-1a" id="range-1a" min="0" max="100" value="0" type="range" class="seearchSlider" />
<label for="range-1b">Rangeslider:</label>
<input name="range-1b" id="range-1b" min="0" max="50" value="100" type="range" class="seearchSlider" />
</div>
///etc, several same divs
this DynamicDataField(Search.ascx) I place on my Main.Master padge:
<%# Register Src="~/DynamicData/FieldTemplates/Search.ascx" TagPrefix="search" TagName="search" %>
<head runat="server">
<meta name="viewport" content="width=device-width" />
<link href="/Content/MainStyle.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<title></title>
<asp:ContentPlaceHolder ID="TitleContent" runat="server" />
</head>
<body>
<div id="left">
<div style="background: #fff">
<search:search id="menu2" runat="server"/>
</div>
</div>
</body>
The problem is: after adding
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"> </script>
all my project starts behave strange. All fonts etc are like as in jquery.mobile widjet, some javascript methods don't work. So. How can I isolate jquery.mobile-1.3.2.min.js? I want it to be used ONLY in Search.ascx.
Any suggestions? sry, i'm new in jquery:)
By default, jQuery Mobile enhances everything on the page. You can use data-enhance="false on the page body, and just use data-enhance="true" on the control that you want to enhance.
See the docs for more info.
In this case, you need to tell JQM not to to auto-initialize pages. You should do that once mobileinit fires to apply global changes, after loading jQuery and before loading jQuery mobile JS libraries.
Nevertheless, bu doing so, you will need to manually enhance JQM elements (widgets).
<head>
<!-- jQuery.js here -->
<script>
$(document).on("mobileinit", function () {
$.mobile.autoInitializePage = false;
});
</script>
<!-- jQuery Mobile.js here -->
</head>