如何使用javascript在onsen ui中的ons模板中附加文本
[英]how to append text in ons template in onsen ui using javascript
问题描述
我是温泉用户界面的新用户，我想在通过单击或加载功能加载模板时向其中添加一些数据
我使用Javascript和jquery尝试过，但是没有用
请帮忙
提前致谢
的index.html
<body>
<ons-navigator var="myNavigator">
<ons-page>
<ons-toolbar>
<div class="center" ><img src="img/logo-sg.jpg" /></div>
</ons-toolbar>
<div style="text-align: center">
<br>
<p >'Im building an app where I have the first 3 pages (login, register and password recover) without toolbar and sliding-menu. Inside of my app (logged pages) I want to provide the slide-menu, but I'm not achiving this goal. How can I do it?</p>
<ons-button modifier="light" onclick="myNavigator.pushPage('login.html', { animation : 'slide' } )">
Login Page
</ons-button>
</div>
</ons-page>
</ons-navigator>
<ons-template id="login.html">
<ons-page>
<ons-page>
<ons-toolbar>
<div class="center">Log In</div>
<div class="right"><ons-toolbar-button>Close</ons-toolbar-button></div>
</ons-toolbar>
<div class="login-form">
<input type="email" id="uname" class="text-input--underbar" placeholder="Email" value="">
<input type="password" id="pass" class="text-input--underbar" placeholder="Password" value="">
<br><br>
<ons-button modifier="large" id="btnSubmit" onclick="SignIn();" class="login-button">Log In</ons-button>
<br><br>
<ons-button modifier="quiet" onclick="#" class="forgot-password">Forgot password?</ons-button>
<ons-button modifier="quiet" onclick="myNavigator.pushPage('signup.html', { animation : 'slide' } )" class="forgot-password">SignUp</ons-button>
<div style="text-align: center">
<br />
<ons-button modifier="light" onclick="myNavigator.popPage()">
Back to Home
</ons-button>
</div>
</div>
</ons-page>
</ons-template>
<ons-template id="signup.html">
<ons-page>
<ons-toolbar>
<div class="left"><ons-back-button>Back</ons-back-button></div>
<div class="center">Sign up</div>
</ons-toolbar>
<div class="formarea">
<div class="form-row">
<input type="text" id="txtName" class="signup text-input--underbar width-full" placeholder="Name" value="">
</div>
<div class="form-row">
<input type="text" id="txtNewUserName" class="signup text-input--underbar width-full" placeholder="Email" value="">
</div>
<div class="form-row">
<input type="password" id="txtNewPassword" class="text-input--underbar width-full" placeholder="Password" value="">
</div>
<div class="lucent">
<p class="note">Password - 6 characters or more</p>
</div>
<div class="vspc form-row">
<ons-button modifier="large--cta" onclick="SignUp();" >Sign up</ons-button>
</div>
</div>
</ons-page>
</ons-template>
<ons-template id="dashbord.html">
<ons-page>
<input type="hidden" id="hfDasId" />
<ons-toolbar>
<div class="left"><ons-back-button>Back</ons-back-button></div>
<div class="center">MENU</div>
<div class="right"><ons-button onclick="RedirectCart()"><img src="img/cart.png" onload="cartValue()" />(<span class="CartCount"></span>)</ons-button></ons-tab></div>
</ons-toolbar>
<ons-row>
<ons-col ><ons-button class="nobackgroud" onclick="RedirectPurch()"><img src="img/my-account.jpg"></ons-button></ons-col>
<ons-col><ons-button class="nobackgroud" onclick="RedirectPurch()"><img src="img/purchase.jpg" ></ons-button></ons-col>
</ons-row>
<ons-row>
<ons-col><ons-button class="nobackgroud" onclick="RedirectPurch()"><img src="img/switch.jpg" ></ons-button></ons-col>
<ons-col><ons-button class="nobackgroud" onclick="RedirectPurch()"><img src="img/redemption.jpg" ></ons-button></ons-col>
</ons-row>
<ons-row>
<ons-col><ons-button class="nobackgroud" onclick="RedirectPurch()"><img src="img/account-statement.jpg" ></ons-button></ons-col>
<ons-col><ons-button class="nobackgroud" onclick="RedirectPurch()"><img src="img/chanhe-pin.jpg" ></ons-button></ons-col>
</ons-row>
</ons-page>
</ons-template>
<ons-template id="purchase.html">
<ons-page>
<input type="hidden" id="hfId" />
<ons-toolbar>
<div class="left"><ons-back-button>Back</ons-back-button></div>
<div class="center">MENU</div>
<div class="right"><ons-button onclick="RedirectCart()"><img src="img/cart.png" onload="cartValue()" />(<span class="CartCount"></span>)</ons-button></ons-tab></div>
</ons-toolbar>
<table>
<tr>
<td>Scheme Type </td>
<td>
<select id="ddlSchemeType" >
<option value="Equity">Equity</option>
<option value="Redem">Redem</option>
</select></td>
</tr>
<tr>
<td>
Plan
</td>
<td>
<div class="button-bar" style="width:200px; margin:8px auto 0;">
<div class="button-bar__item">
<input type="radio" name="Plan" checked>
<div class="button-bar__button">Direct</div>
</div>
<div class="button-bar__item">
<input type="radio" name="Plan">
<div class="button-bar__button">Regular</div>
</div>
</div>
</td>
</tr>
<tr>
<td>Scheme </td>
<td>
<select id="ddlScheme">
<option value="Kotak">Kotak</option>
<option value="ICICI">ICICI</option>
</select></td>
</tr>
<tr>
<td>
Dividend
</td>
<td>
<div class="button-bar" style="width:200px; margin:8px auto 0;">
<div class="button-bar__item">
<input type="radio" name="Dividend" checked>
<div class="button-bar__button">Reinvest</div>
</div>
<div class="button-bar__item">
<input type="radio" name="Dividend">
<div class="button-bar__button">PayOut</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
Amount($)
</td>
<td>
<input type="text" id="txtAmt" class="text-input--underbar width-full" />
</td>
</tr>
<tr>
<td>Payout bank </td>
<td>
<select id="ddlPayoutBank">
<option value="ICICI">ICICI</option>
<option value="PNB">PNB</option>
<option value="SBI">SBI</option>
<option value="HDFC">HDFC</option>
</select></td>
</tr>
<tr></tr>
<tr>
<td style="padding:0px;" >
<ons-button modifier="large" onclick="purchase();" >Submit</ons-button>
</td>
<td style="padding:0px;" >
<ons-button modifier="large" >Reset</ons-button>
</td>
</tr>
</table>
</ons-page>
</ons-template>
<ons-template id="cart.html">
<ons-page id="cart">
<ons-toolbar>
<div class="left"><ons-back-button>Back</ons-back-button></div>
<div class="center">Cart</div>
<div class="right"><img src="img/blank.png" onload="CartDetail()" /> </div>
</ons-toolbar>
<a id="ab" href="#"></a>
<table id="product"> </table>
<div id="tblProduct" style="display: none;" >
<table>
<tr class="data">
<td class="Scheme">
</td>
<td class="Amount">
</td>
<td>
<input id="btnDelete" type="button" value="Delete" />
</td>
</tr>
</table>
</div>
</ons-page>
</ons-template>
</body>
jQuery的
CartDetail = function () {
var prod = $('#product');
$.ajax({
url: "http://localhost:60595/api/purchase/?userId=" + parseFloat($("#hfDasId").val()), //local
type: "GET",
contentType: "json",
success: function (data) {
$.each(data, function (index, Purchase) {
var $row = $('#tblProduct').find('.data').clone().attr("id", "row_" + Purchase.Id);
$row.find(".Scheme").html(Purchase.Scheme);
$row.find(".Amount").html(Purchase.Amount);
$row.find("#btnDelete").click(function () {
$.ajax({
url: "http://localhost:60595/api/purchase/" + Purchase.Id, //local
type: "PUT",
success: function () {
$row.remove();
},
error: function (jqXHR, exception) {
alert(Purchase.Id);
if (jqXHR.status === 0) {
alert('Not connect.\n Verify Network.');
} else if (jqXHR.status == 404) {
alert('Requested page not found. [404]');
} else if (jqXHR.status == 500) {
alert('Internal Server Error [500].');
} else if (exception === 'parsererror') {
alert('Requested JSON parse failed.');
} else if (exception === 'timeout') {
alert('Time out error.');
} else if (exception === 'abort') {
alert('Ajax request aborted.');
} else {
alert('Uncaught Error.\n' + jqXHR.responseText);
}
}
});
});
prod.append($row);
});
}
});
}
1 个解决方案
解决方案1
0 2015-08-20 17:46:22
你说的时候你还没说清楚
我使用Javascript和jquery尝试过，但是没有用
因此，我假设您尝试将脚本添加到模板中。 如果是这样， 请参考这个问题
无论如何，用代码笔重新编写您提供的代码，如果您的其他映像和本地主机资产到位，则该代码笔应该有效。 链接到我的Codepen
请完成代码，或者最好使用@ Fran Dios评论的方法，尝试以较小的形式重新创建您的问题，以便我们理解尝试解决您的特定问题的方法。
angular.module('TestApp', ['onsen']) .controller('cartController', function($scope) { $scope.CartDetail = function() { var prod = $('#product'); $.ajax({ url: "http://localhost:60595/api/purchase/?userId=" + parseFloat($("#hfDasId").val()), //local type: "GET", contentType: "json", success: function(data) { $.each(data, function(index, Purchase) { var $row = $('#tblProduct').find('.data').clone().attr("id", "row_" + Purchase.Id); $row.find(".Scheme").html(Purchase.Scheme); $row.find(".Amount").html(Purchase.Amount); $row.find("#btnDelete").click(function() { $.ajax({ url: "http://localhost:60595/api/purchase/" + Purchase.Id, //local type: "PUT", success: function() { $row.remove(); }, error: function(jqXHR, exception) { alert(Purchase.Id); if (jqXHR.status === 0) { alert('Not connect.\\n Verify Network.'); } else if (jqXHR.status == 404) { alert('Requested page not found. [404]'); } else if (jqXHR.status == 500) { alert('Internal Server Error [500].'); } else if (exception === 'parsererror') { alert('Requested JSON parse failed.'); } else if (exception === 'timeout') { alert('Time out error.'); } else if (exception === 'abort') { alert('Ajax request aborted.'); } else { alert('Uncaught Error.\\n' + jqXHR.responseText); } } }); }); prod.append($row); }); } }); } });
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/css/onsenui.css" rel="stylesheet" /> <link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/css/onsen-css-components.css" rel="stylesheet" /> <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/js/angular/angular.min.js"></script> <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/js/onsenui.min.js"></script> <body ng-app="TestApp"> <ons-page> <ons-navigator var="myNavigator"> <ons-toolbar> <div class="center"> <img src="img/logo-sg.jpg" /> </div> </ons-toolbar> <div style="text-align: center"> <br> <p>'Im building an app where I have the first 3 pages (login, register and password recover) without toolbar and sliding-menu. Inside of my app (logged pages) I want to provide the slide-menu, but I'm not achiving this goal. How can I do it?</p> <ons-button modifier="light" onclick="myNavigator.pushPage('login.html', { animation : 'slide' } )"> Login Page </ons-button> </div> </ons-navigator> </ons-page> <ons-template id="login.html"> <ons-page> <ons-page> <ons-toolbar> <div class="center">Log In</div> <div class="right"> <ons-toolbar-button>Close</ons-toolbar-button> </div> </ons-toolbar> <div class="login-form"> <input type="email" id="uname" class="text-input--underbar" placeholder="Email" value=""> <input type="password" id="pass" class="text-input--underbar" placeholder="Password" value=""> <br> <br> <ons-button modifier="large" id="btnSubmit" onclick="SignIn();" class="login-button">Log In</ons-button> <br> <br> <ons-button modifier="quiet" onclick="#" class="forgot-password">Forgot password?</ons-button> <ons-button modifier="quiet" onclick="myNavigator.pushPage('signup.html', { animation : 'slide' } )" class="forgot-password">SignUp</ons-button> <div style="text-align: center"> <br /> <ons-button modifier="light" onclick="myNavigator.popPage()"> Back to Home </ons-button> </div> </div> </ons-page> </ons-template> <ons-template id="signup.html"> <ons-page> <ons-toolbar> <div class="left"> <ons-back-button>Back</ons-back-button> </div> <div class="center">Sign up</div> </ons-toolbar> <div class="formarea"> <div class="form-row"> <input type="text" id="txtName" class="signup text-input--underbar width-full" placeholder="Name" value=""> </div> <div class="form-row"> <input type="text" id="txtNewUserName" class="signup text-input--underbar width-full" placeholder="Email" value=""> </div> <div class="form-row"> <input type="password" id="txtNewPassword" class="text-input--underbar width-full" placeholder="Password" value=""> </div> <div class="lucent"> <p class="note">Password - 6 characters or more</p> </div> <div class="vspc form-row"> <ons-button modifier="large--cta" onclick="SignUp();">Sign up</ons-button> </div> </div> </ons-page> </ons-template> <ons-template id="dashbord.html"> <ons-page> <input type="hidden" id="hfDasId" /> <ons-toolbar> <div class="left"> <ons-back-button>Back</ons-back-button> </div> <div class="center">MENU</div> <div class="right"> <ons-button onclick="RedirectCart()"> <img src="img/cart.png" onload="cartValue()" />(<span class="CartCount"></span>)</ons-button> </ons-tab> </div> </ons-toolbar> <ons-row> <ons-col> <ons-button class="nobackgroud" onclick="RedirectPurch()"> <img src="img/my-account.jpg"> </ons-button> </ons-col> <ons-col> <ons-button class="nobackgroud" onclick="RedirectPurch()"> <img src="img/purchase.jpg"> </ons-button> </ons-col> </ons-row> <ons-row> <ons-col> <ons-button class="nobackgroud" onclick="RedirectPurch()"> <img src="img/switch.jpg"> </ons-button> </ons-col> <ons-col> <ons-button class="nobackgroud" onclick="RedirectPurch()"> <img src="img/redemption.jpg"> </ons-button> </ons-col> </ons-row> <ons-row> <ons-col> <ons-button class="nobackgroud" onclick="RedirectPurch()"> <img src="img/account-statement.jpg"> </ons-button> </ons-col> <ons-col> <ons-button class="nobackgroud" onclick="RedirectPurch()"> <img src="img/chanhe-pin.jpg"> </ons-button> </ons-col> </ons-row> </ons-page> </ons-template> <ons-template id="purchase.html"> <ons-page> <input type="hidden" id="hfId" /> <ons-toolbar> <div class="left"> <ons-back-button>Back</ons-back-button> </div> <div class="center">MENU</div> <div class="right"> <ons-button onclick="RedirectCart()"> <img src="img/cart.png" onload="cartValue()" />(<span class="CartCount"></span>)</ons-button> </ons-tab> </div> </ons-toolbar> <table> <tr> <td>Scheme Type</td> <td> <select id="ddlSchemeType"> <option value="Equity">Equity</option> <option value="Redem">Redem</option> </select> </td> </tr> <tr> <td> Plan </td> <td> <div class="button-bar" style="width:200px; margin:8px auto 0;"> <div class="button-bar__item"> <input type="radio" name="Plan" checked> <div class="button-bar__button">Direct</div> </div> <div class="button-bar__item"> <input type="radio" name="Plan"> <div class="button-bar__button">Regular</div> </div> </div> </td> </tr> <tr> <td>Scheme</td> <td> <select id="ddlScheme"> <option value="Kotak">Kotak</option> <option value="ICICI">ICICI</option> </select> </td> </tr> <tr> <td> Dividend </td> <td> <div class="button-bar" style="width:200px; margin:8px auto 0;"> <div class="button-bar__item"> <input type="radio" name="Dividend" checked> <div class="button-bar__button">Reinvest</div> </div> <div class="button-bar__item"> <input type="radio" name="Dividend"> <div class="button-bar__button">PayOut</div> </div> </div> </td> </tr> <tr> <td> Amount($) </td> <td> <input type="text" id="txtAmt" class="text-input--underbar width-full" /> </td> </tr> <tr> <td>Payout bank</td> <td> <select id="ddlPayoutBank"> <option value="ICICI">ICICI</option> <option value="PNB">PNB</option> <option value="SBI">SBI</option> <option value="HDFC">HDFC</option> </select> </td> </tr> <tr></tr> <tr> <td style="padding:0px;"> <ons-button modifier="large" onclick="purchase();">Submit</ons-button> </td> <td style="padding:0px;"> <ons-button modifier="large">Reset</ons-button> </td> </tr> </table> </ons-page> </ons-template> <ons-template id="cart.html" ng-controller="cartController as cartCtrl"> <ons-page id="cart"> <ons-toolbar> <div class="left"> <ons-back-button>Back</ons-back-button> </div> <div class="center">Cart</div> <div class="right"> <img src="img/blank.png" ng-click="CartDetail()" /> </div> </ons-toolbar> <a id="ab" href="#"></a> <table id="product"></table> <div id="tblProduct" style="display: none;"> <table> <tr class="data"> <td class="Scheme"> </td> <td class="Amount"> </td> <td> <input id="btnDelete" type="button" value="Delete" /> </td> </tr> </table> </div> </ons-page> </ons-template> </body>
我如何在两个之间共享数据 <ons-template> ？使用angularjs和onsen ui
[英]how can I share data between two <ons-template> ?use angularjs and onsen ui
Onsen-UI，如何编写javascript，在底部保持ons-scroller？
[英]Onsen-UI ,how to write a javascript , keep ons-scroller at the bottom?
Javascript在Ons-page Onsen UI的Pushed页面中无效
[英]Javascript not working in Pushed Page of ons-page Onsen UI
onsen ui（2 rc5）ons-bottom-toolbar角度模板TypeError：无法设置未定义的属性“ nodeValue”
[英]onsen ui (2 rc5) ons-bottom-toolbar angular template TypeError: Cannot set property 'nodeValue' of undefined
温泉用户界面上的导航问题。 我该如何解决？ （Onsen UI ons-navigator实施问题）
[英]Navigation issue on Onsen UI. How do I work around? (Onsen UI ons-navigator implementation issue)
Onsen-UI：如何更新ons-screen页面属性并重新加载视图？
[英]Onsen-UI: how to update the ons-screen page attribute and reload the view?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
javascript 没有工作<ons-template> - 温泉界面
Javascript无法在Onsen UI的ons-template中使用
Ons导航（温泉用户界面），使用JavaScript代码
使用Onsen UI ons.platform isAndroidTablet（）
我如何在两个之间共享数据 <ons-template> ？使用angularjs和onsen ui
Onsen-UI，如何编写javascript，在底部保持ons-scroller？
Javascript在Ons-page Onsen UI的Pushed页面中无效
onsen ui（2 rc5）ons-bottom-toolbar角度模板TypeError：无法设置未定义的属性“ nodeValue”
温泉用户界面上的导航问题。 我该如何解决？ （Onsen UI ons-navigator实施问题）
Onsen-UI：如何更新ons-screen页面属性并重新加载视图？
相关标签