У меня есть файл upload-file в home.php
. Когда файл загружен успешно, home.php
загружает upload.php
где у меня есть форма, пользователь может записать информацию о mp3 файле, информацию, как имя исполнителя и тому подобное. Я хочу реализовать сценарий автозаполнения jQuery. Но автозаполнение не работает, когда оно загружается с помощью javascript-кода, но оно работает, когда я посещаю страницу upload.php. В чем проблема?
home.php
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-6">
<script src="src/script.js" type="text/javascript" charset="iso-8859-6"></script>
</head>
<body style="margin-top:-60px;">
<form id="upload_form" enctype="multipart/form-data" method="post" action="upload.php">
<div>
<input class="ufile" type="file" name="ufile" id="ufile" accept="audio/*" onchange="loadFile(this)" />
<input type="button" class="button" id="upload_button" value="ارفع ملف صوتي" onclick="inputCheck()" />
</div>
</form>
<div style="padding:0px 10px 0px 10px;">
<div id="upload_response"></div>
</div>
</body>
</html>
upload.php
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-6">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function () {
var availableTags = ["html", "php"];
$("#artistInput").autocomplete({
source: availableTags
});
});
</script>
</head>
<body>
<div class="ui-widget">
<form name="saveForm" action="upload.php" method="post" onSubmit="return(infoCheck(this))">
<input class="uploadinput" style="width:430px;" name="artist" id="artistInput">
<input type="submit" class="button" style="color:white;margin-left:5px;width:160px;background:url(images/red_gradient.jpg)" value="حفظ" name="saveInfo" />
<input type="reset" class="button" style="color:black;width:168px;background:url(images/yellow_gradient.jpg)" value="إعادة تعيين">
</form>
</div>
</body>
</html>
script.js
function uploadFinish(e) { // upload successfully finished
var oUploadResponse = document.getElementById('upload_response');
oUploadResponse.innerHTML = e.target.responseText;
oUploadResponse.style.display = 'block';
$("#upload").animate({
height: '765px'
}, 350);
$('#errormessage').slideUp('fast');
}
Вы выполняете сценарий до того, как элемент DOM будет готов.
Вы можете сделать несколько различных действий, чтобы решить эту проблему, например:
$(document).ready(function() { -your script here- });
$(document).ready(function() { -your script here- });
и добавил его в uploadFinish(e)
.
$(document).ready(function() {})
- это «универсальное решение, которое используют все». Код внутри фигурных скобок выполняется после завершения загрузки страницы и является кросс-браузерным: api.jquery.com/ready Консоль может показать вам, что вы делаете неправильно: опечатка, jquery отсутствует или что-то еще ... Я не не знаю, но это не должно провалиться
вы можете использовать ajax для использования автоматического полного типа плагина.
<style>
label._tags {
padding:5px 10px;
margin:0px;
border:solid thin #ccc;
border-radius:3px;
display: inline-block;
}
label._tags span {
padding:2px 10px;
margin: 0px 10px;
color:#FFF;
border-radius:700px;
font-family:"calibri",verdana,serif;
background-color:teal;
}
</style>
<script type="text/javascript">
var request;
var tag=new Array();
function getXMLObject(){
if(window.XMLHttpRequest){
return(new XMLHttpRequest);
}else if(window.ActiveXObject){
return(new ActiveXObject("Microsoft.XMLHttp"));
}else{
return (null);
}
}
function getCategory(){
var address="Ajax_testing";
request=getXMLObject();
var data=document.getElementById("multitag").value;
var nwadd=address+"?text="+data;
request.onreadystatechange=showResultsubject;
request.open("GET",nwadd,true);
request.send();
}
function close()
{
var y=document.getElementById("p");
var myNode = document.getElementById("p");
while (myNode.firstChild) {
myNode.removeChild(myNode.firstChild);
}
y.setAttribute("style","dispaly:none;");
}
function removetag(id)
{
var y=document.getElementById("l");
var z=document.getElementById(id.substr(3));
tag.pop();
y.removeChild(z);
}
function gettag(id){
tag.push(id);
var f="";
for (var i=0;i<tag.length;i++)
{
var s="<label class='_tags' id='"+tag[i]+"'>"+tag[i]+"<span><a id='tag"+tag[i]+"' onclick='removetag(this.id)'>X</a></span> </label>";
f=f.concat(s);
}
document.getElementById("l").innerHTML=f;
}
<tr>
<td>Keyword :
</td>
<td><input type="text" id="multitag" name="multitag" onkeyup="getCategory()" onclick="close()">
<div id="l">
</div>
<div id="p" style="display: none;z-index:11;" >
</div>
</td>
</tr>
$.load()
?var oUploadResponse = document.getElementById('upload_response'); oUploadResponse.innerHTML = e.target.responseText;
Этот код показывает, как он выглядит на home.php через javascript @Bigood