Partial view with Javascript

Question

I have a drop down list (telerik dropdownlist) and for every option i call a different partial view from my controller.

onChange = function (e) 
{
    var product = e.value;
    if (product)
    {
        $.post( myUrl, 
            { CodigoProduto : product }, // passing the product to my controller
            function (retorno) {
               // insert the partial view in a div
               $('#AreaGenerica').html(retorno);
            }
        );
    }
}

the first option returns a partial view that contains a javascript code

<script type=\"text/javascript\">
    function PartialViewFunction () {
        alert("test");
    }
</script>
<h2>Option A</h2>

and the second option returns a partial view without any javascript code.
In my view i call the function inside the partial view

ViewFunction = function () {
        // check if the function 'PartialViewFunction' exists.
        if (typeof PartialViewFunction === "function") 
        { 
            PartialViewFunction();
        }
    };

My problem is that if i choose the first option and then the second the 'PartialViewFunction' is still being called but it shouldn't because it doesn't exists inside the second partial view.
I tried to remove the div containing my partial view following this answer but it didn't work.

Thanks in advance and i hope you can understand my english.

EDIT:

 @(Html.Telerik().DropDownList()
        .Name("grpAutorizacaoPublicacao")
        .SelectedIndex(0)
        .Effects(e => e.Opacity())
        .ClientEvents(e =>
            {
                e.OnChange("onChange");
            })
        .DataBinding(db => db.Ajax().Select("_ListaGrupoAutorizacao", "Publicador")))

I know that I do the same kind of thing alot with dialog contents retrieved via AJAX. I think you only need two '=' signs in your comparison. if (typeof initDlg == 'function') initDlg(); — Steve0, Oct 04 '16 at 19:48

score 0 · Answer 1 · edited May 23 '17 at 11:48

As a general rule I would avoid including JavaScript in partial views. You can search for advice about that. This might mean refactoring your JS to be generic and always included from the view proper. Such a design pattern would, I think, solve your problem, or at least make it easier to understand and fix.

Alternatively, it seems like you may need to limit onChange function to just the first select element. The code you have shown does not make it clear what calls the onChange event. You could include the html of the select element before and after the first selection is made.

Partial view with Javascript

1 Answers1