in www.mpoo.org/organizatori/drugi.php have 2 select list, first time work but other no. This is very similar to this.
Second time Debugger say:
TypeError: $(...) is null
drugi.php:37
var country_id = $("select#drop1 option:selected").attr('value');
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Списак организатора</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="style.css" type="text/css" />
<style type="text/css">
<!--
#import url("stil.css");
-->
</style>
</head>
<body>
<div id="body">
<div class="mhead"><h2>Списак организатора</h2></div>
<div id="dropdowns">
<div id="center" class="cascade">
<label>Одабери претрагу:
<select name="country" id = "drop1">
<option value=""> Одабери...</option>
<option value="Grad"> Град/Општина</option>
<option value="Zanimanje"> Занимање</option>
<option value="Struka"> Струка</option>
<option value="Organizator"> Организатор</option>
<option value="Svi"> Сви организатори</option>
</select>
</label>
</div>
<div class="cascade" id="state"></div>
</div>
<div id="city"> </div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("select#drop1").change(function(){
var country_id = $("select#drop1 option:selected").attr('value');
// alert(country_id);
$("#state").html( "" );
$("#city").html( "" );
if (country_id.length > 0 ) {
if (country_id=='Svi'){
$.ajax({
type: "POST",
url: "drugi4.php",
data: "country_id="+country_id,
cache: false,
beforeSend: function () {
$('#state').html('<img src="loader.gif" alt="" width="24" height="24">');
},
success: function(html) {
$("#state").html( html );
}
});
}
else {
$.ajax({
type: "POST",
url: "drugi2.php",
data: "country_id="+country_id,
cache: false,
beforeSend: function () {
$('#state').html('<img src="loader.gif" alt="" width="24" height="24">');
},
success: function(html) {
$("#state").html( html );
}
});
}
}
});
});
</script>
</body>
</html>
This is drugi2.php
<?php
include("connection.php");
//var_dump($_POST);
$state_id = trim(mysqli_escape_string($con, $_POST["country_id"]));
$sql="SELECT DISTINCT $state_id FROM jom_x1_organizatori ORDER BY $state_id";
$count = mysqli_num_rows( mysqli_query($con, $sql) );
if ($count > 0 ) {
mysqli_set_charset($con, "utf8");
$query = mysqli_query($con, $sql);
?>
<label>
<select name="city" id = "drop2">
<option value="">Одабери...</option>
<?php while ($rs = mysqli_fetch_array($query, MYSQLI_ASSOC)) { ?>
<option value="<?php echo $rs[$state_id]; ?>"><?php echo $rs[$state_id]; ?></option>
<?php } ?>
</select>
</label>
<?php
}
?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("select#drop2").change(function(){
var state_id = $("select#drop2 option:selected").attr('value')+";"+$("select#drop1 option:selected").attr('value');
// alert(state_id);
if (state_id.length > 0 ) {
$.ajax({
type: "POST",
url: "drugi3.php",
data: "state_id="+state_id,
cache: false,
beforeSend: function () {
$('#city').html('<img src="loader.gif" alt="" width="24" height="24">');
},
success: function(html) {
$("#city").html( html );
}
});
} else {
$("#city").html( "" );
}
});
});
</script>
I think after ajax loading its removing the selected option, therefore you should use:
var country_id = $("#drop1").val();
instead of
var country_id = $("select#drop1 option:selected").attr('value');
Related
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Language" content="en-us">
<title>PHP MySQL Typeahead Autocomplete</title>
<meta charset="utf-8">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<script type="text/javascript">
$(function() {
/*$( "#skills" ).autocomplete({
source: 'singleton.php'
});*/
$("#skills").keyup(function(){
$.ajax({
type: 'post',
url: 'singleton.php/',
data: 'term='+$(this).val(),
success: function(success){
$("#suggesstion-box").html(data);
},
error: function(error){
console.log("error");
}
})
})
});
</script>
</script>
<?php
/*include_once('connection.php');
$conn = new Database();*/
$hostname = "localhost";
$username = "root";
$password = "";
$databasae = "employee";
if(isset($_POST['term'])){
$query = $_POST['term'];
$db = new mysqli($hostname,$username,$password,$databasae);
//get search term
$searchTerm = $_POST['term'];
//get matched data from skills table
$query = $db->query("SELECT * FROM city WHERE name LIKE '%".$searchTerm."%' ORDER BY name ASC");
while ($row = $query->fetch_assoc()) {
$data[] = $row['name'];
}
//return json data
echo json_encode($data);
}
?>
<div class="ui-widget">
Enter City Name:
<input type="text" name="city" class="city" id="skills" placeholder="Enter City Name" id="city">
<div id="suggesstion-box"></div>
</div>
</body>
</html>
I'm getting correct value in the network but it does not populating data in suggestion-box div.
I can't figure out where i'm mistaking.
Is it possible that you accidentally replaced 'data' with 'success' in the 'success' callback?
$("#skills").keyup(function(){
$.ajax({
type: 'post',
url: 'singleton.php/',
data: 'term='+$(this).val(),
success: function(success){
$("#suggesstion-box").html(data);
},
error: function(error){
console.log("error");
}
})
})
Should't it be
success: function(data) {
$("#suggesstion-box").html(data);
}
?
I have a document with two pages. The first one sends a folder name via form submit
<form method="post" >
<input type="hidden" name="portfolio" value="directory">
<input type="submit" value="author">
</form>
the second one receives this folder name and open the files with glob function
<?php
header('Content-Type: application/json');
$directoryName = $_POST['portfolio'];
echo json_encode (glob($directoryName."/".'*.{jpg,mp4}', GLOB_BRACE));
?>
...finally images appear on the first page again via Ajax
$(document).ready(function(){
$('form').submit(function(e) {
var data = $(this).serialize();
e.preventDefault();
$.ajax({
url: "PAGE2.php",
data: data,
type: "POST",
dataType: "json",
success: function(response) {
var html = "";
$.each(response, function(i, val) {
var fileExtension = val.substring(val.lastIndexOf('.'));
if (fileExtension == ".jpg") {
html += '<img src="'+val+'" height=250></img>';
}
else if (fileExtension == ".mp4") {
html += '<video width="320" height="240" src="'+val+'" type="video/mp4"controls autoplay loop></video>';
}
});
$("#display").html(html);
}
});
});
});
up to here no href tags...
I need to know how to display images like modal gallery with colorbox plugin.
I've tried this without success
$(document).ready(function(){
$('form').submit(function(e) {
var data = $(this).serialize();
e.preventDefault();
$.ajax({
url: "PAGE2.php",
data: data,
type: "POST",
dataType: "json",
success: function(response) {
var html = "";
$.each(response, function(i, val) {
var fileExtension = val.substring(val.lastIndexOf('.'));
if (fileExtension == ".jpg") {
html += '<img src="'+val+'" height=250></img>';
}
else if (fileExtension == ".mp4") {
html += '<video width="320" height="240" src="'+val+'" type="video/mp4"controls autoplay loop></video>';
}
});
$("#display").html(html);
$("#link").colorbox({ inline:true, href: "#display"});
}
});
});
});
<body>
...
<div id="display" style="display:none;"></div>
<a id="link" style="display:none"></a>
</body>
PAGE1.php
<!DOCTYPE HTML>
<html lang="">
<head>
<meta charset="UTF-8">
<title>page1</title>
<link rel="stylesheet" href="colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="../jquery.colorbox.js"></script>
<script>
$(function() {
$("#formID").submit(function() {
$.post($(this).attr("action"), $(this).serialize(), function(data) {
$.colorbox({
html:data,
rel:'group1'
});
},
'html');
return false;
});
});
</script>
</head>
<body>
<div class="container">
<form action="page2.php" method="post" id="formID">
<input type="hidden" name="var" value="directory">
<input type="submit" value="author">
</form>
</div>
</body>
</html>
PAGE2.php
<!DOCTYPE HTML>
<html lang="">
<head>
<meta charset="UTF-8">
<title>page2</title>
</head>
<body>
<?php
$variable = $_POST['var'];
$img_dir = $variable . "/";
foreach(glob($img_dir . '*.jpg') as $image) {
echo '<img src="'.$image.'">'.'<img class="group">';
}
?>
</body>
</html>
Here is my code of html, ajax and php. The value returned by selected is to be passed in php
I want to use these four selected value (bank, state, district and city) in text form (bank_name, state_name, district_name, city_name) in my php file to show the data based on these value. If I use $bank=$_POST['bank[1]']; it gives the bank_id and so on, not the bank_name which was selected
<?php
include_once 'dbconfig.php';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dynamic Dependent Select Box using jQuery and PHP</title>
<script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="../js/jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".state").change(function()
{
var id=$(this).val();
var dataString = 'id='+ id;
$.ajax
({
type: "POST",
url: "get_district.php",
data: dataString,
cache: false,
success: function(html)
{
$(".district").html(html);
}
});
});
$(".state").change(function()
{
var id=$(this).val();
var dataString = 'id='+ id;
$.ajax
({
type: "POST",
url: "get_city.php",
data: dataString,
cache: false,
success: function(html)
{
$(".city").html(html);
}
});
});
});
</script>
<style>
label
{
font-weight:bold;
padding:10px;
}
div
{
margin-top:100px;
}
select
{
width:200px;
height:35px;
}
</style>
</head>
<form name="frm_ifsc" method="post" action="show_ifsc.php">
<body>
<center>
<div>
<label>Bank:</label>
<select name="bank" class="bank">
<option selected="selected">--Select Bank--</option>
<?php
$stmt = $DB_con->prepare("SELECT * FROM tbl_banks");
$stmt->execute();
while($row=$stmt->fetch(PDO::FETCH_ASSOC))
{
?>
<option value="<?php echo $row['bank_id']; ?>"><?php echo $row['bank_name']; ?></option>
<?php
}
?>
</select>
<br>
<br>
<label>State:</label>
<select name="state" class="state">
<option selected="selected">--Select State--</option>
<?php
$stmt = $DB_con->prepare("SELECT * FROM tbl_state");
$stmt->execute();
while($row=$stmt->fetch(PDO::FETCH_ASSOC))
{
?>
<option value="<?php echo $row['state_id']; ?>"><?php echo $row['state_name']; ?></option>
<?php
}
?>
</select>
<br>
<br>
<label>District:</label> <select name="district" class="district">
<option selected="selected">--Select District--</option>
</select>
<br>
<br>
<label>City:</label> <select name="city" class="city">
<option selected="selected">--Select City--</option>
</select>
<br>
</div>
<br />
<br>
<input type="submit" name="submit" value="Search" class="btnRegister">
</center>
</form>
</body>
</html>
You can fix this a number of ways. I think the two easiest are:
Modify JavaScript to get option text:
var id = $( this ).html();
var dataString = "id=" + id;
Modify select HTML:
<option value="<?php echo $row['bank_name']; ?>"><?php echo $row['bank_name']; ?></option>
Good luck!
I'm doing a autocomplete but when I write anything in the Input me appear all elements, I want items that contain the typed characters in the Input.
My code is:
var searchRequest = null;
$("#buscar").autocomplete({
maxLength: 5,
source: function (request, response) {
if (searchRequest !== null) {
searchRequest.abort();
}
searchRequest = $.ajax({
url: 'search.php',
method: 'post',
dataType: "json",
success: function (data) {
searchRequest = null;
response($.map(data.items, function (item) {
return {
value: item.name1,
label: item.name1
};
}));
}
}).fail(function () {
searchRequest = null;
});
}
});
Try this:
source: function(request, response) {
response($.map(data.items, function(item) {
var term = request.term.toLowerCase(),
name = item.name.toLowerCase();
if (name.search(term) == 0 || item.code.indexOf(term.toUpperCase()) == 0) {
return {
label: item.name,
value: item.name
};
}
}).slice(0, 15)
);
},
try this code*
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script>
$(document).ready(function () {
$("#txtSearch").autocomplete({
source: function(request,response) {
$.ajax({
url: "results.php",
type: "POST",
dataType: "json",
data: { term: request.term },
success: function (data) {
response($.map(data, function (item) {
return { value:item.name, district:item.district , id: item.id
};
}))
}
})
},focus: function (event, ui) {
$("#txthid").val(ui.item.id);
$("#txtid").val(ui.item.district);
elements.autocompleteSearch.val(ui.item.name);
return false;
},
messages: {noResults: "", results: ""}
});
})
</script>
</head>
<body>
<form id="form1" runat="server" >
<div class="demo">
<div class="ui-widget">
<label for="txtSearch">Enter UserName: </label>
<input type="search" id="txtSearch" />
<label for="txtid">ID is: </label>
<input type="id" id="txtid" />
</div>
</form>
<form action="file2.html" method="LINK">
<input type="hidden" id="txthid" name="id">
<input type="submit" value="Home page" >
</form>
</body>
</html>
I am using jquery auto complete to get current data from database in php. But, I am not getting result.
Here is the code sample:
<label class="col-md-4">Referrer</label>
<div class="col-md-6">
<input type="text" name="referrer" id='referrer' placeholder="Type keyword..." autocomplete="off" value="" class="form-control" />
</div>
<script>
var path = $( "#referrer" ).data('path');
$("#referrer").autocomplete({
source: function(request, response) {
$.ajax({
url: "/ajax/ir_populate_referrer",
dataType: "json",
type: "POST",
data: {
keyword: request.term,
path: path
},
success: function(data) {
response($.map(data, function(item) {
return {
label: item.label
}
}));
}
})
}
});
</script>
As in my search.php file:
<?php
echo json_encode(array('label'=> $link, 'value' => $keyword));
?>
html
<html>
<head>
<title>test jquery autocomplete</title>
<script type="text/javascript" src="jquery/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery/js/jquery-ui-1.8.2.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#zipsearch").autocomplete({
source: function(req,res) {
$.ajax({
url: "json.php",
dataType: "json",
type: "GET",
data: {
term: req.term
},
success: function(data) {
res($.map(data, function(item) {
return {
label: item.label,
value: item.value
};
}));
},
error: function(xhr) {
alert(xhr.status + ' : ' + xhr.statusText);
}
});
}
});
});
</script>
<link rel="stylesheet" href="jquery/css/smoothness/jquery-ui-1.8.2.custom.css" />
<style type="text/css">
</style>
</head>
<body>
<form onsubmit="return false;">
Ejemplo<br/>
Enter a Zipcode:
<input id="zipsearch" type="text" />
</form>
</body>
</html>
PHP
<?php
$response = array();
$response[0]=array('label'=>'test','value'=>'test');
$response[1]=array('label'=>'test2','value'=>'test2');
echo json_encode($response);
?>