JS scripts doesn't work in partial view after it refreshed

Question

0.00/5 (No votes)

See more:

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 9-Feb-20 21:49pm

Member 14713380

Updated 10-Feb-20 7:29am

v6

Add a Solution

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?

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

F-ES Sitecore · Answer 1 · 2020-02-09T22:50:00

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.

Posted 9-Feb-20 22:50pm

F-ES Sitecore

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.

as.if.i.code · Answer 2 · 2020-02-10T07:30:00

Solution 2

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

Update your 'success' function as below,

JavaScript

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

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

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

Posted 10-Feb-20 7:30am

as.if.i.code

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.