Question

我有一个非常基本的nodejs应用程序，它显示了一个html页面。此页面在分隔文件中有两个与js函数链接的按钮。其中一个功能是使用ajax，另一个不是。使用ajax的那个不工作（我猜不到）。外部js文件在apache下运行得非常好。是否有特定要做的事情是能够在客户端使用ajax与node.js？

这里是node.js部分：

var express = require ('express');
var app = express ();
app.use(express.static(__dirname + '/images'));
app.use(express.static(__dirname + '/CSS'));
app.use(express.static(__dirname + '/font'));
app.use(express.static(__dirname ));
app.use(express.static(__dirname +'/ChemAlive_JS'));
app.get('/', function(req, res) {
    res.setHeader('Content-Type', 'text/html');
    res.sendFile('/home/laetitia/Project/ChemAlive_Interface_Node/test.html');
});

app.listen(8080);

html部分：

<html >
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link href="/Interface.css" type="text/css" rel="stylesheet" />
    <link href="/ketcher.css" type="text/css" rel="stylesheet" />
    <link href="/font-chemalive.css" type="text/css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="/ddsmoothmenu.css" />
    <link rel="stylesheet" type="text/css" href=/ddsmoothmenu-v.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="/ui_bis.js"></script>
  </head>
  <body >
    <div id="background">
      <div id="LoginButton" class="deck login" &nbsp;>
      <img class="LoginButtonUnpressed" alt="Login/Start" src="/ChemAlive_Start_Button.png">
      <img class="LoginButtonPressed" alt="Login/Start" src="/ChemAlive_Start_Button_pressed.png">
      <div class="popup" style="top: 0px; right: 80px;">
        <p>Log-on or launch your calculations.</p>
      </div>
    </div>
    <!-- Welcome Dialogue box -->
    <div id="welcome_DB" class="dialogWindow fileDialog" >
      <div class="h1">
        <p>Welcome. Thank you for visiting our interface!</p>
      </div>
      <div class="iconDiv">
        <img src="/Green_gears.png"/>
      </div>
      <div class="mainDiv">
        <div class="desText">
          <p>ChemAlive i</p>
        </div>
      </div>
      <div class="navDiv">
        <input type="submit" id="welcome_cancel" class="dialogButton" value="Cancel"/>
        <label for="welcome_cancel" onclick="gototry();"><span class="label">Just Try It</span></label>
        <input id="welcome_login" class="dialogButton" type="submit" value="Done"/>
        <label for="welcome_login" style="right: 10px" onclick="gotologin();"><span class="label">Login</span></label>
        <input id="welcome_register" class="dialogButton" type="submit" value="Done"/>
        <label for="welcome_register" style="right: 20px" onclick="gotoregister();" ><span class="label">Registration</span></label>
      </div>
    </div>
    <!-- Close welcome DB -->
    </div>     
  </body>
</html>

外部，客户端，js：

$('LoginButton').observe('click', ui.onClick_login);
ui.onClick_login = function() {
    window.alert("Hey There")
    ui.showDialog('register_login');
}

function gototry() {
    document.getElementById("welcome_DB").style.display = "none";
}

function gotologin() {
    document.getElementById("welcome_DB").style.display = "none";
    document.getElementById("login_v2").style.display = "inline-block";
}

function gotoregister() {
    document.getElementById("welcome_DB").style.display = "none";
    document.getElementById("register_DB").style.display = "inline-block";
}

其$('LoginButton').observe('click', ui.onClick_login)电话无效。

有什么想法吗？

Answer 1

将ui.onClick_login重命名为my_onclick_login等简单名称

$('#LoginButton').observe('click', my_onclick_login);
    my_onclick_login = function() {
    window.alert("Hey There")
    ui.showDialog('register_login');
}

使用节点时，在客户端使用ajax

1 个答案: