When I click on the link #S1, a modal appears with a list on it. Then I click on one of the items from the list to send various information to the page. It works just fine. However, when I click once again on the #S1 link nothing happens. What did I do wrong?
Here is the html code
<div class="slot" id="slot1">
<div class="image">
<a href="#"><span class="circled" id="S1"></span></a>
</div>
<div class="text">
</div>
</div>
Here is the onclick fonction
$('#S1').click(function(){
openModal();
modalContent(1);
showList(1)
return false;
});
Here is the openModal function
function openModal() {
el = document.getElementById("modal");
el.style.visibility = "visible";
}
Here is the modalContent function
function modalContent(id) {
switch(id) {
case 1:
$("#modal").load("modal.php");
break;
}
}
Here is the showList function
function showList(id) {
if (id=="") {
document.getElementById("list").innerHTML="";
return;
}
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
}
else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("list").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","list.php?slot="+id,true);
xmlhttp.send();
}
Here is the list.php code
$slot = intval($_GET['slot']);
if($slot == 1){
$result = $db->query("SELECT * FROM item ORDER BY level DESC");
$result->setFetchMode(PDO::FETCH_OBJ);
echo '<table class="tableau">';
while($row = $result->fetch()){
echo '<tr onclick="itemInfo('.$row->id.')">';
echo '<td width="10%">'.$row->level.'</td>';
echo '<td width="90%">'.$row->name.'</td>';
echo '</tr>';
}
echo '</table>';
}
And here is the itemInfo function
function itemInfo(id) {
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
}
else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById('slot1').innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","itemChoice.php?item="+id,true);
xmlhttp.send();
document.getElementById('modal').innerHTML = '';
document.getElementById('modal').style.visibility = "hidden";
}
Thank you in advance
I first noticed that you do not have a semicolon after showList(1)
in the click
function. Have you checked the error console in your browser to see if the click isn't working because of a JS error?
But also, I noticed that you tagged this with jquery
but you are barely using it. Here is your javascript code refactored with jQuery:
<script>
$(function() {
$('#S1').click(function(){
openModal();
modalContent(1);
showList(1);
return false;
});
});
function openModal() {
$("#modal").show();
}
function modalContent(id) {
switch(id) {
case 1:
$("#modal").load("modal.php");
break;
}
}
function itemInfo(id) {
$.get("itemChoice.php?item="+id, function(data) {
$("#slot1").html(data);
});
$("#modal").hide().html("");
}
function showList(id) {
$.get("list.php?slot="+id, function(data) {
$("#list").html( data );
});
}
</script>
Oh yeah, and unless there is a specific reason to use the visibility
style, leave it alone and use display: none;
and display: block;
. The jQuery show()
and hide()
function uses display
and not visibility
.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.