I want to clear textbox after ajax posting.
<div style="padding: 5px; background-color: Silver;">
#using (Ajax.BeginForm("_MessagesPartial", "Chat", new AjaxOptions { UpdateTargetId = Model.room_id.ToString() }))
{
<div style="padding: 5px 15px 5px 5px;">
#Html.TextBox("textbox_message", null, new { #class = "text_yorum", id = "text_box_chat" })
#Html.Hidden("oda_id", Model.room_id)
</div>
}
</div>
<div id="#Model.room_id" style="height:400px;overflow-y:scroll;position: relative;">
#Html.Action("_MessagesPartial", "Chat", new { room_id = Model.room_id })
</div>
there are a lot of example, but they do not work.
I m already using this code, but it is too slow.
$("form").submit(function () {
$.get('#Url.Action("_MessagesPartial", "Chat", new { room_id = Model.room_id }) ', {}, function (view) {
$("##Model.room_id").html(view);
$("#text_box_chat").val("");
});
});
Is there any way to do this.
How about clearing the box before waiting for the response?
$("form").submit(function () {
setTimeout(function(){
$("#text_box_chat").val("");
}, 20);
$.get('#Url.Action("_MessagesPartial", "Chat", new { room_id = Model.room_id }) ', {}, function (view) {
$("##Model.room_id").html(view);
});
});
Related
I need to see an example of a kendoui Combobox (either MVC or client side code) preselecting an item (not only value) from datasource.The datasource has server filtering enabled.The issue i am facing is that when i bind my mvc combobox to a model property (e.g. UserID), only the value (which is the user ID) is bound and not the Name which is the textfiled.When clicking on the combobox arrow, the selected item is not poping up,meaning that there is no selected item and only the widget element (e.g. input) value is set.Most of the examples i have seen shows how to set the selected value or text, but does not address the issue of the absence of a selected item.Here is my code:
#Html.Kendo().ComboBoxFor(model => model.UserID).DataValueField("ID").DataTextField("Name").Filter(FilterType.Contains).MinLength(3).DataSource(source =>
{
source.Custom().Type("aspnetmvc-ajax").Transport(transport => transport.Read(read =>
{
read.Action("GetAllUsers", "User");
})).ServerFiltering(true).ServerPaging(true).PageSize(50);
}).AutoBind(false)
The autoBind is false so that the combobox does not hit the data service with an empty filter which would return a useless 50 records.Instead of this, the desired behaviour is that the combobox datasource should send the filter (e.g: UserID=50) by default and should return the record and add the item to the combobox.I have found a workround for this issue but do not know if this the easiest way to do it:
combobox.dataSource.filter({ field: 'UserID', operator: 'eq', value: 50 });
If I call the above code, the item is preselected, and my combobox would have only one item which is what i wanted, but the next time i try to change the selected item by typing another user name, the filter would fail because the earlier filter is still attached to the datasource.I solved this by calling:
combobox.dataSource.filter().filters.shift()
Any help for finding a shortcut will be appreciated.
There's documentation for this here. The example below is taken from the page and based on DropDownList which is applicable to ComboBox too.
<div id="example">
<div class="demo-section k-header">
<h4>View Order Details</h4>
<p>
<label for="categories">Categories:</label><input id="categories" style="width: 270px" />
</p>
<p>
<label for="products">Products:</label><input id="products" disabled="disabled" style="width: 270px" />
</p>
<p>
<label for="orders">Orders:</label><input id="orders" disabled="disabled" style="width: 270px" />
</p>
<button class="k-button" id="get">View Order</button>
</div>
<style scoped>
.demo-section {
width: 400px;
}
.demo-section p {
margin-top: 1em;
}
.demo-section label {
display: inline-block;
width: 100px;
padding-right: 5px;
text-align: right;
}
.demo-section .k-button {
margin: 1em 0 0 105px;
}
.k-readonly
{
color: gray;
}
</style>
<script>
$(document).ready(function() {
var categories = $("#categories").kendoDropDownList({
optionLabel: "Select category...",
dataTextField: "CategoryName",
dataValueField: "CategoryID",
dataSource: {
type: "odata",
serverFiltering: true,
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories"
}
},
dataBound: function() {
this.search("Grains/Cereals");
this.select(this.selectedIndex);
}
}).data("kendoDropDownList");
var products = $("#products").kendoDropDownList({
autoBind: false,
cascadeFrom: "categories",
optionLabel: "Select product...",
dataTextField: "ProductName",
dataValueField: "ProductID",
dataSource: {
type: "odata",
serverFiltering: true,
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
}
},
dataBound: function() {
this.search("Gnocchi di nonna Alice");
this.select(this.selectedIndex);
}
}).data("kendoDropDownList");
var orders = $("#orders").kendoDropDownList({
autoBind: false,
cascadeFrom: "products",
optionLabel: "Select order...",
dataTextField: "Order.ShipCity",
dataValueField: "OrderID",
dataSource: {
type: "odata",
serverFiltering: true,
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Order_Details?$expand=Order"
}
},
dataBound: function() {
this.search("Albuquerque");
}
}).data("kendoDropDownList");
});
</script>
</div>
I am able to display Flexigrid in a normal view called from my main menu. I am using this sample http://mvc4beginner.com/Sample-Code/Insert-Update-Delete/Asp-.Net-MVC-Ajax-Insert-Update-Delete-Using-Flexigrid.html to make it work and it works fine for me.
However, my idea is to use a bit more complex interface - have a regular view with the search controls and on pressing search button show the grid with data for the items I searched.
I tried couple of things so far and can not make it to work. Here is the latest Index view I tried:
#model CardNumbers.Objects.Client
#{
ViewBag.Title = "Clients";
}
<h2>Clients</h2>
<br />
#using (Ajax.BeginForm("Search", "Client",
new AjaxOptions
{
HttpMethod = "POST",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "ClientsResults"
}))
{
<fieldset>
<legend>Search</legend>
<label for="clientNo">Client No: </label>
<input type="number" name="searchClientNo" class="numericOnly" /><br />
<label for="clientName">Client Name: </label>
<input type = "text" size =25 data-autocomplete="#Url.Action("QuickSearch", "Client")" name ="searchClientName" />
<div>
<input type="submit" value="Find / Refresh" />
#*<input type="button" value="Find / Refresh" id="ClientsSearch" data-url="#Url.Action("Client", "Client")" />
#*<input type="submit" value="Find / Refresh" />*#
#* #Ajax.ActionLink("Find / Refresh", "Client", new AjaxOptions {UpdateTargetId = "ClientResults",
InsertionMode = InsertionMode.Replace, HttpMethod = "POST"}) *#
#*}*#
</div>
</fieldset>
<div style="padding-left:150px; padding-top:50px; padding-bottom:50px;" id="ClientsResults">
#*#{Html.RenderPartial("_Client", Model); }*#
#*<table id="flexClients" style="display:none"/>*#
</div>
}
#*<br />*#
You can see all the commented attempts here also. So, the Search method in the Clients controller now has this code:
public ActionResult Search(int? searchClientNo = null, string searchClientName = null)
{
// Assume we want to select everything
var clients = Db.Clients; // Should set type of clients to IQueryable<Clients>
if ((searchClientNo ?? 0) != 0) //Number was supplied
clients = clients.Where(c => (c.Number == searchClientNo));
// If clientNo was supplied, clients is now filtered by that. If not, it still has the full list. The following will further filter it.
if (!String.IsNullOrWhiteSpace(searchClientName)) // Part of the name was supplied
clients = clients.Where(c => (c.Name.Contains(searchClientName)));
return PartialView("_ClientsSearch", clients);
//return PartialView("_Client", clients);
}
The commented view is the partial view which has a flexigrid and it's not working. The _ClientsSearch view is the "normal" index view created by using the template and this works.
Do you see what exactly I am missing? The flexigrid method is simply not firing at all when I attempt to use it as a partial view from that main view.
I haven't figured out the more complex scenario I had originally in mind, but I was able to make it work using the regular view. The helpful idea first came from this FAQ:
http://code.google.com/p/flexigrid/wiki/FAQ and also looking a bit closer to that sample I used.
So, now my Client view is this:
#model CardNumbers.Objects.Client
#{
ViewBag.Title = "Client";
}
<form id="frmClientsSearch">
<label for="clientNo">Client No: </label>
<input type="number" name="searchClientNo" class="numericOnly" /><br />
<label for="clientName">Client Name: </label>
<input type = "text" size =25 value ="Please enter the search value"
name ="searchClientName" />
<input type="button" id="btnClientsSearch" value ="Find / Refresh" />
</form>
<div style="padding-left: 150px; padding-top: 50px; padding-bottom: 50px;" id="ClientsResults">
<table id="flexClients" style="display: none">
</table>
</div>
<div style="display: none">
<form id="sform">
<input type="hidden" id="fntype" name="fntype">
<input type="hidden" id="Id" name="Id">
<label for="Number">Client No: </label>
<input type="number" id="Number" name="Number" class="numericOnly" />
<label for="Name">Client Name: </label>
<input type="text" size="25" id="Name" name="Name" /><br />
<label for="Contact11">Contact 1: </label>
<input type="text" size="25" id="Contact1" name="Contact1" /><br />
<div class="float-right">
<button type="Submit" id="btnSave">Submit</button>
<button type=reset id="btnCancel">Cancel</button>
</div>
</form>
</div>
And the main work is done in the .js file (note the AddFormData method):
/// <reference path = "jquery-1.5.1-vsdoc.js"/>
/// <reference path = "jquery-ui-1.8.11.js"/>
$(document).ready(function() {
$(":input[data-autocomplete]").each(function() {
$(this).autocomplete({ source: $(this).attr("data-autocomplete") });
});
});
$(function () {
$('input[name="delete"]').click(function () {
return confirm('Are you sure?');
});
});
$(".numericOnly").keypress(function (e) {
if (String.fromCharCode(e.keyCode).match(/[^0-9]/g)) return false;
});
$("#flexClients").flexigrid({
url: '/Client/Client/',
dataType: 'json',
colModel: [
{ display: 'Client Id', name: 'Id', width: 100, sortable: true, align: 'center', hide: true},
{ display: 'Client #', name: 'Number', width: 100, sortable: true, align: 'center' },
{ display: 'Name', name: 'Name', width: 350, sortable: true, align: 'center' },
{ display: 'Contact 1', name: 'Contact1', width: 350, sortable: true, align: 'center' },
],
buttons: [
{ name: 'Add', bclass: 'add', onpress: test },
{ name: 'Edit', bclass: 'edit', onpress: test },
{ name: 'Delete', bclass: 'delete', onpress: test },
{ separator: true }
],
searchitems: [
{ display: 'Client Name', name: 'Name' }
],
sortname: "Name",
sortorder: "asc",
usepager: true,
title: 'Clients',
useRp: true,
rp: 15,
showTableToggleBtn: true,
width: 1000,
onSubmit: addFormData,
height: 300
});
//This function adds parameters to the post of flexigrid. You can add a verification as well by return to false if you don't want flexigrid to submit
function addFormData() {
//passing a form object to serializeArray will get the valid data from all the objects, but, if the you pass a non-form object, you have to specify the input elements that the data will come from
var dt = $('#sform').serializeArray();
dt = dt.concat($('#frmClientsSearch').serializeArray());
$("#flexClients").flexOptions({ params: dt });
return true;
}
$('#sform').submit(function () {
$('#flexClients').flexOptions({ newp: 1 }).flexReload();
alert("Hello World");
return false;
});
function test(com, grid) {
if (com === 'Delete') {
var clientName = $('.trSelected td:eq(2)').text();
if (clientName) //Variable is defined and not empty
{
if (confirm("Are you sure you want to delete " + $.trim(clientName) + "?"))
return false;
$('#fntype').val('Delete');
$('#Id').val($('.trSelected td:eq(0)').text());
$('#Number').val('');
$('#Name').val('');
$('#Contact1').val('');
$('.trSelected', grid).each(function () {
var id = $(this).attr('id');
id = id.substring(id.lastIndexOf('row') + 3);
addFormData(); $('#flexClients').flexOptions({ url: '/Client/Client/' }).flexReload();
});
clearForm();
}
} else if (com === 'Add') {
$("#sform").dialog({
autoOpen: false,
show: "blind",
width: 1000,
height: 500
});
$("#sform").dialog("open");
$('#fntype').val('Add');
$('#Number').val('');
$('#Name').val('');
$('#Contact1').val('');
} else if (com === 'Edit') {
$('.trSelected', grid).each(function () {
$("#sform").dialog({
autoOpen: false,
show: "blind",
width: 1000,
height: 500
});
$("#sform").dialog("open");
$('#fntype').val('Edit');
$('#Id').val($('.trSelected td:eq(0)').text());
$('#Number').val($('.trSelected td:eq(1)').text());
$('#Name').val($('.trSelected td:eq(2)').text());
$('#Contact1').val($('.trSelected td:eq(3)').text());
});
}
}
function clearForm() {
$("#sform input").val("");
};
$(function () {
$('#btnSave').click(function () {
addFormData();
$('#flexClients').flexOptions({ url: '/Client/Client/' }).flexReload();
clearForm();
$('#sform').dialog('close');
return false;
});
});
$(function () {
$('#btnCancel').click(function () {
// clearForm();
$('#sform').dialog('close');
return false;
});
});
$(function () {
$('#btnClientsSearch').click(function () {
addFormData();
$('#flexClients').flexOptions({ url: '/Client/Client/' }).flexReload();
//$.ajax({
// url: $(this).data('url'),
// type: 'GET',
// cache: false,
// success: function (result) {
// $('#ClientsResults').html(result);
// }
//});
return;//false;
});
});
And my Client method in the controller is the same as it used to be with minor change.
Now, my next challenge is to generalize the above and also somehow instead of calling the form sForm I showed use a more complex form with validations as I if it is from the Create/Edit view.
I use jquery-ui-auto-complete-with-multi-values. My textbox is downstream of page, But autocomplete-menu is opened above the page. I cant understand this bug. I used example that is on jquery site. Its is same examle.
I add jquery and css at the page.What could be the problem?
UPDATE
Script
<style>
.ui-autocomplete-loading {
background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat;
}
</style>
<script>
$(function () {
var availableTags;
$.ajax({
url: '#Url.Action("GetTags", "Question")',
type: 'GET',
cache: false,
beforeSend: function () {
// Show your spinner
},
complete: function () {
// Hide your spinner
},
success: function (result) {
availableTags = result;
}
});
function split(val) {
return val.split(/,\s*/);
}
function extractLast(term) {
return split(term).pop();
}
$("#tags")
// don't navigate away from the field on tab when selecting an item
.bind("keydown", function (event) {
if (event.keyCode === $.ui.keyCode.TAB &&
$(this).data("autocomplete").menu.active) {
event.preventDefault();
}
})
.autocomplete({
minLength: 0,
source: function (request, response) {
// delegate back to autocomplete, but extract the last term
response($.ui.autocomplete.filter(
availableTags, extractLast(request.term)));
},
focus: function () {
// prevent value inserted on focus
return false;
},
select: function (event, ui) {
var terms = split(this.value);
// remove the current input
terms.pop();
// add the selected item
terms.push(ui.item.value);
// add placeholder to get the comma-and-space at the end
terms.push("");
this.value = terms.join(", ");
return false;
}
});
});
</script>
Controller
[HttpGet]
public JsonResult GetTags()
{
var data = entity.Tags.Select(x => new { label = x.TagName, value = x.TagName });
return Json(data, JsonRequestBehavior.AllowGet);
}
Razor
<div class="demo">
<div class="ui-widget">
#Html.TextBoxFor(x => x.Title, new { #class = "my_text_box", id = "tags" })
</div>
</div>
<!-- End demo -->
<div class="demo-description">
<p>
Usage: Enter at least two characters to get bird name suggestions. Select a value
to continue adding more names.
</p>
<p>
This is an example showing how to use the source-option along with some events to
enable autocompleting multiple values into a single field.
</p>
</div>
Css
.ui-autocomplete {
position: absolute;
cursor: default;
}
ul, menu, dir {
display: block;
list-style-type: disc;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
Thanks.
I found the problem. Its about CurCss in jquery-ui version that I have. In older version of jquery-ui has not this method. I got script refrence from google-apis. Problem is fixed now.
Thanks.
The OnCompleteStuff is never called, what do I wrong?
<script type="text/javascript">
function OnBeginStuff() {
$("#StuffPanel").fadeTo("slow", 0.50);
}
function OnCompleteStuff(request, status) { // Never called
$("#StuffPanel").fadeTo("slow", 1.00);
}
$(document).ready(function () {
$('.mainLink', $('#NavigationPanel')).click(function (e) {
e.preventDefault();
$.ajax({
url: $(this).attr('href'),
beforeSend: OnBeginStuff,
complete: OnCompleteStuff,
success: function (html) {
$('#StuffPanel').html(html);
}
});
});
});
</script>
</head>
<body>
<div id="NavigationPanel">
#Html.ActionLink("1", "Index", "One", null, new { #class = "mainLink" })
#Html.ActionLink("2", "Index", "Two", null, new { #class = "mainLink" })
#Html.ActionLink("3", "Index", "Three", null, new { #class = "mainLink" })
</div>
<div id="StuffPanel">
#RenderBody()
</div>
</body>
</html>
I want to clear textbox after ajax posting.
<div style="padding: 5px; background-color: Silver;">
#using (Ajax.BeginForm("_MessagesPartial", "Chat", new AjaxOptions { UpdateTargetId = Model.room_id.ToString() }))
{
<div style="padding: 5px 15px 5px 5px;">
#Html.TextBox("textbox_message", null, new { #class = "text_yorum", id = "text_box_chat" })
#Html.Hidden("oda_id", Model.room_id)
</div>
}
</div>
<div id="#Model.room_id" style="height:400px;overflow-y:scroll;position: relative;">
#Html.Action("_MessagesPartial", "Chat", new { room_id = Model.room_id })
</div>
there are a lot of example, but they do not work. I m already using this code, but it is too slow.
$("form").submit(function () {
$.get('#Url.Action("_MessagesPartial", "Chat", new { room_id = Model.room_id }) ', {}, function (view) {
$("##Model.room_id").html(view);
$("#text_box_chat").val("");
});
});
Is there any way to do this.
I usually use the Ajax function. But anyways I believe the key to your problem is that you have no success function. Try something like this.
$.ajax({
url: 'yourfile.php',
type: 'POST',
success: function() {
$('#myform input').val("");
}
});
You seem to be sending 2 AJAX requests. One sent by the Ajax.BeginForm helper and one inside your custom .submit handler. You could specify a callback which will be executed after the AJAX request completes in the AjaxOptions:
#using (Ajax.BeginForm("_MessagesPartial", "Chat", new AjaxOptions { UpdateTargetId = Model.room_id.ToString(), OnSuccess = "onSuccess" }))
{
...
}
and clear the input inside this callback:
function onSuccess() {
$("#text_box_chat").val("");
}
You don't need to subscribe to the .submit event of the form as you did and send an AJAX request. That's what the Ajax.BeginForm helper already does.