How to access elements in a PartialView (loaded via an AJAX-Call) from a js-file (working with ASP.NET MVC5, Kendo-UI)?

Question

UPDATED --

I have an 'index.js', that script is rendered in Index.cshtml. Index.cshtml has a <div id="main"> *KendoPanelBar here* </div> I successfully load my Partial View into the panel in main-div.

'MyPartialView.cshtml' has: <div id="menu"></div>

In index.js , I try console.log($("#menu"));

The output is a jQuery object with a length of 0 . 'MyPartialView.cshtml' is in the same folder like the 'Index.cshtml' (elements from 'Index.cshtml' can be successfully outputted).

As @Guillaume commented: The script has to run after the view is rendered !

---

My actual goal is to put a KendoMenu dynamically into the div menu which is into a KendoTemplate in MyPartialView. For getting MyPartialView, I did:

mainDiv.append({
            text: "Group1",
            encoded: false,
            contentUrl: "\MyPartialView"  //that successfully put the partial view where I want it
        });

As @Rory commented, I have to access the elements in MyPartialView when/after the AJAX-Call succeeded .

Therefore, I changed contentUrl:... to content: '<div id="partialHere"><div>' and tried to load the partial view into that div:

   $.ajax({
        type: "POST",
        url: myUrl,
        success: function (partialView) {
            $("#menu").kendoMenu({ //does not apply
            dataSource: [{
            text: "<span class=\"k-icon k-i-more-horizontal\"></span>", encoded: false, items: [
                { text: "<span class=\"k-icon k-i-edit\"></span><span>Edit</span>", encoded: false },
                   ]
                 }]
             });
            //dosth
            $("#groupContent").html(partialView); //adding PartialView to DOM
            console.log($("#menu")); //even after adding to DOM, the output is a jQuery-object with length of 0
        }
    });

The partialView is loaded into the div as it is. But the changes I am doing to the menu div does not apply .

What am I doing wrong?

Answer 1

Order matters here. Add the html before you attempt to query it.

//dosth
$("#groupContent").html(partialView);

// Partial View has been added to the DOM. Now it is accessible to jQuery  
$("#menu").kendoMenu({ //does not apply
  dataSource: [{
    text: "<span class=\"k-icon k-i-more-horizontal\"></span>",
    encoded: false,
    items: [{
      text: "<span class=\"k-icon k-i-edit\"></span><span>Edit</span>",
      encoded: false
    }, ]
  }]
});