model is undefined on document ready

Update: I’m running this page as a page include, from a queue.

When I run the page when I run the page as a stand-alone, everything works fine. When I run it as an include, i’m getting the javascript error (and a plank page).

In page includes you have to use the ‘pageload’ event shown here.
https://community.skuid.com/t/how-do-i-wait-for-the-dom-to-load-within-a-skuid-page-in…

Like a charm! Thanks, Ben.

@ben/ @Matt - I have the similar issue, but I am facing the problem in loading the model data from a button which is on the pageinclude page. tried $(document.body).one(‘pageload’), but page is not loading after added it. Any suggestions?

Dinesh,

If you’re loading a model from a button, you don’t need the pageload function. Just set the actions for the button to include a query of your model.

Thank you @matt for the reply. I am able to resolve the issue. but one strange thing i figured is, if I am querying model from other models save callback methods like

modelxyz.save({callback: function(response1){
if(!response1.totalsuccess) {
var modelabc = skuid.$M(‘modelabc’);
}}});

in the above scenario variable modelabc is returning undefined. If I put the same statement outside save action it is working fine.

The above scenario is working if I am running included separately. Looks like I am missing something in this skuid approach. 

Thanks,

Dinesh,

This may be a silly thing… but it’s worth checking that the if statement is processing as you expect it to. Your “var modelabc = skuid.$M(‘modelabc’);” line is only running if response1.totalsuccess is not true. You may want to just add

console.log(response1);

inside your if statement to make sure the if is working the way you expect.

agreed Matt. The above code is just an example for the issue I am explaining. whatever model query statements that I am placing inside callback methods are returning undefined. all the remaining statements in that block are running fine. Anyway for now, I figured out the work around. But trying to understand why this is an issue.

Appreciate your time Matt. Thanks

Nice. I generally have abandoned callback statements in favor of jquery $.when(), which seems to work more reliably.

Hi Prateek, “params.model.id” is the issue here, params.model will never be defined in this scenario. Since you are already hard-coding the name of the table element (#bodyTable), you could just hard-code the name of the Model Id as well, and access it using skuid.model.getModel(modelId):

console.log(‘All Years’);
var myModelId = “AllYearsModel”;
var myModel = skuid.model.getModel(myModelId);
console.log(myModel.id);

If you are trying to get the id of the model dynamically from the DOM, you could access it from a table instance like this:

var tableModel = skuid.$(“#bodyTable”).data(“object”).model;
console.log(“Table’s model id: " + tableModel.id”);

Hi Zach,
I tied to get the modal id dynamically but I am still getting the error as undefined. The use case of this logic is to after executing the below line code

$(document.body).one

I want to get the currently loaded model id dynamically, so that I can modify something with the currently loaded model, not with the other tabsets.

Please let me know your expert suggestions to solve this issue.

Prateek, I am not sure what you mean by “currently loaded” model. I would modify your code to something like this:

(function(skuid) {<br />&nbsp; &nbsp; var $ = skuid&#46;$;<br />&nbsp; &nbsp; var activateHandler = function() {<br />&nbsp; &nbsp; &nbsp; &nbsp; skuid&#46;$("#bodyTable &#46;nx-conditioncontainer-left &#46;nx-conditiontoken&#46;nx-actionselect &#46;nx-actionselect-arrow")&#46;on("click", function() {<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setTimeout(function() {<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; skuid&#46;$("#bodyTable &#46;nx-conditioncontainer-left &#46;nx-actionselect-dropdown &#46;nx-actionselect-dropdown-item")&#46;on("click", function() {<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (this&#46;innerHTML === '** All Years')<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console&#46;log('All Years');<br /><b>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var modelId = $(this)&#46;closest("&#46;nx-skootable")&#46;data("object")&#46;model&#46;id</b><br /><b>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console&#46;log("Model Id: " + modelId);</b><br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })<br />&nbsp; &nbsp; &nbsp; &nbsp; });<br />&nbsp; &nbsp; };<br />&nbsp; &nbsp; $(document&#46;body)&#46;one('pageload', activateHandler);<br />&nbsp; &nbsp; skuid&#46;events&#46;subscribe("models&#46;loaded", activateHandler);<br />})(skuid);

Thanks a lot Zach, it worked for me.