I am working on a page for pre-registration to events on my website. On this page, people need the ability to add names into as many slots as the event creator would like (so it needs to handle 3 person basketball teams and 50 person banquets). I have had a high quality facebook-like search bar made so that I can neatly search through the database and select the desired people. Sadly I have this search bar being created by a for loop that creates many different ID filled search bars but every one of them is left empty and the first search bar is the only one that is filled.
I found that it deals with the jQuery code at the top of my page. My question/issue is that I need this jQuery to work on multiple search bars on a single page. If anyone can help me accomplish this I'd be greatly appreciative.
The "top code" or JQuery code that pulls from the db successfully is:
$(function(){
$(".search").keyup(function()
{
var inputSearch = $(this).val();
var dataString = 'searchword='+ inputSearch;
if(inputSearch!='')
{
$.ajax({
type: "POST",
url: "../searchMyChap.php",
data: dataString,
cache: false,
success: function(html)
{
$("#divResult").html(html).show();
}
});
}return false;
});
jQuery("#divResult").live("click",function(e){
var $clicked = $(e.target);
var $name = $clicked.find('.name').html();
var decoded = $("<div/>").html($name).text();
$('#inputSearch').val(decoded);
});
jQuery(document).live("click", function(e) {
var $clicked = $(e.target);
if (! $clicked.hasClass("search")){
jQuery("#divResult").fadeOut();
}
});
$('#inputSearch').click(function(){
jQuery("#divResult").fadeIn();
});
});
</script>
<style type="text/css">
body{
font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
}
.contentArea{
width:600px;
margin:0 auto;
}
/*
#inputSearch
{
width:350px;
border:solid 1px #000;
padding:3px;
}
*/
#divResult
{
position:absolute;
width:545px;
display:none;
margin-top:-1px;
border:solid 1px #dedede;
border-top:0px;
overflow:hidden;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
-moz-border-bottom-right-radius: 6px;
-moz-border-bottom-left-radius: 6px;
box-shadow: 0px 0px 5px #999;
border-width: 3px 1px 1px;
border-style: solid;
border-color: #333 #DEDEDE #DEDEDE;
background-color: white;
}
.display_box
{
padding:4px; border-top:solid 1px #dedede;
font-size:12px; height:50px;
}
.display_box:hover
{
background:#0088cc;
//background:#3bb998;
color:#FFFFFF;
cursor:pointer;
}
The for-loop code that prints the search bars is as follows:
for($i = 0; $i < $looper; $i++)
{
echo'
<div class="row">
<div class="form-group">
<div class="col-md-12">
<label>Member Name:</label>
<input type="text" class="form-control search" name="member'.$i.'" autocomplete="off" id="inputSearch" placeholder="Search...">
<div id="divResult" style="z-index:999; margin-top: 35px;" ></div>
</div>
</div>
</div>';
}
EDIT: Working JSFiddle
The first issue is that with each iteration of the for loop an element is created with id="divResult". An ID should be used once in the whole document. I have changed the for loop to produce an element with class="divResult" instead. If you use this change, remember that your CSS will need to be changed accordingly.
for ($i = 0; $i < $looper; $i++) {
echo '
<div class="row">
<div class="form-group">
<div class="col-md-12">
<label>Member Name:</label>
<input type="text" class="form-control search" name="member'.$i.'" autocomplete="off" id="inputSearch" placeholder="Search...">
<div class="divResult" style="z-index:999; margin-top: 35px;"></div>
</div>
</div>
</div>';
}
Next we iterate over each .search element. Within each iteration we can find the corresponding 'result' element by using jQuery's next() function, which retrieves the immediately following sibling of an element. If the code is ever changed such that the 'results' element does not appear straight after the `.search' element, this will need changing.
$(function () {
$('.search').each(function(index) {
var $searchElement = $(this);
var $resultElement = $searchElement.next();
console.log(index, $searchElement, $resultElement);
$searchElement.on('keyup', function() {
var inputSearch = $searchElement.val();
var dataString = 'searchword=' + inputSearch;
if (inputSearch != '') {
$.ajax({
type: "POST",
url: "../searchMyChap.php",
data: dataString,
cache: false,
success: function (html) {
$resultElement.html(html).show();
}
});
}
return false;
});
$resultElement.on("click", function (e) {
var $clicked = $(this);
var $name = $clicked.find('.name').html();
var decoded = $("<div/>").html($name).text();
$searchElement.val(decoded);
});
$(document).on("click", function (e) {
var $clicked = $(e.target);
if (!$clicked.hasClass("search")) {
$resultElement.fadeOut();
}
});
$searchElement.on('click', function () {
console.log(index + ' clicked');
$resultElement.fadeIn();
});
});
});
Related
I have done the following code in php so that I can click on the arrow and a form opens below
echo '<div class="editor" id="'.$par_code.'" style=" background-color: #fdfdfd; padding:14px 25px 30px 20px; font-family: Lucida Console, Monaco, monospace; box-shadow: 0 1px 10px 2px rgba(0,0,0,0.2),0 8px 20px 0 rgba(0,0,0,0.03); border-radius: 3px;">'
.'<img width="50" height="50" style="border-radius:50%" src="images/default.png" alt="Image cannot be displayed"/>'
.'<p class="uname"> '.$uname.'</p> '
.'<p class="time">'.$date.'</p>'
.'<p class="comment-text" style="word-break: break-all;">'.$content.'</p>'
.'<a class="link-reply al" id="reply" name="'.$par_code.'" style="padding-top: 18px; float: right;"><i class="fa fa-reply fa-lg" title="Reply"></i></a>';
My javascript code:
$(document).ready(function() {
$("a#reply").one("click" , function() {
var comCode = $(this).attr("name");
var parent = $(this).parent();
var str1 = "new-reply";
var str2 = "tog";
var res = str1.concat(i);
var tes = str2.concat(i);
// Create a new editor inside the <div id="editor">, setting its value to html
parent.append("<br /><center><form action='index.php' method='post' id='"+tes+"'><input class='iptext2' type='text' name='uname2' id='uname2' placeholder='Your Name' required /><div style='padding-bottom:5px'></div><textarea class='ckeditor' name='editor' placeholder='Your Query' id='"+res+"' required></textarea><input type='hidden' name='code' value='"+comCode+"' /><br/><input type='submit' class='form-submit' id='form-reply' name='new_reply' value='Reply' /></form></center>")
CKEDITOR.replace(res);
/*
var x = document.getElementById("tes");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
*/
i++;
});
})
The following is my css code applied to the anchor tag:
.al {
font-size:11.2px;
text-transform: uppercase;
text-decoration: none;
color:#222;
cursor:pointer;
transition:ease 0.3s all;
}
.al:hover {
color:#0072bc;
}
.link-reply {
color:#767676;
}
Here the arrow icon is displayed but is not clickable
Your code fails, because your <a> elements are created dynamically, whereas the event listener is added only to the elements available when the document has loaded.
In order to get your code to work, you need to use event delegation; that is to add the event listener to a common static ancestor, such as the document or the body, that will in turn delegate it to your target elements.
The methods you can use to achieve this effect in jQuery are on and one, with the latter fitting your case better, if you are trying to attach one-time event listeners.
Code:
$(document).one("click", "a#reply", function() {
// ...
});
Use on for dynamic created events on DOM.
$(document).on("click","a#reply" , function() {
console.log('a#reply => clicked!')
});
Or
$(body).on("click","a#reply" , function() {
console.log('a#reply => clicked!')
});
I have the following page, which is a wikisearch page that queries multiple wikipidia pages for the search term. The page has the title and input box somewhere around the middle; however, when I click on the botton, the title slides up, and so the input box. But the input box slides all way up covering the title. I think!... how can I prevent the inputbox from covering the title? or make the title stays at the top of page? Thanks
$(document).ready(function() {
//bringing focus to search box
window.load = function() {
document.getElementById("search-box").focus();
};
//listener for search button
$("#search").click(function() {
$("#title").slideUp(3000);
// $("#title").css("text-align", "left");
search();
});
function search() {
//grabbing the id of search result div
var srchResult = document.getElementById("results");
//string entered by user for search
var searchStr = document.getElementById("search-box").value;
//replace space with _ in search query
searchStr = searchStr.replace(" ", "_");
console.log(searchStr);
$.ajax({
url: "https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=" + searchStr + "&prop=info&inprop=url&utf8=&format=json",
dataType: "jsonp",
success: function(response) {
if (response.query.searchinfo.totalhits === 0) {
showError(searchStr);
} else {
displayResults(response);
}
},
error: function() {
alert("Something went wrong.. <br>" +
"Try again!");
}
});
function displayResults(response) {
console.log(response.query);
var search = response.query.search;
var srchLength = response.query.search.length;
srchResult.innerHTML = "";
// console.log(srchResult.innerHTML);
//pulling title and searchbox to top
// $("#title").css("margin-top:", "10px !important");
for (var i = 0; i < srchLength; i++) {
srchResult.innerHTML += '<div class="output"><h4>' + search[i].title + ' </h4><p>' + search[i].snippet + '</p></div>';
}
}
return false;
}
function showError(search) {
srchResult.innerHTML = '<div class="output text-center"><h4>No Search result for: ' + search + '</h4></div>';
}
});
body {
background-color: #495444;
}
search-input {
width: 90%;
}
center {
align-left: auto;
align-right: auto;
text-align: center;
}
.output {
background-color: white;
border-color: black;
border-width: 1px;
border-style: solid;
opacity: 0.5;
margin-top: 10px;
}
h1 {
margin-top: 200px;
color: #1484e5;
font-family: 'Josefin Sans', sans-serif;
font-size: 50px;
padding-bottom: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
<div class="container ">
<h1 id="title" class="text-center"><strong>WikiSearch</strong></h1>
<div id="input" class="input-group col-lg-8 offset-lg-2 col-md-8 offset-md-2 col-xs-12">
<input id="search-box" type="text" class="form-control" placeholder="Search Wikipidia Pages!..." />
<button id="search" class="btn btn-primary" onclick="#">Search</button>
</div>
<div id="results" class="col-lg-8 offset-lg-2">
</div>
</div>
Insted of using $('#title').slideUp(3000) try use $('#title').animate({'margin-top': '0'}, 3000);
Then the title will remain.
Also, you might want to remove onclick="#" from <button id="search" class="btn btn-primary" onclick="#">Search</button>
Example below.
$(document).ready(function() {
//bringing focus to search box
window.load = function() {
document.getElementById("search-box").focus();
};
//listener for search button
$("#search").click(function() {
$('#title').animate({'margin-top': '0'}, 3000);
//$("#title").slideUp(3000);
// $("#title").css("text-align", "left");
search();
});
function search() {
//grabbing the id of search result div
var srchResult = document.getElementById("results");
//string entered by user for search
var searchStr = document.getElementById("search-box").value;
//replace space with _ in search query
searchStr = searchStr.replace(" ", "_");
$.ajax({
url: "https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=" + searchStr + "&prop=info&inprop=url&utf8=&format=json",
dataType: "jsonp",
success: function(response) {
if (response.query.searchinfo.totalhits === 0) {
showError(searchStr);
} else {
displayResults(response);
}
},
error: function() {
alert("Something went wrong.. <br>" +
"Try again!");
}
});
function displayResults(response) {
var search = response.query.search;
var srchLength = response.query.search.length;
srchResult.innerHTML = "";
// console.log(srchResult.innerHTML);
//pulling title and searchbox to top
// $("#title").css("margin-top:", "10px !important");
for (var i = 0; i < srchLength; i++) {
srchResult.innerHTML += '<div class="output"><h4>' + search[i].title + ' </h4><p>' + search[i].snippet + '</p></div>';
}
}
return false;
}
function showError(search) {
srchResult.innerHTML = '<div class="output text-center"><h4>No Search result for: ' + search + '</h4></div>';
}
});
body {
background-color: #495444;
}
search-input {
width: 90%;
}
center {
align-left: auto;
align-right: auto;
text-align: center;
}
.output {
background-color: white;
border-color: black;
border-width: 1px;
border-style: solid;
opacity: 0.5;
margin-top: 10px;
}
h1 {
margin-top: 200px;
color: #1484e5;
font-family: 'Josefin Sans', sans-serif;
font-size: 50px;
padding-bottom: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
<div class="container ">
<h1 id="title" class="text-center"><strong>WikiSearch</strong></h1>
<div id="input" class="input-group col-lg-8 offset-lg-2 col-md-8 offset-md-2 col-xs-12">
<input id="search-box" type="text" class="form-control" placeholder="Search Wikipidia Pages!..." />
<button id="search" class="btn btn-primary">Search</button>
</div>
<div id="results" class="col-lg-8 offset-lg-2">
</div>
</div>
Add this to the h1 class
h1 {
z-index: 1000;
}
Now let's say you needed something to then go on top of the header, you'd give that element's class a z-index of something higher than 1,000, so maybe 1,001! If you needed something to go behind, simply make it 999 or lower. Using 1,000 gives you a lot of free range in either direction (+/-) to work with.
I have a div with the name "frined-replace" and an autosuggestion field. When the page loads the contents inside the frined-replace div shown. when we write something to the input field to search then the frined-replace is replaced with the data of the autosuggestion. Now the question is that when i write something the frined-replace div is replaced by the data and when i erase the input field characters which i have entered then i can't reshow the frined-replace div elements.
frined-replace:
<li style="float:left; width:240; margin:2px 0 4px 2px; border-bottom:1px solid #CCC; background-color:#f90; height:30px;">
<a href="<?php echo $config->baseUrlTs;?>messages?user_id=<?php echo $myusrid;?>" >
<img src="<?php echo $config->baseUrl;?><?php echo $imgs;?>" alt="" width="26" height="26" />
<font style="font-weight:bold; color:white"><?php //global $config;
echo $myusrname;
?></font></a>
</li>
and this is the autosuggestion part:
$("#search").keyup(function(e){
var qr = $("#search").val();
if(qr=="")
{
$("#erase").empty();
return;
}
$.ajax({
url: "<?php echo $config->baseUrl;?>/themes/gr-mist/ajax/inbox-ajax.php?str="+$(this).val()+"&user_id="+<?php echo $userid;?>,
context: document.body,
success: function(data){
$("#frined-replace").replaceWith(data);
//$("#search").val('');
//$('#search').val('').empty();
}
});
});
I just made a snippet code which show a possible answer
$("#search").keyup(function(e){
var qr = $("#search").val();
if(qr=="") {
$("#frined-replace").html($("#frined-replace-bck").html());
$("#frined-replace-bck").remove();
$("#erase").empty();
return;
}
if (!$('#frined-replace-bck').length) {
var backup = $("#frined-replace").clone();
backup.prop('id', 'frined-replace-bck');
backup.css('display', 'none')
$("#frined-replace").before(backup);
}
//Replace with your ajax call
$("#frined-replace").html('<li>' + qr + '</li>');
//$("#search").val('');
//$('#search').val('').empty();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
<input id="search" type="text"/>
<div id="frined-replace">My initial content</div>
</div>
I fixed it. I made another div with display to none after i show the data in that div instead of replacing it with frined-replace div.
<style type="text/css">
#loadsearch
{
display:none;
width: 250px;
position: absolute;
margin-top: -8px;
height: 100px;
z-index: 1;
margin-left: 2px;
height:auto;
}
</style>
<div id="loadsearch">
</div>
In the jquery
$("#search").keyup(function(e){
var qr = $("#search").val();
if(qr=="")
{
$("#erase").empty();
$("#loadsearch").hide();
return;
}
$("#loadsearch").empty();
$.ajax({
url: "<?php echo $config->baseUrl;?>/themes/gr-mist/ajax/inbox-ajax.php?str="+qr+"&user_id="+<?php echo $userid;?>,
context: document.body,
success: function(data){
$("#loadsearch").show();
$("#loadsearch").append(data);
//Here i am showing the data inthe div instead of replacing
},
});
});
Searched, but wasn't able to find any similar problems or solutions.
I have some templated HTML which builds a form based on data from a spreadsheet, as I have a variable number of dropdowns and options in those dropdowns.
On click of submit I want to display a spinning gif to the user, so they know it is processing.
If the backend code in code.gs passes the input through all the tests I want to update a div with a success message, if any of the checks fail with an error message.
I've got this to work, before with the create .createHtmlOutputFromFile method, but now with .createTemplateFromFile it just wipes the whole page.
HTML template
<style type="text/css">
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,300);
#container{
padding-left:10px;
font-family: 'Open Sans', Arial, sans-serif;
}
#header{
width: 75%;
margin: 0 auto;
text-align: center;
margin-bottom:10px;
}
form{
text-align: center;
margin-top:10px;
}
#nameField{
width:400px;
margin-bottom:10px;
}
#reqIndic{
color:#FF0000;
}
select{
margin-top: 5px;
width:150px;
}
#submit{
margin-top:20px;
width:125px;
height:40px;
}
#confirmation{
width: 30%;
margin: 0 auto;
min-height:60px;
border-radius: 5px;
}
#padding{
width: 30%;
margin: 0 auto;
min-height:60px;
border-radius: 5px;
}
</style>
<div id="container">
<div id="header">
<h2>Cheltenham Classic</h2>
</div>
<br>
<form name="projectsForm">
<span id="reqIndic">*</span>
<span> Name</span>
<input id="nameField" type="text" name="name" required>
<br>
<? for (var race in races) { ?>
<span><?= race ?></span>
<select>
<? for (var i = 0; i < races[race].length; i++) { ?>
<option value="<?= races[race][i] ?>"><?= races[race][i] ?></option>
<? } ?>
</select>
<br>
<? } ?>
<br>
<input id="submit" type="submit" value="Submit Form" onclick="google.script.run
.withSuccessHandler(updateDiv)
.onEvent(this.parentNode);spinner()">
</form>
</div>
<div id="confirmation" style ="text-align:center"></div>
<div id="padding" style ="text-align:center"></div>
<script type="text/javascript">
function updateDiv(returnValue){
alert('debug');
var div = document.getElementById('confirmation');
if(returnValue == false){
var errStr = '<p>ERROR: Please check your rankings for blank fields or multiple entries of the same project and re-submit your rankings</p>';
div.innerHTML = errStr;
}
else{
div.innerHTML = '<p>Success! Your results were submitted successfully</p>';
}
}
function spinner(){
var div = document.getElementById('confirmation');
div.innerHTML = '<img src="http://loadinggif.com/images/image-selection/32.gif">'
}
</script>
Back end code
I've cut the onEvent function right down to just returning an object with a key value pair without making any checks.
The updateDiv function runs and the alert shows then the entire page is wiped.
function doGet(){
var raceForm = HtmlService.createTemplateFromFile('RaceForm');
raceForm.races = getRaces();
return raceForm.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
function onEvent(e){
return {'valid': true};
}
function getRaces(){
var url = //spreadsheet url
var wb = SpreadsheetApp.openByUrl(url);
var ws = wb.getSheetByName('Races Log');
var racesObj = {};
var wsValues = ws.getDataRange().getValues();
for(var i = 0; i <wsValues.length;i++){
var race = wsValues[i][0];
racesObj[race] = [];
racesObj[race].push('0');
for(var j = 1; j<wsValues[i].length;j++){
racesObj[race].push(wsValues[i][j]);
}
}
return racesObj;
}
Any help much appreciated.
If I hard code the racesObj object:
var racesObj = {one:["one","two"], two:["one", "two"], "races":["belmont", "kentucky"]};
The page looks like this: (Using the template)
If I click the submit button, I get this:
I have a simple auto complete search box in codeignator that displays locations in mysql database results using php "LIKE" function.Everything works fine. i would just like to make it so that when the user starts typing he/she can use the arrow keys to scroll down and press enter on an item just like google. my code is below
<div class="banner_search_inner_box_search" style="margin-top: 15px;">
<input type="text" name="search" class="search" id="searchid" value="" placeholder="Enter a City,Locality" autocomplete="off">
<div id="result"></div>
</div>
My css code
#result
{
position:absolute;
width: 457px;
/*padding:10px;*/
display:none;
margin-top:-1px;
border-top:0px;
overflow:hidden;
border:1px #CCC solid;
background-color: white;
}
.show
{
padding:10px;
border-bottom:1px #999 dashed;
font-size:13px;
height:6px;
}
.show:hover
{
background:#4c66a4;
color:#FFF;
cursor:pointer;
}
JS code
<script type="text/javascript" src="<?=PUBLICPATH?>js/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
var AJAXPATH = 'http://localhost/PCenter/';
$(function(){
$(".search").keyup(function()
{
var searchid = $(this).val();
var dataString = 'search='+ searchid;
if(searchid!='')
{
$.ajax({
type: "POST",
url:AJAXPATH + 'search/show_city',
data: dataString,
selectFirst: true,
cache: false,
success: function(html)
{
$("#result").html(html).show();
}
});
}return false;
});
jQuery("#result").live("click",function(e){
var $clicked = $(e.target);
var $name = $clicked.find('.name').html();
var decoded = $("<div/>").html($name).text();
$('#searchid').val(decoded);
});
jQuery(document).live("click", function(e) {
var $clicked = $(e.target);
if (! $clicked.hasClass("search")){
jQuery("#result").fadeOut();
}
});
$('#searchid').click(function(){
jQuery("#result").fadeIn();
});
});
</script>
somebody please help me
Use the following plugin:
http://jqueryui.com/autocomplete/#remote
It allows you to fetch the results from a remote Data source via AJAX. You may have to change the format of the AJAX response (JSON response), to match the format which autocomplete requires.