Avatar of DislocatedGI
DislocatedGI
 asked on

Load Remote JavaScript with JQuery and Execute function

I would like to load script from a remote resource.  I am using a combination of MVC and Web API.  What I am trying to do is use the $getScript function from jquery to dynamically load a small snippet of java script.  The java script itself is being rendered by an MVC Controller action that returns a partial view.  

The reason for this is I have dynamic data that is used from the model to create the script on the fly.  

My Controller:

 public ActionResult Pricing(string id)
        {
            using (BI.Interfaces.IWidgetService widgetService = BI.Locators.ServiceLocator.GetWidgetService(Convert.ToInt32(id)))
            {
                BI.DTO.PricingWidget result = widgetService.GetPricingWidget(Convert.ToInt32(id));
                return PartialView("_pricing", result);
            }
               
        }

Open in new window


The Model:

 public class PricingWidget
    {
        public string Style;
        public string Endpoint;
    }

Open in new window


The View:

@model PODISA.BI.DTO.PricingWidget
<script type="text/javascript">
    $(document).ready(function () {
        var style = ' @Html.Raw(@Model.Style)';
        $.getJSON('@Html.Raw(Model.Endpoint)' + $('#sku').text(),
          function (data) {
              $('#pricingTable').append(style);
              $('#pricingTable').append('<div class="HeaderRow"/>');
              $('.HeaderRow').append('<div class="HeaderCol">Min</div>');
              $('.HeaderRow').append('<div class="HeaderCol">Max</div>');
              $('.HeaderRow').append('<div class="HeaderCol">Price</div>');

              var min = 1;
              var max;
              $.each(data.Pricing, function () {
                  $('#pricingTable').append('<div class="DataRow" id=qty_' + this.Quantity + '/>');
                  $('#qty_' + this.Quantity).append('<div class="DataCol">' + min + '</div>');
                  $('#qty_' + this.Quantity).append('<div class="DataCol">' + this.Quantity + '</div>');
                  $('#qty_' + this.Quantity).append('<div class="DataCol">' + this.Price + '</div>');
                  min = this.Quantity + 1;
              });
          });
    });
</script>

Open in new window


From another application - I will load the script from this view:

   <div id="pricingTable"></div>
    <div id="sku">CDBNAT1</div>

 <script type="text/javascript">
    $(document).ready(function() {
       $.getScript('http://localhost:63136/widget/pricing/41');
    });     
</script>

Open in new window


The idea here is the remote script is injected.  On my test page I keep getting 'Uncaught SyntaxError: Unexpected token <' - at line 1 of the remote script after it is loaded.  

This is driving me nuts.  I would appreciate any help.
Web Applications

Avatar of undefined
Last Comment
Michel Plungjan

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
Michel Plungjan

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Your help has saved me hundreds of hours of internet surfing.
fblack61