I am using bootbox.confirm with an ajax call, and I get the confirm box, but my screen is greyed out and I'm unable to select anything.
Here is what it looks like:
My first thought is that maybe my scripts are referenced wrong in _Layout, but I'm not sure:
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
Bundles
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js",
"~/Scripts/moment.js",
"~/Scripts/bootstrap-datetimepicker.js",
"~/Scripts/jquery-ui.js",
"~/Scripts/Scripts.js"
);
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/bootbox.js",
"~/Scripts/respond.js"));
When inspecting here is what I have:
<body class="modal-open">
<div class="modal-backdrop fade in"></div>
<div class="modal-dialog">...</div>
Here is my script:
$(document).ready(function () {
var table = $("#Table").DataTable();
$("#Table.js-delete").on("click",
function () {
var link = $(this);
$("body").removeClass("modal-open");
bootbox.confirm("Are you sure you want to delete this?",
function (result) {
$(".modal-backdrop").remove();
if (result) {
$.ajax({
url: "/api/Informations/" + $(this).attr("data-id"),
method: "DELETE",
success: function () {
table.row(link.parents("tr")).remove().draw();
link.parents("tr").remove();
}
});
}
});
});
});
please do inspect element check out classes applied to modal and main body in your page,i'm pretty sure this is because modal-backdrop active and stucked
here are few things you can do
1) just add data-dismiss="modal" to button
2)If modal hide or visible, faded background is remained and does not let you click any where you can forcefully remove those by using below piece of code.
first hide your modal div element.
$('modalId').modal('hide');
secondly remove 'modal-open' class from body and '.modal-backdrop' at the end of the page.
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
This worked for me. You can try this please:
View:
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index58</title>
<script src="~/Scripts/jquery-1.12.4.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="~/Scripts/bootbox.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
bootbox.confirm("This is the default confirm!",
function (result) {
console.log('This was logged in the callback: ' + result);
});
})
})
</script>
</head>
<body>
<div>
<input type="button" value="ShowModal" id="btn" />
</div>
</body>
</html>
Related
I am a beginner in asp.net and I'm trying to add a search bar with autocompletion.
I want the result to return a list of object, result of a stored procedure on two tables with more than 200.000 rows each (top 30 result for the autocompletion), with 2 fields : a label (Resultat) and an Id (IdRes).
I managed to call my function, I get my result, but the autocomplete popup does not show or in a wrong way.
Here is the code of my _layout.cshtml:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - CLAP : le colloque du cinéma</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#Scripts.Render("~/bundles/jqueryval")
#Scripts.Render("~/bundles/jqueryui")
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="Scripts/jquery-3.3.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#navinput").autocomplete({
source: function (request, response) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "Home/RechercheAutoComplete",
data: "{'term':'" + $("#navinput").val() + "'}",
datatype: "json",
success: function (data) {
response($.map(data, function (value, key) {
return {
label: value.Resulat,
value: value.Resulat
}
}));
},
error: function (result) {
alert("Error");
}
});
}
});
});
</script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-collapse collapse">
...
<div class="navbar-form navbar-left" role="search">
<div class="formgroup">
<input class="form-control" id="navinput" name="navinput" runat="server" type="text" width="512" placeholder="Search..." />
<button class="btn btn-default glyphicon glyphicon-search" id="navsearchbtn" runat="server" OnClick="navSearch" type="submit" />
</div>
</div>
...
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
</div>
<div class="footer">
<p>© #DateTime.Now.Year - CLAP</p>
</div>
#RenderSection("scripts", required: false)
</body>
</html>
So, with this code, It shows me a popup menu in the left top corner of the browser, instead of under my textbox and it displays the ResId instead of Resultat.
What am I doing wrong and how can I fix it ? I want the user to select a label but return the Id.
So technically you need to do is for Every Key Enter in textbox
for example
H of "Hamza" you take this 'H' from TextBox and make an Ajax call and make a function in controller to return JSON result by querying the database using SQL like query which when using C# we can use LINQ
var nameSuggestion = customers.Where(c => c.Name.Contains("H")).tolist();
So this Method will return the JSON result and you can then AutoFill Your ListBox with suggestions using JQUERY or JAVASCRIPT,So you Keep on typing for every Key-Down Data-Base will be queried and you will get the changed suggestion side by side when you put in the letters one by one
H
A
M
Z
A
This is how i did in my project and it worked perfectly.
Why not add a datalist, with all the desired options? That way if you search, it will show all the possible options, depending on the current content.
<input list="MyDataList"/>
<datalist id="MyDataList">
<option>option1</option>
<option>option2</option>
<option>option3</option>
</datalist>
I suggest you have a <div> with an ID. Then you use ajax to call a PartialView (by ActionResult-Method) which creates the <datalist> element with all the options. Then in the ajax-result-function you can populate the div like this:
$("#IdOfTheDiv").html(result);
Or alternatively maby use this: http://easyautocomplete.com/ (Haven't tried it)
So my MVC application keeps on throwing an Http internal server error with status code 500 when it renders my view.
The error it is throwing is a JQuery "Uncaught TypeError: $(...).select2 is not a function"
Uncaught TypeError: $(...).select2 is not a function
at HTMLDocument.<anonymous> (AddUser:381)
at fire (jquery-1.11.0.js:3100)
at Object.fireWith [as resolveWith] (jquery-1.11.0.js:3212)
at Function.ready (jquery-1.11.0.js:3424)
at HTMLDocument.completed (jquery-1.11.0.js:3454)
Using debugger tools, it throws the error here:
$('selectUser').select2();
This is how I call my script:
#section Scripts {
<script type="text/javascript" src="#Url.Content("~/Content/Template/js/plugins/jquery-ui-1.8.16.custom.min.js")"></script>
#Scripts.Render("~/bundles/forms")
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css" rel="stylesheet" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('selectUser').select2();
});
</script>
Some SO posts suggest that this error is caused when you omit type="text/javascript"in your script tag or when you call the select2 function before the reference to the CDN service but as it clearly shows on my code all seems fine regarding the aforementioned.
According to this Uncaught TypeError: $(...).select2 is not a function, I am told to make sure if I have one version of JQuery loaded and all seems fine
Here is some additional code from my View that will help in reproducing the problem:
<script>
function submitForm() {
var usersRoles = new Array;
jQuery("#dualSelectRoles2 option").each(function () {
usersRoles.push(jQuery(this).val());
});
var model = new Object();
model.userId = jQuery('#selectUser').val();
model.rolesList = usersRoles;
console.log('model: ' + 'user: ' + model.userId + 'roles: ' + model.rolesList);
console.log('JSON: ' + JSON.stringify(model));
jQuery('#loading3').show();
jQuery.ajax({
type: "POST",
url: "#Url.Action("AddUser")",
dataType: "json",
contentType: "application/json",
data: JSON.stringify(model),
success: function (data) { showSuccessMessage(data); },
failure: function (errMsg) {
jQuery('#loading3').hide();
alert(errMsg);
}
});
return false;
}
//Shows the success message
function showSuccessMessage(data) {
jQuery('#loading3').hide();
alert(data);
}
</script>
Controller:
public ActionResult AddUser()
{
if (TempData["StatusMessage"] != null)
{
ViewBag.StatusMessage = TempData["StatusMessage"].ToString();
}
else
{
ViewBag.StatusMessage = "";
}
AddUserToRolesViewModel vm = new AddUserToRolesViewModel();
vm.Users = db.Users.ToList();
return View(vm);
}
EDIT:
Just to make sure that JQuery Core didn't load twice (once in Master and once in Content page) - I have included the markup for my master page.
_Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="/favicon.ico" />
#Styles.Render("~/Content/Template/css/style.css")
<!--[if IE 9]>
<link rel="stylesheet" media="screen" href="#Url.Content("~/Content/Template/css/ie9.css")"/>
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" media="screen" href="#Url.Content("~/Content/Template/css/ie8.css")"/>
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" media="screen" href="#Url.Content("~/Content/Template/css/ie7.css")"/>
<![endif]-->
#Scripts.Render("~/bundles/jquery")
<script type="text/javascript" src="#Url.Content("~/Content/Template/js/custom/general.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Content/Template/js/plugins/ui.spinner.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Content/Template/js/plugins/jquery.jgrowl.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Content/Template/js/plugins/jquery.alerts.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Content/Template/js/custom/elements.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Content/Template/js/plugins/colorpicker.js")"></script>
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="#Url.Content("~/Content/Template/js/plugins/excanvas.min.js")"></script><![endif]-->
<title>#ViewBag.Title</title>
</head>
<body class="loggedin">
#Html.Partial("_Header_top")
<!-- START OF MAIN CONTENT -->
<div class="mainwrapper">
<div class="mainwrapperinner">
#Html.Partial("_Menu_left")
<div class="maincontent">
<div class="maincontentinner">
#RenderBody()
</div>
<div class="footer">
#Html.Partial("_Footer")
</div>
</div>
</div>
</div><!--mainwrapper-->
<!-- END OF MAIN CONTENT -->
</body>
#RenderSection("scripts", required: false)
#Scripts.Render("~/bundles/jqueryval")
</html>
Update II:
So I went ahead to my App_Start folder and navigated to my BundleConfig.cs and there I noticed something:
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js",
"~/Content/Template/js/plugins/jquery-ui-
1.8.16.custom.min.js"
}
According to this link: Usage of the ASP.NET MVC4 jquery/javascript bundles and I realized that file "~/Content/Template/js/plugins/jquery-ui-1.8.16.custom.min.js" had alreasdy been added to this bundle and referenced in my content page (AddUser.cshtml) as:
<script type="text/javascript" src="#Url.Content("~/Content/Template/js/plugins/jquery-ui-1.8.16.custom.min.js")"></script>
At this point, I strongly believed this was going to fix the problem and so I removed this reference in my content page because I believed that that could be loading JQuery core twice but still nothing. The error still persists. What else can I do to try solve this?
Worthy mention that this error persists across all browsers (Chrome, IE & Firefox)
I am new to JQuery
This thread is a half-duplicate of my older thread
The main problem is that I want to create a box around the current item to which mouse is pointing, and when mouse leaves that item the box will disappear.
<script src="Scripts/jquery-1.10.1.min.js" type="text/javascript"></script>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<div class="clickable" url="http://www.google.com">
Google
</div>
<div class="clickable" url="http://www.bing.com">
Bing
</div>
<script type="text/javascript">
$("div.clickable").mouseover(function () {
// $(this).css("outline-style", "solid");
// $(this).css("outline-color", "Navy");
// $(this).css("outline-width", "thin");
$("#div.clickable").each(function () { $(this).removeClass("Selected") });
$(this).addClass("Selected");
});
</script>
<script type="text/javascript">
$("div.clickable").click(
function () {
window.location = $(this).attr("url");
});
</script>
And Style would be
.clickable
{
cursor:pointer;
cursor: hand;
}
.Selected
{
outline-style:solid;
outline-color:Navy;
outline-width:thin;
}
Yet it is not working when mouse goes over the other item. it does not clear the outline of the previous item.
Just use CSS pseudo class :hover:
DEMO
.clickable:hover{outline:thin solid navy}
You can do this with pure css:
.clickable:hover{
outline-style:solid;
outline-color:Navy;
outline-width:thin;
}
.clickable
{
cursor:pointer;
outline-style:none;
outline-color:transaprent;
outline-width:none;
}
no js needed.
I try to implement Fineuploader in my MVC4 project but it always fails to upload. What i did:
added css and js files to my view:
<link href="~/Content/fineuploader.css" rel="stylesheet" />
<script src="~/Scripts/js/util.js"></script>
<script src="~/Scripts/js/button.js"></script>
<script src="~/Scripts/js/dnd.js"></script>
<script src="~/Scripts/js/handler.base.js"></script>
<script src="~/Scripts/js/handler.form.js"></script>
<script src="~/Scripts/js/handler.xhr.js"></script>
<script src="~/Scripts/js/header.js"></script>
<script src="~/Scripts/js/jquery-plugin.js"></script>
<script src="~/Scripts/js/uploader.basic.js"></script>
<script src="~/Scripts/js/uploader.js"></script>
added the code for the upload button and exceution of the script (i think this isn't right?)
<script>
function createUploader() {
var uploader = new qq.FineUploader({
element: document.getElementById('fine-uploader'),
debug: true,
request: {
endpoint: '/Upload/UploadFile/'
}
});
}
window.onload = createUploader;
</script>
added the C# files to my project FineUpload.cs, FineUploadResult.cs and the Controller UploadController.cs. I also added a route to the controller:
routes.MapRoute(
name: "upload",
url: "Upload/UploadFile",
defaults: new { controller = "Upload", action = "UploadFile" }
);
The controller is:
public class UploadController : Controller
{
[HttpPost]
public FineUploaderResult UploadFile(FineUpload upload, string extraParam1, int extraParam2)
{
...
}
}
But UploadFile is never called on the server.
You seem to have messed up your script inclusions (order and everything). You should choose whether you need to use the FineUploaderBasic mode, the FineUploader mode or the jQuery plug-in mode. Given your code you seem to be using the standard mode.
Here's a full working example and the minimal markup:
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<link href="~/Content/fineuploader.css" rel="stylesheet" />
</head>
<body>
<div id="fine-uploader">Click me to upload a file</div>
<script src="~/Scripts/js/header.js"></script>
<script src="~/Scripts/js/util.js"></script>
<script src="~/Scripts/js/button.js"></script>
<script src="~/Scripts/js/handler.base.js"></script>
<script src="~/Scripts/js/handler.form.js"></script>
<script src="~/Scripts/js/handler.xhr.js"></script>
<script src="~/Scripts/js/uploader.basic.js"></script>
<script src="~/Scripts/js/dnd.js"></script>
<script src="~/Scripts/js/uploader.js"></script>
<script type="text/javascript">
function createUploader() {
var uploader = new qq.FineUploader({
element: document.getElementById('fine-uploader'),
debug: true,
request: {
endpoint: '#Url.Action("UploadFile", "Uploader")'
}
});
}
createUploader();
</script>
</body>
</html>
Also your controller action seem to be taking some extra integer parameter. If you do not specify it with the request, this request will obviously fail. Use a nullable integer in this case.
I have a javascript function showAlert(). There is a draggable image. After the drag is stopped, we need to show the alert. Its not working How do we correct it?
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="Scripts/ui.core.js" type="text/javascript"></script>
<script src="Scripts/ui.draggable.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function ()
{
$("#d1").draggable(
{
drag: function (event, ui)
{
},
stop: function (event, ui)
{
showAlert();
},
cursor: "move"
});
});
function showAlert()
{
alert("hai");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div style="border:2px solid orange; width:500px; height:300px;" >
<br />
<img src="MyIMages/RedSquare.jpg" alt="" id="d1" runat="server" />
<br />
</div>
</form>
</body>
</html>
I tried with the jquery UI libraries and it worked http://jsfiddle.net/5HyyP/
The image is run on server, so the render ID is different, and the script not found it to use it: Change the javascript
$("#<%=d1.ClientID%>").draggable(
{
OR change the image, remove the run=server
<img src="MyIMages/RedSquare.jpg" alt="" id="d1" />