JavaScript update based on Model Query

You probably  need to wrap your script up as a function and then call the function both when the page is loaded and when a “models.loaded” event is fired. 

Here is code I used. 

// Runs myfunction when model is requeried by filters&nbsp;&nbsp; &nbsp;<br>&nbsp;skuid.events.subscribe('models.loaded',function(updateResult){<br>&nbsp; &nbsp; &nbsp; &nbsp;if (updateResult.models.MyModelName) &nbsp;{<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;myfunction();<br>&nbsp; &nbsp; &nbsp; &nbsp;}<br>&nbsp; &nbsp; });<br>// Runs render function on initial page load.&nbsp;<br>&nbsp; &nbsp; myfunction();<br>}); &nbsp; &nbsp;<br>

Rob,

Thanks for the info. Pardon by newbie skills but I am a little confused where that goes in the code. I have tried it in a few different places with no success. 

//Skuid Resource Location: In-Line (function(skuid){ var $ = skuid.$; //$(document.body).one('pageload',function(){ // Runs myfunction when model is requeried by filters $.events.subscribe('models.loaded',function(updateResult){ if (updateResult.models.UiOnly) { myfunction(); } //Setting Model var fullyearsales = skuid.model.getModel('InvoiceLine_This_Year_Sales_Agg'), fullyeargoal = skuid.model.getModel('Invoice_Line_This_Year_Goal_Agg'); //Outputs var JanSalesRev = 0, JanSalesProfit = 0, JanRevGoal =0, JanProfitGoal=0, JanPercentSales = 0, JanPercentProfit = 0; var FebSalesRev = 0, FebSalesProfit = 0, FebRevGoal =0, FebProfitGoal=0, FebPercentSales = 0, FebPercentProfit = 0; var MarSalesRev = 0, MarSalesProfit = 0, MarRevGoal =0, MarProfitGoal=0, MarPercentSales = 0, MarPercentProfit = 0; //Quarters var Q1SalesRev = 0, Q2SalesRev = 0, Q3SalesRev = 0, Q4SalesRev = 0; var Q1SalesProfit = 0, Q2SalesProfit = 0, Q3SalesProfit = 0, Q4SalesProfit = 0; var Q1RevGoal = 0, Q2RevGoal = 0, Q3RevGoal = 0, Q4RevGoal = 0; var Q1ProfitGoal = 0, Q2ProfitGoal = 0, Q3ProfitGoal = 0, Q4SProfitGoal = 0; var Q1SalesPercent = 0, Q2SalesPercent = 0, Q3SalesPercent = 0, Q4SalesPercent = 0; var Q1ProfitPercent = 0, Q2ProfitPercent = 0, Q3ProfitPercent = 0, Q4ProfitPercent = 0; //loop through rows, summing the rows. //Sales $.each(fullyearsales.data, function(i, row) { if (row.CalendarMonth =='1') { JanSalesRev += (row.SalesRev || 0); JanSalesProfit += (row.SalesProfit || 0); } if (row.CalendarMonth =='2') { FebSalesRev += (row.SalesRev || 0); FebSalesProfit += (row.SalesProfit || 0); } if (row.CalendarMonth =='3') { MarSalesRev += (row.SalesRev || 0); MarSalesProfit += (row.SalesProfit || 0); } } ); //loop through rows, summing the rows. //Goals $.each(fullyeargoal.data, function(i, row) { if (row.StartMonth =='1') { JanRevGoal += (row.GoalRev || 0); JanProfitGoal += (row.GoalProfit || 0); } if (row.StartMonth =='2') { FebRevGoal += (row.GoalRev || 0); FebProfitGoal += (row.GoalProfit || 0); } if (row.StartMonth =='3') { MarRevGoal += (row.GoalRev || 0); MarProfitGoal += (row.GoalProfit || 0); } } ); //January Percent Totals JanPercentSales = (JanSalesRev / JanRevGoal * 100); JanPercentProfit = (JanSalesProfit / JanProfitGoal * 100); //February Percent Totals FebPercentSales = (FebSalesRev / FebRevGoal * 100); FebPercentProfit = (FebSalesProfit / FebProfitGoal * 100); //March Percent Totals MarPercentSales = (MarSalesRev / MarRevGoal * 100); MarPercentProfit = (MarSalesProfit / MarProfitGoal * 100); //Quarter 1 Totals Q1SalesRev = (JanSalesRev + FebSalesRev + MarSalesRev); Q1RevGoal = (JanRevGoal + FebRevGoal + MarRevGoal); Q1SalesProfit = (JanSalesProfit + FebSalesProfit + MarSalesProfit); Q1ProfitGoal = (JanProfitGoal + FebProfitGoal + MarProfitGoal); Q1SalesPercent = (Q1SalesRev / Q1RevGoal * 100); Q1ProfitPercent = (Q1SalesProfit / Q1ProfitGoal * 100) ; /* function addCommas(nStr){ nStr += ''; var x = nStr.split('.'); var x1 = x[0]; var x2 = x.length &gt; 1 ? '.' + x[1] : ''; var rgx = /(d+)(d{3})/; while (rgx.test(x1)) { x1 = x1.replace(rgx, '$1' + ',' + '$2'); } return x1 + x2; } var displaynumber = addCommas(); */ //January Numbers $("#JanSalesRev").html(JanSalesRev.toFixed(0)); $("#JanSalesProfit").html(JanSalesProfit.toFixed(0)); $("#JanRevGoal").html(JanRevGoal.toFixed(0)); $("#JanProfitGoal").html(JanProfitGoal.toFixed(0)); $("#JanPercentSales").html(JanPercentSales.toFixed(0) + '%'); $("#JanPercentProfit").html(JanPercentProfit.toFixed(0) + '%'); //February Numbers $("#FebSalesRev").html(FebSalesRev.toFixed(0)); $("#FebSalesProfit").html(FebSalesProfit.toFixed(0)); $("#FebRevGoal").html(FebRevGoal.toFixed(0)); $("#FebProfitGoal").html(FebProfitGoal.toFixed(0)); $("#FebPercentSales").html(FebPercentSales.toFixed(0) + '%'); $("#FebPercentProfit").html(FebPercentProfit.toFixed(0) + '%'); //March Numbers $("#MarSalesRev").html(MarSalesRev.toFixed(0)); $("#MarSalesProfit").html(MarSalesProfit.toFixed(0)); $("#MarRevGoal").html(MarRevGoal.toFixed(0)); $("#MarProfitGoal").html(MarProfitGoal.toFixed(0)); $("#MarPercentSales").html(MarPercentSales.toFixed(0) + '%'); $("#MarPercentProfit").html(MarPercentProfit.toFixed(0) + '%'); //Q1 Totals $("#Q1SalesRev").html(Q1SalesRev.toFixed(0)); $("#Q1RevGoal").html(Q1RevGoal.toFixed(0)); $("#Q1SalesProfit").html(Q1SalesProfit.toFixed(0)); $("#Q1ProfitGoal").html(Q1ProfitGoal.toFixed(0)); $("#Q1SalesPercent").html(Q1SalesPercent.toFixed(0)+ '%'); $("#Q1ProfitPercent").html(Q1ProfitPercent.toFixed(0)+ '%'); }); })(skuid);<br>

Tammy, I’m not sure about the rest of the code, but on first glance I know you want to replace " $.events.subscribe" with “skuid.events.subscribe”

You’re using “$” as a reference to “skuid.$” (which is jQuery). .events.subscribe is part of the skuid API, not jQuery.

Thank you. That is what Rob initially had, I didn’t realize what the difference was. I made the change. I don’t think that is what is breaking it though.

Hi Tami -

In reviewing your code, you are likely getting a javascript exception that you would see in the developer console (Hit F12 on most browsers and look for “Console”).

The reason you would be encountering that error is because of the following line of code:

<br>if (updateResult.models.UiOnly) {<br> myfunction();<br>}

Since “myfunction” isn’t defined anywhere in your code, when that line of code executes, it fails to locate the function and errors.

Rob’s sample was meant as a template so to speak but from it, you’ll need to modify to meet your specific situation.

Here’s a sample that you can use.  You can copy/paste the code that does all the computation inside of the “updateTemplateFields” function.  The other two blocks of code at the bottom you should be able to leave as-is if I’m understanding your code correctly.  The only thing you might need to change is the updateResult.models.UIOnly changing the “UIOnly” to match the name of the model in your page that you want to track for loading.

One other note is that if you have a UIOnly model with all the fields, your other option would be to use a template control (or rich text), set it to the UIOnly model and inside of it use model merge syntax to output the fields.  Then, in your code (updateTemplateFields below), calculate the values and update the model using updateRow API.  This will force Skuid to update the information in the template.  This avoids you having to set the html directly.  Not sure if this is an option for you but if so, would simplify your code.

(function(skuid){&nbsp; &nbsp;&nbsp;<br>var $ = skuid.$;<br>// define a function to obtain the information<br>// required and update the necessary fields<br>var updateTemplateFields = function() {<br> &nbsp; &nbsp;<br> &nbsp; &nbsp;$('#JanSalesRev').html(555);<br> &nbsp; &nbsp;$('#JanSalesProfit').html(444);<br>};<br>// add an event to get called after the page has completed loading<br>// we need to do this because models.loaded will not get called when<br>// the page is first loaded, only on subsequent loads<br>$(document.body).one('pageload',function() {<br> &nbsp; &nbsp;updateTemplateFields();<br>});<br>skuid.events.subscribe('models.loaded',function(updateResult) {<br> &nbsp; &nbsp;// if we have an update result, and it has models associated<br> &nbsp; &nbsp;// and one of those models is the model with the name 'UIOnly'<br> &nbsp; &nbsp;// then force a recalc and update output<br> &nbsp; &nbsp;if (updateResult &amp;&amp; updateResult.models &amp;&amp; updateResult.models.UIOnly) {<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; updateTemplateFields();<br> &nbsp; &nbsp;}<br>});<br>})(skuid); 

Barry,

Thank you for such a  detailed explanation. I am going to read this over and let it sink in. I will report back with the final result once it all makes sense to me.

Sounds like a plan Tami.  Good luck and keep us posted.

Barry,

This was perfect thank you. I was having a hard time wrapping my head around the load and re-query being at the end of the script. So instead of just copying what you gave me I kept trying to move things around which did not work. 

Thank you for your clear explanation and code.

You’re welcome Tami, glad you got it working!