How to use external Java Script file for AJAX - javascript

My ajax is working with inner java script. I want to make it as external JS file. which is not working as follows.
html
<html>
<head>
<title>TODO supply a title</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="scripts.js"></script>
</head>
<body>
<div>
<input name="submit1" id="submit1" type="button" value="Load">
</div>
<div id="receive">
</div>
</body>
JS file
$(document).ready(function(){
$('#submit1').click(function(){
$.ajax({
url: "data1.php",
dataType: "JSON",
type: "POST",
success: function(retdata){
$("#receive").html(retdata.name);
}
});
}); });
PHP file
data1.php returns echo(json_encode($student_data));//works fine with inner JS

Related

Passing variable from ajax to php and it is not being passed

I want to pass a variable value to php on same page using onClick
I have been searching google for days and trying all the examples and can't get anything to work
<!doctype html>
<?php
if(isset($_POST['name']))
{
echo $YourName= $_POST['name'];
}
?>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
</script>
</head>
<body>
<script type="text/javascript">
function msg(){
var name = "JR";
$.ajax({
type: 'POST',
data: {name : name},
cache: false,
async:false,
success: function(data){
$('#results').html(data);
}
})
}
msg();
</script>
<button type="button" onClick="msg();">Click Me!</button>
</body>
</html>
should pass value to the php part of the page
Add the url in ajax of same page.
If it's in same page, after getting the response use die. otherwise you will get complete HTML code in response. and it should be on top of page.
example.php file will be like.
<?php
if(isset($_POST['name']))
{
echo $YourName= $_POST['name'];
die;
}
?>
<!-- now start html code -->
<!doctype html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
function msg(){
var name = "JR";
$.ajax({
type: 'POST',
url:'example.php', //Add the url of same page
data: {name : name},
cache: false,
async:false,
success: function(data){
$('#results').html(data);
}
})
}
</script>
<div id="results"></div>
<button type="button" onClick="msg();">Click Me!</button>
</body>
</html>

jQuery UI autocomplete doesn't work for me

I need jQuery autocomplete for a project but it doesn't work for me.
I don't know where is my mistake.
Thanks in advance !
<!DOCTYPE html>
<html>
<head>
<meta charset="iso-8859-1" />
<title>Votre titre</title>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/smoothness/jquery-ui.css" />
</head>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
<script>
var liste = [
"Draggable",
"Droppable",
"Resizable",
"Selectable",
"Sortable"
];
$('#recherche').autocomplete({
source : liste
});
</script>
<form>
<input type="text" id="recherche" />
</form>
</body>
</html>
You have multiple issues with html syntax here:
Move the script tags for jquery files to the head tag
move your script to after the body
Your script must be after the body tag or it can be placed instead of the head tag and use a document ready check to allow it to run after the page loads (see http://learn.jquery.com/using-jquery-core/document-ready/). Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.
<!DOCTYPE html>
<html>
<head>
<meta charset="iso-8859-1" />
<title>Votre titre</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
</head>
<body>
<form>
<input type="text" id="recherche" />
</form>
</body>
<script>
var liste = [
"Draggable",
"Droppable",
"Resizable",
"Selectable",
"Sortable"
];
$('#recherche').autocomplete({
source : liste
});
</script>
</html>
see a working example here https://jsfiddle.net/q7k28bp0/1/

My jquery.cookie.js report error

In my templates I include the jquery and jquery.cookie.js, but get the below error:
The below is my html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cookie-login1</title>
</head>
<body>
<form action="/cookie/login1/" method="post">
<input type="text" name="username">
<input type="text" name="pwd">
<input type="submit" value="add">
<input id="btn" type="button" value="button-add">
</form>
</body>
<script src="/static/js/jquery.cookie.js"></script>
<script src="/static/js/jquery-2.1.4.min.js"></script>
<script>
$(function(){
$("#btn").click(function(){
$.ajax({
url:'/cookie/login1/',
type:"POST",
data:{'username':'root', 'pwd':'123'},
success:function(response){
}
})
})
})
</script>
</html>
My jquery version is 2.1.4, and my jquery.cookie.js version is 1.4.0.
The html document parse order is from top to bottom , you should import the jquery first:
<script src="/static/js/jquery-2.1.4.min.js"></script>
<script src="/static/js/jquery.cookie.js"></script>
You have to import jQuery befor jquery.cookie.js.
jquery.cookie.js needs jQuery but you compiler doesn't know it to this time because you load it before jQuery.
<script src="/static/js/jquery-2.1.4.min.js"></script>
<script src="/static/js/jquery.cookie.js"></script>

External JavaScript don't work

i have a external JavaScript which don't work in my HTML File and i don't know why Firebug doesen't report any failure.
If i run the JS in my HTML it works perfect.
action.js
$( document ).ready( function(){
var ochk1 = $("input[type='checkbox'][id='oose']");
var ochk2 = $("input[type='checkbox'][id='ov']");
var ochk3 = $("input[type='checkbox'][id='op']");
ochk1.on('change', function(){
ochk2.prop('checked',this.checked);
ochk3.prop('checked',this.checked);
});
});
and my html
test.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<style type="text/css">
#import url("style.css");
</style>
<script language="javascript" type="text/javascript" src="./action.js"></script>
</head>
<body>
<div>
<div class="box">
<input type="checkbox" id="oose">
OOSE
</div>
<div class="bs">
V
<input type="checkbox" id="ov">
</div>
<div class="bs2">
P
<input type="checkbox" id="op">
</div>
</div>
</body>
</html>
You can insert jquery with the following code:
<script src="jquery_file.js" type="text/javascript"></script>
or you can download the jquery file from their homepage and reference the downloaded file in your document. Here is the link where you can download jquery: https://jquery.com/download/
You need to load the jQuery first.
<script src="your_jquery_file.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript" src="./action.js"></script>

Uncaught ReferenceError function not found

I have a onkey on a input but it won't find the function I have in my js file. I searched through some questions on here but can't find the solution for it.
My input code:
<input id="Name" type="text" name="name" class="form-control" onkeyup="autocomplet()">
<ul id="Name_list_id"></ul>
jQuery:
function autocomplet() {
var min_length = 0;
var keyword = $('#Name').val();
if (keyword.length >= min_length) {
$.ajax({
url: "search.php",
type: "POST",
data: {keyword:keyword},
success:function(data){
$('#Name_list_id').show();
$('#Name_list_id').html(data);
}
});
} else {
$('#Name_list_id').hide();
}
}
function set_item(item) {
$('#Name').val(item);
$('#Name_list_id').hide();
}
JS files of tutorial:
<script type="text/javascript" src="js/jquery.min.js">
</script> <script type="text/javascript" src="js/script.js"></script>
and on my website:
<script src="s/jquery-2.1.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/events.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/jquery-ui.min.js"></script>
Thanks!
Demo
<!DOCTYPE html>
<html>
<head>
<title>- jsFiddle demo by vilaskumkar</title>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<script src="http://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js" type="text/javascript"></script>
<script src="js/events.js" type="text/javascript"></script>
<!-- Add all you JS File in head -->
<!-- <link href="/css/result-light.css" rel="stylesheet" type="text/css"> -->
</head>
<body>
<form>
<input class="form-control" id="Name" name="name" onkeyup=
"autocomplet()" type="text">
</form>
<ul id="Name_list_id"></ul>
</body>
</html>

Categories