HTML Presentation Object: Search Textbox - Revision history

Ollvihe at 13:01, 27 June 2018

2018-06-27T13:01:33Z

Ollvihe at 13:01, 27 June 2018

2018-06-27T13:01:23Z

Ollvihe at 13:01, 27 June 2018

2018-06-27T13:01:01Z

Ollvihe: Ollvihe moved page Search Textbox using HTML Presentation Object to HTML Presentation Object: Search Textbox without leaving a redirect

2018-02-06T16:47:02Z

Ollvihe moved page Search Textbox using HTML Presentation Object to HTML Presentation Object: Search Textbox without leaving a redirect

Ollvihe at 09:38, 20 December 2017

2017-12-20T09:38:12Z

Ollvihe: /* Search textbox */

2017-12-20T09:37:49Z

Search textbox

Ollvihe: Created page with "=== Search textbox === This example code is a textbox with the following features: * Textbox contents can be bound to a definable context variable (line '''var variableBinding..."

2017-12-20T09:37:42Z

Created page with "=== Search textbox === This example code is a textbox with the following features: * Textbox contents can be bound to a definable context variable (line '''var variableBinding..."

New page

=== Search textbox ===
This example code is a textbox with the following features:
* Textbox contents can be bound to a definable context variable (line '''var variableBinding<#uniqueId> = "myVariable1";''')
* There is a definable delay after which the typed text is set to the context variable ('''var inputDelay<#uniqueId> = 1000;''')
** Set the delay to '''0''', to disable it
* There is a magnifier button to "start the search" which stores the text immediately to the bound context variable
* Clicking the Enter key makes the same as clicking the magnifier button
* The magnifier button can be removed, to make the input textbox more generic (remove the line starting with '''<img''')
* Clicking the magnifier button can also change other context variables, such as open a separate view for the search results (add new command to function '''searchClicked<#uniqueId>''')

<pre>
<input id="content<#uniqueId>" type="text" placeholder="Search" onchange="textboxChanged<#uniqueId>(this);" onkeyup="textboxChanged<#uniqueId>(this);" onpaste="textboxChanged<#uniqueId>(this);" oninput="textboxChanged<#uniqueId>(this);" />
<img id="seachbutton<#uniqueId>" onclick="searchClicked<#uniqueId>();" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAS5JREFUeNrkVDsOgkAUBGKvFtZQ2YqVjYkcAU8A3oDexF9i7xH0BtxALOzxBngDbG1wnnkmuNldwGjlJpPNft7s23mzaxZFYXy7WcYP2k9IW7rF9WbroSO4QAakQLxczHNdnCnTFGQdCgYmkpgbEIF4X5uUCRNgwAQxjx0gBGzeOlMRy0hpYwBc6eoIzBTrdKAjk8KSZBnwMBQJqWGOsj0Bbc68svou9xcEJ5pavK7tN7FUXuGa7BOfOhWkru5wS9Ar4QLY0NdXeJd0j3gY181099JNJC7ZjWx1B45NzJ+yT59FK/nU46obpTVPtJWp+qVAvCJFJEtnoAf0VcTKDwWbiLQLTOkMekHAEPNj9CMmM/hGCUujz7SqCc/5LduPvz4mII0P4vXN//75HwIMANu1eq4zLyyIAAAAAElFTkSuQmCC" />

<style>
#content<#uniqueId> {
border-radius: 4px;
border-width: 1px;
width: calc(100% - 20px);
margin: 10px 10px 10px 10px;
padding: 2px 26px 0px 5px;
display: inline;
}
#seachbutton<#uniqueId> {
position: absolute;
top: 17px;
right: 17px;
cursor: pointer;
}
</style>

<script>
var variableBinding<#uniqueId> = "myVariable1";
var inputDelay<#uniqueId> = 1000;
var pendingTimeouts<#uniqueId> = 0;

function searchClicked<#uniqueId>() {
var textBoxValue = $("#content<#uniqueId>").val();
window.parent.setSessionVariable(variableBinding<#uniqueId>, textBoxValue);
}

function <#contextChangeFunction>(changedContextVariables) {
if (changedContextVariables[variableBinding<#uniqueId>] != null && $("#content<#uniqueId>").val() != changedContextVariables[variableBinding<#uniqueId>]) {
$("#content<#uniqueId>").val(changedContextVariables[variableBinding<#uniqueId>]);
}
$("#content<#uniqueId>").keyup(function(event) {
if (event.keyCode == 13) searchClicked<#uniqueId>();
});
}

function textboxChanged<#uniqueId>(evt) {
var textBoxValue = $(evt).val();
if (inputDelay<#uniqueId> > 0) {
pendingTimeouts<#uniqueId>++;
setTimeout(function() {
pendingTimeouts<#uniqueId>--;
if (pendingTimeouts<#uniqueId> > 0) return;
window.parent.setSessionVariable(variableBinding<#uniqueId>, textBoxValue);
}, inputDelay<#uniqueId>);
} else {
window.parent.setSessionVariable(variableBinding<#uniqueId>, textBoxValue);
}
}
</script>
</pre>

@@ Line 36: / Line 36: @@
 function searchClicked<#uniqueId>() {
    var textBoxValue = $("#content<#uniqueId>").val();
-   qpr.setSessionVariable(variableBinding<#uniqueId>,  textBoxValue, "<#uniqueId>");
+   qpr.setSessionVariable(variableBinding<#uniqueId>, textBoxValue, "<#uniqueId>");
+}

← Older revision		Revision as of 09:38, 20 December 2017
Line 63:		Line 63:
	</script>		</script>
	</pre>		</pre>
		+
		+	[[Category: QPR UI]]

← Older revision		Revision as of 09:37, 20 December 2017
Line 1:		Line 1:
−	~~=== Search textbox ===~~
	This example code is a textbox with the following features:		This example code is a textbox with the following features:
	* Textbox contents can be bound to a definable context variable (line '''var variableBinding<#uniqueId> = "myVariable1";''')		* Textbox contents can be bound to a definable context variable (line '''var variableBinding<#uniqueId> = "myVariable1";''')

@@ Line 55: / Line 55: @@
        pendingTimeouts<#uniqueId>--;
        if (pendingTimeouts<#uniqueId> > 0) return;
-       window.parent.setSessionVariable(variableBinding<#uniqueId>, textBoxValue);
+       qpr.setSessionVariable(variableBinding<#uniqueId>, textBoxValue, "<#uniqueId>");
      }, inputDelay<#uniqueId>);
    } else {
-     window.parent.setSessionVariable(variableBinding<#uniqueId>, textBoxValue);
+     qpr.setSessionVariable(variableBinding<#uniqueId>, textBoxValue, "<#uniqueId>");
+   }
+}

← Older revision	Revision as of 16:47, 6 February 2018
(No difference)