jquery选项卡和ajax的问题​​，即使它们具有类似的html，也会在选项卡之间观察到行为更改

时间：2011-08-10 19:02:14

标签： jquery-ui jquery

我正在创建一个带有三个选项卡的html页面，每个选项卡通过jquery ajax从三个不同的html页面中提取数据。我在调用ajax函数时传递了2个参数，方法和模式（为页面中的所有html元素设置只读或编辑）。

我遇到的问题是，当我使用method = somemethod＆amp; mode = ro设置参数时，第一个呈现正确的方法并处于只读模式，而第二个选项卡的html以编辑模式呈现。我使用firebug调试了页面，但无法找到实际问题。所有三个tab htmls都是相似的，所以我不知道为什么会发生这种情况。我附上了代码。请帮助。

主要的html / php页面。

<?

$method = $_GET['method'];
$mode = $_GET['mode'];

?>


<html>
<head>
<link type="text/css" href="../../css/ui-lightness/jquery-ui-1.8.14.custom.css" rel="Stylesheet" /> 
<link type="text/css" href="./methodeditor.css" rel="stylesheet" />
<script type="text/javascript" src="../../js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="../../js/jquery-ui-1.8.14.custom.min.js"></script>
<script>



function loadtabs() {


          $( ".tabs" ).tabs({cache:false});
          //$( ".tabs" ).tabs();
          method = "<? echo $method; ?>";
          mode = "<? echo $mode; ?>";

          $.ajax({
            type: "GET",
            url: "oven.php",
            data: "method=" +method+"&mode="+mode,
            cache: false,
            async: true, 
            success: function(data){    
               htdata = data;      
               $("#oven").html(data);           
            },
            });

             $.ajax({
            type: "GET",
            url: "detectors.php",
            data: "method=" +method+"&mode="+mode,
            async: true, 
            cache: false,
            success: function(data1){   
               htdata = data1;     
               $("#detectors").html(data1);                 
            },
            });


            $.ajax({
            type: "GET",
            url: "inlets.php",
            data: "method=" +method+"&mode="+mode,
            async: true, 
            cache: false,
            success: function(data){           
               $("#inlets").html(data);             
            },
            });


    }
</script>
</head>
<body>
<form id="editor" action="method.php" method="POST" >
<div class="editor">

<div class="tabs">

    <ul>


        <li><a href="#oven">Oven</a></li>
        <li><a href="#detectors">Detectors</a></li>
        <li><a href="#inlets">Inlets</a></li>
    </ul>
    <div id="oven" ></div>
    <div id="detectors" ></div>
    <div id="inlets"> </div>

</div>
<script>
loadtabs();
</script>
</form>
</div>
</body>
</html>

tab1 php 

<? 
                $method = $_GET['method']; 
                $mode = $_GET['mode'];
    ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Oven</title>
    <link type="text/css" href="../../css/ui-lightness/jquery-ui-1.8.14.custom.css" rel="Stylesheet" /> 
    <script type="text/javascript" src="../../js/jquery-1.5.1.min.js"></script>
    <script type="text/javascript" src="../../js/jquery-ui-1.8.14.custom.min.js"></script>
    <script>

    function togglestatus(val) {
        if ( val == "ro" ) 
        {
            $('#elements :input').attr('disabled', true );
        }
        if ( val == "edit") 
        {
            $('#elements :input').removeAttr('disabled');
        }
    }

    function getvalues() {


              //file = window.method;
              file = "<? echo $method; ?>";
              file = "./method/"+file;
              var xmlhttp = new XMLHttpRequest();
              xmlhttp.open("GET", file, false);
              xmlhttp.setRequestHeader('Content-Type', 'text/xml');
              xmlhttp.send("");
              xmldoc = xmlhttp.responseXML;

              etimenode = xmldoc.getElementsByTagName("method")[0].childNodes[1].childNodes[1];
              etime = etimenode.textContent;
              document.getElementById("etime").value =  etime;

              maxovtp = xmldoc.getElementsByTagName("method")[0].childNodes[1].childNodes[5].childNodes[0].data;
              document.getElementById("maxovtp").value = maxovtp;

    }
    </script>
    </head>

    <body>
    <div id="elements">
    <input type="checkbox" id="oventemp" value="ON" />Oven Temperature<br />
    Equilibrium time <input type="text" id="etime"  /><br />
    Maximum Oven Temperature <input type="text" id="maxovtp"  /><br />
    <script>
    getvalues();

    x = "<? echo $mode; ?>";
    togglestatus(x);
    </script>
    </div>
    </body>
    </html>

tab2 php / html page 

<? 
            $method = $_GET['method']; 
            $mode = $_GET['mode'];
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Detectors</title>
<link type="text/css" href="../../css/ui-lightness/jquery-ui-1.8.14.custom.css" rel="Stylesheet" /> 
<script type="text/javascript" src="../../js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="../../js/jquery-ui-1.8.14.custom.min.js"></script>
<script>

function togglestatus(val) {
    if ( val == "ro" ) 
    {
        $('#elements :input').attr('disabled', true );
    }
    if ( val == "edit") 
    {
        $('#elements :input').removeAttr('disabled');
    }
}

function getvalues() {


          file = "<? echo $method; ?>";
          file = "./method/"+file;
          var xmlhttp = new XMLHttpRequest();
          xmlhttp.open("GET", file, false);
          xmlhttp.setRequestHeader('Content-Type', 'text/xml');
          xmlhttp.send("");
          xmldoc = xmlhttp.responseXML;

          heater = xmldoc.getElementsByTagName("method")[0].childNodes[3].childNodes[1].childNodes[1].childNodes[0].data;
          document.getElementById("heater").value =  heater;

          h2flow = xmldoc.getElementsByTagName("method")[0].childNodes[3].childNodes[1].childNodes[3].childNodes[0].data;
          document.getElementById("h2flow").value = h2flow;

}
</script>
</head>

<body>
<div id="elements">
Heater Status <input type="checkbox" id="heaterstat" value="ON" /><br />
Heater <input type="text" id="heater"  /><br />
H2 Flow <input type="text" id="h2flow"  /><br />
<script>
getvalues();
x = "<? echo $mode; ?>";
togglestatus(x);
</script>
</div>
</body>
</html>

1 个答案:

答案 0 :(得分：0)

我偶然发现了解决方案。

两个标签都有包含在同一个div下的元素。因此，当调用切换状态时，只有id为“element”的第一个div才会被更改。我给了div不同的名字并解决了问题。

相关问题
最新问题