Best way to load css for partial views loaded using ajax

Question

I'm working on my application that creates tabs dynamically and fills them with partial views using ajax.

My question is: how to load css for this views? What's the best way to do it? I mean I can't load the css file on the partial view (no head) or could i?

Some code: the tabManager (a partial view loaded on the main page):

 <script>
 var tabTemplate = "<li class='#{color}'><a id='#{id}'href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'  role='presentation'>Remove Tab</span></li>"; // base format for the tabs

 $(document).ready(function () {

  var tabs = $("#tabs").tabs();       // apply jQuery ui to tabs

  $("a.menuButton").click(function () {

      var urlContent = $(this).data("direction");
      var label = $(this).data("label");
      var idTab = $(this).data("id");
      var color = $(this).data("color");

      var exist = false;
      var counter = 0;
      $('#tabs ul li a').each(function (i) {     // tab already exist o no hay que crear una tabla?

          counter = counter + 1;                 // index counter
          if (this.id == "#" + idTab) {          // Tab already exist?
              exist = true;
              $("#tabs").tabs("option", "active", counter - 1);     //activate existing element
          }
      });
      if (idTab == "-1") {                     // is a clickable element?
          exist = true;
      }
      if (exist == false) {                   // create new tab
          addTab(idTab, label, color);        // basic tab
          getTabContent(idTab, urlContent);   // content for new tab
          var lastTab = $('#tabs >ul >li').size() - 1;       // get count of tabs
          $("#tabs").tabs("option", "active", lastTab);      // select last created tab
      }
  });

   function getTabContent(idT, urlC) {          // ajax call to partial view
          $.ajax({
             url: urlC,
            type: 'GET',
           async: false,
              success: function (result) {
                  $("#"+idT).html(result);
        }
      });
 };

   function addTab(idT, labT, color) { //create new tab


     var label = labT,
       id = idT,
       li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{label\}/g, label).replace(/#\{id\}/g, "#" + id).replace(/#\{color\}/g, color)),
       tabContentHtml = "Cargando...";

     tabs.find(".ui-tabs-nav").append(li);
     tabs.append("<div id='" + id + "'><p>" + tabContentHtml + "</p></div>");
     tabs.tabs("refresh");

 }

     // close icon: removing the tab on click
tabs.delegate("span.ui-icon-close", "click", function () {
    var panelId = $(this).closest("li").remove().attr("aria-controls");
    $("#" + panelId).remove();
    tabs.tabs("refresh");
});

tabs.bind("keyup", function (event) {
    if (event.altKey && event.keyCode === $.ui.keyCode.BACKSPACE) {
        var panelId = tabs.find(".ui-tabs-active").remove().attr("aria-controls");
        $("#" + panelId).remove();
        tabs.tabs("refresh");
    }
    });
});
</script>

<div id=tabs>
<ul>
</ul>

A button example:

<li><a class="menuButton" href="#" title="Permisos" data-id="tab3" data-direction="Permiso/_Administrar" data-label="Label" data-color="blue"><img src="@Res_icons.More">Permisos</a><li>

You should look into bundling

Kyle
– Kyle

2013-05-31 15:48:51 +00:00
Commented May 31, 2013 at 15:48 — Kyle
– Kyle, Commented May 31, 2013 at 15:48

EricGS · Accepted Answer · 2013-06-03 12:23:19Z

1

i found my answer here: http://dean.resplace.net/blog/2012/09/jquery-load-css-with-ajax-all-browsers/

the code:

  <script type="text/javascript">
      $(document).ready(function () {

          $("head").append("<link href='...' rel='stylesheet'>");

      });
    </script>

answered Jun 3, 2013 at 12:23

EricGS

1,3432 gold badges18 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Best way to load css for partial views loaded using ajax

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related