Ajax live search no output - javascript

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.

Related

Loading jQuery and own JS

I've looked for some time on the internet to get the right awnser for my problem and asked some colleagues... I'm still at the same problem.
As follows:
(I'm new at using JS and jQuery)
I wanna load my own JS into my HTML (written in PHP).
<script src="standaard.js"></script>
and
<script src="test.js"></script>
standaard.js contains all of this: https://code.jquery.com/jquery-3.2.1.min.js
test.js
$(document).ready(function(){
$("button").click(function(){
$("p").fadeOut("slow");
});
});
and the <button> it refers to is in a PHP file:
<button id="button"> CLICK HERE!</button>
Now when I just load standaard.js and copy the contents of test.js in the PHP file between <script></script>, it works just as it should.
But when I load it from different files, it doesn't and when I inspect the page in Firefox console it gives me this:
SyntaxError: expected expression, got '}'
[More Info]
test.js:4:10
I hope someone could help me with this and that I didn't make a newbie mistake :)
Note: I suspect that it has something to do with time that both scripts need to load and that test.js goes first... but then again, I don't get the error that pops up.
EDIT:
Here is the trimmed PHP file:
<?php
echo '<!doctype html>
<html>
<head>
<title>Opdracht 4!</title>
<meta name="author" content="Danny">
<link rel = "stylesheet" href = "basis.css">
</head>
<body>
<h3>Naam</h3>
<p> Danny </p><br>
<h3>Geboortedatum</h3>
<p>a date</p><br>
<h3>Woonplaats</h3>
<p>A City</p>
<br><br><br>
<div class="footer">
<footer>
&#169 2017, Danny
</footer>
</div>
<script src="standaard.js"> </script>
<script src="test.js"></script>
</body>
</html>';
?>
right before the ending </body> tag, put your two scripts in this order:
<script id="jquery" src="standaard.js"></script>
and
<script src="test.js"></script>
You can remove id="jquery". That is not serving any purpose. You should probably just rename the file to be jquery.min.js. This is not causing you any real issue, but it makes more sense naming-wise.
in the test.js file, you can put your script:
$(document).ready(function(){
$("button").click(function(){
$("p").fadeOut("slow");
});
});
After many tries I've found the solution!
It seems quit simple and not very logic but i replaced all " to ' and it worked!?
like this:
$(document).ready(function(){
$('button').click(function(){
$('p').fadeOut('slow');
});
});
Thank you all for your response, with your help I knew what things to cross off that coulndn't be it.

AJAX Live Search, drop down search results based off input

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.

Navigation bar in html5

I have a quick question. I'm wondering if it is possible to have a external html file with my navigation bar in it and have that be put in to all of my pages for my website. If so how do I do this? I have tried using these methods:
<script rel="import" src="navigation-bar.html"></script>
$("#nav-bar").load("navigation-bar.html")
but so far neither of them have worked... Do I have to use PHP and if I do how do I implement this.
please help.
I would use PHP to do this.
Here is the structure of how it would work.
<html>
<head>
<?php require('/directory/to/your/header.php'); ?>
</head>
<body>
...Your Content Here
</body>
</html>
In a separate header.php file you would include your navbar.
Header.php
<?php
echo '...enter your Navbar HTML code';
?>
Your file will have to have the extension .php and every time you write in php, you must start and end with
<?php
...enter your php code...
?>
You can mix php with html simply by writing the php into the HTML. Take for example the following href:
Your link Name
For more information please refer to :
http://php.net/manual/en/
put:
include("navigation-bar.html")
on top of your code.
This way you won't have to write the same navigation code in each webpage that you are going to host.
OR
you can try
<!DOCTYPE html>
<html>
<script src="http://www.w3schools.com/lib/w3data.js"></script>
<body>
<div w3-include-html="h1.html"></div>
<div w3-include-html="content.html"></div>
<script>
w3IncludeHTML();
</script>
</body>
</html>
Read more at: http://www.w3schools.com/howto/howto_html_include.asp
This is probably the simplest solution that should work even in user agents without scripting support.
For example, your page will look like this:
<html>
<body>
<iframe src="navbar.html" class="navbar" />
</body>
</html>

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