I have a partial view with a few textboxes along with 3 ddl for city/state/country. I have one view model to load country/state/city data initially. I load this partial view based on value from one of my dropdown change event on my main view. My problem is the change event of the dropdownlist on partial view rendered on my main view is not firing.
partialview :
#model CarrierClaims.Web.ViewModels.CarrierLocationViewModel
#Html.DropDownListFor(model=>model.CarrierLocation.CountryId,Model.CountryList,"-Select Country-")
my js on my main view
$("#CarrierLocation_CountryId").change(function () {
var url = '#Url.Content("~/")' + "Claims/GetStateList";
var ddlsource = "#CarrierLocation_CountryId";
var ddltarget = "#CarrierLocation_StateId";
$.getJSON(url, { id: $(ddlsource).val() }, function (data) {
$(ddltarget).empty();
$.each(data, function (index, optionData) {
$(ddltarget).append("<option value='" + optionData.Value + "'>" + optionData.Text + "</option>");
});
});
});
Any suggestions?
I think the problem is jquery not triggers the event because you create the second dropdown dinamically, try to change this:
$("#CarrierLocation_CountryId").change(function () {
For this:
$(document.body).on('change', '#CarrierLocation_CountryId', function() {
Related
i try to change the navbar properties on a jqgrid in a callback function without succes.
The grid is display afeter user is chosing a period. Depend on either the period is open or close user can or cannot edit, add, delete rows. So the navbar need to change properties dynamically.
My code look like that:
$('#mygrid').jqGrid({
// some properties of my grid that works fine
pager : '#gridpager'
});
$("#mygrid").bind("jqGridLoadComplete",function(){
$.ajax({
url: 'checkifperiodopen.php',
data: {
$("#period").val()
},
success: function(data){
if(period==='open'){
jQuery("#mygrid").jqGrid('navGrid','#gridpager',{add:false,edit:false,del:true,search:true,refresh:true});
}
if(period==='close'){
jQuery("#mygrid").jqGrid('navGrid','#gridpager',{add:true,edit:true,del:true,search:true,refresh:true});
}
}
});
});
$('#validChossenPeriod').click(function () {
ajax call to get data on choosen period
success:function(data){
$("#mygrid").jqGrid('clearGridData');
$("#mygrid").jqGrid('setGridParam', { datatype: 'local'});
$("#mygrid").jqGrid('setGridParam', { data: data});
$("#mygrid").trigger('reloadGrid');
}
});
I finally found the answer by show or hide the div that include the navgrid button:
grid = $("#mygrid");
gid = $.jgrid.jqID(grid[0].id);
var $tdadd = $('#add_' + gid);
var $tdedit = $('#edit_' + gid);
var $tddel = $('#del_' + gid);
$("#mygrid").jqGrid('navGrid','#gridpager',{add:true,edit:true,del:true,search:true,refresh:true});
condition if false =
$tdadd.hide();
$tdedit.hide();
$tddel.hide();
if true =
$tdadd.show();
$tdedit.show();
$tddel.show();
Why so complex? There is a other clear way to do this
var view_buttons = true;
if(condition_to_hide) {
view_buttons = false;
}
$("#mygrid").jqGrid('navGrid','#gridpager', { add:view_buttons, edit:view_buttons, del:view_buttons, search:true, refresh:true});
I have a partial view for cascading drop downs i.e. Country and State. I am using the following razor view statement to render this partial view
#{Html.RenderAction("PopulateCountriesDropdown", "Helper");}
and it works just fine. Following is the complete code for the partial view that makes an asynchronous call to an action method of the controller
<pre>#model OnlineExamSystem.Models.CountryAndStateViewModel
#Html.LabelFor(m => m.c.CountryName)
#Html.DropDownListFor(m => m.c.CountryId, new SelectList(Model.cntlist, "CountryId", "CountryName"),"--Select Country--", new { #class="aha" })
#Html.Label("State")
Note: since i am unable to write HTML i.e. I have a simple html select for displaying 2nd drop down to show states with class="ddlstates"
<script type="text/javascript">
$(document).ready(function () {
$(".aha").change(function () {
var Url = '/Helper/PopulateStateDropdown';
var catId = $(this).val();
//alert(catId);
var select = $('.ddlstate');
if (catId != '') {
$.getJSON("/Helper/PopulateStateDropdown", { id: catId },
function (ddl) {
select.empty();
select.append($("<option></option>", { value: 0, text: '--Select State--' }));
$.each(ddl, function (index, itemData) {
select.append($("<option></option>", { value: itemData.Value, text: itemData.Text }));
});
});
}
else {
select.empty();
select.append($("<option></option>", { value: 0, text: '--Select State--' }));
}
});
});
as i said this works just fine. but here is the problem i.e. when I try to render the same partial view again on the same page (view) as following
#{Html.RenderAction("PopulateCountriesDropdown", "Helper");}
the rendering is ok, but changing the country in the 2nd partial view does not select the states properly. Also I have noticed that following action method is called twice for the first partial view
[AcceptVerbs(HttpVerbs.Get)]
public JsonResult PopulateStateDropdown(string id)
{
var ls = State.GetStateByCountryId(Int32.Parse(id)).AsEnumerable();
var ddl = ls.Select(m => new SelectListItem() { Text = m.StateName, Value = m.StateId.ToString() });
return Json(ddl, JsonRequestBehavior.AllowGet);
}
and interestingly the the above method is not at all called from the 2nd partial view.
(doucment).ready() binds event to the dome elements when the page is loaded first time, it finds the elements in DOM and bind events to them, in your case as its a partial view, html is rendered dynamically on page after page is loaded so event is not binded.
Use live function for event as you html is dynamically added on the view:
Do like this:
$(".aha").live('change',function () {
});
I has grid which will load data as filterable combo box, So I need to create custom filter for this column with filterable combo box also.
I create combo box and assign it to the column filter UI. My problem is when the combobox read the data from the controller it does not send the filter text to the controller.
<script type="text/javascript">
function outletFilter(element) {
debugger;
element.kendoComboBox({
dataTextField: "OutletNameE",
dataValueField: "OutletID",
autoBind: false,
minLength: 1,
dataSource: {
serverFiltering: true,
transport: {
read: "#Url.Action("GetOutletsCombo")"
}
},
optionLabel: "--Select Value--"
});
}
</script>
#(Html.Kendo().Grid<Spine.ERP.ViewModel.AccountReceivableOutletViewModel>()
.Name("ARDetails_OutletGrid")
.Columns(columns =>
{
columns.Bound(p => p.AccountReceivableID).Hidden();
columns.Bound(p => p.AccountReceivableOutletID);
columns.Bound("Outlet.OutletName")
.EditorTemplateName("OutletForeignKeyEditor")
.ClientTemplate("<a>#=OutletID ##=OutletID? '-' : ' ' ##=OutletID ?
Outlet.OutletName : ' ' #</a>")
.Filterable(filter => filter.UI("outletFilter"));
})
And here are my controller function
public ActionResult GetOutletsCombo(string text)
{
if (text == null)
text = "";
var result = new List<OutletViewModel>();
var Outlets = outletRepository.FilterOnID("Outlet", new string[] { "OutletID", "OutletNameE" }, text).ToList();
result = (from outlet in Outlets
select new OutletViewModel
{
OutletID = outlet.OutletID,
OutletNameE = outlet.OutletNameE,
OutletNameA = outlet.OutletNameA
}).ToList();
return Json(result, JsonRequestBehavior.AllowGet);
}
First of all if you perform a "read", it does not send any additional value to the controller so in "public ActionResult GetOutletsCombo(string text)" you wouldn't get any value in "text".
For server filtering you can see kendo's demo on the following page
http://demos.kendoui.com/web/combobox/serverfiltering.html
As far as I get from your question, you want to do a Kendo Grid and on there you want to have a combobox to filter the data in the grid. In this case, you may check the similar kind of demo in Kendo's site
http://demos.kendoui.com/web/grid/toolbar-template.html
For filter menu you can check this on kendo under ASP.NET MVC
http://demos.kendoui.com/web/grid/filter-menu-customization.html
Hope you can work out your problem from these examples. In case you can't then put a comment underneath this post. I shall try again to help you.
I have a view with a text box, when I type and enter a service number then it should retrieve the data from the database and show those in labels in the same view, This application is ASP.net MVC application. Can some one tell me how to do this. Thanks
Further more
can I call controller methods without javascript
Is that possible to call controller methods in view and show the results in the same view
If can the show me how to do it, Thanks
You could use AJAX. Let's have an example:
#Html.LabelFor(x => x.FooBar, htmlAttributes: new { id = "fooBarLabel" })
#Html.TextBoxFor(x => x.FooBar, new { id = "fooBar", data_url = Url.Action("CalculateValue") })
and then in a separate javascript file you could subscribe to the .change event of the text field and trigger an AJAX call to the controller action:
$(function() {
$('#fooBar').change(function() {
var url = $(this).data('url');
var value = $(this).val();
$('#fooBarLabel').load(url, { value: value });
});
});
and all that's left is the corresponding controller action:
public ActionResult CalculateValue(string value)
{
// The value parameter will contain the text entered by the user in the text field
// here you could calculate the value to be shown in the label based on it:
return Content(string.Format("You entered: {0}", value));
}
Attached is a my controller file .. i basically want to switch views .. adding and removing a panel in a container with 2 buttons .. in the method for home and popular button i am using Ext.create again and again wouldnt that overload my application becoz iam not destroying my views iam adding and removing them .. My main question is how can i create global var 's for this situation like i create var homepanel = Ext.create just once and then i can reuse that var when i want to remove or add it from my mainContainer.. need serious guidance on this .. searched the whole documention but i dont have any clue about it
Ext.define('app.controller.MainController', {
extend: 'Ext.app.Controller',
config: {
refs: {
homeBtn: '#homeBtn',
popularBtn: '#popularBtn',
homePanel: '#homePanel',
mainContainer: '#mainContainer'
},
control: {
homeBtn:{
tap: 'homeBtnAction'
},
popularBtn:{
tap: 'popularBtnAction'
}
}
},
launch: function(app) {
this.callParent(arguments);
console.log("main launched");
var mainCont = this.getMainContainer();
var homepanel = Ext.create('app.view.Home.HomePanel');
mainCont.add(homepanel);
console.log("homePanelAdded");
},
homeBtnAction: function(){
console.log("home page called");
var mainCont = this.getMainContainer();
var homepanel = Ext.create('app.view.Home.HomePanel');
var popularpanel = Ext.create('app.view.Popular.PopularPanel');
mainCont.remove(popularpanel);
mainCont.add(homepanel);
},
popularBtnAction: function(){
console.log("popular page called");
var mainCont = this.getMainContainer();
var homepanel = Ext.create('app.view.Home.HomePanel');
var popularpanel = Ext.create('app.view.Popular.PopularPanel');
mainCont.remove(homepanel);
mainCont.add(popularpanel);
}
});
NOTE: Iam using Ext.define to create my views and using MVC structure.
Use this,
var homepanel = this.getHomePanel() || Ext.create('app.view.Home.HomePanel');
if this.getHomePanel() does not return anything it'll create the panel for you. After that you'll use the already created panel.
Other note, unless you are manipulating the buttons in some manner there is no need to give them an id or a ref.
Set up your button in your view like so
{
xtype : 'button',
text : 'Home Panel',
action : 'goHome'
}
then in the control section of your controller use this
'button[action=goHome] :
{
tap: 'homeBtnAction'
}
One option is : in "launch", you create both views (with Ext.Create) and use Ext.getCmp in action button callbacks to retrieve the previously created views.