<commit_before><!doctype html>
<html>
    <head>
        <title>A self contained example for the Jquery-IndexedDB plugin</title>
        <script type = "text/javascript" src="../lib/jquery.min.js">
        </script>
        <script type = "text/javascript" src="../jquery.indexeddb.new.js">
        </script>
        <link href="style.css" rel="stylesheet"/>
    </head>
    <body>
        <div>
            <h2>My Web Store
                <div class = "action">
                    <a href = "javascript:loadFromDB('wishlist');loadFromDB('cart');loadFromDB('catalog');">Load all LocalDBs</a>
                    <a href = "javascript:deleteDB()">Delete DB</a>
                </div>
            </h2>
        </div>
        <div id = "tables">
            <div class = "table-container">
                <div class = "controls">
                    <h2>Catalog</h2>
                    <a href = "javascript:loadFromDB('catalog')">Load from Local DB</a>
                    <a href = "javascript:downloadCatalog();">Save from Server TO DB</a>
                </div>
                <table id = "catalog" width="400">
                    <tr>
                        <th class = "header key">
                            Id
                        </th>
                        <th class = "header value action">
                            Object
                            <div style ="float:right; width : 200px">
                                <a href = "javascript:loadFromDB('catalog')">Show all</a>
                                <a href = "javascript:sort('catalog', 'price')">Sort by Price</a>
                            </div>
                        </th>
                        <th class = "header actions">
                            Actions
                        </th>
                    </tr>
                </table>
            </div>
            <div class = "table-container">
                <div class = "controls">
                    <h2>Cart</h2>
                    <a href = "javascript:loadFromDB('cart')">Load from Local DB</a>
                    <a href = "javascript:emptyDB('cart'); loadFromDB('cart')">Clear Table</a>
                </div>
                <table id = "cart">
                    <tr>
                        <th>
                            Id
                        </th>
                        <th>
                            Object
                            <div class = "action" style ="float:right; width : 200px">
                                <a href = "javascript:loadFromDB('cart')">Show all</a>
                                <a href = "javascript:sort('cart', 'itemId')">Sort by ItemId</a>
                            </div>
                        </th>
                        <th>
                            Actions
                        </th>
                    </tr>
                </table>
            </div>
            <div class = "table-container">
                <div class = "controls">
                    <h2>wishlist</h2>
                    <a href = "javascript:loadFromDB('wishlist')">Load from Local DB</a>
                    <a href = "javascript:emptyDB('wishlist'); loadFromDB('wishlist')">Clear Table</a>
                </div>
                <table id = "wishlist">
                    <tr>
                        <th>
                            Id
                        </th>
                        <th>
                            Object
                        </th>
                        <th>
                            Actions
                        </th>
                    </tr>
                </table>
            </div>
        </div>
        <div id = "console">
        </div>
        <!-- Main IndexedDB Example functions -->
        <script type = "text/javascript">
            var key = null;
            // Simply open the database once so that it is created with the required tables
            $.indexedDB("MyECommerceSite", {
            	"schema": {
            		"1": function(versionTransaction){
            			var catalog = versionTransaction.createObjectStore("catalog", {
            				"keyPath": "itemId"
            			});
            			catalog.createIndex("price");
            		},
            		// This was added in the next version of the site
            		"2": function(versionTransaction){
            			var cart = versionTransaction.createObjectStore("cart", {
            				"autoIncrement": true
            			});
            			cart.createIndex("itemId");
            			var wishlist = versionTransaction.createObjectStore("wishlist", {
            				"autoIncrement": false,
            				"keyPath": "itemId"
            			});
            			wishlist.createIndex("name");
            		}
            	}
            }).done(function(){
            	// Once the DB is opened with the object stores set up, show data from all tables
            	loadFromDB("cart");
            	loadFromDB("wishlist");
            	loadFromDB("catalog");
            	downloadCatalog();
            });
            
            function deleteDB(){
            	// Delete the database 
            	$.indexedDB("MyECommerceSite").deleteDatabase();
            }
            
            // Download a catalog from the server and save it to the DB
            function downloadCatalog(){
            	$.getJSON("catalog.json", function(data){
            		$.indexedDB("MyECommerceSite").transaction("catalog").then(function(){
            			console.log("Transaction completed, all data inserted");
            		}, function(err, e){
            			console.log("Transaction NOT completed", err, e);
            		}, function(transaction){
            			var catalog = transaction.objectStore("catalog");
            			catalog.clear();
            			$.each(data, function(i){
            				_(catalog.add(this));
            			})
            		});
            	});
            }
            
            // Iterate over each record in a table and display it
            function loadFromDB(table){
            	emptyTable(table);
            	_($.indexedDB("MyECommerceSite").objectStore(table).each(function(elem){
            		addRowInHTMLTable(table, elem.key, elem.value);
            	}));
            }
            
            // Sort a table based on an index that is setup
            function sort(table, key){
            	emptyTable(table);
            	_($.indexedDB("MyECommerceSite").objectStore(table).index(key).each(function(elem){
            		addRowInHTMLTable(table, elem.key, elem.value);
            	}));<commit_msg>Updated example to fetch data on page load. <commit_after><!doctype html>
<html>
    <head>
        <title>A self contained example for the Jquery-IndexedDB plugin</title>
        <script type = "text/javascript" src="../lib/jquery.min.js">
        </script>
        <script type = "text/javascript" src="../jquery.indexeddb.new.js">
        </script>
        <link href="style.css" rel="stylesheet"/>
    </head>
    <body>
        <div>
            <h2>My Web Store
                <div class = "action">
                    <a href = "javascript:loadFromDB('wishlist');loadFromDB('cart');loadFromDB('catalog');">Load all LocalDBs</a>
                    <a href = "javascript:deleteDB()">Delete DB</a>
                </div>
            </h2>
        </div>
        <div id = "tables">
            <div class = "table-container">
                <div class = "controls">
                    <h2>Catalog</h2>
                    <a href = "javascript:loadFromDB('catalog')">Load from Local DB</a>
                    <a href = "javascript:downloadCatalog();">Save from Server TO DB</a>
                </div>
                <table id = "catalog" width="400">
                    <tr>
                        <th class = "header key">
                            Id
                        </th>
                        <th class = "header value action">
                            Object
                            <div style ="float:right; width : 200px">
                                <a href = "javascript:loadFromDB('catalog')">Show all</a>
                                <a href = "javascript:sort('catalog', 'price')">Sort by Price</a>
                            </div>
                        </th>
                        <th class = "header actions">
                            Actions
                        </th>
                    </tr>
                </table>
            </div>
            <div class = "table-container">
                <div class = "controls">
                    <h2>Cart</h2>
                    <a href = "javascript:loadFromDB('cart')">Load from Local DB</a>
                    <a href = "javascript:emptyDB('cart'); loadFromDB('cart')">Clear Table</a>
                </div>
                <table id = "cart">
                    <tr>
                        <th>
                            Id
                        </th>
                        <th>
                            Object
                            <div class = "action" style ="float:right; width : 200px">
                                <a href = "javascript:loadFromDB('cart')">Show all</a>
                                <a href = "javascript:sort('cart', 'itemId')">Sort by ItemId</a>
                            </div>
                        </th>
                        <th>
                            Actions
                        </th>
                    </tr>
                </table>
            </div>
            <div class = "table-container">
                <div class = "controls">
                    <h2>wishlist</h2>
                    <a href = "javascript:loadFromDB('wishlist')">Load from Local DB</a>
                    <a href = "javascript:emptyDB('wishlist'); loadFromDB('wishlist')">Clear Table</a>
                </div>
                <table id = "wishlist">
                    <tr>
                        <th>
                            Id
                        </th>
                        <th>
                            Object
                        </th>
                        <th>
                            Actions
                        </th>
                    </tr>
                </table>
            </div>
        </div>
        <div id = "console">
        </div>
        <!-- Main IndexedDB Example functions -->
        <script type = "text/javascript">
            var key = null;
            // Simply open the database once so that it is created with the required tables
            $.indexedDB("MyECommerceSite", {
            	"schema": {
            		"1": function(versionTransaction){
            			var catalog = versionTransaction.createObjectStore("catalog", {
            				"keyPath": "itemId"
            			});
            			catalog.createIndex("price");
            		},
            		// This was added in the next version of the site
            		"2": function(versionTransaction){
            			var cart = versionTransaction.createObjectStore("cart", {
            				"autoIncrement": true
            			});
            			cart.createIndex("itemId");
            			var wishlist = versionTransaction.createObjectStore("wishlist", {
            				"autoIncrement": false,
            				"keyPath": "itemId"
            			});
            			wishlist.createIndex("name");
            		}
            	}
            }).done(function(){
            	// Once the DB is opened with the object stores set up, show data from all tables
            	loadFromDB("cart");
            	loadFromDB("wishlist");
            	downloadCatalog();
            });
            
            function deleteDB(){
            	// Delete the database 
            	$.indexedDB("MyECommerceSite").deleteDatabase();
            }
            
            // Download a catalog from the server and save it to the DB
            function downloadCatalog(){
            	$.getJSON("catalog.json", function(data){
            		$.indexedDB("MyECommerceSite").transaction("catalog").then(function(){
            			console.log("Transaction completed, all data inserted");
						loadFromDB("catalog");
            		}, function(err, e){
            			console.log("Transaction NOT completed", err, e);
            		}, function(transaction){
            			var catalog = transaction.objectStore("catalog");
            			catalog.clear();
            			$.each(data, function(i){
            				_(catalog.add(this));
            			})
            		});
            	});
            }
            
            // Iterate over each record in a table and display it
            function loadFromDB(table){
            	emptyTable(table);
            	_($.indexedDB("MyECommerceSite").objectStore(table).each(function(elem){
            		addRowInHTMLTable(table, elem.key, elem.value);
            	}));
            }
            
            // Sort a table based on an index that is setup
            function sort(table, key){
            	emptyTable(table);
            	_($.indexedDB("MyECommerceSite").objectStore(table).index(key).each(function(elem){
            		addRowInHTMLTable(table, elem.key, elem.value);
            	}));
{'fraction_non_alphanumeric': 0.11942217516260778, 'fraction_numerical': 0.00287399788231735, 'mean_word_length': 1.0833464628958562, 'pattern_counts': {'":': 14, '<': 203, '<?xml version=': 0, '>': 203, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 16, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6372798', 'n_tokens_mistral': 3401, 'n_tokens_neox': 3215, 'n_words': 738}