jQuery选项卡设计仅刷新一个选项卡内容_Jquery_Tabs

jQuery选项卡设计仅刷新一个选项卡内容

jquery tabs

jQuery选项卡设计仅刷新一个选项卡内容,jquery,tabs,Jquery,Tabs,我正在使用jQuery UI进行选项卡设计，当我在第二个选项卡中有一个表单时，当我用数据填充表单并按下“提交”时，整个页面都会被加载（我知道，因为表单在第二个选项卡中，页面在提交后会返回显示第一个选项卡）如何仅加载/刷新当前选项卡 HTML代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html

我正在使用jQuery UI进行选项卡设计，当我在第二个选项卡中有一个表单时，当我用数据填充表单并按下“提交”时，整个页面都会被加载（我知道，因为表单在第二个选项卡中，页面在提交后会返回显示第一个选项卡）

如何仅加载/刷新当前选项卡

HTML代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="main.css">
    <link href="jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.css" rel="stylesheet">


    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="jquery-ui-1.10.3.custom/js/jquery-1.9.1.js"></script>
    <script src="jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js"></script>
    <script src="tabsJquery.js"></script>
</head>

<body>
<h1>Trader's Friend</h1>
<h2></h2>


<!-- Tabs -->
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Market Overview</a></li>
        <li><a href="pages/page1.html">Portfolios</a></li>
    </ul>
    <div id="tabs-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>

<!DOCTYPE html>
<html>
<head>
    <title>Create New Portfolio</title>
    <script src="portfolio.js"></script>
    <script src="tabsJquery.js"></script>

</head>
<body>

<form  name="portfolio" id="portfolio" method="post" onsubmit="createNewPortfolio()">
    <p class="ui-widget-header" id="newPortfolioHeader" >General Info</p>
    Portfolio   Name:   <input type="text" id="portfolioName" name="portfolioName" value="test1"><br>
    Owner First Name:   <input type="text" id="ownerFName" name="ownerFName" value="eyal"><br>
    Owner Last  Name:   <input type="text" id="ownerLName" name="ownerLName" value="becker"><br>
    Init Amount:        <input type="number" id="initAmount" name="initAmount" value="1000"><br>
    Date:               <input type="text" id="datepicker" name="date" ><br>
    <p class="ui-widget-header" id="newPortfolioHeader" >Risk Management</p>
    Stocks (%):           <input type="number" id="stocksPerc" name="stocksPerc" value="50"><br>
    NonStocks (%):         <input type="number" id="nonStocksPerc" name="nonStocksPerc" value="50"><br>
    Risk In Stocks (%):    <input type="number" id="riskInStocksPerc" name="riskInStocksPerc"value="5"><br>
    Risk In nonStocks (%): <input type="number" id="riskInNonStocksPerc" name="riskInNonStocksPerc" value="5"><br>
    <input type="submit" value="submit">
</form>

</body>
</html>

function createNewPortfolio() {


    var portfolioName = document.portfolio.portfolioName.value;

    var ownerFname = document.portfolio.ownerFName.value;
    var ownerLname = document.portfolio.ownerLName.value;
    var initAmount = document.portfolio.initAmount.value;
    var dateVal = document.portfolio.date.value;
    //alert(portfolioName + ownerFname + ownerLname + dateVal);
    var stocksPerc = document.portfolio.stocksPerc.value;
    var nonStocksPerc = document.portfolio.nonStocksPerc.value;
    var riskInStocksPerc = document.portfolio.riskInStocksPerc.value;
    var riskInNonStocksPerc = document.portfolio.riskInNonStocksPerc.value;
    //alert(stocksPerc + nonStocksPerc + riskInStocksPerc + riskInNonStocksPerc);

    var myNewPortfolioJsonObj = {

        "general": {
            "portfolioName": portfolioName,
            "ownerFname": ownerFname,
            "ownerLname": ownerLname,
            "initAmount": initAmount,
            "date": dateVal
        },
        "riskManagement": {
            "stocksPerc": stocksPerc,
            "nonStocksPerc": nonStocksPerc,
            "riskInStocksPerc": riskInStocksPerc,
            "riskInNonStocksPerc": riskInNonStocksPerc
        }


    };
    //alert(JSON.stringify(myNewPortfolioJsonObj));
    localStorage.setItem('Portfolios', JSON.stringify(myNewPortfolioJsonObj));
     //event.preventDefault();
}

