How can I reduce this Javascript/HTML/jQuery code?

I have hundreds, maybe thousands of charts for stores. The only difference is the name of the store and the product. The HTML code is dynamically generated once/day. Even minified, it takes forever to load (at least it feels like an eternity). If I use Firebug, then loading the file does take a very, very long time to load.

The stores and products are created from a table that's generated each morning. Since each table has a title (e.g., "JohnsMarket"), the ids cannot be reduced to numbers (e.g., 'store1', 'store2').

All of the other SO solutions to repetitive code use numbered ids.

For each store/product, I ha开发者_如何转开发ve to repeat the following 3 snippets.

<div id="JohnsMarket_Soup" class="frmStep">
   <div id="JohnsMarket_soup_chart" ></div>
   <div class="layout">
         <div class="layout_slider-settings">
            <div class="loading" id="JohnsMarket_soup_loading"></div>
         </div>
         <div class="layout_slider"><input id="JohnsMarket_soup_slider" name="area" value="1" ></div>
         <div class="layout_slider-settings"> </div>
   </div>
</div>

if ( ui.panel.id==='JohnsMarket' )
{   
   if( typeof JohnsMarket_soup_chart_data === 'undefined' )
   {
      $('.loading_graph_msg').show(); 
      window.setTimeout(function() { JohnsMarket_soup_data=checkData( JohnsMarket_soup_data,'JohnsMarket' );
      JohnsMarket_soup_chart_data = createChart(JohnsMarket_soup_data, 'JohnsMarket_soup_chart', 'JohnsMarket Soup', 50, 7, -1); },50 );
      $('.loading_graph_msg').hide('fast');
    }
} 
});

jQuery('#JohnsMarket_soup_slider').slider({}
  $('#JohnsMarket_soup_loading').show();
   var x = this.getValue();
    window.setTimeout(function() {
      JohnsMarket_soup_chart_data.replot();
      JohnsMarket_soup_chart_data.destroy();
      JohnsMarket_soup_chart_data = createChart(JohnsMarket_soup_data, 'JohnsMarket_soup_chart_data', 'JohnsMarket Soup', 5, x*7, -1);
    },20 );
  }
});

---

I can't say I fully understand what your whole problem statement looks like, but you can drastically compress all your code into one function that is used over and over again. This will, at least trim the size of the code down. Since you only showed one example of the data, I can't be sure what exactly is common from one data set to the next, but I made an assumption in order to show you how it can all be procedurized. You could collapse all the code to this:

function checkItem(idStr) {
    if ( ui.panel.id == idStr) {
        // generate derived names
        var soupChartDataName = idStr + "_soup_chart_data";
        var soupDataName = idStr + "_soup_data";
        var soupChartData = idStr + "_soup_chart_data";
        var soupChart = idStr + "_soup_chart";
        var soup = idStr + " Soup";
        var soupSlider = idStr + "_soup_slider";
        var soupLoading = idStr + "_soup_loading";

        if (typeof window[soupChartDataName] === 'undefined') {
            $('.loading_graph_msg').show(); 
            window.setTimeout(function() { 
                window[soupDataName] = checkData(window[soupDataName], idStr );
                window[soupChartData] = createChart(window[soupChartData], soupChart, soup, 50, 7, -1); 
            }, 50);
            $('.loading_graph_msg').hide('fast');
        }

        $("#" + soupSlider).slider({});
        $("#" + soupLoading).show();
        var x = this.getValue();
        window.setTimeout(function() {
            window[soupChartDataName].replot();
            window[soupChartDataName].destroy();
            window[soupChartDataName] = createChart(soupDataName, soupChartData, soup, 5, x*7, -1);
        }, 20);
    }
}

checkItem("JohnsMarket");

Then, for all the other items just call checkItem() with a different idString and no additional code. If I didn't guess the commonality among them quite correctly, you should be able to get the idea for how you can generate all the names being used from one or two common roots. For example, if "soup" isn't common among all the derived names, then maybe you need to pas that root into checkItem too so it can vary from one name to the next. If this were my code, I wouldn't be using so many global variables and I'd hang them off some object in my page, but that's your choice.

Note - for global variables, we access them off the windowobject so we can use the derived variable names as indexes.

And, you could create the HTML from a string template like this:

function createItem(idStr) {
    var template = '<div id="xxxx_soup_chart" ></div><div class="layout"><div class="layout_slider-settings"><div class="loading" id="xxxx_soup_loading"></div></div><div class="layout_slider"><input id="xxxx_soup_slider" name="area" value="1" ></div><div class="layout_slider-settings"> </div></div>';

    var o = document.createElement("div");
    o.id = idStr + "_Soup";
    o.className = "frmStep";
    o.innerHTML = template.replace(/xxxx/g, idStr);
    document.body.append(o);    // change this to append the item wherever it's supposed to go
}

createItem("JohnsMarket");

---

Any of that data seems like it could be stored in a hash keyed on the store name, including the chart itself; the rest is just string concatenation. But I agree, I'd try to move some of that onto the server side, even if it's just to retrieve the data used to create the charts.