Kendo Objects stop functioning on load

[Eric]

Hi,

I have a problem that i'm not entirely sure how to describe.  So, starting from the beginning: I have a view that has a list of parts and projects.  When a part or project is clicked, a kendo window is opened and loads a partial view containing information about the part or project and other kendo objects (buttons, text boxes, drop downs).  The first time a project/part is clicked the window loads fine, and even if the user only clicks projects the window loads fine.  But if a user clicks a project/part, closes the window, and then clicks the other (either a project or a part) all kendo objects in the window stop working.  They lose their styling and their functionality.  For example, drop down boxes are no longer drop downs but just a textbox, and not  a kendo text box, just a regular one.  Buttons turn a dark blue color, lose their styling, and lost their function. And text boxes lose their styling.  I've had similar problems before, and I fixed it with name changes of the objects or fixing the javascript functions they link too.  Neither worked in this case.  I'm not sure what else to try, but all help is welcomed.

 I'm reluctant to post all of my code because of my NDA (I'm an intern) but here is the code of the buttons for one of my partial views.  The names of all the objects in both windows are different, as in a button that serves the same purpose and displays the same info in partial1 is named differently than in partial2, and neither share a name with an object in the rest of the project.

  <div style="width:100%;text-align:center;">
        <div style="display:inline-block; vertical-align:central">
            <table>
                <tr>
                    <td>
                        @Html.Kendo.Button.Name("test1").Content("Add Costs").Events(Sub(events) events.Click("enterActualInfo"))
                    </td>
                
                    <td>
                        @Html.Kendo.Button.Name("test2").Content("View Change History").Events(Sub(events) events.Click("showProjectHistory"))
                    </td>
                
                    <td>
                        @Html.Kendo.Button.Name("test3").Content("Target").Events(Sub(events) events.Click("addTarget"))
                    </td>
                </tr>                
            </table>
        </div>
    </div>
    
   
<script>
    function enterActualInfo() {
        debugger;
        alert("test1");
    }
    function showProjectHistory() {
        alert("test2");
    }
    function addGPC() {
        alert("test3");
    }
</script>

 

I noticed some differences between buttons that work and buttons that don't in the IE DOM Explorer. It seems that the objects are not inheriting the kendo properties.       Functioning button: <button tabindex="0" class="k-button" id="addPart" role="button" aria-disabled="false" data-role="button">Add Part</button>Not functioning button: <button  id="addPart" role="button">Add Part</button> 

I've attached pictures of the difference between functioning and non functioning buttons.

 

Thanks in advance!

 

-Eric

 

[Dimo]

Hi Eric,

So the base problem is that some Kendo UI widgets are not initialized. There can be a couple of different reasons for that, which are usually easy to track down:

- a Javascript error on the page

- a Javascript error on the page, which results from duplicate jQuery registration that deletes the Kendo UI classes (which are jQuery plugins)
http://docs.telerik.com/kendo-ui/troubleshooting

- duplicate IDs on the page - you claim that this is not the case, but I recommend checking again. For example, once a project Window is opened and closed, is the second project Window a different Window instance or the previous one reloads its content?

I recommend debugging the initalization statements of the widgets in the second Window and reviewing the page HTML markup - in this way you will find out if the jQuery selectors point to the correct elements. I suspect that you will find out that the selectors fail.

If the problem persists and you need further assistance, please provide a stripped runnable example, which resembles your actual scenario and exhibits the undesired behavior.

Regards,
Dimo
Telerik

[Eric]

Hi Dimo!

 

Thank you so much for the help.  You're correct, there was a javascript error on the page.  My functions were defined below the elements and causing the error to occur.  

 

Thanks again,

Eric