API tools faq
paste
Advertisement
Guest User

html/ajax/css

a guest
Sep 28th, 2017
100
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 30.35 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <!--
  3. To change this license header, choose License Headers in Project Properties.
  4. To change this template file, choose Tools | Templates
  5. and open the template in the editor.
  6. -->
  7. <html>
  8.  
  9. <title>Carrito de la compra</title>
  10. <meta charset="UTF-8">
  11. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  12. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  13. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  14. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  15. <link href="div.css" rel="stylesheet" type="text/css"/>
  16.  
  17. <style>
  18. #teveo, #fueraForm{
  19. visibility: hidden;
  20. }
  21. input{
  22. margin: 0 20px 0 9px;
  23. }
  24. form{
  25. margin: 20px 0 20px 0;
  26. }
  27. #elh2{
  28. display: inline-block;
  29. }
  30. #logout{
  31. margin: 0 0 12px 15px;
  32. }
  33. img{
  34. width: 350px !important;
  35. height: 260px !important;
  36. }
  37. th{
  38. width: 320px;
  39. padding: 10px 10px 10px 10px;
  40. }
  41. table{
  42. margin: 30px 0 30px 0 ;
  43. background-color: lightgrey;
  44. }
  45. tr{
  46. padding: 30px 0 30px 0;
  47. }
  48. input.form-control.text-center{
  49. margin: 0 0 0 0;
  50. height: 22px;
  51. }
  52. b{
  53. background-color: rgba(53, 132, 20, 0.71) !important;
  54. }
  55. .row{
  56. margin-top: 50px;
  57. margin-bottom: 15px;
  58. }
  59. </style>
  60.  
  61. <body>
  62.  
  63. <div class="container">
  64. <div class="col-lg-12">
  65.  
  66. <div class="page-header">
  67. <h1>Venta de CDs</h1>
  68. </div>
  69.  
  70. <div id="adios"></div>
  71.  
  72. <form id="fueraForm" class="form-inline">
  73. <div class="form-group">
  74. <label for="user">User:</label>
  75. <input type="text" class="form-control" id="user" name="user" placeholder="Usuario...">
  76. </div>
  77.  
  78. <div class="form-group">
  79. <label for="pass">Password:</label>
  80. <input type="password" class="form-control" id="pass" name="pass" placeholder="Password...">
  81. </div>
  82. <button id="loguear" type="submit" class="btn btn-primary">Logueate</button>
  83. </form>
  84.  
  85. <div id="errores"></div>
  86.  
  87.  
  88. <div id="teveo" class="container" style="margin-top:50px;">
  89. <span id="elh2"></span>
  90. <button id="logout" type="submit" class="btn btn-primary">Logout</button>
  91. <div class="row">
  92.  
  93.  
  94. <!-------------------------art1---------------------->
  95. <div class="col-xs-12 col-sm-6 col-md-3">
  96. <div class="col-item">
  97. <div class="post-img-content">
  98. <img id="img1" class="img-responsive" alt="a" />
  99. <span class="post-title">
  100. <b>Stock: </b>
  101. <b id="stock1"></b><br>
  102. </span>
  103. </div>
  104. <div class="info">
  105. <div class="row">
  106. <div class="price col-md-6">
  107. <h5 id="nombre1"></h5>
  108. <h5 class="price-text-color">Precio: </h5>
  109. <h5 id="precio1" class="price-text-color"></h5>
  110. </div>
  111.  
  112. </div>
  113. <div class="separator clear-left">
  114. <p class="btn-add">
  115. <i class="fa fa-shopping-cart"></i><button id="boton1">Add to cart</button></p>
  116. <p class="btn-details">
  117. <input type="number" id="inp1" class="form-control text-center" value="1"></p>
  118. </div>
  119. <div class="clearfix">
  120. </div>
  121. </div>
  122. </div>
  123. </div>
  124.  
  125. <!--------------------------art2------------------------->
  126. <div class="col-xs-12 col-sm-6 col-md-3">
  127. <div class="col-item">
  128. <div class="post-img-content">
  129. <img id="img2" class="img-responsive" alt="a" />
  130. <span class="post-title">
  131. <b>Stock: </b>
  132. <b id="stock2"></b><br>
  133. </span>
  134. </div>
  135. <div class="info">
  136. <div class="row">
  137. <div class="price col-md-6">
  138. <h5 id="nombre2"></h5>
  139. <h5 class="price-text-color">Precio: </h5>
  140. <h5 id="precio2" class="price-text-color"></h5>
  141. </div>
  142.  
  143. </div>
  144. <div class="separator clear-left">
  145. <p class="btn-add">
  146. <i class="fa fa-shopping-cart"></i><button id="boton2">Add to cart</button></p>
  147. <p class="btn-details">
  148. <input type="number" id="inp2" class="form-control text-center" value="1"></p>
  149. </div>
  150. <div class="clearfix">
  151. </div>
  152. </div>
  153. </div>
  154. </div>
  155.  
  156. <!-------------------------art3------------------------->
  157. <div class="col-xs-12 col-sm-6 col-md-3">
  158. <div class="col-item">
  159. <div class="post-img-content">
  160. <img id="img3" class="img-responsive" alt="a" />
  161. <span class="post-title">
  162. <b>Stock: </b>
  163. <b id="stock3"></b><br>
  164. </span>
  165. </div>
  166. <div class="info">
  167. <div class="row">
  168. <div class="price col-md-6">
  169. <h5 id="nombre3"></h5>
  170. <h5 class="price-text-color">Precio: </h5>
  171. <h5 id="precio3" class="price-text-color"></h5>
  172. </div>
  173.  
  174. </div>
  175. <div class="separator clear-left">
  176. <p class="btn-add">
  177. <i class="fa fa-shopping-cart"></i><button id="boton3">Add to cart</button></p>
  178. <p class="btn-details">
  179. <input type="number" id="inp3" class="form-control text-center" value="1"></p>
  180. </div>
  181. <div class="clearfix">
  182. </div>
  183. </div>
  184. </div>
  185. </div>
  186.  
  187. <!--------------------------art4------------------------>
  188. <div class="col-xs-12 col-sm-6 col-md-3">
  189. <div class="col-item">
  190. <div class="post-img-content">
  191. <img id="img4" class="img-responsive" alt="a" />
  192. <span class="post-title">
  193. <b>Stock: </b>
  194. <b id="stock4"></b><br>
  195. </span>
  196. </div>
  197. <div class="info">
  198. <div class="row">
  199. <div class="price col-md-6">
  200. <h5 id="nombre4"></h5>
  201. <h5 class="price-text-color">Precio: </h5>
  202. <h5 id="precio4" class="price-text-color"></h5>
  203. </div>
  204.  
  205. </div>
  206. <div class="separator clear-left">
  207. <p class="btn-add">
  208. <i class="fa fa-shopping-cart"></i><button id="boton4">Add to cart</button></p>
  209. <p class="btn-details">
  210. <input type="number" id="inp4" class="form-control text-center" value="1"></p>
  211. </div>
  212. <div class="clearfix">
  213. </div>
  214. </div>
  215. </div>
  216. </div>
  217.  
  218. </div>
  219.  
  220.  
  221.  
  222. <table class="table table-striped table-hover table-bordered">
  223. <tbody>
  224. <tr>
  225. <th>CD</th>
  226. <th>Cantidad</th>
  227. <th>Precio</th>
  228. <th>Precio Total</th>
  229. </tr>
  230. <tr>
  231. <td id="cart1">
  232. <!--<button type="button" class="btn btn-default btn-xs">
  233. <span class="glyphicon glyphicon-remove"></span>
  234. </button>-->
  235. </td>
  236. <td id="qty1"></td>
  237. <td id="price1"></td>
  238. <td id="price_sub1"></td>
  239.  
  240. </tr>
  241. <tr>
  242. <td id="cart2"></td>
  243. <td id="qty2"></td>
  244. <td id="price2"></td>
  245. <td id="price_sub2"></td>
  246. </tr>
  247. <tr>
  248. <td id="cart3"></td>
  249. <td id="qty3"></td>
  250. <td id="price3"></td>
  251. <td id="price_sub3"></td>
  252. </tr>
  253. <tr>
  254. <td id="cart4"></td>
  255. <td id="qty4"></td>
  256. <td id="price4"></td>
  257. <td id="price_sub4"></td>
  258. </tr>
  259. <tr>
  260. <th colspan="3"><span class="pull-right">Total</span></th>
  261. <th id="total"></th>
  262. </tr>
  263. <tr>
  264. <td><a href="#" class="btn btn-primary" data-dismiss="modal">Vaciar carrito</a></td>
  265. <td colspan="3"><a href="javascript:void(0)" id="checkout" class="pull-right btn btn-success">Checkout</a></td>
  266. </tr>
  267.  
  268.  
  269. </tbody>
  270. </table>
  271.  
  272.  
  273.  
  274.  
  275. </div>
  276. </div>
  277. </div>
  278.  
  279.  
  280.  
  281.  
  282. <script>
  283. $(document).ready(function () {
  284. $.ajax({
  285. url: 'http://localhost:8084/mavenCarrito/session?ob=usuario&op=check',
  286. type: 'GET',
  287. xhrFields: {
  288. withCredentials: true
  289. },
  290. datatype: 'json',
  291. success: function (data) {
  292. //si existe una sesion, se esconde el formulario de login.
  293. if (data.user != null) {
  294. visualizarSesion();
  295. $("#elh2").empty().append("<h2>Bienvenido: " + data.user + "!</h2>");
  296. $.ajax({
  297. url: 'http://localhost:8084/mavenCarrito/session?ob=almacen&op=list&act=act',
  298. type: 'GET',
  299. xhrFields: {
  300. withCredentials: true
  301. },
  302. datatype: 'json',
  303. success: function (data) {
  304. if (data.status == 200) {
  305. for (i = 0; i < data.almacen.length; i++) {
  306. $("#nombre" + (i + 1)).append(data.almacen[i].Nombre);
  307. $("#precio" + (i + 1)).append(data.almacen[i].Precio);
  308. $("#stock" + (i + 1)).append(data.almacen[i].Stock);
  309. $("#img" + (i + 1)).attr("src", data.almacen[i].img);
  310. }
  311. }
  312.  
  313. },
  314. error: function () {
  315. $.ajax({
  316. url: 'http://localhost:8084/mavenCarrito/session?ob=almacen&op=list',
  317. type: 'GET',
  318. xhrFields: {
  319. withCredentials: true
  320. },
  321. datatype: 'json',
  322. success: function (data) {
  323. if (data.status == 200) {
  324. for (i = 0; i < data.almacen.length; i++) {
  325. $("#nombre" + (i + 1)).append(data.almacen[i].Nombre);
  326. $("#precio" + (i + 1)).append(data.almacen[i].Precio);
  327. $("#stock" + (i + 1)).append(data.almacen[i].Stock);
  328. $("#img" + (i + 1)).attr("src", data.almacen[i].img);
  329. }
  330. }
  331.  
  332. }
  333. });
  334. }
  335. });
  336. $.ajax({
  337. url: 'http://localhost:8084/mavenCarrito/session?ob=carrito&op=list',
  338. type: 'GET',
  339. xhrFields: {
  340. withCredentials: true
  341. },
  342. datatype: 'json',
  343. success: function (data) {
  344. for (i = 0; i < data.carrito.length; i++) {
  345. $("#cart" + (i + 1)).empty().html(data.carrito[i].Nombre);
  346. $("#qty" + (i + 1)).empty().append(data.carrito[i].Stock);
  347. $("#price" + (i + 1)).empty().append(data.carrito[i].Precio);
  348. $("#price_sub" + (i + 1)).empty().append((data.carrito[i].Stock) * (data.carrito[i].Precio));
  349.  
  350. }
  351. }
  352. });
  353.  
  354.  
  355.  
  356. } else {
  357. visualizarLogin();
  358. }
  359. },
  360. error: function () {
  361. $("#errores").html("<p>Error.</p>");
  362. }
  363. });
  364.  
  365. $("#loguear").click(function () {
  366. event.preventDefault();
  367. nomUser = $("#user").val();
  368. nomPass = $("#pass").val();
  369. //function asd(nomUser, nomPass) {
  370. $.ajax({
  371. url: 'http://localhost:8084/mavenCarrito/session?ob=usuario&op=login&user=' + nomUser + '&pass=' + nomPass,
  372. type: 'GET',
  373. xhrFields: {
  374. withCredentials: true
  375. },
  376. datatype: 'json',
  377. success: function (data) {
  378.  
  379. if (data.status == 200) {
  380. visualizarSesion();
  381. $("#elh2").empty().append("<h2>Bienvenido: " + data.user + "!</h2>");
  382. /* $.ajax({
  383. url: 'http://localhost:8084/mavenCarrito/session?ob=almacen&op=list',
  384. type: 'GET',
  385. xhrFields: {
  386. withCredentials: true
  387. },
  388. datatype: 'json',
  389. success: function (data) {
  390. if (data.status == 200) {
  391. for (i = 0; i < data.almacen.length; i++) {
  392. $("#nombre" + (i + 1)).append(data.almacen[i].Nombre);
  393. $("#precio" + (i + 1)).append(data.almacen[i].Precio);
  394. $("#stock" + (i + 1)).append(data.almacen[i].Stock);
  395. $("#img" + (i + 1)).attr("src", data.almacen[i].img);
  396. }
  397. }
  398.  
  399. }
  400. });*/
  401. } else {
  402. $("#errores").html('<p>Error, revise la contrasenya</p>');
  403. }
  404. },
  405. error: function () {
  406. $("#errores").html("<p>Error.</p>");
  407. }
  408. });
  409. //}
  410. //asd(nomUser, nomPass);
  411. });
  412.  
  413. $("#logout").click(function () {
  414. event.preventDefault();
  415. $.ajax({
  416. url: 'http://localhost:8084/mavenCarrito/session?ob=usuario&op=logout',
  417. type: 'GET',
  418. xhrFields: {
  419. withCredentials: true
  420. },
  421. datatype: 'json',
  422. success: function (data) {
  423. if (data.status == 200) {
  424. visualizarLogin();
  425. $("#adios").html("<h3>Has sido desconectado correctamente</h3>");
  426. }
  427. },
  428. error: function () {
  429. $("#errores").html("<p>Error.</p>");
  430. }
  431. });
  432. });
  433.  
  434. /*for (i = 0; i < 4; i++) {
  435. $(a)[i].click(function () {
  436. event.preventDefault();
  437. cant = $("#inp"+(i+1)).val();
  438. });
  439. }*/
  440.  
  441. //----------------------- BOTONERA -----------------------------------------
  442. //-----------------------BOTON 1 -----------------------------------------
  443. $("#boton1").click(function () {
  444. event.preventDefault();
  445. cant = $("#inp1").val();
  446. $.ajax({
  447. url: 'http://localhost:8084/mavenCarrito/session?ob=carrito&op=add&prod=1&cant=' + cant,
  448. type: 'GET',
  449. xhrFields: {
  450. withCredentials: true
  451. },
  452. datatype: 'json',
  453. success: function (data) {
  454. $("#cart1").empty().html(data.carrito[0].Nombre);
  455. $("#qty1").empty().html(data.carrito[0].Stock);
  456. $("#price1").empty().html(data.carrito[0].Precio);
  457. $("#price_sub1").empty().html((data.carrito[0].Stock) * (data.carrito[0].Precio));
  458. }
  459. });
  460. $.ajax({
  461. url: 'http://localhost:8084/mavenCarrito/session?ob=almacen&op=list&act=act',
  462. type: 'GET',
  463. xhrFields: {
  464. withCredentials: true
  465. },
  466. datatype: 'json',
  467. success: function (data) {
  468. if (data.status == 200) {
  469. for (i = 0; i < data.almacen.length; i++) {
  470. $("#nombre" + (i + 1)).empty().append(data.almacen[i].Nombre);
  471. $("#precio" + (i + 1)).empty().append(data.almacen[i].Precio);
  472. $("#stock" + (i + 1)).empty().append(data.almacen[i].Stock);
  473. $("#img" + (i + 1)).empty().attr("src", data.almacen[i].img);
  474. }
  475. }
  476.  
  477. }
  478. });
  479. });
  480.  
  481.  
  482. //-----------------------BOTON 2 -----------------------------------------
  483. $("#boton2").click(function () {
  484. event.preventDefault();
  485. cant = $("#inp2").val();
  486. $.ajax({
  487. url: 'http://localhost:8084/mavenCarrito/session?ob=carrito&op=add&prod=2&cant=' + cant,
  488. type: 'GET',
  489. xhrFields: {
  490. withCredentials: true
  491. },
  492. datatype: 'json',
  493. success: function (data) {
  494. $("#cart2").empty().html(data.carrito[1].Nombre);
  495. $("#qty2").empty().append(data.carrito[1].Stock);
  496. $("#price2").empty().append(data.carrito[1].Precio);
  497. $("#price_sub2").empty().append((data.carrito[1].Stock) * (data.carrito[1].Precio));
  498. }
  499. });
  500. $.ajax({
  501. url: 'http://localhost:8084/mavenCarrito/session?ob=almacen&op=list&act=act',
  502. type: 'GET',
  503. xhrFields: {
  504. withCredentials: true
  505. },
  506. datatype: 'json',
  507. success: function (data) {
  508. if (data.status == 200) {
  509. for (i = 0; i < data.almacen.length; i++) {
  510. $("#nombre" + (i + 1)).empty().append(data.almacen[i].Nombre);
  511. $("#precio" + (i + 1)).empty().append(data.almacen[i].Precio);
  512. $("#stock" + (i + 1)).empty().append(data.almacen[i].Stock);
  513. $("#img" + (i + 1)).empty().attr("src", data.almacen[i].img);
  514. }
  515. }
  516.  
  517. }
  518. });
  519. });
  520.  
  521. //-----------------------BOTON 3 -----------------------------------------
  522. $("#boton3").click(function () {
  523. event.preventDefault();
  524. cant = $("#inp3").val();
  525. $.ajax({
  526. url: 'http://localhost:8084/mavenCarrito/session?ob=carrito&op=add&prod=3&cant=' + cant,
  527. type: 'GET',
  528. xhrFields: {
  529. withCredentials: true
  530. },
  531. datatype: 'json',
  532. success: function (data) {
  533. $("#cart3").empty().html(data.carrito[2].Nombre);
  534. $("#qty3").empty().append(data.carrito[2].Stock);
  535. $("#price3").empty().append(data.carrito[2].Precio);
  536. $("#price_sub3").empty().append((data.carrito[2].Stock) * (data.carrito[2].Precio));
  537. }
  538. });
  539. $.ajax({
  540. url: 'http://localhost:8084/mavenCarrito/session?ob=almacen&op=list&act=act',
  541. type: 'GET',
  542. xhrFields: {
  543. withCredentials: true
  544. },
  545. datatype: 'json',
  546. success: function (data) {
  547. if (data.status == 200) {
  548. for (i = 0; i < data.almacen.length; i++) {
  549. $("#nombre" + (i + 1)).empty().append(data.almacen[i].Nombre);
  550. $("#precio" + (i + 1)).empty().append(data.almacen[i].Precio);
  551. $("#stock" + (i + 1)).empty().append(data.almacen[i].Stock);
  552. $("#img" + (i + 1)).empty().attr("src", data.almacen[i].img);
  553. }
  554. }
  555.  
  556. }
  557. });
  558. });
  559.  
  560. //-----------------------BOTON 4 -----------------------------------------
  561. $("#boton4").click(function () {
  562. event.preventDefault();
  563. cant = $("#inp4").val();
  564. $.ajax({
  565. url: 'http://localhost:8084/mavenCarrito/session?ob=carrito&op=add&prod=4&cant=' + cant,
  566. type: 'GET',
  567. xhrFields: {
  568. withCredentials: true
  569. },
  570. datatype: 'json',
  571. success: function (data) {
  572. $("#cart4").empty().html(data.carrito[3].Nombre);
  573. $("#qty4").empty().append(data.carrito[3].Stock);
  574. $("#price4").empty().append(data.carrito[3].Precio);
  575. $("#price_sub4").empty().append((data.carrito[3].Stock) * (data.carrito[3].Precio));
  576. }
  577. });
  578. $.ajax({
  579. url: 'http://localhost:8084/mavenCarrito/session?ob=almacen&op=list&act=act',
  580. type: 'GET',
  581. xhrFields: {
  582. withCredentials: true
  583. },
  584. datatype: 'json',
  585. success: function (data) {
  586. if (data.status == 200) {
  587. for (i = 0; i < data.almacen.length; i++) {
  588. $("#nombre" + (i + 1)).empty().append(data.almacen[i].Nombre);
  589. $("#precio" + (i + 1)).empty().append(data.almacen[i].Precio);
  590. $("#stock" + (i + 1)).empty().append(data.almacen[i].Stock);
  591. $("#img" + (i + 1)).empty().attr("src", data.almacen[i].img);
  592. }
  593. }
  594. }
  595. });
  596. });
  597.  
  598.  
  599. function visualizarSesion() {
  600. $("#fueraForm").css("display", "none");
  601. $("#fueraForm").css("visibility", "hidden");
  602. $("#teveo").css("visibility", "visible");
  603. $("#errores").empty();
  604. $("#adios").empty();
  605. }
  606.  
  607. function visualizarLogin() {
  608. $("#fueraForm").css("display", "block");
  609. $("#fueraForm").css("visibility", "visible");
  610. $("#teveo").css("visibility", "hidden");
  611. $("#elh2").empty();
  612. $("#errores").empty();
  613. }
  614.  
  615. /*$.ajax({
  616. url: 'http://localhost:8084/mavenCarrito/session?ob=almacen&op=list',
  617. type: 'GET',
  618. xhrFields: {
  619. withCredentials: true
  620. },
  621. datatype: 'json',
  622. success: function (data) {
  623. if (data.status == 200) {
  624. for (i = 0; i < data.almacen.length; i++) {
  625. $("#nombre" + (i + 1)).append(data.almacen[i].Nombre);
  626. $("#precio" + (i + 1)).append(data.almacen[i].Precio);
  627. $("#stock" + (i + 1)).append(data.almacen[i].Stock);
  628. $("#img" + (i + 1)).attr("src", data.almacen[i].img);
  629. }
  630. }
  631.  
  632. }
  633. });*/
  634. });
  635. </script>
  636.  
  637. </body>
  638. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!