Develop Reference

Removing everything after first word JS

The title is a little bland but my problem is explained below.
At the moment I currently have a live search:
This does what I want it to do, but of course, that's only possible with a little bit of JS.
Now when you click one of the options it gives you from your search it'd usually take you to a link, but I added the below JS so that it removes all HTML code from it and it appends the selected username from the drop down into a text box.
<script type="text/javascript">
$(document).ready(function(){
$("#livesearch").click(function(){
var value = $(this).html();
var input = $('#append_value');
var content = value;
var text = $(content).text(); //removes all HTML
input.val(text);
});
});
</script>
Now, this is all perfect and everything but there's a problem. When you select one option from the drop down it appends both options to the text box:
Now, this may have something to do with the code above, but I just want whichever option the user has selected to be appended to the text box.
So, for example, I search for the battlefield and I get a result of battlefield1 and battlefield2. If the user selected battlefield2 I want battlefield2 to be placed in the textbox, and vice versa.
I've been trying to do this since 1pm EST so you can trust me when I say I've looked plenty of times for a solution.
Thank you in advance for your help. :)
Edit:
What I'm doing the search with (yes I realize SQL is deprecated):
index.html
<script type="text/javascript">
function lightbg_clr() {
$('#qu').val("");
$('#textbox-clr').text("");
$('#search-layer').css({"width":"auto","height":"auto"});
$('#livesearch').css({"display":"none"});
$("#qu").focus();
};
function fx(str) {
var s1=document.getElementById("qu").value;
var xmlhttps;
if (str.length==0) {
document.getElementById("livesearch").innerHTML="";
document.getElementById("livesearch").style.border="0px";
document.getElementById("livesearch").style.display="block";
$('#textbox-clr').text("");
return;
}
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttps=new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttps=new ActiveXObject("Microsoft.XMLHTTPS");
}
xmlhttps.onreadystatechange=function() {
if (xmlhttps.readyState==4 && xmlhttps.status==200) {
document.getElementById("livesearch").innerHTML=xmlhttps.responseText;
document.getElementById("livesearch").style.display="block";
$('#textbox-clr').text("X");
}
}
xmlhttps.open("GET","scripts/search_friends.php?n="+s1,true);
xmlhttps.send();
}
</script>
<input type="text" onKeyUp="fx(this.value)" autocomplete="off" name="qu" id="qu" class="form-control" placeholder="Name of the person or group">
<div class="list-group" id="livesearch"></div>
<input type="text" id="append_valueq">
<script type="text/javascript">
$(document).ready(function(){
$("#livesearch").click(function(){
var value = $(this).val();
var input = $('#append_valueq');
var content = value;
var text = $(content).text();
input.val(text);
});
});
</script>
search_friends.php
<?php
include('../Connections/ls.php'); //script to connect to DB
$s1=$_REQUEST["n"];
$select_query="SELECT * FROM users WHERE Username LIKE '%".$s1."%'";
$sql=mysql_query($select_query) or die (mysql_error());
$s="";
while($row=mysql_fetch_array($sql))
{
$s=$s."
<a href='javascript:void(0)'>".$row['Username']."</a>
" ;
}
echo $s;
?>
This ultimately gives me the result you see in the first image.
I'm realizing now that the problem I'm having is the fact that div has an id of livesearch (<div class="list-group" id="livesearch"></div>), so it's selecting the whole div instead of the actual options in the dropdown...

Try using .val() instead of html() while fetching the value.

There is actually a really simple way to do this.
Since you haven't provided your HTML code, I'll show what I would have done.
You can get the value of the click with:
document.getElementById("dropdown").value();
Make sure you don't include the hashtag/pound sign in the id.
Then, you can apply this value, let's say you call it val, this way:
document.getElementById("textbox").value = val
I've created a JSFiddle that kind-of shows the concept. See if you can get it to work with your own code: https://jsfiddle.net/1j4m1ekc/7/
If the problem persists, just let me know. I'd also like to see your html.

I don't need a solution right away for this as I've found another alternative to do what I want to do, but it would be greatly appreciated in case someone else from the Stackoverflow community has a question similar to this and need a solution. The solution I found is below.
This is still considered a live search but, I created a scrollable container and listed all of the users in that container, so it now looks like this.
Now from that container I found a script online that will filter out any and all users that do not match the input from the search box. The script I found is from here: Live Search and if you want to take a look at a demo as to how the script works, View Demo. So now when I enter a search term into the text box it looks like this
This may not be the greatest solution but it works for me and does what I want it to do. Maybe it'll work for you as well :)

Shrinking a Table in JavaScript

Never used JavaScript Before and I'm trying to fix this form in share point.
I want this text box to be small (like 1 row), until the user clicks it and then it should expand into a larger text box with like 10 rows. I apologize if this has been answered before, I don't even know what I should be looking for. Here is code I have that doesn't work, but does pop up an error message(I did not write this code):
alert(DescriptionID);
document.getElementById(DescriptionID).addEventListener("onmouseover", function(){
document.getElementById(DescriptionID).rows= "10";
});
document.getElementById(DescriptionID).addEventListener("onmouseout", function(){
document.getElementById(DescriptionID).rows= "1";
});
EDIT:
Here is what the current code will display:
EDIT2:
Thanks to a ton of help from you guys/gals I am close to finished! I can now understand it significantly better at least! Here is a picture of the code. The object is actually an "ms-formbody" ???
AND ANOTHER EDIT:
So here is the error i'm getting after using Johhny's code:

If you are using jQuery, this might work for you:
HTML:
<textarea id="expandingTextarea" rows="1">Enter Text</textarea>
JavaScript:
$(document).ready(function() {
$('#expandingTextarea').on('mouseover', function() {
$(this).attr('rows', '10');
});
$('#expandingTextarea').on('mouseout', function() {
$(this).attr('rows', '1');
});
});
I created an example here.
Update:
Using a click event to change/toggle to row count:
$(document).ready(function() {
$('#expandingTextarea').on('click', toggleExpand);
function toggleExpand() {
var oldRowCount = $(this).attr('rows');
var newRowCount = parseInt(oldRowCount) === 1 ? 10 : 1;
$(this).attr('rows', newRowCount);
}
});
Demo here.

In fact, you don't need JS to achieve what you want. CSS can do it for you.
<!--html-->
<textarea class="descr">This is description</textarea>
/*css*/
.descr {height: 20px;}
.descr:hover, .descr:focus {height: 120px;}

alter the height instead of the "rows" property.
open up the page in chrome, open the developer tools (View->Developer->Developer Tools) and then use "inspect" to select the text area you want to manipulate.
try playing around with the css of that element. then, write your javascript to change just the property that you want.
https://developer.chrome.com/devtools

The code you showed looks fine but DescriptionID should contain the ID of the description box. You can check what it is by right clicking on the description form and clicking "inspect element". Then assign var DescriptionID = "someID" at the beginning of the code.
Also, you might consider altering the height, not the rows.
If the form doesn't have an ID, look for an option to change the HTML and add one. If you don't have such an option, it's still possible to achieve what you want to do but you have to look beyond getElementById.

String value accumulating empty spaces in MySQL database

I have a webpage where admin users can edit the text on the page. But when they insert the text into the mysql database, it sometimes adds more and more white spaces before the acual content.
If you place your cursur before the first word on the page and spam backspace for a while, the whitespace in the database dissappears. But over time, the more you keep editing the page, more and more whitespaces are added again.
I did a lot of trouble shooting, but I just can't figure out what causes the whitespaces to be added. It does not always happen making it really difficult to troubleshoot.
Here's my code:
As my code is pretty long, I tried to translate most of the content to english.
If you want to translate something that in't already translated, the original language is Dutch.
over_ons.php - Shows edit button and page content from the database.
//Active page:
$pagina = 'over_ons'; ?>
<input type='hidden' id='pagina' value='<?php echo $pagina; ?>'> <!--Show active page to javascript--><?php
//Active user:
if(isset($_SESSION['correct_ingelogd']) and $_SESSION['functie']=='admin'){
$editor = $_SESSION['gebruikersnaam']; ?>
<input type='hidden' id='editor' value='<?php echo $editor; ?>'> <!--Show active user to javascript--><?php
} ?>
<!--Editable DIV: -->
<div class='big_wrapper'><?php
//Get eddited page content from the database
$query=mysql_query("SELECT inhoud FROM paginas WHERE naam_pagina='" .$pagina. "'");
while($inhoud_test=mysql_fetch_array($query)){
$inhoud=$inhoud_test[0];
}
//Show Content
?><div id='editedText'><?php echo $inhoud; ?></p></div>
<!--Show edit button-->
<?php
if(isset($_SESSION['correct_ingelogd']) and $_SESSION['functie']=='admin')
{?>
<div id='sidenote'>
<input type='button' value='Bewerken' id='sent_data' class='button' />
<div id="feedback" />
</div>
<?php }
javascript.js - Sents page content to the php file sent_data.php:
//If the system is in edit mode and the user tries to leave the page,
//let the user know it is not so smart to leave yet.
$(window).bind('beforeunload', function(){
var value = $('#sent_data').attr('value'); //change the name of the edit button
if(value == 'Verstuur bewerkingen'){
return 'Are you sure you want to leave the page? All unsaved edits will be lost!';
}
});
//Make content editable and send page content
$('#sent_data').click(function(){
var value = $('#sent_data').attr('value'); //change the name of the edit button
if(value == 'Bewerken'){
$('#sent_data').attr('value', 'Verstuur bewerkingen'); //change the name of the edit button
var $div=$('#editedText'), isEditable=$div.is('.editable'); //Make div editable
$div.prop('contenteditable',!isEditable).toggleClass('editable')
$('#feedback').html('<p class="opvallend">The content from<BR>this page is now<BR>editable.</p>');
}else if(value == 'Verstuur bewerkingen'){
var pagina = $('#pagina').val();
var editor = $('#editor').val();
var div_inhoud = $("#editedText").html();
$.ajax({
type: 'POST',
url: 'sent_data.php',
data: 'tekst=' +div_inhoud+ '&pagina=' +pagina+ '&editor=' +editor,
success: function(data){
Change the div back tot not editable, and change the button's name
$('#sent_data').attr('value', 'Bewerken'); //change the name of the edit button
var $div=$('#editedText'), isEditable=$div.is('.editable'); //Make div not editable
$div.prop('contenteditable',!isEditable).toggleClass('editable')
//Tell the user if the edditing was succesfully
$('#feedback').html(data);
setTimeout(function(){
var value = $('#sent_data').attr('value'); //look up the name of the edit button
if(value == 'Bewerken'){ //Only if the button's name is 'bewerken', take away the help text
$('#feedback').text('');
}
}, 5000);
}
}).fail(function() {
//If there was an error, let the user know
$('#feedback').html('<p class="opvallend">There was an error.<BR>Your changes have<BR>not been saved.<BR>Please try again.</p>');
});
}
});
And finally,
sent_data.php - Get page content from javascript,js and insert into database:
<?php
session_start();
include_once('./main.php');
include($main .'connectie.php');
//Look up which page has to be edited
$pagina=$_POST['pagina'];
//Get the name of the person who eddited the page
$editor=$_POST['editor'];
//Get content:
$tekst=$_POST['tekst'];
$tekst = mysql_real_escape_string($tekst);
$tekst = trim($tekst);
$query="UPDATE paginas SET naam_editer='" .$editor. "', inhoud='" .$tekst. "' WHERE naam_pagina='" .$pagina. "'";
}
if(mysql_query($query)){
echo "<p class='opvallend'>Successfully saves changes.</p>";
}else{
echo "<p class='opvallend'>Saving of changes failed.<BR>
Please try again.</p>";
}
?>
Extra information:
PHP version: 5.5.15
jQuery version: 1.11.1
Testing in browser: Chrome
Database: phpMyAdmin 5.5.39
The content is inserted in a VARCHAR type with space for 10000 caracters
Thanks in advance for you help!
SOLUTION
Thanks to the great help of a lot of people, and especially #avnishkgaur, it is working perfectly now. Here is what I ajusted (also changed it in my code above, so that's working code now).
1. Removed all the white spaces I had in my code between <div id='editable'> and <?php
2. Added $tekst = trim($tekst); to my PHP file to remove white spaces (didn't work)
3. Placed the editable text into another div as the code for getting the data from the database (was in the same div before)
4. Renamed the ID from the editable div to editedText. Also changed the name in the javascript file. This solution made it work perfectly (it was 'editable' before).
This was kind of an unexpected solution, so I think this could help others too.

As to why it is adding extra whitespace, I think it is because you are inserting the text from database into div directly (which contains some white space in html code, which is removed when page is rendered).
One efficient solution would be to insert your content in tag, probably like this:
<div class='big_wrapper'>
<p id='editable'></p>
</div>
Another solution is to trim the text before inserting into db. You can do that either at javascript post stage, or right before inserting in mysql db.
In jQuery, (which you are using) you can implement this :
data: 'tekst=' +$.trim(div_inhoud)+ '&pagina=' +pagina+ '&editor=' +$.trim(editor),
or in sent_data.php, you can use TRIM mysql function in your update query.

First of all, I would strongly suggest to use mysqli or PDO instead of the mysql functions in PHP, as these are deprecated. Please look into this on PHP.net.
As for your problem, I have no tried to reproduce the issue. I suggest you log and check what happens step by step, for example logging the div_inhoud var, are the spaces included at this stage already? And so on.
If you are in a hurry, you could also use the PHP function ltrim on the $tekst var in your sent_data.php, which would trim all spaces on the left side (Or any characters you would want to be trimmed from the string)

Try to add a trim() function in your send_data.php, this will help you to strip white spaces.
$tekst = trim($_POST['tekst']);

My guess is that the newlines after the <div id='editable'> and ?> and the indentation of <?php in over_ons.php is adding the extra whitespace. Specifically, a couple of extra /n's and also spaces from the indentation within the file.
You could trim the whitespace before saving it to your database, or alternatively, before the ajax call, or both.
In php, trim():
sent_data.php
$tekst = trim($tekst);
Or javascript, str.trim():
javascript.js
var div_inhoud = $("#editable").html().trim();
Also, you may want to consider using PHP Data Objects, instead of inserting variables directly into your SQL statements. It's actually really easy to use and in my opinion makes code easier to read and more reusable. There is a fantastic tutorial by Tuts+ that makes it easy to learn and get started. This will ensure you don't accidentally allow SQL injection issues into your application.

Show and Hide DIV based on users input

I have an input box for zip code entry's, when a user inputs a zip code I want to show a specific DIV.
It starts with everything hidden except for the input box and go button, then the user enters a zip code and the matching DIV shows (the DIV ID will be the zip code) There maybe hundreds of DIVs and possible inputs.
Here is what I have so far, note it starts showing everything (not what I want) but it kinda works
$(document).ready(function(){
$("#buttontest").click(function(){
if ($('#full_day').val() == 60538) {
$("#60538").show("fast"); //Slide Down Effect
$("#60504").hide("fast");
}
else {
$("#60538").hide("fast"); //Slide Up Effect
$("#60504").show("500");
}
});
$("#full_day").change(function() {
$("#60504").hide("500");
$("#60538").show("500");
});
});
LINK to working File http://jsfiddle.net/3XGGn/137/

jsFiddle Demo
Using pure numbers as id's is what was causing the issue. I would suggest you change them to
<div id="zip60538">
Welcome to Montgomery
</div>
<div id="zip60504">
<h1>Welcome to Aurora</h1>
</div>
In the html (as well as in the css and the js as can be seen in the linked fiddle)
This will allow them to be properly referenced in the DOM
edit
jsFiddle Demo
If you had a lot of these to handle, I would probably wrap the html area in a div to localize it and then use an array to store the accepted zip codes, and make use of both of those approaches in the click event
$(document).ready(function(){
var zipCodes = [60538,60504];
$("#buttontest").click(function(){
var zipIndex = zipCodes.indexOf(parseInt($("#full_day").val()));
$("#zipMessage > div").hide("fast");
$("#zip"+zipCodes[zipIndex]).show("fast");
});
});

Start off with all the div's style of display: none;. On your button click simply check that a div exists with that ID, if so, hide all others (use a common class for this) and show the right one:
$("#buttontest").click(function() {
var zip = $("#full_day").val();
if ( $("#" + zip).length ) {
$(".commonClassDiv").hide();
$("#" + zip).show();
}
});

jQuery append to element

What I want to do is, to create a button and this button is pressed, it will change the theme color on my jQuery mobile test site.
So say that my html parent div looks like this
<div id="firstPage" data-role="page">
I want it so that on click, that it appends data-theme="theme letter here"
to the div so that it ends up like this <div id="firstPage" data-role="page" data-theme="theme letter here">
OR
If I start the div like this <div id="firstPage" data-role="page" data-theme="theme letter here"> That on the buttons click, that it changes that data-theme attribute to another letter
so something for example, like this
$('#themeBtn').click(function(){
$('#firstPage').setAttribute("data-role","ANOTHER theme letter");
});
or
$('#themeBtn').click(function(){
$('#firstPage').append("data-role","a");
});
or something like this. How can I properly go about this?
Thanks in advanced.
EDIT* based on the responses, ive tried**
/////////////TESTING THEME BUTTON (check STACK OVERFLOW for answer)
$('#themeBtn').click(function(){
//$('#firstPage').jqmData("role","a");
//$('#firstPage').attr("data-theme","a");
//$('#firstPage').jqmData("theme","a");
$('#firstPage').data('theme','a');
});
To make sure that the button is firing off, i commented all those lines out and did a simple
$('#themeBtn').click(function(){
alert("foo");
});
and sure enough it fired the alert on button click so im positive its working.(the button i mean).
I added a jsFiddle so you can see it in action(of not working lol)
http://jsfiddle.net/somdow/yRmKd/1/
if you un-comment the alert, itll fire off, when you uncomment the other lines(based on responses) it doesn't update.

Just use: $('#firstPage').data('theme', 'ANOTHER theme letter');

You can do something like this to set the attribute:
$('#themeBtn').on('click', function() {
$('#firstPage').attr("data-theme", "new Theme");
});

You can use jqmData method:
$('#firstPage').jqmData('role', 'a');
docs
When working with jQuery Mobile, jqmData and jqmRemoveData should be
used in place of jQuery core's data and removeData methods (note that
this includes $.fn.data, $.fn.removeData, and the $.data,
$.removeData, and $.hasData utilities), as they automatically
incorporate getting and setting of namespaced data attributes (even if
no namespace is currently in use).

have you tried?
$('#themeBtn').click(function(){
$('#firstPage').attr("data-role","ANOTHER theme letter");
});
This should update the data-role