Click here to Skip to main content
14,454,989 members
Rate this:
Please Sign up or sign in to vote.
Problem: partialview contains js scripts, when they are first loaded, they work. After the second loading, js scripts stop working.





Desc: I have partial view reload on value change on selectbox (this calls this function)


//this element calls functions if user change value (month)
partialview loaded again

@(Html
       .DevExtreme()
       .SelectBox()
       .ID("id_sb_year")
       .DataSource(d => d
           .Mvc()
           .Controller("Ecp")
           .LoadAction("WezRok")
           .Key("Rok")
       )
       .DisplayExpr("Rok")
       .ValueExpr("Rok")
       .SearchEnabled(true)
       .OnValueChanged("pobierzTabele")
                       )


@(Html
       .DevExtreme()
       .SelectBox()
       .ID("id_sb_month")
       .DataSource(d => d
           .Mvc()
           .Controller("Ecp")
           .LoadAction("WezMiesiac")
           .Key("Miesiac")
       )
       .DisplayExpr("DescMiesiac")
       .ValueExpr("Miesiac")
       .SearchEnabled(true)
       .OnValueChanged("pobierzTabele")
                       )





Two values ​​from two selectboxes must be selected for the function to work


function pobierzTabele() {

 var numerMiesiaca = $("#id_sb_month").dxSelectBox("instance").option("value")
    var numerRoku = $("#id_sb_year").dxSelectBox("instance").option("value")

    if (numerMiesiaca != null && numerRoku != null) {

        function daysInMonth(month, year) {
            return new Date(year, month, 0).getDate();
        }

        var liczbaDni = daysInMonth(numerMiesiaca, numerRoku);


        var userDate = {
             numerMiesiaca: $("#id_sb_month").dxSelectBox("instance").option("value"),
             numerRoku: $("#id_sb_year").dxSelectBox("instance").option("value"),
             liczbaDni: liczbaDni
         };

 $.ajax({

            url: "@Url.Action("PartialTabelaEcp", "Home")",
            type: "POST",
            dataType: "html",
            data: {"userDate": JSON.stringify(userDate)},
            cache: false,
            success: function (data) {

                $("#kartaEcp").html(data);


            },
            failure: function (error) {
                alert(error);

            },
            error: function (error) {
                alert(error);
            }
        });
    }

}



effect: throws this partialview in this place
<div class="kartaEcp" name="kartaEcp" id="kartaEcp">
     </div>


partial view:

@using AppEcp.Models
@model ParentView



@using (Html.BeginForm("Save", "Home", FormMethod.Post, new { id = "tableForm" }))
{
  <table><table>
}

<script src="~/js/tabela/Arkusz.js"></script>
<script src="~/js/tabela/halfStartEnd.js"></script>
<script src="~/js/tabela/minimumEnds.js"></script>


What I have tried:

Nowadays: I need to refresh the page to be able to select the value again and load the partialview again, which is unacceptable
Posted
Updated 10-Feb-20 8:29am
v6
Comments
phil.o 10-Feb-20 4:44am
   
Have you tried including the script at the beginning of the page itself, and not in partial views?
Rate this:
Please Sign up or sign in to vote.

Solution 1

You will be using js to attach to the event of a component, such as a click or change event, and you will be replacing that component when you update your DOM here;

$("#kartaEcp").html(data);


As all the elements in kartaEcp have been destroyed and replaced, so the components you have your events attached to no longer exist so your events no longer fire. You have to re-attach your events after your call to ".html" above, or use delegated event handlers as described here;

.on() | jQuery API Documentation[^]

Delegated event handlers still work on elements newly added to the DOM.
   
Comments
Member 14713380 10-Feb-20 6:00am
   
could I ask you how to use it in my case? I am asking you very much. Please help
F-ES Sitecore 10-Feb-20 6:07am
   
You haven't posted the relevant code so it's hard to say. The important bit of code is where you attach to the events on your items, eg click, change etc, whatever it is that triggers the ajax call to do the update.
Member 14713380 10-Feb-20 6:40am
   
I updated the code
Please help me because I have been tired of it for a long time :(
F-ES Sitecore 10-Feb-20 7:02am
   
Looks like you're using some third party framework that generates the javascript code for you. I'm not really familiar with that DevExtreme thing, it might be better to handle that event using pure jQuery code so that you control how the change event triggers your js code rather than having DevExtreme do it for you.
Rate this:
Please Sign up or sign in to vote.

Solution 2

Below is the way to use .on() in your case.

Update your 'success' function as below,

$("#kartaEcp").html(data);

$( "#id_sb_year" ).on( "change", function() {
    pobierzTabele();
});

$( "#id_sb_month" ).on( "change", function() {
    pobierzTabele();
});
   
Comments
Member 14713380 10-Feb-20 14:49pm
   
will it just work? I won't have to make any other changes?
as.if.i.code 10-Feb-20 14:58pm
   
It should work without any other changes. Please try and let me know here.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100