Conditionally Loading Partial View in a Page using Javascript

[indian143]

No I don't want to change input type from text to number but what I want is, if text is typed when its value is supposed to be number, it shouldn't take that value, I mean no matter how many characters user types, it shouldn't display or take it, when it is supposed to be characters, the numbers or numerical values shouldn't be taken as input in the textbox. And the number of characters or numbers should be limited depending upon the conditions in JavaScript function. Below is the example for JavaScript function:

function GetLookupTableValue(e)
{
    var noCodeFilter = containsAny($("#drpLookup").data("kendoDropDownList").text(), \['Address Type', 'Gender', 'NPI Status', 'Rendering Provider Status', 'Rendering Provider Classification'\]);
    
    if (noCodeFilter)
    {
        var url = '../Admin/GetLookupTableNoCode';
        $("#divLookupTable").load(url, { LookupTableId: $("#drpLookup").data("kendoDropDownList").value() });
    }
    else
    {
        var url = '../Admin/GetLookupTableCode';
        $("#divLookupTable").load(url, { LookupTableId: $("#drpLookup").data("kendoDropDownList").value() });

        $("#idTxtForCode").addClass('del'); //.removeClass('add')
        
    }
}

Thanks, Abdul Aleem "There is already enough hatred in the world lets spread love, compassion and affection."

[jkirkerx]

