I'm trying to implement the autocomplete jQuery UI function in a Bootstrap modal window, but it does not work.
screenshot module
console debug
Take the steps of not returning a partial view, also already implement jQuery CSS styles, the truth works for me in full views, but why when calling a modal window does not? any help for me?
My Script of where I call the Modal window:
<script type="text/javascript">
$(document).ready(function () {
$("body").on("click", "a.dialog-window", null, function (e) {
e.preventDefault();
var $link = $(this);
var title = $link.text();
$('#AgregarProducto.modal-title').html(title);
var url = $(this).attr('href');
if (url.indexOf('#') == 0) {
$('#AgregarProducto').modal('show');
}
else {
$.get(url, function (data) {
$('#AgregarProducto .te').html(data);
$('#AgregarProducto').modal();
}).success(function () { $('input:text:visible:first').focus(); });
}
});
});
</script>
My Modal Windows:
<div class="form-group">
<div class="col-md-10">
<input type="text" name="producto" id="producto" />
</div>
</div>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="~/Scripts/jquery-ui-1.12.1.js"></script>
<script>
$(function () {
$("#producto").autocomplete({
source: "/Salidas/BuscarProducto"
});
});
</script>
}
My Controller:
public JsonResult BuscarProducto(string term)
{
using (DataContext db = new DataContext())
{
var resultado = db.Productos.Where(x => x.v_Nombre.Contains(term)).Select(y => y.v_Nombre).Take(5).ToList();
return Json(resultado, JsonRequestBehavior.AllowGet);
}
}
Try to add an event handler for shown.bs.modal before you show the modal itself.
<script type="text/javascript">
$(document).ready(function () {
$("body").on("click", "a.dialog-window", null, function (e) {
e.preventDefault();
var $link = $(this);
var title = $link.text();
$('#AgregarProducto.modal-title').html(title);
var url = $(this).attr('href');
if (url.indexOf('#') == 0) {
$('#AgregarProducto').on('shown.bs.modal', function () {
$("#producto").autocomplete({
source: "/Salidas/BuscarProducto"
});
}
$('#AgregarProducto').modal('show');
}
else {
$.get(url, function (data) {
$('#AgregarProducto .te').html(data);
$('#AgregarProducto').modal();
}).success(function () { $('input:text:visible:first').focus(); });
}
});
});
</script>
Related
I'm still new to asp.net mvc, i want to delete list of partial view, the delete is working but i must reload the entire page to show the new list
What I want is the partial view show the new list after delete without load the entire page, so only the partial view is updated
Here is my code:
My view content some of partial view :
#model cc.Models.User
#{
Layout = "~/Views/Shared/_MemberLayout.cshtml";
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="#Url.Content("~/Scripts/MicrosoftAjax.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/MicrosoftMvcValidation.debug.js")" type="text/javascript"></script>
<body class="container body-content">
<div id="partialView1">
#Html.Action(...)
</div>
<div id="partialView2">
#Html.Action(...)
</div>
<div id="partialView4">
#Html.Action(...)
</div>
<div id="partialView3" class="col-md-8 col-sm-1">
#Html.Action("UserHistory", "User")
</div>
</body>
Here is my partial view for UserHistory I tried to use ajax but it's not work. I already tried to use
$(this).closest('.historyRow').remove();
and
$("a.deleteHistory").live("click", function () {
$(this).parents("div.historyRow:first").remove();
return false;
});
Here is my code :
#model cc.Models.UserHistory
#{
Layout = null;
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="#Url.Content("~/Scripts/MicrosoftAjax.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/MicrosoftMvcValidation.debug.js")" type="text/javascript"></script>
<div id="formHistory">
<div id="historyDetail">
<div id="editDataHistoryUser">
#foreach (var item in Model.History)
{
#Html.Partial("UserHistoryDetail", item)
}
</div>
#Html.ActionLink("Add Form", "AddUserHistory", null, new { id = "btnFormHistory" })
</div>
</div>
<script type="text/javascript">
$("#btnFormHistory").click(function () {
$.ajax({
url: this.href,
cache: false,
success: function (html) { $("#editDataHistoryUser").append(html); }
});
return false;
});
$('#formHistory').on('click', '.deleteHistory', function () {
var id = $(this).data('id');
if (id == 0) {
$(this).closest('.historyRow').remove();
//$("a.deleteHistory").live("click", function () {
// $(this).parents("div.historyRow:first").remove();
// return false;
//});
} else {
var url = '#Url.Action("DeleteUserHistory", "User")';
$.post(url, { ID: id }, function (response) {
if (response) {
$(this).closest('.historyRow').remove();
//$("a.deleteHistory").live("click", function () {
// $(this).parents("div.historyRow:first").remove();
// return false;
//});
}
}).fail(function (response) {
});
}
});
</script>
Here is my UserHistoryDetail Code :
#model cc.Models.IUserHistory
#{
Layout = null;
}
<div id="formUserHistoryDetail">
#using (Ajax.BeginForm("UserHistoryDetail", "User", new AjaxOptions { HttpMethod = "POST" }))
{
<div id="historyRow">
<div>#Html.LabelFor(model => model.IDHistory, new { style = "display:none;" })</div>
...
delete
</div>
}
</div>
And here is my JsonResult when button delete clicked :
[HttpPost]
public JsonResult DeleteUserHistory(string ID)
{
db.delUserHistory(ID);
return Json(true);
}
I still cannot find the solution for this , or maybe i used ajax in wrong way, any suggestion?
Let's assume that the DeleteUserHistory post url is '/[Controller]/': '/UserHistory'
$('.deleteHistory').click(function(){
var url = '/UserHistory';
$.ajax({
type: "POST",
url: url,
data: data,
success: onSuccessCallback
});
});
What you should really do is use WebApi to manage data and use the views to display.
As for the delete, use method type 'delete' instead of 'post'. Post should be used for "adds".
I have a kendo tabstrip with close button. The problem is that I can't get the button click event to close that tab.
#(Html.Kendo().TabStrip()
.Name("test")
.Items(tabstrip =>
{
tabstrip.Add().Text("")
.Selected(true)
.ContentHtmlAttributes(new { style = "overflow: auto;" })
.Content("");
})
.SelectedIndex(0)
)
<script>
tab.append({
text: "" + name + " <input type='button' id='ddddd'>X</input> ",
contentUrl: content,
encoded: false
//imageUrl: "/Images/close.png" <span class='tabdelete k-button'><span class=' k-icon k-i-close' ></span></span>
})
$("#ddddd").click(function () {
alert("done");
});
</script>
Is your requirement look like this? http://jsfiddle.net/palanikumar/8jf2wpng/
$('.cls-btn').click(function()
{
var index = $(this).parent().parent().index();
var tabStrip = $('#tabstrip').getKendoTabStrip();
tabStrip.remove(index);
tabStrip.select(0);
});
Try This
<input type='button' class="button" id='ddddd'>X</input>
<script type="text/javascript">
$(function(){
//replace your selector if u need ID
//$('body').on('click', '#buttonID', function () {
$('body').on('click', '.button', function () {
alert('ddsda');
});
});
</script>
I can't seem to get anything displayed in my div which has the attribute "ng-view".
Here is my controller;
(function () {
var app = angular.module("userViewer", []);
var MainController = function ($scope, $location) {
console.log("Main controller");
$scope.search = function () {
console.log("User ID: " + $scope.userid);
//Right Route Here
};
};
app.controller("MainController", MainController);
}());
Here is my app.js:
(function() {
var app = angular.module("userViewer", ['ngRoute']);
console.log("Test route");
app.config(function($routeProvider) {
$routeProvider.when("/main", {
templateUrl: "html/main.html",
controller: "MainController"
})
.otherwise({ redirectTo: "/main" });
});
}());
My master template:
<!DOCTYPE html>
<html ng-app="userViewer" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
#Scripts.Render("~/bundles/angular")
</head>
<body>
#RenderBody()
</body>
</html>
My angular SPA main page html body:
<h2>Header</h2>
<div ng-view>
</div>
My main.html
<div>
<form name="searchUser" ng-submit="search()">
<input type="search" required ng-model="userid" placeholder="User ID to find" />
<input type="submit" value="Search" />
</form>
</div>
My console.log within app.js "Test route prints but when I navigate to URL/#/main nothing is shown.
Just the word "Header" and the main.html view is not loaded atall.
There is also no errors displayed in the console.
Can anyone give me some advice?
In your controller you are doing this
var app = angular.module("userViewer", []);
When you put the [] in there you are creating a new module. Try
var app = angular.module("userViewer");
to reference your existing one.
(function() {
var app = angular.module("userViewer", ['ngRoute']);
console.log("Test route");
app.config(function($routeProvider) {
$routeProvider.when("/main", {
templateUrl: "/html/main.html", <-- try to locate the view starting from the root path of the app
controller: "MainController"
})
.otherwise({ redirectTo: "/main" });
});
}());
try to define your controller as:
angular.module('userViewer').controller('MainController', ['$scope', '$location', function ($scope, $location) {
//your code here
}]);
change app.js to
(function () {
var MainController = function ($scope, $location) {
console.log("Main controller");
$scope.search = function () {
console.log("User ID: " + $scope.userid);
//Right Route Here
};
};
app.controller("MainController", MainController);
}());
I am trying to open a modal window in my asp.net mvc 4 project on click of a link. Nothing happens with the code that I have written. What am I missing? I have referenced these links in my site master.
<link type="text/css" href="#Url.Content("~/Content/custom.css")" rel="Stylesheet" />
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery-1.9.1.js")" ></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery-ui-1.10.3.custom.min.js")"></script>
Here is my code
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/SiteMaster.cshtml";
}
<div id="dialogMsg" title="I'm Title of dialog">
Hello I'm dialog body.
</div>
Open Dialog
<script type="text/javascript">
$(document).ready(function () {
$("#dialogMsg").dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Do something": function () {
var bValid = true;
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
},
close: function () {
allFields.val("").removeClass("ui-state-error");
}
});
$('#thelink')
.click(function () {
$('dialogMsg').dialog('open');
});
});
</script>
You've missed the # on the selector that actually opens the dialog. See here:
$('#thelink')
.click(function () {
$('dialogMsg').dialog('open');
});
Change it to:
$('#thelink')
.click(function () {
$('#dialogMsg').dialog('open');
});
How would I run a method in backend to send emails when I have a jquery dialogue with yes and no button as following :
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("#dialog").dialog({
autoOpen: false,
modal: true
});
});
$(".confirmLink").click(function (e) {
e.preventDefault();
var targetUrl = $(this).attr("href");
$("#dialog").dialog({
buttons: {
"Yes": function () {
$(this).dialog("close"),
SendEmail(),
window.location.href = targetUrl;
},
"No": function () {
$(this).dialog("close");
}
}
});
$("#dialog").dialog("open");
});
</script>
<a class="confirmLink" href="emailsend.aspx"></a>
<div id="dialog" title="Confirmation Required">
<p>
Do you want to send an email?</p>
</div>
You would have to communicate this with the back end via ajax, the backend would then send the email; a little like this:
function SendEmail(email, content)
{
var data = "email=" + escape(email) + "&content=" + escape(content);
$.ajax({
url: "sendemail.asp",
type: 'POST',
data: data,
success: function(data){
alert("Hurray");
},
error: function() {
alert("Oh noes! It went wrong");
}
});
}