$(function() {
    $( "#tabs" ).tabs();

    $( "#datepicker" ).datepicker({
        inline: true
    });
});

tabsJquery.js:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="main.css">
    <link href="jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.css" rel="stylesheet">


    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="jquery-ui-1.10.3.custom/js/jquery-1.9.1.js"></script>
    <script src="jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js"></script>
    <script src="tabsJquery.js"></script>
</head>

<body>
<h1>Trader's Friend</h1>
<h2></h2>


<!-- Tabs -->
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Market Overview</a></li>
        <li><a href="pages/page1.html">Portfolios</a></li>
    </ul>
    <div id="tabs-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>

<!DOCTYPE html>
<html>
<head>
    <title>Create New Portfolio</title>
    <script src="portfolio.js"></script>
    <script src="tabsJquery.js"></script>

</head>
<body>

<form  name="portfolio" id="portfolio" method="post" onsubmit="createNewPortfolio()">
    <p class="ui-widget-header" id="newPortfolioHeader" >General Info</p>
    Portfolio   Name:   <input type="text" id="portfolioName" name="portfolioName" value="test1"><br>
    Owner First Name:   <input type="text" id="ownerFName" name="ownerFName" value="eyal"><br>
    Owner Last  Name:   <input type="text" id="ownerLName" name="ownerLName" value="becker"><br>
    Init Amount:        <input type="number" id="initAmount" name="initAmount" value="1000"><br>
    Date:               <input type="text" id="datepicker" name="date" ><br>
    <p class="ui-widget-header" id="newPortfolioHeader" >Risk Management</p>
    Stocks (%):           <input type="number" id="stocksPerc" name="stocksPerc" value="50"><br>
    NonStocks (%):         <input type="number" id="nonStocksPerc" name="nonStocksPerc" value="50"><br>
    Risk In Stocks (%):    <input type="number" id="riskInStocksPerc" name="riskInStocksPerc"value="5"><br>
    Risk In nonStocks (%): <input type="number" id="riskInNonStocksPerc" name="riskInNonStocksPerc" value="5"><br>
    <input type="submit" value="submit">
</form>

</body>
</html>

function createNewPortfolio() {


    var portfolioName = document.portfolio.portfolioName.value;

    var ownerFname = document.portfolio.ownerFName.value;
    var ownerLname = document.portfolio.ownerLName.value;
    var initAmount = document.portfolio.initAmount.value;
    var dateVal = document.portfolio.date.value;
    //alert(portfolioName + ownerFname + ownerLname + dateVal);
    var stocksPerc = document.portfolio.stocksPerc.value;
    var nonStocksPerc = document.portfolio.nonStocksPerc.value;
    var riskInStocksPerc = document.portfolio.riskInStocksPerc.value;
    var riskInNonStocksPerc = document.portfolio.riskInNonStocksPerc.value;
    //alert(stocksPerc + nonStocksPerc + riskInStocksPerc + riskInNonStocksPerc);

    var myNewPortfolioJsonObj = {

        "general": {
            "portfolioName": portfolioName,
            "ownerFname": ownerFname,
            "ownerLname": ownerLname,
            "initAmount": initAmount,
            "date": dateVal
        },
        "riskManagement": {
            "stocksPerc": stocksPerc,
            "nonStocksPerc": nonStocksPerc,
            "riskInStocksPerc": riskInStocksPerc,
            "riskInNonStocksPerc": riskInNonStocksPerc
        }


    };
    //alert(JSON.stringify(myNewPortfolioJsonObj));
    localStorage.setItem('Portfolios', JSON.stringify(myNewPortfolioJsonObj));
     //event.preventDefault();
}

$(function() {
    $( "#tabs" ).tabs();

    $( "#datepicker" ).datepicker({
        inline: true
    });
});

谢谢

Sivan

“如何仅加载/刷新当前选项卡？”AJAX。谢谢，但您能更具体一些吗？我是个新手。