I use a JQuery function called .isNumber or something, you call it as a class. [Allow only numeric input in textbox using jQuery - JSFiddle](https://jsfiddle.net/Behseini/ue8gj52t/)

If it ain't broke don't fix it Discover my world at jkirkerx.com

[indian143]

Hi, Yes I did in the below way

if (1 == 1)
{
    $('#idTxtForCode').addClass("allownumericwithoutdecimal");
}

$(".allownumericwithoutdecimal").on("keypress keyup blur", function (event)
{      
    $(this).val($(this).val().replace(/\[^\\d\].+/, ""));

    if ((event.which < 48 || event.which > 57))
    {
        event.preventDefault();
    }        
});    

in the following form, it is working fine for the character values like its not inputting the character values when I type in, but when I enter one integer value it is working fine but when I enter second value, its removing all the values I entered making the textbox blank, I am not understanding why is it doing that way. My form is as below:

@model XXXXX.Provider.Models.LookupTable

@{
ViewBag.Title = "EditLookup";
}

@using (Html.BeginForm())
{
@Html.AntiForgeryToken()

        @Html.Kendo().TextBoxFor(model => model.LookupTableId).HtmlAttributes(new { id = "idLookupTableId" })   
    

    

        @Html.LabelFor(model => model.Code)
    

    

        @Html.Kendo().TextBoxFor(model => model.Code).Name("txtForCode").HtmlAttributes(new { autocomplete = "off", id = "idTxtForCode" })            
        @\*.HtmlAttributes(
        new { style = "width:250px", type = "text", size = "5", id = "txtLENum", required = "required", maxlength = "5", pattern = "\[a-zA-z0-9\]{5}", validationmessage = "Enter only 5 numerics for {0}" })\*@
    

    

        @Html.LabelFor(model => model.Description)
    

    

        @Html.Kendo().TextBoxFor(model => model.Description).HtmlAttributes(new { autocomplete = "off" })
    

    

        @Html.LabelFor(model => model.CreatedBy)
    

    

        @Html.Kendo().TextBoxFor(model => model.CreatedBy)
    

    

        @Html.LabelFor(model => model.CreatedDate)
    

    

        @Html.Kendo().DatePickerFor(model => model.CreatedDate)

[jkirkerx]

I had to dig this up. I wrote this several years ago

// Numbers Only for Qty Textboxes
// Bind the function to the onkeypress event
function isNumberKey(evt) {
var charCode = evt.which ? evt.which : event.keyCode;
if (charCode !== 46 && charCode > 31 && (charCode < 48 || charCode > 57))
return false;

return true;

}

@Html.TextBoxFor(m => m.Order_Select_Product_Qty, new { @class = "form-control", min = "1", max = "1000", Value = "1", type = "number", pattern = "[0-9]*", inputmode = "numeric", onkeypress = "return isNumberKey(event);" })

If it ain't broke don't fix it Discover my world at jkirkerx.com

[indian143]

The problem is I can't use these attributes (type = "number", pattern = "[0-9]*", inputmode = "numeric"), because they need to change depending upon the selection or value of the selected value of the dropdown list. But I could able to find the reason why its not working, because the textbox is in a partial view and as I am loading the partial view multiple times those functions are getting loaded multiple times, even if I use within document.ready, still it would be added multiple times. As I am opening the partial view as in the below Kendo grid popup , is there any way to clean this up once I close the popup or finish my task?

Page: Lookup2

    @(Html.Kendo().Grid()
                    .Name("LookupGrid")
            .EnableCustomBinding(true)
            .AutoBind(true)
            .Columns(columns =>
            {
                columns.Bound(p => p.Id).Hidden();
                columns.Bound(p => p.Code).Width(200);
                columns.Bound(p => p.Description).Width(290);
                columns.Bound(p => p.CreatedDate).ClientTemplate("#=DateFormat(CreatedDate)#").Width(130);
                columns.Bound(p => p.CreatedBy).Width(150);
                columns.Bound(p => p.ModifiedDate).ClientTemplate("#=DateFormat(ModifiedDate)#").Width(140); ;
                columns.Bound(p => p.ModifiedBy).Width(150);
                columns.Bound(p => p.IsValid).Width(100).Hidden();
                ////columns.Command(command => { command.Custom("View").Click("ViewLookupTableValues").HtmlAttributes(new { @class = "k-primary" }); }).Width(100);
                columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);
                columns.Bound(p => p.LookupTableId).Hidden();
                columns.Bound(p => p.ForeignKeyId).Hidden();
            })
             .ToolBar(toolbar =>
                    {
                        toolbar.Create().Text("Add New");//.HtmlAttributes(new { @class = "k-button" });
                    })//.HtmlAttributes(new { @class = "btn btn-primary" })
                        .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("\_EditLookupCode"))
                .Pageable()
                .Sortable()
                .Scrollable()
                         .Resizable(resize => resize.Columns(true))
                        .Filterable(x

[jkirkerx]

I'm sort of confused now on what your trying to create. remember I'm not there with ya and can't see what your doing. Document Ready is a signal indicating that the Dom is loaded, so you can execute client script automatically. Don't use it. And write a new external file, don't write it on the view page. I would imagine that your Document Ready would be empty, and when the dropdown changes value, then you call a independent JQuery Ajax function to load the partial view by calling a controller action and returning the HTML generated by the server. You can wrap the partial view HTML in a wrapper with a known ID, so you can call $("#KnownID").empty() to dump the partial view and $("#KnownID").html(data.partialview); to load the partial view. [javascript - Render Partial View Using jQuery in ASP.NET MVC - Stack Overflow](https://stackoverflow.com/questions/1570127/render-partial-view-using-jquery-in-asp-net-mvc)

If it ain't broke don't fix it Discover my world at jkirkerx.com

[indian143]

Yeah I can understand my friend, you are confused, and yes you are not with me to see and help directly, even doing this much is really really great - I think you live in LA, CA right? If you are travelling to Sacramento, CA, please please let me know I want to personally see you, meet you and thank you, if you don't mind give you a treat. Because even helping this much to a person who you speak just online is great - you must be a great human. And your imagination is right, there are two partial views I am loading, 1 I am loading with load method:

var url = '../Admin/GetLookupTableCode';
$("#divLookupTable").load(url, { LookupTableId: $("#drpLookup").data("kendoDropDownList").value() });

the other one I am loading with with Kendo popup:

.ToolBar(toolbar =>
{
toolbar.Create().Text("Add New");//.HtmlAttributes(new { @class = "k-button" });
})//.HtmlAttributes(new { @class = "btn btn-primary" })
.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("_EditLookupCode"))

Somehow I need to clean these two Partial Views once I am done, , can you please let me know the syntax for how to wrap partial view within some known id and empty partial view after I am done or finished with it? The first Popup that's being loaded with load method on the div "divLookupTable" just calls url with action method, loads within the same page, that contains a Kendo grid, which when clicked on Add New or Edit on a row, opens up partial view _EditLookupCode as a popup. But if I have written the document.ready only in the main page and tried to retrieve the TextBox, that is placed in the Popup (of Partial View _EditLookupCode), I am not able to retrieve, if I kept my document.ready in the _EditLookupCode partial view itself, its giving me error after second run, but if I write any if else conditions withing this _EditLookupCode.cshtml partial view within script tasks, still its not executing. Is there anyway I can retrieve the elements that are there on the _EditLookupCode.cshtml, note that this is the second partial view which opens up from click of a button on another partial view. Thanks, Abdul Aleem "There is already enough hatred in the world lets spread love, compassion and affection."

[jkirkerx]

I haven't been up in Northern California in a long time. I stopped there for gas on the way on from Seattle about 10 years ago. I'd be glad to meet you! I'm been following this on the thought that it's a single page application with no http postbacks. just pure manipulation of the DOM using client script. I suspect the postbacks are messing you up and confusing me. I can't write anything, and I think you have a flawed design in general and need to step back and rethink it. I beginning to think that your trying to postback the Kendo Grid, or a textbox value depending on the dropdown selection. You should be able to have both objects available, and just show and hide them. Then on the postback, check the dropdown value in the controller or page postback event, and use a switch to execute updating the selected section.

If it ain't broke don't fix it Discover my world at jkirkerx.com

[indian143]

Thanks my friend, sure we will try to meet for a lunch or something when you are travelling here or when I am travelling in Orange County. It seems there is something problem in it, I am very basic in jQuery and client script. Thanks, Abdul Aleem "There is already enough hatred in the world lets spread love, compassion and affection."

[indian143]

hi Buddy, I could able to do it by writing a function in the main page and calling that function multiple times in the popup whenever it loads, but another thing remaining is just putting numerical and text restrictions on the page depending upon the drop down selection. Yes you were right I had flaw that I was trying to create function in the popup as it loads multiple times, we can't have function definition multiple times hence it was throwing error. thanks a lot buddy. Thanks, Abdul Aleem "There is already enough hatred in the world lets spread love, compassion and affection."