troubleshooting Question

Load Remote JavaScript with JQuery and Execute function

Avatar of DislocatedGI
DislocatedGI asked on
Web Applications
1 Comment1 Solution965 ViewsLast Modified:
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);
            }
               
        }

The Model:

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

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>

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>

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.
ASKER CERTIFIED SOLUTION
Join our community to see this answer!
Unlock 1 Answer and 1 Comment.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 1 Comment.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros