AJAX Live Search, drop down search results based off input - javascript

I am trying to implement a AJAX live search however am having a problem linking the pages, I have spent a good 2 hours playing around and haven't come up with a solution.
I have a index.php page which has the page structure and simple form :
<!DOCTYPE HTML>
<html>
<head>
<title>test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<input id='search' type="text">
<div id='result'></div>
<script>
$("#search").on("input", function() {
$search = $("#search").val();
if ($search.length > 0) {
$.get("res.php", {"search":$search}, function($data){
$("#results").html($data);
})
}
});
</script>
</body>
</html>
Here is my res.php page :
<?php
print_r($_GET);
?>
As far as I am aware this should be outputting the input of the search field just below it. Something I am not seeing, I am pretty sure there is no errors in the code.

Related

Ajax live search no output

Hello I am a beginner in php and jQuery so an early sorry if my question is stupid. I have been searching quite a lot on ajax live search but there is not much help on internet... So when I type something in my input box nothing comes out, so I thought it was a problem to connect to the database but that works fine. And now I don't really know what to do because my code sounds right (even though it's not :-) ). If someone could help me it would be great thank you.
Here are the codes:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>live search test</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script scr="jquery.js"></script>
<script type="text/javascript">
functon getNames(value) {
$.post("fetch.php",{partialName:value},function(data)
$("#results").html(data);
});
}
</script>
</head>
<body>
<h1>LIVE SEARCH WITH AJAX TEST</h1>
<input type="text" onkeyup="getNames(this.value)">
<br>
<div id="results">
</div>
</body>
</html>
PHP:
<?php
mysql_connect("localhost","root","") or die(mysql_error());
mysql_select_db("smartphone")or die(mysql_error());
$partialName = $_POST['partialName'];
$names = mysql_query("SELECT name FROM smartphone WHERE name LIKE '%$partialName%'");
while ($name = mysql_fetch_array($names)) {
echo"<div>".$name['name']."</div>";
}
?>
I think if you check your browser console tool, you will see '$ is undefined'.
Unless it was for this example, the following is incorrect:
<script scr="jquery.js"></script>
It should be:
<script src="jquery.js"></script>
Please also switch your insecure SQL query to the secure PDO bound parameters style, to avoid being exploited.

How can I use Javascript to handle form data & display a separate results page?

I am re-writing a large web form that is written using Perl Dancer and Template Toolkit to handle the submitted form data and display a results page. I would like to abandon Template Toolkit and Dancer in favor of a Javascript-only solution. How can I write the form to pass all of the data to Javascript and have it display the data on a nice formatted results page?
I'm unsure of what kind of data you have that could be entered in your form, so I don't have any specific help with how you could present that data in a nicely formatted way.
On the topic of passing data from a form to javascript (or jquery, since that was in your tag) here is an example of how you could accomplish this.
Let's say you have a simple form in HTML laid out something like this.
<form id="form">
<input type="text" id="input">
</form>
You can catch the submission event of this form in javascript, prevent what it would normally do, take the data from it's input fields and do something specific with them. Here's an example.
// On DOM loaded
$(document).ready(function () {
// Catch the submit event of the form
$('#form').submit(function (e) {
// Prevent default form submit event
e.preventDefault();
// Access some input field data
var input = $('#input').val();
});
});
I would be happy to point you in a more specific direction on how you could format and present your data in a nicely formatted way if you would like to provide some more information as to what data you would be passing from your form.
I figured it out! I will use HTML5 sessionStorage. Here is the code:
form html:
<html lang="en">
<head>
<meta charset="utf-8">
<title>Form test</title>
</head>
<body>
<form id='form' action="result.html" rel="external">
<input name='day' id='day' type='text'><input type='submit' id='completed' value='Completed!'>
</form>
<!-- SCRIPTS -->
<script src="jquery.js"></script>
<script src="main.js"></script>
</body>
Here is the main.js:
function saveData() {
var submit = document.getElementById('completed');
submit.onclick = function() {
sessionStorage.setItem('day', document.getElementById('day').value);
};
}
window.onload = function() {
saveData();
};
Here is the result html:
<html lang="en">
<head>
<meta charset="utf-8">
<title>Result</title>
</head>
<body>
<div id="stuff"></div>
<!-- SCRIPTS -->
<script src="jquery.js"></script>
<script src="result.js"></script>
</body>
</html>
Here is the result.js:
function displayData() {
var div = document.getElementById('stuff');
div.innerHTML = "<p>" + sessionStorage.getItem('day') + "</p>";
}
window.onload = function() {
displayData();
};

Can't replace submit button with JQuery

I'm trying to do my first tests usign JQuery and it seems to be more difficult than what I expected.
I have a simple form calling some long operations. What I want is to display a progress bar during the loading. What I try to do in the following code is to replace the submit button with a progress bar when the user submits the form. The next page taking time to load, he will see a nice animation making him wait.
<html>
<head>
<title>Test form</title>
</head>
<body>
<form id="myCuteLittleForm"><input type="submit" id="submit"/></form>
<br />
<script src="http://code.jquery.com/jquery-1.9.1.js">
$(document).ready(function() {
$('#myCuteLittleForm').submit(function() {
$("#submit").replaceWith('<progress value="" max="">Import en cours.</progress>');
});
});
</script>
</body>
</html>
However, to my great distress, it doesn't work. Am I just doing bad jquery or is there a fundamental incomprehension ?
Do it in other script tag:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#myCuteLittleForm').submit(function() {
$("#submit").replaceWith('<progress value="" max="">Import en cours.</progress>');
});
};
</script>

How to create a temporarily text box

i'm making a website where the background will be a large photo (interior design company) so the picture is very important. That's why i've been trying to make a temporarily text box so that people that come on the homepage will see a temporarily welcome message or such but i don't really know how to start or what language I should use in order to this.
I hope anyone can help me to get started. Or where/what i need to search
Thanks in advance
Simple using the alert method.Example:
<html>
<head>
<script type="text/javascript">
function display_alert()
{
alert("Welcome to the site!");
}
display_alert();
</script>
</head>
<body>
</body>
</html>
Or using jquery's hide method.
Example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("input").click(function() {
$(this).hide();
});
});
</script>
</head>
<body>
<input value="Welcome to the Site!">
</body>
</html>

Display FCKeditor input data in HTML format on same page, as user types?

I am currently playing around with the FCKEditor, and I am trying to replicate how stack overflow shows exactly how your post will look in HTML as you type it up. My FCKEditor creates just fine, I just don't know how to go about accessing the editor data once it is created. What I want to do is get the html from the editor and then put it into the <p id="inputText"></p>. Trying to access it with jQuery using $("#fckEdtr") doesn't work, which I expect is because it's created on the fly with javascript. I am aware of the IsDirty() method in the FCKeditor JavaScript API, I just haven't seen any solid examples of how to get the current instance of the editor and use the method. Can anyone help? My code is below:
<html>
<head>
<title>FCKeditor Test</title>
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
...code to output editor data as user types
});
</script>
</head>
<body>
<form>
<script type="text/javascript">
var oFCKeditor = new FCKeditor('fckEdtr');
oFCKeditor.BasePath = "./fckeditor/";
oFCKeditor.ToolbarSet = 'Default';
oFCKeditor.Create();
</script><br/><br/>
<input type="submit" value="Post" />
<p id="inputText">
</p>
</form>
</body>
</html>
I just found the answer to this in another question on SO:
How can I enable live preview for FCKeditor in an ASP.Net site?
Also, when I use a div element instead of a paragraph element, it works. Here's my final working code for anyone it might help:
<html>
<head>
<title>FCKeditor - Sample</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
<script type="text/javascript">
function FCKeditor_OnComplete( oFCKeditor )
{
oFCKeditor.Events.AttachEvent( 'OnSelectionChange', function() {
document.getElementById("postText").innerHTML =
oFCKeditor.GetHTML(true);
}) ;
}
</script>
</head>
<body>
<form method="post" action="process.php">
<script type="text/javascript">
var oFCKeditor = new FCKeditor('fckEdtr');
oFCKeditor.BasePath = "./fckeditor/";
oFCKeditor.ToolbarSet = 'Custom' ;
oFCKeditor.Create();
</script><br/><br/>
<input type="submit" value="Post" />
<div id="postText">
</div>
</form>
</body>
</html>
It's good that you found the answer already, but I wonder why do you need preview window when you are dealing with WYSIWYG editor. My guess is that the look you are getting in the editor is different from the resulting look because of CSS applied to the latter. If I am wrong, disregard the advice that follows.
If that is the case, you may think of copying the most relevant parts of your CSS to \fckeditor\editor\css\fck_editorarea.css so that they are applied in the editor window. Of course, sometimes you do want the difference. For example, spoilers should be hidden when posted but visible in the editor.

Categories

Resources