I want . Auto complete text box with multiple keyword. it's from database. if I use jQuery and do operation in client side mean. If the database size is huge, it leads to some issues. I need to know how this is done on the server side and get proper result.
I have already seen this topic but the operation is done on the client side. I need it from the database directly.
<html>
<head>
<title>Testing</title>
<link href="css/jquery-ui-1.10.3.custom.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.srchHilite { background: yellow; }
</style>
<script src="scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="scripts/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
NewAuto();
});
function NewAuto() {
var availableTags = ["win the day", "win the heart of", "win the heart of someone"];
alert(availableTags); // alert = win the day,win the heart of,win the heart of someone
$("#tags").autocomplete({
source: function(requestObj, responseFunc) {
var matchArry = availableTags.slice(); // Copy the array
var srchTerms = $.trim(requestObj.term).split(/\s+/);
// For each search term, remove non-matches.
$.each(srchTerms, function(J, term) {
var regX = new RegExp(term, "i");
matchArry = $.map(matchArry, function(item) {
return regX.test(item) ? item : null;
});
});
// Return the match results.
responseFunc(matchArry);
},
open: function(event, ui) {
// This function provides no hooks to the results list, so we have to trust the selector, for now.
var resultsList = $("ul.ui-autocomplete > li.ui-menu-item > a");
var srchTerm = $.trim($("#tags").val()).split(/\s+/).join('|');
// Loop through the results list and highlight the terms.
resultsList.each(function() {
var jThis = $(this);
var regX = new RegExp('(' + srchTerm + ')', "ig");
var oldTxt = jThis.text();
jThis.html(oldTxt.replace(regX, '<span class="srchHilite">$1</span>'));
});
}
});
}
</script>
</head>
<body>
<div>
<label for="tags">
Multi-word search:
</label>
<input type="text" id="tags" />
</div>
</body>
</html>
take a look to Select2 it may help you.
Select2 is a jQuery based replacement for select boxes. It supports
searching, remote data sets, and infinite scrolling of results.
link
In your code, you have provided source as array. As you mentioned in comments, problem is how to get the data to source in jquery.
To make this work,
You need to do following
load jquery in header, which is you have already done.
Provid array,string or function for the source tag. [See api for
the source tag][1]
[1]: http://api.jqueryui.com/autocomplete/#option-source
In your serverside script, provid Jason encoded string.
If you check the API, you can see they have clear mentioned this.
Here is the jquery code
$(function() {
$( "#option_val" ).autocomplete({
dataType: "json",
source: 'search.php',
minLength: 1,
select: function( event, ui ) {
log( ui.item ?
"Selected: " + ui.item.value + " aka " + ui.item.id :
"Nothing selected, input was " + this.value );
}
});
});
</script>
Here is the php code, Sorry if you use differnt serverside script language.
<?php
// Create connection
$con=mysqli_connect("localhost","wordpress","password","wordpress");
// Check connection
if (mysqli_connect_errno($con))
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$result=mysqli_query($con,"select * from wp_users");
while($row = mysqli_fetch_array($result))
{
$results[] = array('label' => $row['user_login']);
}
echo json_encode($results);
mysqli_close($con);
?>
Related
I am learning how to use Redux. I would like to create a simple application with only one button. When the button is clicked I want to do a rest api call and when the response comes back the response content needs to be displayed.
What I would like to do is send a store.dispatch(CardAction.GET_CARDS) message to Redux when user clicks on the button. I do not want to call rest api directly from the button's onClick handler.
When the answer is received I intend to to the same: send an event with store.dispatch(CardAction.UPDATE_UI) and somehow at the background I want to update the Redux's status.
I hope that this concept is align with React + Redux.
I have some JavaScript code done but some part of it are missing. Could you please help me to put parts together?
index.jsp
<!DOCTYPE html>
<%#page session="false"%>
<%#page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<html>
<head>
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
<base href="${pageContext.request.contextPath}/" />
<link rel="icon" type="image/x-icon" href="public/image/favicon.ico">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css">
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>
App.js
let store = createStore(reducers);
ReactDom.render(
<Provider store={store}>
<Card/>
</Provider>,
document.getElementById('root')
);
Card.js
export default class Card extends React.Component {
render() {
return (
<div>
...
<Button onClick={() => store.dispatch(CardAction.GET_CARDS)}>rest call</Button>
</div>
)
}
}
ActionType.js
export const GET_CARDS = 'get-cards';
export const UPDATE_UI = 'update-ui';
CardAction.js
export function getCards(param1, param2) {
return createAction(ActionType.GET_CARDS, (param1, param2) => ({ value1, value2 }))
}
export function updateUi() {
return createAction(ActionType.UPDATE_UI)
}
RootReducer.js
export const reducers = (state = {}, action) => {
return action
};
RestClient.js
export default {
cardPost(param1, param2) {
const url = ...;
fetch(url, {
method: 'POST',
credentials: 'include'
})
.then(response => {
if (response.ok) {
console.info('rest response have arrived');
store.dispatch(CardAction.UPDATE_UI)
} else {
console.info('error appeared during calling rest api');
//store.dispatch(CardAction.SHOW_ERROR)
}
})
.catch(function(err) {
console.info(err + ' Url: ' + url)
})
}
}
You should never call store.dispatch() from a component. Instead, you should import a previously built action and let the Redux flow do the remaining stuff. The reducer shouldn't return an action, instead, it should return a new state, without mutating the previous one. I'd suggest you should first compensate some of the comprehensible lack of experience with Redux, and then you can try to follow along with a React-Redux-Rest tutorial like this one: https://medium.com/#rajaraodv/a-guide-for-building-a-react-redux-crud-app-7fe0b8943d0f#.cnat3gbcx
[EDIT]
Here's what I'd do
// component Card.js
import {getCards} from "CardAction";
export default class Card extends React.Component {
render() {
return (
<div>
...
<Button onClick={getCards(param1, param2)}>rest call</Button>
</div>
)
}
}
// action CardAction.js
const receivedCards = (cards) => ({
type: "RECEIVED_CARDS",
cards
})
export function getCards(param1, param2) {
// idk where you're gonna use these params btw
// also please note that fetch() isn't supported by older browsers. Here I'm showing you a simple example with axios, which basically performs the same operation. Feel free to adapt this example code as you want.
return function(dispatch) {
return axios({
url: server + "endpoint",
timeout: 20000,
method: 'get'
})
.then(function(response) {
let cards = response.data;
dispatch(receivedCards(cards));
})
.catch(function(response){
console.log(response.data.error);
})
}
};
// reducer reducer.js
const initialState = {};
export default (state = initialState, action) => {
switch(action.type) {
case "RECEIVED_CARDS":
return Object.assign({},
state,
{cards: action.cards});
default:
return state;
}
}
I am building simple phonegap android app.
i make simple html form with few input fields (Name, Last name, Question).
I want that when user fill input fields (Name, Last name, Question) and click Submit to send to my email address. Just that.
Do you have any idea how to do that with phonegap?
Thank you
You could do it easily by using php or .net (as your selection) with AJAX Call
Just Create One HTML page which display form to User for filling up data and send it.
Here I saw you how I done with PHP (Use phpmailer. for more, visit : http://phpmailer.worxware.com/index.php?pg=examplebmail)
HTML Form
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<form action="#!" method="post">
<input type = "text" name="cname" />
<input type = "number" name="cnumber" />
<input type = "email" name="cemail" />
<input type = "submit" value="Submit" onclick="UpdateRecord()" />
</form>
<script>
function UpdateRecord()
{
// Social Links
GolbalURL = "http://www.yourserverpathtophpfile.com";
var cname = $("[name='cname']").val();
var cnumber = $("[name='cnumber']").val();
var cemail = $("[name='cemail']").val();
jQuery.ajax({
type: "POST",
url: GolbalURL+"sendemail.php",
data: "cname="+ cname+"& cnumber="+ cnumber+"& cemail="+ cemail,
dataType: "html",
cache: false,
success: function(response)
{
alert("Email Sent");
}
});
}
</script>
</body>
</html>
Sendmail.php
<?php
$cname = $_REQUEST['cname'];
$cnumber = $_REQUEST['cnumber'];
$cemail = $_REQUEST['cemail'];
require_once('class.phpmailer.php');
$mail = new PHPMailer(); // defaults to using php "mail()"
$body = "Name : ".$cname."Number : ".$cnumber."Email : ".$cemail;
$mail->SetFrom($cemail, $cname);
$address = "youremail#id.com";
$mail->AddAddress($address, "Your Name");
$mail->Subject = "Your Subject";
$mail->AltBody = "To view the message, please use an HTML compatible email viewer!"; // optional, comment out and test
$mail->MsgHTML($body);
if(!$mail->Send()) {
echo "Mailer Error: " . $mail->ErrorInfo;
} else {
echo "Message sent!";
}
?>
Do not forgot to upload your dynamic files to server and give it permissions. Or You can also call device's default mail application from code, check PHONEGAP EMAIL COMPOSER
GIT Link Of Email Compo.
https://github.com/katzer/cordova-plugin-email-composer/blob/172605ee12e58d5e5809e4e031b3b96cead143ac/README.md
You can do using Cordova EmailComposer Plugin for Android . Add this function on your submit button click. For installation follow these steps .
https://github.com/katzer/cordova-plugin-email-composer
function emailComposer(){
window.plugin.email.isServiceAvailable(
function (isAvailable) {
if(isAvailable){
window.plugin.email.open({
to: [''],
cc: [''],
bcc: [''],
subject: '',
body: ''
});
}else{
alert('Service is not available');
}
}
);
}
**JQUERY - CALL PHP SCRIPT TO POST DATA**
var ajax_call = serviceURL;
var form_data = $('#form').serialize();
$.ajax({
type: "POST",
url: ajax_call,
data: form_data,
dataType: "json",
success: function(response) {
//called when successful
},
error: function(e) {
//called when there is an error
//console.log(e.message);
}
});
Examples
There are plugins to compose emails, but it won't send it automatically. You really need to use a back end service to handle this for you. You can setup your own using any app language (PHP, ColdFusion, etc), or consider a service like WuFoo perhaps.
Deselect and hover funcntions work fina but create/delete/rename don't.
What do is do wrong?
info.json contains 5 nodes marked from 1 to 5.
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<link rel="stylesheet" href="jstree\dist\themes\default\style.min.css" />
<script src="jstree\dist\jstree.js"></script>
<script>
$(function() {
$('#test_tree').jstree({
'core' : {
'data' : {
'url' : 'info.json',
'data' : function (node) {
return { 'id' : node.id };
}
}
}
});
});
</script>
</head>
<body>
<div id="container" >
<div id="nav_bar">
<button id="create" onclick = "demo_create()">Create</button>
</div>
<div id="test_tree"></div
</div>
<script>
function demo_create() {
$.jstree.reference('#test_tree').hover_node('ajson5');
$.jstree.reference('#test_tree').deselect_node('ajson1');
$.jstree.reference('#test_tree').create_node();
};
</script>
</body>
I used same example from official site but it doesn't work
Thanks for any help.
First, in order for changes to be made to the tree, checkcallback in core config need to be set to true.
$('#test_tree').jstree({
'core' : {
'data' : {
'url' : 'info.json',
'data' : function (node) {
return { 'id' : node.id };
},
check_callback : true
}
}
You need to at least pass the parent.id to the create_node function.
$.jstree.reference('#test_tree').create_node('ajson1');
You could check the API at the jstree website for the full parameter list.
Demo jsTreeView 3.2.1 version
$("#treeView").jstree({ 'core': {
'check_callback': true,
'themes': {
"variant": "large"
},
'data':
[{"id":"1","parent":"#","text":"Parent Node"}]
}
});
You are missing the single quotation mark for the check_callback, after using that it will work. e.g. 'check_callback': true.
Code to create new Node
var ref_treeview = $("#treeView").jstree(true);
sel = ref_treeview.get_selected();
if (!sel.length) {
return false;
}
sel = sel[0];
sel = ref_treeview.create_node(sel, "childNode", "last", CreateNode,true);
Here CreateNode is my Callback function name
you have to send the selected element.
use the following (this is basically the code of the create button in the demo page http://www.jstree.com/demo/):
var tree = $("#test_tree").jstree(true);
var sel = tree.get_selected();
if (!sel.length)
{
return false;
}
sel = sel[0];
sel = tree.create_node(sel);
if (sel)
{
tree.edit(sel);
}
At the time when you create the jstree instance you just need to configure the
'core' setting as shown bellow:
$(function () {
$('#jstree').jstree({
'core':{check_callback : true}
});
You have to set the type of the newly created node like so:
$('#tree').jstree().create_node('#', {'id': 'blah', 'text': 'new node', 'type': 'folder'}, 'last', function() {
console.log('done');
});
jstree documentation should be improved.
using code from the other answers, I was able to make the following work:
Please note, this actually works. I am using it to create menus for an external ajax API.
function makeNode(menunode, menuname){
var inst = $.jstree.reference("#treemenu"); //get menu instance
var obj = inst.get_node(menunode);
inst.create_node(obj, menuname); //creates nodes. use "#" to make root nodes
inst.open_node(obj); // open the node (unfold)
});
usage:
//create menu instance and allow tree changes
$('#treemenu').jstree({'core' : {'check_callback': true}});
makeNode("#", "main menu"); //makes root node
makeNode("#j1_1", "submenu in main menu"); //makes sub node
this is assuming that you have a div with id="treemenu" thusly
<div id="treemenu"></div>
I am new to JQgrid and we are using Perl Catalyst to build the application.
I need to have a drop down for the Operating system field
Please find the code for JQgrid
<title>Server Details </title>
<link rel="stylesheet" type="text/css" media="screen" href="[% c.uri_for('/static/css/cupertino/jquery-ui-1.10.3.custom.css') %]" />
<link rel="stylesheet" type="text/css" media="screen" href="[% c.uri_for('/static/plugins/jqGrid/css/ui.jqgrid.css') %]" />
<link rel="stylesheet" type="text/css" media="screen" href="[% c.uri_for('/static/plugins/jqGrid/css/print-container.css') %]" />
<script src="[% c.uri_for('/static/plugins/jqGrid/js/i18n/grid.locale-en.js')%]" type="text/javascript"></script>
<script src="[% c.uri_for('/static/plugins/jqGrid/js/jquery.printElement.js')%]" type="text/javascript"></script>
<script src="[% c.uri_for('/static/plugins/jqGrid/js/printing.js')%]" type="text/javascript"></script>
<script src="[% c.uri_for('/static/plugins/jqGrid/js/export_to_excel.js')%]" type="text/javascript"></script>
<script src="[% c.uri_for('/static/plugins/jqGrid/js/jquery.jqGrid.src.js') %]" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#list").jqGrid({
url:"[% c.uri_for("server_details_json") %]",
datatype:'json',
mtype:'GET',
colNames:['Server Id' , 'Host Name', 'IP Address','Operating System','Operating System Version', 'Network Domain','Business Unit'],
colModel:[
{name:'server_id', index:'server_id', align:'centre',editable:false},
{name:'server_name', index:'server_name', align:'left',editable:true},
{name:'ip_address', index:'ip_address', align:'left',editable:true},
{name:'operating_system', index:'operating_system', align:'left',editable:true, edittype: 'select',
searchoptions: {value:getOptionsList(),
sopt:['eq']}},
{name:'operating_system_version', index:'operating_system_version', align:'left',editable:true},
{name:'domain', index:'domain', align:'left',editable:true},
{name:'business_unit', index:'business_unit', align:'left',editable:true},
],
pager:'#pager',
rowNum:10,
autowidth:true,
autoheight:true,
rowList:[10,20,30,1000000000000000000],
loadComplete: function() {
$("option[value=1000000000000000000]").text('All');
},
sortname:'server_id',
sortorder:'asec',
shrinkToFit:true,
viewrecords:true,
gridview:true,
height:'auto',
editurl:"[% c.uri_for("postrow") %]",
caption:'Server List '
});
$("#list").jqGrid('navGrid', '#pager',{
view:false,
del:true,
add:true,
edit:true,
search: true,
refresh: true,
print:true
},
{height:250,width:500,reloadAfterSubmit:true}, // edit options
{height:480,reloadAfterSubmit:false}, // add options
{reloadAfterSubmit:false}, // del options
{} // search options
)
// setup grid print capability. Add print button to navigation bar and bind to click.
setPrintGrid('list','pager','Server Details');
setExcelGrid('list','pager','/tams/Server_Details_CSV','Server Details1');
});
</script>
<script>
function getOptionsList(){
$.ajax({
type: "POST",
url:"[% c.uri_for("OS_json") %]",
async:false,
dataType: 'json',
success: function(data){
options=data.value;
},
failure :function(xhr,status,msg) {
alert("Unexpected error occured. !!!"+msg);
}
});
return options;
}
</script>
<body>
<table id="list"><tr><td/></tr></table>
<div id="pager"></div>
</body>`
The Json Data is like this
[{"value":"Windows","id":"86"},{"value":"AIX","id":"87"}]
Can some one help me Thanks in advance for your precious time
First of all you defined searchoptions.value for operating_system column which will be used during searching and not during editing. Moreover the property will work in Searching dialog only if you would add additional property stype: "select". So you should add editoptions: {value: getOptionsList() } to have <select> during editing.
The format of value for editoptions.value and searchoptions.value can be either the string like
"86:Windows;87:AIX"
or an object like
{"86": "Windows", "87": "AIX"}
and not [{"value":"Windows","id":"86"},{"value":"AIX","id":"87"}] which you currently use.
You should change the code of getOptionsList to construct the corresponding results. By the way I prefer to use String form instead of Object form because it allows to specify the exact order of <option> elements in the <select>. The order of options in case of usage object form can be different in different web browsers.
I would recommend you to change your code so that you don't use synchronous Ajax request. Instead of that you can use editoptions {dataUrl: "[% c.uri_for("OS_json") %]", buildSelect: function (data) {...}}. You should additionally define ajaxSelectOptions: {dataType: "json"}. The callback function buildSelect get the server response (data) and it should return the HTML fragment of <select> with all <option> elements. You can find some examples here, here and here.
UPDATED: The code of buildSelect can be something like
buildSelect: function (data) {
var html = "<select>", length = data.length, i, item;
for (i = 0; i < length; i++) {
item = data[i];
html += '<option value=' + item.id + '>' + item.value + '</option>';
}
return html + "/<select>";
}
if you want that results of editing of the select will be sent as select id (like 86 for "Windows") to the server (see the demo). If you want that server get the name (like "Windows") then you need fill value of <option> elements using value property and ignore the id value:
buildSelect: function (data) {
var html = "<select>", length = data.length, i, item;
for (i = 0; i < length; i++) {
item = data[i];
html += '<option value=' + item.value + '>' + item.value + '</option>';
}
return html + "/<select>";
}
see the demo. You can use Fiddler, Developer Tools of IE or other free tools to trace the exact HTTP traffic during editing.
Your colModel must be like,
{ name: 'Decision', width: 200, editable: true, formatter: 'select', edittype: 'select',
editoptions: {
value: {
'1': 'Option 1',
'2': 'Option 2',
'3': 'Option 3'
}
}
},
I guess, it must be editoptions instead of searchoptions.
Here is an example grid, thanks to Oleg
Currently i am using the google cloudprint button for my site
<script src="//www.google.com/cloudprint/client/cpgadget.js"></script>
<script defer="defer">
var gadget = new cloudprint.Gadget();
gadget.setPrintButton(document.getElementById("custom_print_button"));
gadget.setPrintDocument("url", "Cloud Print test page",
"http://www.google.com/cloudprint/learn/");
</script>
I want to send an email when I hit the print button, is this possible?
No problem at all... just attach an onclick handler to the print button, or bind the click with jQuery and call a function to do your email. I used it to create a document with Ajax before it was printed:
<script>
function printIT() {
jQuery.ajax({
url: "print_this.php",
context: document.body,
success: function(responseText) {
alert("Document sent!");
return false;
}
});
}
</script>
<button id="print_button_container" class="ui-link" onclick="printIT();"></button>
<script src="//www.google.com/cloudprint/client/cpgadget.js">
</script>
<script defer="defer">
var gadget = new cloudprint.Gadget();
gadget.setPrintButton(document.getElementById("print_button_container"));
gadget.setPrintDocument("url", "My Document", "http://www.yourpath.com/yourdoc.html");
</script>
Simplified version... not tested but should work :)