Mam problem, otóż chcę uruchomić skrypt autocomplete w moim projekcie, mianowicie mam stronę pod adresem:
http://womag.nazwa.pl/problem/kiedy wchodzę do Zgłoszenia->dodaj
ładuję plik
http://womag.nazwa.pl/problem/strona.php?act=dodajnowenie działa, słyszałem o funkcji live() lecz nie umiem jej użyć bądź nie działa w moim przypadku.
Gdy wpisze go w przeglądarce, to po wpisaniu literki: p w pierwszym inpucie skrypt podpowiada uzupelenienie pola
plik index.php
<?php
session_start();
include('header.php');
?>
<div id="menu_kontener_glowne">
<li><a href="java script:void(0);" class="klienci">Klienci
</a></li> <li><a href="java script:void(0);" class="zgloszenia">Zgłoszenia
</a></li> <li><a href="java script:void(0);" class="zadania">Zadania
</a></li> <li><a href="java script:void(0);" class="admin">Admin
</a></li>
<li><a href="">Wyszukaj
</a></li>
<li><a href="">Przeglądaj
</a></li> <li><a href="">Szukaj
</a></li> <li><a href="java script:ajaxget( 'strona.php?act=dodajnowe' )">Dodaj
</a></li> <li><a href="">Moje zadania
</a></li> <li><a href="">Dodaj zadanie
</a></li> <li><a href="">Operatorzy
</a></li> <li><a href="">Dostosuj
</a></li>
plik header.php
<?php
require_once('auth.inc.php');
require_once('config.php');
require_once('func.php');
?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="/favicon_aa.ico" type="image/x-icon" />
<link rel="icon" href="/favicon_aa.ico" type="image/x-icon" />
<link rel="stylesheet" href="style.css" type="text/css" />
<title>j4r4net - System zgłoszeń</title>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
<!--
body {
background-color: #D8E3F5;
}
-->
</style>
<style type="text/css">
</style>
<script type="text/javascript">
</script>
<link type="text/css" href="themes/base/jquery.ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="js/jquery.ui.core.js"></script>
<script type="text/javascript" src="js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="js/jquery.ui.datepicker.js"></script>
<script type="text/javascript">
$(function() {
var dates = $('#from, #to').datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onSelect: function(selectedDate) {
var option = this.id == "from" ? "minDate" : "maxDate";
var instance = $(this).data("datepicker");
var date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
dates.not(this).datepicker("option", option, date);
}
});
});
</script>
<script type="text/javascript" src="js/tabki.js"></script>
<script language="JavaScript" type="text/javascript" src="ajax/advAJAX/advajax.js"></script>
<script language="JavaScript" type="text/javascript" src="ajax/js/ajax.js"></script>
<script type="text/javascript" src="js/jquery.autocomplete.min.js"></script>
plik tabki.js
$().ready(function()
{
$("ul#menu_glowne a").live('click',function()
{
$("ul#menu_glowne .active").removeClass("active");
$(this).parent().addClass("active");
var element_index = $("#menu_glowne a").index(this);
$("#menu_podrz div:visible").hide();
$("#menu_podrz div").eq(element_index).show();
return false;
});
});
plik strona.php?act=dodajnowe
<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="js/jquery.autocomplete.min.js"></script>
<script type="text/javascript"> $(function(){
$("input[name='miasto1']").autocomplete('autoKlienci.php',{
width:300,
formatItem: function(row, i, max) {
return "(
<b>ID: " + row[0] + "
</b>)" + row[1] + " " + row[2] + " (nip: " + row[3] + " ";
},
formatMatch: function(row, i, max) {
return row[1];
},
formatResult: function(row) {
return row[0];
}
});
$("input[name='miasto2']").autocomplete('autoKlienci.php',{
width:300,
formatItem: function(row, i, max) {
return row[1] + " (
<i>" + row[2] + "
</i>)";
},
formatMatch: function(row, i, max) {
return row[1];
},
formatResult: function(row) {
return row[2];
}
});
});
/*demo page css*/
body { font: 62.5% "Tahoma", sans-serif; margin: 10px 0px; color:#111111; }
h1,h2,h3,h4,h5 { color: #555555; }
h1 { font-size: 17px; font-weight: bold; }
h2 { font-size: 13px; font-weight: bold; }
h3 { font-size: 11px; font-weight: bold; }
img { vertical-align: middle; }
pre { font-size: 11px; margin: 10px 0px; }
div.c { margin: 10px 0px; font-size: 11px; }
.ac_results {
padding: 0px;
border: 1px solid black;
background-color: white;
overflow: hidden;
z-index: 99999;
}
.ac_results ul {
width: 100%;
list-style-position: outside;
list-style: none;
padding: 0;
margin: 0;
}
.ac_results li {
margin: 0px;
padding: 2px 5px;
cursor: default;
display: block;
/*
if width will be 100% horizontal scrollbar will apear
when scroll mode will be used
*/
/*width: 100%;*/
font: menu;
font-size: 12px;
/*
it is very important, if line-height not setted or setted
in relative units scroll will be broken in firefox
*/
line-height: 16px;
overflow: hidden;
}
.ac_loading {
background: white url('indicator.gif') right center no-repeat;
}
.ac_odd {
background-color: #eee;
}
.ac_over {
background-color: #0A246A;
color: white;
}
<h2>Przykład 4. Użycie opcji
<i>formatItem, formatMatch, formatResult
</i>.
</h2>
<h3>4.1 formatujemy sposób prezentacji listy, do naszego inputa przesyłamy nazwę miasta
</h3>
Miejscowość:
<input type="text" name="miasto1" /> ( Naciśnij "p", aby wywołać podpowiedzi. )
<pre><code class="html"><input type=
"text
" name=
"miasto
" /
></code></pre>
$("input[name='miasto']").autocomplete('miasta.php',{
width:300,
formatItem: function(row, i, max) {
return row[1] + " (<b>ID: " + row[0] + "</b>)";
},
formatMatch: function(row, i, max) {
return row[1];
},
formatResult: function(row) {
return row[1];
}
});
<h3>4.2 zmieniamy sposób formatowania listy, do naszego inputa przesyłamy tym razem nazwę województa
</h3>
Miejscowość:
<input type="text" name="miasto2" /> ( Naciśnij "W", aby wywołać podpowiedzi. )
<pre><code class="html"><input type=
"text
" name=
"miasto
" /
></code></pre>
$("input[name='miasto']").autocomplete('miasta.php',{
width:300,
formatItem: function(row, i, max) {
return row[1] + " (<i>" + row[2] + "</i>)";
},
formatMatch: function(row, i, max) {
return row[1];
},
formatResult: function(row) {
return row[2];
}
});
ładowanie pliku odbywa sie za pomoca funkcji w pliku ajax.js
function ajaxget( link, ResponseId )
{
if( ResponseId == undefined )
{
ResponseId = 'strona';
}
link = ""+link;
advAJAX.get({
url: link,
onLoading : function() {
contentHTML = document.getElementById( ResponseId ).innerHTML;
document.getElementById( ResponseId ).innerHTML = document.getElementById( 'loadtemplate2' ).innerHTML;
},
onSuccess : function(obj) {
document.getElementById( ResponseId ).innerHTML = obj.responseText;
ajaxDebug( obj.responseText );
},
onError : function(obj) {
document.getElementById( ResponseId ).innerHTML = contentHTML;
window.alert('Wystąpił nieoczekiwany błąd. Powtórz operację.');
}
});
}
Proszę o wyczerpujące odpowiedzi, ponieważ dopiero zaczynam przygode z ajaxem. Przesiedziałem 3 dni nad tym, aby dojść do tego dlaczego to nie chce działać i zamiast naprawić to psułem jeszcze bardziej moją pracę.