Added 'setDataUrl' command

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## 2.0.1 (1.8.2024)
 
+- Added 'setDataUrl' command for the plugin
 - Updated (dev)dependencies
 - Dropped jquery 3.5 from tests and replaced it with jquery 3.7
 - Updated pipeline to use latest node version / actions

README.md

@@ -1,20 +1,19 @@
-TinySelect
-==========
+# TinySelect
 
 ![Test](https://github.com/mcfizh/tinyselect/actions/workflows/test-workflow.yml/badge.svg)
 
-Tiny and zero-dependency jquery select component with ajax on demand loading and filtering. Supports jQuery versions 2 and 3
+Tiny and zero-dependency jquery select component with ajax on demand loading and filtering. Supports jQuery version 3 (though might work with jquery 2 also)
 
 ### Construction options:
 
-| option              | description |
-| ------------------- | ----------- |
-| showSearch          | Show search box |
-| searchCaseSensitive | Is search case sensitive (true / false) |
-| txtLoading          | Text to show while loading ajax request |
-| txtAjaxFailure      | Text to show, if ajax loading fails |
+| option              | description                                                                              |
+| ------------------- | ---------------------------------------------------------------------------------------- |
+| showSearch          | Show search box                                                                          |
+| searchCaseSensitive | Is search case sensitive (true / false)                                                  |
+| txtLoading          | Text to show while loading ajax request                                                  |
+| txtAjaxFailure      | Text to show, if ajax loading fails                                                      |
 | dataUrl             | URL where to load content. If value is not set, plugin reads content from select element |
-| dataParser          | Custom function to parse data from ajax request |
+| dataParser          | Custom function to parse data from ajax request                                          |
 
 ### Usage example
 
@@ -25,6 +24,12 @@ $("#selectElementId").tinyselect({
 });
 ```
 
+To change dataUrl, you can also call the plugin like so (once initialized):
+
+```
+$("#selectElementId").tinyselect("setDataUrl", "new url goes here");
+```
+
 ### Ajax data format
 
 Plugin expects data to be array of objects. Each object should contain attributes 'val' and 'text'. Object can also contain attributes 'selected: true', which selects the element.
@@ -33,14 +38,14 @@ Plugin expects data to be array of objects. Each object should contain attribute
 
 You can test the plugins demo page with included http server:
 
-* npm ci
-* npm run demoserver
+- npm ci
+- npm run demoserver
 
 ### Compiling the plugin from source
 
 Run the following commands:
 
-* npm ci
-* npm run test
-  * This step is optional
-* npx grunt
+- npm ci
+- npm run test
+  - This step is optional
+- npx grunt

demo/file2.json

@@ -0,0 +1,4 @@
+[
+	{ "val": 1 , "text": "abc" },
+	{ "val": 2 , "text": "this option is from file2" }
+]

demo/index.html

@@ -53,10 +53,13 @@
 	</div>
 
 	<br />
-	Data is loaded from file.json .. component respects selection.<br />
+	Data is loaded initially from "file1.json", use buttons below to change source .. component respects selection.<br />
 	<select id="select5" style="width: 340px;">
 		<option value="1">abc</option>
 	</select>
+  <br/>
+  <button id="select5src1" disabled>Change source to file 1</button>
+  <button id="select5src2">Change source to file 2</button>
 
 	<br /><br />
 
@@ -79,24 +82,39 @@
 			return retval;
 		}
 
-		/* This parser let's the component to handle selection */
+		/* This parser lets the component to handle selection */
 		const dataParserB = (data, selected) => {
 			retval = [{ val: "-1", text: "---" }];
-			data.forEach((v) => { retval.push(v); });
+      // Here we force all values to be of type string, so that selection works, since in the json file 'val'-values are actually numbers
+			data.forEach((v) => { retval.push({ val: v.val.toString(), text: v.text }); });
 			return retval;
 		}
 
-		/* Create select elements */
+		/* Create basic select elements */
 		$("#select1").tinyselect();
-		$("#select2").tinyselect({ showSearch: false });
-		$("#select3").tinyselect({ searchCaseSensitive: false, dataUrl: "file.json", dataParser: dataParserA });
+		$("#select3").tinyselect({ searchCaseSensitive: false, dataUrl: "file1.json", dataParser: dataParserA });
 		$("#select4").tinyselect({ dataUrl: "failure.json" });
-		$("#select5").tinyselect({ dataUrl: "file.json", dataParser: dataParserB });
 
-		$("#select2").on("change", () => {
+    /* Create select 2 with onChange event handler */
+		$("#select2").tinyselect({ showSearch: false });
+		$("#select2").on("change", function() {
 			console.log($(this).val());
 		});
 
+    /* Create select 5 with change source buttons */
+		const select5 = $("#select5").tinyselect({ dataUrl: "file1.json", dataParser: dataParserB });
+    $("#select5src1").on("click", function() {
+      $("#select5src1").attr("disabled", "disabled");
+      $("#select5src2").removeAttr("disabled");
+      $("#select5").tinyselect('setDataUrl', 'file1.json');
+    });
+    $("#select5src2").on("click", function() {
+      $("#select5src1").removeAttr("disabled");
+      $("#select5src2").attr("disabled", "disabled");
+      $("#select5").tinyselect("setDataUrl", "file2.json");
+    });
+
+    /* Finally show the hidden div that might cause layout issues */
 		$("#havoc").show()
 	</script>
 </body>