I'm trying to realize an input field which shows suggestions while typing. I've found the jquery autocomplete function, but I'm struggling with XML as data source coming from php. My php file creates an output like this.
XML:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<locations>
<location>
<number>600</number>
<name>Location Name 600</name>
</location>
<location>
<number>698</number>
<name>Location Name 698</name>
</location>
<location>
<number>1110</number>
<name>Location Name 1110</name>
</location>
</locations>
I've tried it with the link posted by Rory McCrossan.
My HTML now looks like this:
<!DOCTYPE HTML>
<head>
<title>Autocomplete</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.20.custom.min.js"></script>
<script type="text/javascript">
$(function() {
function log( message ) {
$( "<div/>" ).text( message ).prependTo( "#output" );
$( "#output" ).scrollTop( 0 );
}
$.ajax({
url: "api.php",
dataType: "xml",
success: function(xmlResponse) {
var data = $("location", xmlResponse).map(function() {
return {
name: $("name", this).text(),
number: $("number", this).text()
};
}).get();
$("#locations").autocomplete({
source: data,
minLength: 0,
select: function( event, ui ) {
log( ui.item ?
"Selected: " + ui.item.name + ", number: " + ui.item.number :
"Nothing selected, input was " + this.value );
}
});
}
});
});
</script>
</head>
<body style="background-color: black; color: white;">
<input id="locations" />
<div class="ui-widget" style="margin-top:2em; font-family:Arial">
Result:
<div id="output" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>
</body>
</html>
When I write something into the input field, and then clear it, it shows me 3 li's below the input field (which is the amount of locations I have, according to the xml), but there's no text being display next to them. What's going wrong?
To use XML with autoComplete, see the example here: http://jqueryui.com/demos/autocomplete/xml.html
Ok, found a solution for myself (decided to create JSON output). Rory McCrossan's example was nice, but from what I could see, it just loaded the xml once, and then searched within the xml. What I wanted was prefiltered output, so it wouldn't transfer too much data.
$(function() {
$("#locations").autocomplete({
source: function(request, response) {
$.ajax({
url: "api.php",
dataType: "jsonp",
data: {
location: request.term
},
success: function(data) {
response($.map(data.locations, function(item) {
return {
label: item.name,
value: item.nummer
}
}));
}
});
},
minLength: 0,
select: function(event, ui) {
$("<div/>").text(ui.item.label + " " + ui.item.value).prependTo("#output");
}
})
})
Related
Hi I have multiple Bootsyrap modals created dynamically with php , these modal opened itself if requirements meets, I want to open one after another closed , and problem is not sure all three modals will meet requirements , some time we have 2 , some time one so I can not use modal close event as well
// 1st modal
<?php if(count($getNewBadges) >0 ) { ?>
<script>
$(document).ready(function() {
$("#EarnBadgeModal").modal('show');
$.ajax({
type: "POST",
url: "<?php echo SITE_URL; ?>/engagement/award/ajax/award_ajax.php",
data: { action:'set_badge_popup' },
success: function(response){
$("#EarnBadgeModal").modal('hide');
}
});
});
</script>
<?php } ?>
// 2nd modal
<?php if(count($getNewContest) >0) { ?>
<script>
$(document).ready(function() {
$("#ContestUserModal").modal('show');
$('#ContestUserModal').css('z-index', 1040);
$.ajax({
type: "POST",
url: "<?php echo SITE_URL; ?>/engagement/leaderboard/ajax/leaderboard_ajax.php",
data: { action:'set_contest_read' },
success: function(response){
}
});
});
</script>
<?php } ?>
// 3rd modal
if(count($getPoints) >0)
{
?>
<script>
$(document).ready(function() {
$("#pointsUserModal<?php echo $mv; ?>").modal('show');
$('#pointsUserModal').css('z-index', 1049);
});
</script>
<?php
}
I have tried many things like below , but nothing worked
<style type="text/css">
.modal-backdrop + .modal-backdrop {
z-index: 1051;
}
.modal-backdrop + .modal-backdrop + .modal-backdrop {
z-index: 1051;
}
</style>
// another
<style type="text/css">
.modal-backdrop:nth-child(2n-1) {
opacity : 0;
}
</style>
Thanks Any help is appreciated
I did like this as #Cbroe advised and its working fine now , added a class on bootstrap close button .closeModal
<script type="text/javascript">
$( document ).ready(function() {
for (i = 0; i < 1; i++) {
$(modalArr[0]).modal('show');
modalArr.shift();
}
});
$(".closeModal").on('click', function()
{
for (i = 0; i < 1; i++) {
$(modalArr[0]).modal('show');
modalArr.shift();
}
});
console.log(modalArr);
</script>
I've got some HTML with this image and this data-id.
<img id="test" src="image1.png" data-id="12345" />
I would like to change image1.png for image2.png, or change image2.png for image1.png when the image is clicked.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$("#test").click(function () { var $id = $(this).attr('data-id') });
$.ajax({
url:"test.php",
type: "POST",
data: { id = $id },
success:function(){ }
});
});
</script>
And here is my test.php script.
<?php echo $dataid; ?>
I meet some difficulties with Ajax and JQuery because I'm not used to it...
store the image in a div. whenever click on image retrieve the id and pass to test.php via ajax and echo the response inside the div
mainpage
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#toggle").on('click', '#test', function()
{
var $id = $(this).attr('data-id');
$.ajax({
type: "POST",
url: "test.php",
data: { id: $id },
success: function(theResponse) {
$('#toggle').html(theResponse);
}
});
});
});
</script>
<div id="toggle">
<img id="test" src="image1.png" data-id="12345" />
</div>
test.php
<?php
# Get Id here
$id = isset($_POST['id']) ? $_POST['id'] : '';
# for testing; remove this
echo $id;
# change here date-id and src; if it is dynamic do the database select and display image
echo '<img id="test" src="image2.png" data-id="54321" />';
?>
i need to get data from mysql DB and put it to a json array and use the json array for textbox auto complete. i can do this with separate php for load the data from db and use it in the ajax.. but i am trying to do this with one php file.. is this possible.. how to do this.
<script>
$(document).on('keyup','.jornal', function(){
var thisRow = $(this).data('value');
if(event.which != 13){
//itemSearchDisables(thisRow);
}
autoTypeNo2=1 ;
autoTypeNo1=0 ;
$(this).autocomplete({
source: function( request, response ) {
$.ajax({
url : 'AJAX_Requst/bill_itemDetail.php',
dataType: "json",
method: 'post',
data: {
ID: request.term
},
success: function( data ) {
response( $.map( data, function( item ) {
var code = item.split("|");
if(code[0] == 'Login Please'){
//window.location = '../login.php';
}
return {
label: code[autoTypeNo2] + ' | '+ code[3],
value: code[autoTypeNo1],
data : item
}
}));
}
});
},
autoFocus: true,
minLength: 0,
select: function( event, ui ) {
var names = ui.item.data.split("|");
id_arr = $(this).attr('id');
id = id_arr.split("_");
//itemSearchEnables(thisRow);
$('#itemNo_'+id[1]).val(names[0]);
$('#itemName_'+id[1]).text(names[1]);
}
});
});
</script>
This is what i am done up to now to load data..and it is working fine
If my understanding is correct, create the json array in the same php file and pass that array to the javascript function.. It would be some thing like below
<script>
$(function() {
var availableTags = [<?php $jsonArray ?>];
$( "#tags" ).autocomplete({
source: availableTags
});
});
</script>
in that case try using this
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Custom data and display</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#project-label {
display: block;
font-weight: bold;
margin-bottom: 1em;
}
#project-icon {
float: left;
height: 32px;
width: 32px;
}
#project-description {
margin: 0;
padding: 0;
}
</style>
<script>
$(function() {
var projects = [
{
value: "jquery",
label: "jQuery",
desc: "the write less, do more, JavaScript library",
icon: "jquery_32x32.png"
},
{
value: "jquery-ui",
label: "jQuery UI",
desc: "the official user interface library for jQuery",
icon: "jqueryui_32x32.png"
},
{
value: "sizzlejs",
label: "Sizzle JS",
desc: "a pure-JavaScript CSS selector engine",
icon: "sizzlejs_32x32.png"
}
];
$( "#project" ).autocomplete({
minLength: 0,
source: projects,
focus: function( event, ui ) {
$( "#project" ).val( ui.item.label );
return false;
},
select: function( event, ui ) {
$( "#project" ).val( ui.item.label );
$( "#project-id" ).val( ui.item.value );
$( "#project-description" ).html( ui.item.desc );
$( "#project-icon" ).attr( "src", "images/" + ui.item.icon );
return false;
}
})
.autocomplete( "instance" )._renderItem = function( ul, item ) {
return $( "<li>" )
.append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
.appendTo( ul );
};
});
</script>
</head>
<body>
<div id="project-label">Select a project (type "j" for a start):</div>
<img id="project-icon" src="images/transparent_1x1.png" class="ui-state-default" alt="">
<input id="project">
<input type="hidden" id="project-id">
<p id="project-description"></p>
</body>
</html>
I think it is possible from my point of view. This way you don't have to post ajax form in autocomplete function too.
First you retrieve the data from MySQL database as usual.
Next, you store those data in the javascript var.
Last, you can use the var for textbox autocomplete.
I tried to use the example given in highcharts website. But when i use it all i am getting is a blank html page. Someone please help me with the code. I do not understand why the code is not loading properly please tell me if i should add something extra to this, and please do let me know how to use a php array to make this graph work also
<html>
<head>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script>
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Browser market shares at a specific website, 2010'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage}%</b>',
percentageDecimals: 1
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
}
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
});
});
});
</script>
</head>
<body>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
I believe your problem is in the order you included the scripts. Try placing jQuery first:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
Demo (working / not working).
Update: to load your data from MySQL using PHP, please see this example. However, as you pointed out yourself, encoding it using JSON might be a better option:
$data = array();
while($row = mysql_fetch_array($results)) {
$data[] = array($row[1], $row[0]);
}
echo json_encode($data);
This last echo can be used either to return the whole array using ajax (like the linked example above), or when generating the page itself (i.e. "hardcoding" it in the script):
series: [{
type: 'pie',
name: 'Browser share',
data: <?php echo json_encode($data)?>
}]
This will work since your array, when JSON encoded, can be used in place of a JavaScript literal (and the json_encode should take care of escaping everything, preventing XSS vulnerabilities).
The order of including javascripts should be:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
By this I mean, you have to include the jQuery library first before any other script.
I have made this script that get's the month and the year from calendar.php and I would like when I click the link previous month to get the previous month but also when month number reach 1 make the year - 1. How can I do something like that?
<html>
<head></head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script>
$(function() {
get_data();
});
function get_data(a, b) {
$.get('calendar.php', {
month: a, year: b
},
function(response) {
$el = $('<div></div>').attr('class', 'data').html(response);
$('#datas').prepend($el);
height = $el.height()+'px';
$el.css({'opacity': 0, 'display': 'block', 'height': '0px'}).animate({height: height }, 500, function() {
$(this).animate({opacity: 1}, 500);
})
});
}
</script>
<style>
#datas {
overflow: hidden;
}
.data {
display: none;
}
</style>
<body>
<a href="#" OnClick="get_data(9, 2012);" > Previous month</a>
<div id="datas">
</div>
</body>
</html>
I think you should use jQuery.ajax
$.ajax({
url: 'calendar.php',
success: function(data) {
// Parse your data and do all neccessery refreshing
}
});
in order get yerstaday you can use
var d = new Date(/* data that you get from calendar.php*/);
d.setDate(d.getDate() - 1);