2015-07-28 116 views
0

我有JavaScript来显示和隐藏我的网页的各个部分的工作原理:的Javascript间歇性失败,但是当页面被刷新

function showCustomer(str) { 
    // remove white space from the name entered on the search screen 
    str = str.replace(" ", "%20"); 
    var xmlhttp; 

    if (str == "") { 
     document.getElementById("txtHint").innerHTML = "No records found"; 
     return; 
    } 

    if (window.XMLHttpRequest) { 
     // code for IE7+, Firefox, Chrome, Opera, Safari 
     xmlhttp = new XMLHttpRequest(); 
    } else { 
     // code for IE6, IE5 
     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 

    xmlhttp.onreadystatechange = function() { 
     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
      document.getElementById("txtHint").innerHTML = xmlhttp.responseText; 
     } 
    } 

    xmlhttp.open("GET", "get_customer.asp?q=" + str, true); 
    xmlhttp.send(); 
} 

function enable_submit() { 
    document.getElementById("id_simplesearch_submit").style.visibility = "visible"; 
    document.getElementById("autocomplete-search").reset(); 
    document.getElementById("txtHint").style.display = "none"; 
    document.getElementById("results").style.visibility = "visible"; 
} 
function disable_submit() { 
    document.getElementById("id_simplesearch_submit").style.visibility = "hidden"; 
    document.getElementById("id_simplesearch").reset(); 
    document.getElementById("txtHint").style.visibility = "visible"; 
    document.getElementById("results").style.display = "none"; 
} 

我有一个

onkeyup="showCustomer(this.value)" 

一个文本框和

onfocus="disable_submit()" 

和一个表格定义为

<div class="commandspace"> 
    <form id="id_simplesearch" name="simplesearch" method="post" action="index.asp"> 
    <div class="simplesearch"><label for="forename">Forename</label><input type="text" id="id_forename" name="forename" onfocus="enable_submit()" /></div> 

    <div class="simplesearch"><label for="surname">Surname</label><input type="text" id="id_surname" name="surname" onfocus="enable_submit()" /></div> 
    <div class="simplesearch"><label for="unit">Unit/Team</label><input type="text" id="id_unit" name="unit" onfocus="enable_submit()" /></div> 

    <div id="simplesearchsubmit"> 
    <div class="simplesearch"> 
    <input class="simplesearchsubmit" type="submit" id="id_simplesearch_submit" name="search" value="Search" /> 

当您第一次加载页面并开始在showCustomer搜索框中输入内容时,txtHint元素将显示并开始拉回数据。但是,如果我点击三个简单搜索框中的一个,然后再次点击到showCustomer搜索框,则txtHint根本不会显示。

+0

我很难搞清楚,这里的问题究竟是什么。输入模糊后,showCustomer是否工作?或者'txtHint'没有正确显示。你能编辑你的文章,所以它变得更清晰一点? – Mouser

+0

更清楚了吗? – wrichards0

+0

是的,问题解决了。 – Mouser

回答

1

的问题是在这里(见的答案评论):

function enable_submit() { 
    document.getElementById("id_simplesearch_submit").style.visibility = "visible"; 
    document.getElementById("autocomplete-search").reset(); 
    document.getElementById("txtHint").style.display = "none"; // <----- This uses display 
    document.getElementById("results").style.visibility = "visible"; 
} 
function disable_submit() { 
    document.getElementById("id_simplesearch_submit").style.visibility = "hidden"; 
    document.getElementById("id_simplesearch").reset(); 
    document.getElementById("txtHint").style.visibility = "visible"; // <----- This uses visibility 
    document.getElementById("txtHint").style.display = "block"; // <----- This line should fix your problems. 
    document.getElementById("results").style.display = "none"; 
} 

所以enable_submit使用显示隐藏的元素。而disable_submit尝试使用可见性来显示它。两种样式属性不匹配。