trying to call a javascript function from a PHP web request ( if statement )but it fails tried to check if another script will run and when a test echo'<sciprt>alert('Called Succeed')</script>'; it worked and I thought if I write the whole function in the web request code block well solve the problem but it didn't, so what I'm missing here? where is the bug?
Snippet:-
<?
include("..\include\basket-module.php");
// notifications //
include("..\\include\\notif-module.php");
// module //
include("..\\include\\Insert-module.php");
$count = $_POST['productscount']
?>
<html>
<head>
<title>Project - new Draft</title>
<meta charset="utf-8">
<meta http-equiv="ScreenOrientation" content="autoRotate:disabled">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Bootstrap4 Library and Font-awesome with Custom CSS -->
<link rel="stylesheet" type="text/css" href="..\Styles\profile.css">
<link rel="stylesheet" type="text/css" href="..\Styles\newdraft.css">
<link rel="stylesheet" type="text/css" href="..\Styles\newproduct.css">
<link rel="stylesheet" type="text/css" href="..\Styles\navegationbar.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap4 Library and Font-awesome with Custom CSS End-->
<!-- including custom javascript -->
<script src="..\js\functions\js.js"></script>
<script>
function myFunction(){
var formscount = <?php echo(json_encode($productscount)); ?>;
if (formscount > 0) {
active="";
for (i=0; i < formscount; i++) {
var str='active'
if (i > 0){
str = ''
}
$('#demo').append($('<div class="carousel-item '+str+'"> <div class="card product-form" style="border: solid 1px #86377b !important;"><div class="card-body"> <img src="..\\upload\\panadol.png" style="width:205px; height:205px;"> <div class="row justify-content-center"> <a name="img-upload-btn" id="img-btn" class="btn btn-primary btn-block" style="height:35px; background-color:#86377b !important;" href="#" role="button">إضافة صورة</a> </div> <hr /> <div class="card-text" style="font-family: hana; font-size:23px; color:black;"> <div class="row" style=" flex-direction: row-reverse;"> <div class="col-sm col-lg-auto"> <div class="form-group product-name-group"> <div class="form-text" style="text-align: right; direction:RTL; color:black;font-size:23px; ">إسم المنتج</div> <input type="text" class="form-control product-name-input" style="direction:RTL; font-family:hana; border: solid 1px #86377b !important;" autocomplete="off" placeholder="إسم المنتج"> </div> </div> <div class="col-sm col-lg-auto"> <div class="form-group dosage-form-group"> <div class="form-text" style="text-align: right; direction:RTL; color:black;font-size:23px;">نوع العبوة</div> <select class="custom-select" onchange="yesnoCheck(this);" id="medictype" style="direction:RTL; font-family:hana; border: solid 1px #86377b !important;"> <option selected>نوع الدواء</option> <option value="1">أدوية</option><i class="fas fa-capsules"></i> <option value="2">مستلزمات الام والطفل</option> <option value="4">معدات طبية</option> <option value="4">بروتينات ومكملات غذائية</option> </select> </div> </div> <div class="col-sm col-lg-auto"> <div class="form-group productqty-group"> <div class="form-text" style="text-align: right; direction:RTL; color:black;font-size:23px;">الكمية</div> <input type="text" name="p-count" class="form-control float-right" style="font-family:hana;direction:RTL; border: solid 1px #86377b !important;" autocomplete="off" placeholder="الكمية"></input> </div> </div> </div> <hr /> <div class="row" style="flex-direction: row-reverse;"> <div class="col-sm col-lg-auto"> <div class="form-group stock-code-group"> <div class="form-text" style="text-align: right; direction:RTL; color:black;font-size:23px;">كود المنتج</div> <input type="text" name="p-count" class="form-control float-right" style="font-family:hana;direction:RTL; border: solid 1px #86377b !important;" autocomplete="off" placeholder="الكود"></input> </div> </div> <div class="col-sm col-lg-auto"> <div class="form-group chemicalcom-group"> <div class="form-text" style="text-align: right; direction:RTL; color:black;font-size:23px;">التركيبة الكيميائية</div> <input type="text" name="p-count" class="form-control float-right" style="font-family:hana;direction:RTL; border: solid 1px #86377b !important;" autocomplete="off" placeholder="التركيبة الكيميائية"></input> </div> </div> <div class="col-sm col-lg-auto"> <div class="form-group concentration-group"> <div class="form-text" style="text-align: right; direction:RTL; color:black;font-size:23px;">التركيز</div> <input type="text" name="p-count" class="form-control float-right" style="font-family:hana;direction:RTL; border: solid 1px #86377b !important;" autocomplete="off" placeholder="تركيز الدواء"></input> </div> </div> </div> <hr /> <div class="row" style="flex-direction: row-reverse;"> <div class="col-sm col-lg-auto"> <div class="form-group packsize-group"> <div class="form-text" style="text-align: right; direction:RTL; color:black;font-size:23px;">حجم العلبة</div> <input type="text" name="p-count" class="form-control float-right" style="font-family:hana;direction:RTL; border: solid 1px #86377b !important;" autocomplete="off" placeholder="حجم العلبة"></input> </div> </div> <div class="col-sm col-lg-auto"> <div class="form-group mandate-group"> <div class="form-text" style="text-align: right; direction:RTL; color:black;font-size:23px;">تاريخ الإنتاج</div> <input type="date" id="mandate_#" name="mandate1" class="mandate-input" style="font-family:hana;direction:RTL; border: solid 1px #86377b !important;"></input> </div> </div> <div class="col-sm col-lg-auto"> <div class="form-group expdate-group"> <div class="form-text" style="text-align: right; direction:RTL; color:black;font-size:23px;">تاريخ الإنتهاء</div> <input type="date" id="expdate_#" name="expdate1" class="expdate-input" style="font-family:hana;direction:RTL; border: solid 1px #86377b !important;"></input> </div> </div> </div> <div class="row" style="flex-direction: row-reverse;"> <div class="col-sm col-lg-auto"> <div class="form-group sale-group"> <div class="form-text" style="text-align: right; direction:RTL; color:black;font-size:23px;">الخصم</div> <select class="custom-select" onchange="yesnoCheck(this);" id="medictype" style="direction:RTL; font-family:hana; border: solid 1px #86377b !important;"> <option selected>الخصم على المنتج</option> <option value="1">نعم</option><i class="fas fa-capsules"></i> <option value="2">لا</option> </select> </div> </div> <div class="col-sm col-lg-auto"> <div class="form-group discou-group"> <div class="form-text" style="text-align: right; direction:RTL; color:black;font-size:23px;">قيمة الخصم</div> <input type="text" name="p-count" class="form-control float-right" style="font-family:hana;direction:RTL; border: solid 1px #86377b !important;" autocomplete="off" placeholder="قيمة مئوية"></input> </div> </div> <div class="col-sm col-lg-auto"> <div class="form-group bounsfor-group"> <div class="form-text" style="text-align: right; direction:RTL; color:black;font-size:23px;">القطع المخصومة</div> <input type="text" name="p-count" class="form-control float-right" style="font-family:hana;direction:RTL; border: solid 1px #86377b !important;" autocomplete="off" placeholder="على كل (10) قطع"></input> </div> </div> </div> <hr /> <center> <nav class="navbar counter justify-content-center" style="width:70vh; background-color:#86377b;"> <a class="navbar-brand" style="font-family:tahoma; font-size:28px; text-shadow:4px 4px rgba(0,0,0,1); color:white;">'+i+' / '+formscount+'</a> </nav> </center> </div></div></div></div>')); event.preventDefault()
}
}
}
</script>
<!-- Fontawseome Kit -->
<script src="https://kit.fontawesome.com/d75f59893e.js" crossorigin="anonymous"></script>
</head>
<body>
<?
if($_SERVER['REQUEST_METHOD'] == 'POST')
{
echo '<script> myFunction(); </script>';
}
?>
<!-- Bootstrap Jquery JavaScripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script><!-- Bootstrap Jquery JavaScripts -->
<!-- Bootstrap Jquery JavaScripts Ends -->
<!-- navegtion bar bootstrap 4 -->
<?php include("..\\home\\navbar.php"); ?>
<!-- basket sidebar -->
<?php include("..\\home\\basket.php"); ?>
<!-- Main Products Form -->
<center>
<div class="card justify-content-center cont">
<div class="card-body">
<div class="card-text">
<nav class="navbar header justify-content-center">
<a class="navbar-brand" style="font-family:hana; font-size:28px; text-shadow:4px 4px rgba(0,0,0,1); color:white;">إدخال المنتجات</a>
</nav>
<hr />
<center>
<div id="demo" class="carousel slide" data-interval="false" style="height:50vh;">
<!-- The slideshow -->
<div class="carousel-inner canner">
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev d-none d-md-block" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon grow" style="filter:invert(100%); height:50vh; position:relative; left:-4vh;"></span>
</a>
<a class="carousel-control-next d-none d-md-block" href="#demo" data-slide="next">
<span class="carousel-control-next-icon grow" style="filter:invert(100%); height:50vh; position:relative; right:-4vh;"></span>
</a>
</div>
</center>
</div>
</div>
</div>
</center>
</body>
</html>
I have a script of a payment gateway:
<script src="https://assets.pagar.me/checkout/1.1.0/checkout.js"></script>
When the user click to pay an item I call the next code. It open a modal dialog into a iframe to fill data from credit card to pay the item.
My app will work in kiosk mode and I´d like to close the iframe after a timeout.
I have tried:
setTimeout(function(){
function closeWin() // Tested Code
{
var someIframe=document.
getElementById('easyXDM_PagarMeCheckout_default6958_provider')
.contentWindow.document;
}
closeWin()
},30000)
but it doesn't work. Here is How I call the function of the script to execute a payment:
UPADATE:
I achieve a way to find the iframe using:
var ifr=$('#easyXDM_PagarMeCheckout_default6958_provider', parent.document);
I am trying now:
ifr.remove()
but no success.
var checkout = new PagarMeCheckout.Checkout({
encryption_key: 'ek_test_f9cws0bU9700VqWE4UDuBlKLbvAAA',
success: function(data) {
console.log(data);
},
error: function(err) {
console.log(err);
},
close: function() {
console.log('The modal has been closed.');
}
});
var params = {
"amount":128000,
"customerData":"true",
"paymentMethods":"boleto,credit_card",
"postbackUrl":"requestb.in/1234",
"items": [
{
id: '1',
title: 'Bola de futebol',
unit_price: 12000,
quantity: 1,
tangible: true
},
{
id: 'a123',
title: 'Caderno do Goku',
unit_price: 3200,
quantity: 3,
tangible: true
}
]
};
var ck=checkout.open(params);
Here is a copy of the iframe:
<iframe name="easyXDM_PagarMeCheckout_default3498_provider" id="easyXDM_PagarMeCheckout_default3498_provider" src="https://assets.pagar.me/checkout/1.1.0/modal.html?xdm_e=http%3A%2F%2Flocalhost&xdm_c=default3498&xdm_p=1" frameborder="0" style="z-index: 9999; background: transparent; border: 0px none transparent; overflow-x: hidden; overflow-y: auto; margin: 0px; padding: 0px; -webkit-tap-highlight-color: transparent; position: fixed; left: 0px; top: 0px; width: 100%; height: 100%;"></iframe>
#document
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
<title>Checkout</title>
<link href="//fonts.googleapis.com/css?family=Raleway:600,500,400" rel="stylesheet" type="text/css">
<link href="//fonts.googleapis.com/css?family=Titillium+Web:300,300italic,400,400italic,600,600italic" rel="stylesheet" type="text/css">
<link href="//fonts.googleapis.com/css?family=PT+Sans:400,700" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="style/pagarme-ui.css?version=5">
<link rel="stylesheet" href="style/card.css?version=5">
<link rel="stylesheet" href="style/icons.css">
<link rel="stylesheet" href="style/mobile.css" media="only screen and (max-width: 600px)">
<script async="" src="https://www.google-analytics.com/analytics.js"></script><script async="" src="//www.google-analytics.com/analytics.js"></script><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
<script src="jquery.bez.min.js"></script>
<script src="jquery.color.min.js"></script>
<!--[if lte IE 7]>
<script src="json.min.js"></script>
<![endif]-->
<script src="raven.min.js"></script>
<script>
Raven.config('https://4a6f66d610de4a0ab3d822d95075cff2#sentry.pagar.me/3').install();
</script>
<script src="animations/default.js"></script>
<script src="card.js"></script>
<script src="easyXDM.js"></script>
<script src="modal.js"></script>
<!--[if lte IE 9]>
<link rel="stylesheet" href="style/pagarme-ui-ie8.css" />
<script src="animations/ie.js"></script>
<script src="modal-ie8.js"></script>
<![endif]-->
<!--[if lte IE 7]>
<link rel="stylesheet" href="style/pagarme-ui-ie7.css" />
<![endif]-->
<link rel="stylesheet" href="style/pagarme-ui-ie.css">
</head>
<body>
<div id="pagarme-checkout-ui" style="opacity: 1;">
<div id="pagarme-checkout-header">
<span class="icon-pg-checkout-back"></span><span class="no-mobile"> Voltar</span>
<ul class="pagarme-checkout-step-indicator mobile show">
<li href="#" class="pagarme-checkout-choose-payment-method-bullet step-indicator-bullet active" style="margin-top: -100px;">•</li>
<li href="#" class="pagarme-checkout-step-buyer-information-bullet step-indicator-bullet" style="margin-top: -100px;">•</li>
<li href="#" class="pagarme-checkout-customer-address-information-bullet step-indicator-bullet" style="margin-top: 0px;">•</li>
<li href="#" class="pagarme-checkout-credit-card-information-bullet step-indicator-bullet" style="margin-top: 0px;">•</li>
</ul>
<i class="icon-pg-checkout-close"></i>
</div>
<div id="pagarme-modal-loading" style="display: none;">
<div class="spinner"></div>
</div>
<div id="pagarme-modal-box" style="top: 0px; opacity: 1;">
<p id="pagarme-checkout-step-title"><span class="no-mobile">Qual a </span><span class="mobile-capitalized">forma</span> de pagamento<span class="no-mobile">?</span></p>
<p id="pagarme-checkout-amount-information">Total a pagar <span class="brand-color" style="color: rgb(26, 110, 225);">R$<span class="checkout-amount">1.280,00</span></span></p>
<ul class="pagarme-checkout-step-indicator no-mobile show">
<li href="#" class="pagarme-checkout-choose-payment-method-bullet step-indicator-bullet active" style="margin-top: -100px;">•</li>
<li href="#" class="pagarme-checkout-step-buyer-information-bullet step-indicator-bullet" style="margin-top: -100px;">•</li>
<li href="#" class="pagarme-checkout-customer-address-information-bullet step-indicator-bullet" style="margin-top: -100px;">•</li>
<li href="#" class="pagarme-checkout-credit-card-information-bullet step-indicator-bullet" style="margin-top: -100px;">•</li>
</ul>
<div class="pagarme-checkout-step hidden" id="pagarme-modal-box-step-boleto-installment-information" style="opacity: 0; display: none;">
</div>
<div class="pagarme-checkout-step hidden" id="pagarme-modal-box-step-boleto-only" style="opacity: 0; display: none;">
<div id="pagarme-checkout-boleto-button" class="brand-background-color darker-hover choose-method-button-container arrow" style="background-color: rgb(26, 110, 225);">
<button>
Boleto bancário <span id="boleto-discount" class="payment-discount"></span>
<div id="boleto-helper-text" class="payment-method-helper-text boleto-helper-text"></div>
</button>
<span class="button-indicator icon-pg-checkout-continue"></span>
</div>
</div>
<div class="pagarme-checkout-step next hidden" id="pagarme-modal-box-step-buyer-information" style="opacity: 0; display: none; left: 100px;">
<div class="error-message" style="display: none">
<span></span>
</div>
<div class="form-group pagarme-checkout-input-container">
<input id="pagarme-modal-box-buyer-name" name="pagarme-buyer-name" placeholder="Nome" type="text">
<span class="pagarme-checkout-success-mark icon-pg-checkout-success"></span>
<span class="pagarme-checkout-error-mark icon-pg-checkout-error"></span>
</div>
<div class="form-group pagarme-checkout-input-container">
<input id="pagarme-modal-box-buyer-email" name="pagarme-buyer-email" placeholder="Email" type="email">
<span class="pagarme-checkout-success-mark icon-pg-checkout-success"></span>
<span class="pagarme-checkout-error-mark icon-pg-checkout-error"></span>
</div>
<div class="form-group pagarme-checkout-input-container">
<input id="pagarme-modal-box-buyer-document-number" name="pagarme-buyer-document-number" placeholder="CPF/CNPJ" type="text" pattern="[0-9]*" maxlength="14" autocomplete="off">
<span class="pagarme-checkout-success-mark icon-pg-checkout-success"></span>
<span class="pagarme-checkout-error-mark icon-pg-checkout-error"></span>
</div>
<div id="pagarme-checkout-ddd-field-container" class="pagarme-checkout-input-container">
<input id="pagarme-modal-box-buyer-ddd" name="pagarme-buyer-ddd" placeholder="DDD" type="text" pattern="[0-9]*" maxlength="2" autocomplete="off">
<span class="pagarme-checkout-success-mark icon-pg-checkout-success"></span>
<span class="pagarme-checkout-error-mark icon-pg-checkout-error"></span>
</div>
<div id="pagarme-checkout-phone-number-field-container" class="pagarme-checkout-input-container">
<input id="pagarme-modal-box-buyer-number" name="pagarme-buyer-number" placeholder="Número" type="text" pattern="[0-9]*" maxlength="10" autocomplete="off">
<span class="pagarme-checkout-success-mark icon-pg-checkout-success"></span>
<span class="pagarme-checkout-error-mark icon-pg-checkout-error"></span>
</div>
<button class="form-group pagarme-modal-box-next-step brand-background-color" style="background-color: rgb(26, 110, 225);">Continuar <span class="icon-pg-checkout-continue"></span></button>
</div>
<div class="pagarme-checkout-step" id="pagarme-modal-box-step-choose-method" style="opacity: 1; left: 0px; display: block;">
<div id="pagarme-checkout-card-button" class="brand-background-color darker-hover choose-method-button-container arrow" style="background-color: rgb(26, 110, 225);">
<button id="pagarme-credit-card-payment-method" class="brand-border-color" style="border-bottom-color: rgb(49, 125, 228);">
Cartão de crédito <span id="credit-card-discount" class="payment-discount"></span><br>
<div id="credit-card-helper-text" class="payment-method-helper-text"></div>
</button>
<span class="button-indicator icon-pg-checkout-continue"></span>
</div>
<div id="pagarme-checkout-boleto-button" class="brand-background-color darker-hover choose-method-button-container arrow" style="background-color: rgb(26, 110, 225);">
<button>
Boleto bancário <span id="boleto-discount" class="payment-discount"></span>
<div id="boleto-helper-text" class="payment-method-helper-text boleto-helper-text"></div>
</button>
<span class="button-indicator icon-pg-checkout-continue"></span>
</div>
</div>
<div class="pagarme-checkout-step next hidden" id="pagarme-modal-box-step-credit-card-information" style="opacity: 0; display: none; left: 100px;">
<div id="pagarme-checkout-card-container">
<div class="card">
<div class="front">
<p class="general expiration-label field">Valido ate</p>
<p class="general number field">•••• •••• •••• ••••</p>
<p class="general expiration field">MM/AA</p>
<p class="general name field">Nome completo</p>
<p class="amex cvv field">••••</p>
<p class="amex expiration-label field">Valido ate</p>
<p class="amex number field">•••• •••• •••• ••••</p>
<p class="amex expiration field">MM/AA</p>
<p class="amex name field">Nome completo</p>
</div>
<div class="back">
<p class="cvv field">•••</p>
</div>
</div>
</div>
<div class="error-message" style="display: none">
<span></span>
</div>
<div class="form-group pagarme-checkout-input-container brand-display">
<input id="pagarme-modal-box-credit-card-number" name="pagarme-credit-card-number" placeholder="Número" type="text" pattern="[0-9]*" maxlength="19" autocomplete="off">
<span class="brand-icon"></span>
<span class="pagarme-checkout-success-mark icon-pg-checkout-success"></span>
<span class="pagarme-checkout-error-mark icon-pg-checkout-error"></span>
</div>
<div class="form-group pagarme-checkout-input-container">
<input id="pagarme-modal-box-credit-card-name" name="pagarme-credit-card-name" placeholder="Nome (igual no cartão)" type="text" autocomplete="off">
<span class="pagarme-checkout-success-mark icon-pg-checkout-success"></span>
<span class="pagarme-checkout-error-mark icon-pg-checkout-error"></span>
</div>
<div id="pagarme-checkout-credit-card-expiration-container" class="form-group pagarme-checkout-input-container">
<input id="pagarme-modal-box-credit-card-expiration" name="pagarme-credit-card-expiration" placeholder="Validade" type="text" pattern="[0-9]*" maxlength="5" autocomplete="off">
<span class="pagarme-checkout-success-mark icon-pg-checkout-success"></span>
<span class="pagarme-checkout-error-mark icon-pg-checkout-error"></span>
</div>
<div id="pagarme-checkout-credit-card-cvv-container" class="form-group pagarme-checkout-input-container">
<input id="pagarme-modal-box-credit-card-cvv" name="pagarme-credit-card-cvv" placeholder="CVV" type="text" pattern="[0-9]*" maxlength="3" autocomplete="off">
<span class="pagarme-checkout-success-mark icon-pg-checkout-success"></span>
<span class="pagarme-checkout-error-mark icon-pg-checkout-error"></span>
</div>
<div tabindex="-1" class="pretty-select-wrap">
<div id="pagarme-checkout-installments-container" class="form-group pagarme-checkout-input-container">
<div class="pretty-select-container">
<span class="placeholder installments-value">Parcelas</span>
<img src="images/select-icon.png">
<select id="pagarme-modal-box-installments" name="pagarme-installments" placeholder="Parcelas" style="display: none;"></select>
</div>
<span class="pagarme-checkout-success-mark icon-pg-checkout-success"></span>
<span class="pagarme-checkout-error-mark icon-pg-checkout-error"></span>
</div>
<div class="pretty-select-select-container hidden">
<div class="select-arrow"> </div>
<ul class="select-options"></ul>
</div>
</div>
<button class="form-group pagarme-modal-box-next-step brand-background-color" style="background-color: rgb(26, 110, 225);">Pagar (R$<span class="checkout-amount">1.280,00</span>)<span class="icon-pg-checkout-continue"></span></button>
</div>
<div class="pagarme-checkout-step next hidden" id="pagarme-modal-box-step-customer-address-information" style="opacity: 0; display: none; left: 100px;">
<div class="error-message" style="display: none">
<span></span>
</div>
<div class="form-group pagarme-checkout-input-container">
<input id="pagarme-modal-box-customer-address-zipcode" name="pagarme-customer-address-zipcode" placeholder="CEP" type="text" pattern="[0-9]*" maxlength="9" autocomplete="off">
<span class="pagarme-checkout-success-mark icon-pg-checkout-success"></span>
<span class="pagarme-checkout-error-mark icon-pg-checkout-error"></span>
<span class="pagarme-checkout-loading"><img src="images/loading.gif"></span>
</div>
<div id="pagarme-checkout-address-street-field-container" class="form-group pagarme-checkout-input-container">
<input id="pagarme-modal-box-customer-address-street" name="pagarme-customer-address-street" placeholder="Rua" type="text">
<span class="pagarme-checkout-success-mark icon-pg-checkout-success"></span>
<span class="pagarme-checkout-error-mark icon-pg-checkout-error"></span>
</div>
<div id="pagarme-checkout-address-number-field-container" class="form-group pagarme-checkout-input-container">
<input id="pagarme-modal-box-customer-address-number" name="pagarme-customer-address-number" placeholder="Núm." type="text" pattern="[0-9]*" autocomplete="off">
<span class="pagarme-checkout-success-mark icon-pg-checkout-success"></span>
<span class="pagarme-checkout-error-mark icon-pg-checkout-error"></span>
</div>
<div id="pagarme-checkout-address-complementary-field-container" class="form-group pagarme-checkout-input-container">
<input id="pagarme-modal-box-customer-address-complementary" name="pagarme-customer-address-complementary" placeholder="Complemento" type="text">
<span class="pagarme-checkout-success-mark icon-pg-checkout-success"></span>
<span class="pagarme-checkout-error-mark icon-pg-checkout-error"></span>
</div>
<div id="pagarme-checkout-address-neighborhood-field-container" class="form-group pagarme-checkout-input-container">
<input id="pagarme-modal-box-customer-address-neighborhood" name="pagarme-customer-address-neighborhood" placeholder="Bairro" type="text">
<span class="pagarme-checkout-success-mark icon-pg-checkout-success"></span>
<span class="pagarme-checkout-error-mark icon-pg-checkout-error"></span>
</div>
<div id="pagarme-checkout-address-city-field-container" class="form-group pagarme-checkout-input-container">
<input id="pagarme-modal-box-customer-address-city" name="pagarme-customer-address-city" placeholder="Cidade" type="text">
<span class="pagarme-checkout-success-mark icon-pg-checkout-success"></span>
<span class="pagarme-checkout-error-mark icon-pg-checkout-error"></span>
</div>
<div id="pagarme-checkout-address-state-field-container" class="form-group pagarme-checkout-input-container">
<input id="pagarme-modal-box-customer-address-state" name="pagarme-customer-address-state" placeholder="UF" type="text" maxlength="2" autocomplete="off">
<span class="pagarme-checkout-success-mark icon-pg-checkout-success"></span>
<span class="pagarme-checkout-error-mark icon-pg-checkout-error"></span>
</div>
<button class="form-group pagarme-modal-box-next-step brand-background-color" style="background-color: rgb(26, 110, 225);">Continuar <span class="icon-pg-checkout-continue"></span></button>
</div>
<div class="pagarme-checkout-step hidden next" id="pagarme-checkout-error-container" style="opacity: 0; display: none; left: 100px;">
<div id="pagarme-checkout-error-header">
Transação não autorizada
</div>
<div id="pagarme-checkout-error-body"></div>
<a id="pagarme-checkout-error-back-button" href="">Preencher dados de cartão novamente</a>
</div>
<div class="clearfix"></div>
</div>
<div id="pagarme-checkout-footer">
<div id="footer-container">
<p id="pagarme-checkout-secure-connection"><span class="icon-pg-checkout-locker"></span> Você está em uma conexão segura</p>
<p id="pagarme-checkout-pagarme-brand"><span class="no-mobile">tecnologia </span><span class="icon-pg-checkout-pagarme-logo"></span></p>
<div class="clearfix"></div>
</div>
</div>
</div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
</script>
</body>
</html>
</iframe>
HTML:
$(document).on('click', '.Addtocart button', function(event){
alert($(this).closest('.shopping_cart').data('item'));
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://vsss.co.in/assets/css/main.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-sm-4 col-md-3 wow fadeInUp animated animated" style="visibility: visible; animation-name: fadeInUp; margin-bottom: 15px;">
<div class="products">
<div class="product">
<div class="product-image image_slider">
<div class="image">
<a href="http://vsss.co.in/index.php/Detail/view/84"><img src="http://vsss.co.in/assets/images/No_image.png" alt="" class="slide_active" data-number="0" style="height: 100%; width: auto; max-width: 100%; max-height: 251px; display: inline;">
<div style="position: absolute;bottom:97px; right:0px">
<button class="btn btn-primary icon transparent shopping_cart" data-item="84" data-toggle="dropdown" type="button"> <i class="fa fa-shopping-cart" style="font-size: 22px"></i> </button>
</div>
</a>
</div>
</div>
<div class="product-info text-left">
<h3 class="name">2048 TWINKLE POUCH</h3>
<h3 class="price"><i class="fa fa-inr" aria-hidden="true"></i>0/-</h3> </div>
<div class="product-cart text-left">
<div class="row">
<div class="col-md-12 Addtocart">
<div style="width:40%;float: left;">
<select>
<option value="11" data-unit_value="1">Pc</option>
</select>
</div>
<div style="width:40%;float: left;">
<input type="text" placeholder="Quantity"> </div>
<div style="width:20%;float: left;">
<button class="btn btn-primary icon transparent" type="button"> OK </button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Hello everyone as you can see I am looking for data-item value when user clicking on Addtocart button that located in class shopping_cart but it showing undefined. How can I solve this issue? why it finding the element.
Based on your markup, you need to go further up to .product class and then find its shopping_cart
alert($(this).closest( '.product' ).find( ".shopping_cart" ).data( 'item' ));
Demo
$(document).on('click', '.Addtocart button', function(event){
alert($(this).closest('.product').find(".shopping_cart").data('item'));
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://vsss.co.in/assets/css/main.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-sm-4 col-md-3 wow fadeInUp animated animated" style="visibility: visible; animation-name: fadeInUp; margin-bottom: 15px;">
<div class="products">
<div class="product">
<div class="product-image image_slider">
<div class="image">
<a href="http://vsss.co.in/index.php/Detail/view/84"><img src="http://vsss.co.in/assets/images/No_image.png" alt="" class="slide_active" data-number="0" style="height: 100%; width: auto; max-width: 100%; max-height: 251px; display: inline;">
<div style="position: absolute;bottom:97px; right:0px">
<button class="btn btn-primary icon transparent shopping_cart" data-item="84" data-toggle="dropdown" type="button"> <i class="fa fa-shopping-cart" style="font-size: 22px"></i> </button>
</div>
</a>
</div>
</div>
<div class="product-info text-left">
<h3 class="name">2048 TWINKLE POUCH</h3>
<h3 class="price"><i class="fa fa-inr" aria-hidden="true"></i>0/-</h3> </div>
<div class="product-cart text-left">
<div class="row">
<div class="col-md-12 Addtocart">
<div style="width:40%;float: left;">
<select>
<option value="11" data-unit_value="1">Pc</option>
</select>
</div>
<div style="width:40%;float: left;">
<input type="text" placeholder="Quantity"> </div>
<div style="width:20%;float: left;">
<button class="btn btn-primary icon transparent" type="button"> OK </button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Solution:
$(document).on('click', '.Addtocart button', function(event){
alert($(this).parents().find('.shopping_cart').data('item'));
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://vsss.co.in/assets/css/main.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-sm-4 col-md-3 wow fadeInUp animated animated" style="visibility: visible; animation-name: fadeInUp; margin-bottom: 15px;">
<div class="products">
<div class="product">
<div class="product-image image_slider">
<div class="image">
<a href="http://vsss.co.in/index.php/Detail/view/84"><img src="http://vsss.co.in/assets/images/No_image.png" alt="" class="slide_active" data-number="0" style="height: 100%; width: auto; max-width: 100%; max-height: 251px; display: inline;">
<div style="position: absolute;bottom:97px; right:0px">
<button class="btn btn-primary icon transparent shopping_cart" data-item="84" data-toggle="dropdown" type="button"> <i class="fa fa-shopping-cart" style="font-size: 22px"></i> </button>
</div>
</a>
</div>
</div>
<div class="product-info text-left">
<h3 class="name">2048 TWINKLE POUCH</h3>
<h3 class="price"><i class="fa fa-inr" aria-hidden="true"></i>0/-</h3> </div>
<div class="product-cart text-left">
<div class="row">
<div class="col-md-12 Addtocart">
<div style="width:40%;float: left;">
<select>
<option value="11" data-unit_value="1">Pc</option>
</select>
</div>
<div style="width:40%;float: left;">
<input type="text" placeholder="Quantity"> </div>
<div style="width:20%;float: left;">
<button class="btn btn-primary icon transparent" type="button"> OK </button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Try this:
$(document).on('click', '.Addtocart button', function(event) {
alert($(this).closest('.product').find('.shopping_cart').data('item'));
});
This will work!!!
First, sorry for my poor English. I know you guys may think that this is a duplicate question but it is not.
My question is based on below question instead of copy：change the src value of an image based on the options value in a select box
I have tried all jQuery codes which were suggested by users on the above question but still not work for my thumbnail product.
Here is my jQuery code, it can run on only 1 thumbnail. If I used the same jQuery code for 2 thumbnails, the error appears. When I choose color, the right thumbnail image will synchronize with the left one. Here is my jsfiddle: https://jsfiddle.net/fw800cq7/21/
I am new so i cannot post the failed image.
<div class="row">
<div class="col-md-12">
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<!-- 1-2 -->
<!-- 1 -->
<div class="item active">
<div class="row"> <!--1 & 2 thumbnain-->
<div class="col-md-6"> <!--1 thumbnail-->
<div class="thumbnail"><img src="http://via.placeholder.com/500x500" name="img-swap" alt="Image">
<div class="caption">
<p class="title">Product</p>
<p class="cm">Comment</p>
</div>
<div class="row"> <!--two forms row-->
<div class="col-md-12">
<form class="form-inline">
<div class="form-group">
<label for="">Size</label>
<select class="form-control input-xs">
<option>M</option>
<option>L</option>
<option>XL</option>
</select>
<label for="">Color</label>
<select class="form-control input-xs" name="img-swap" id="img-swap">
<option value="http://via.placeholder.com/500x500">Black</option>
<option value="http://via.placeholder.com/400x400">White</option>
<option value="http://via.placeholder.com/300x300">Grey</option>
<option value="http://via.placeholder.com/200x200">Navy</option>
<option value="http://via.placeholder.com/100x100">Wine</option>
</select>
</div>
</form>
</div><!--col-md-12-->
</div>
<hr class="divider">
<div class="row">
<div class="col-md-6">
<p class="price">Price</p>
</div>
<div class="col-md-6">
Add to Car<span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>
</div>
</div><!--row-->
</div> <!--thumbnail-->
</div> <!-- 1 -->
<!-- 2 -->
<div class="col-md-6"> <!--2 thumbnail-->
<div class="thumbnail"><img src="http://via.placeholder.com/100x100" name="img-swap" alt="Image">
<div class="caption">
<p class="title">Price</p>
<p class="cm">Comment</p>
</div>
<div class="row"> <!--two forms row-->
<div class="col-md-12">
<form class="form-inline">
<div class="form-group">
<label for="">Size</label>
<select class="form-control input-xs">
<option>M</option>
<option>L</option>s
<option>XL</option>
</select>
<label for="">Color</label>
<select class="form-control input-xs" name="img-swap" id="im-swap">
<option value="http://via.placeholder.com/400x400">Black</option>
<option value="http://via.placeholder.com/300x300">White</option>
<option value="http://via.placeholder.com/200x200">Grey</option>
<option value="http://via.placeholder.com/100x100">Navy</option>
</select>
</div>
</form>
</div><!--col-md-12-->
</div>
<hr class="divider">
<div class="row">
<div class="col-md-6">
<p class="price">sss</p>
</div>
<div class="col-md-6">
Add to Car<span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>
</div>
</div><!--row-->
</div> <!--thumbnail-->
</div> <!-- 2 -->
</div><!--1 & 2 thumbnail -->
</div><!--/item-->
</div><!--/carousel-inner-->
<a class="carousel-control left" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="carousel-control right" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div><!--/myCarousel-->
</div>
</div>
Actually, I have used two different ids and jQuery codes to fix this issue.
You can run it here: Here is my jsfiddle: https://jsfiddle.net/fw800cq7/24/
I am new so i cannot post the success image.
<div class="row">
<div class="col-md-12">
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<!-- 1-2 -->
<!-- 1 -->
<div class="item active">
<div class="row"> <!--1 & 2 thumbnain-->
<div class="col-md-6"> <!--1 thumbnail-->
<div class="thumbnail"><img src="http://via.placeholder.com/500x500" name="img-swap" alt="Image">
<div class="caption">
<p class="title">Product</p>
<p class="cm">Comment</p>
</div>
<div class="row"> <!--two forms row-->
<div class="col-md-12">
<form class="form-inline">
<div class="form-group">
<label for="">Size</label>
<select class="form-control input-xs">
<option>M</option>
<option>L</option>
<option>XL</option>
</select>
<label for="">Color</label>
<select class="form-control input-xs" name="img-swap" id="img-swap">
<option value="http://via.placeholder.com/500x500">Black</option>
<option value="http://via.placeholder.com/400x400">White</option>
<option value="http://via.placeholder.com/300x300">Grey</option>
<option value="http://via.placeholder.com/200x200">Navy</option>
<option value="http://via.placeholder.com/100x100">Wine</option>
</select>
</div>
</form>
</div><!--col-md-12-->
</div>
<hr class="divider">
<div class="row">
<div class="col-md-6">
<p class="price">Price</p>
</div>
<div class="col-md-6">
Add to Car<span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>
</div>
</div><!--row-->
</div> <!--thumbnail-->
</div> <!-- 1 -->
<!-- 2 -->
<div class="col-md-6"> <!--2 thumbnail-->
<div class="thumbnail"><img src="http://via.placeholder.com/100x100" name="img-swap1" alt="Image">
<div class="caption">
<p class="title">Price</p>
<p class="cm">Comment</p>
</div>
<div class="row"> <!--two forms row-->
<div class="col-md-12">
<form class="form-inline">
<div class="form-group">
<label for="">Size</label>
<select class="form-control input-xs">
<option>M</option>
<option>L</option>s
<option>XL</option>
</select>
<label for="">Color</label>
<select class="form-control input-xs" name="img-swap1" id="img-swap1">
<option value="http://via.placeholder.com/400x400">Black</option>
<option value="http://via.placeholder.com/300x300">White</option>
<option value="http://via.placeholder.com/200x200">Grey</option>
<option value="http://via.placeholder.com/100x100">Navy</option>
</select>
</div>
</form>
</div><!--col-md-12-->
</div>
<hr class="divider">
<div class="row">
<div class="col-md-6">
<p class="price">sss</p>
</div>
<div class="col-md-6">
Add to Car<span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>
</div>
</div><!--row-->
</div> <!--thumbnail-->
</div> <!-- 2 -->
</div><!--1 & 2 thumbnail -->
</div><!--/item-->
</div><!--/carousel-inner-->
<a class="carousel-control left" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="carousel-control right" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div><!--/myCarousel-->
</div>
</div>
However, it seems so redundant. If I try to add a new thumbnail, I must repeat the code again in jQuery. The question is that: How to use only 1 id and 1 jQuery code for all thumbnails and work well.
Ps. I am very new in JQuery, I am looking for an answer can copy. However, I am willing to learn if you give me the answer which do not instantly fix my problem. Thank you guys.
here is your working fiddle : https://jsfiddle.net/mxymj424/
You can do this with single change listener.
First keep unique id and name both select and image with same.
for example : image name= img-swap_1 and select id = img-swap_1
on change event get the id of select and use that id to change the image src.
$(document).ready(function(){
$(".color-select" ).change(function(){
var id=this.id;
$("img[name="+id+"]").attr("src",$(this).val());
});
});
/* Removes the default 20px margin and creates some padding space for the indicators and controls */
.text-blk .carousel {
margin-bottom: 10px;
padding: 0px;
}
.text-blk .carousel-control {
width:0%;
}
.text-blk .carousel-control.left {
left: -5px;
}
.text-blk .carousel-control.right {
right: -5px;
}
/* Reposition the controls slightly */
/*3粒點*/
/* Changes the position of the indicators */
.text-blk .carousel-indicators {
right: 50%;
top: auto;
bottom: -20px;
margin-right: -20px;
font-size:30px;
}
/* Changes the colour of the indicators */
.text-blk .carousel-indicators .active {
background: #00C851;
}
.text-blk .carousel-indicators li {
background: #ffbb33;
}
.carousel-control .glyphicon-chevron-left , .glyphicon-chevron-right{
color:#000;
}
/*My setting*/
.carousel-inner img {
height:100%;
width:100%;
}
.item .thumbnail .caption {
padding: 2px;
color: #333;
}
.item .thumbnail:hover,
.thumbnail:focus,
.thumbnail.active {
border-color: #4bc6ff;
}
.item .thumbnail img:hover {
outline:1px solid #4bc6ff;
}
.item .title {
font-size:18px;
color:#31708f;
margin:0px 0px 2px 0px ;
font-weight:bold;
}
.item .cm {
font-size:12px;
margin:0px 0px 5px 0px ;
font-weight:none;
color: #757575;
}
.item .form-inline {
margin:0px 0px 5px 0px ;
font-weight:none;
}
.item .divider {
height: 1px;
margin:0px 0px 5px 0px; /*上右下左*/
overflow: hidden;
background-color: #e5e5e5;
}
.item .price {
font-size: 15px;
margin: 2px 2px 2px 2px ;
color: #000;
font-weight:bold;
}
.item .right {
float:right;
}
.item .left {
float:left;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12">
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<!-- 1-2 -->
<!-- 1 -->
<div class="item active">
<div class="row"> <!--1 & 2 thumbnain-->
<div class="col-md-6"> <!--1 thumbnail-->
<div class="thumbnail"><img src="http://via.placeholder.com/500x500" name="img-swap_1" alt="Image">
<div class="caption">
<p class="title">Product</p>
<p class="cm">Comment</p>
</div>
<div class="row"> <!--two forms row-->
<div class="col-md-12">
<form class="form-inline">
<div class="form-group">
<label for="">Size</label>
<select class="form-control input-xs">
<option>M</option>
<option>L</option>
<option>XL</option>
</select>
<label for="">Color</label>
<select class="form-control input-xs color-select" name="img-swap" id="img-swap_1">
<option value="http://via.placeholder.com/500x500">Black</option>
<option value="http://via.placeholder.com/400x400">White</option>
<option value="http://via.placeholder.com/300x300">Grey</option>
<option value="http://via.placeholder.com/200x200">Navy</option>
<option value="http://via.placeholder.com/100x100">Wine</option>
</select>
</div>
</form>
</div><!--col-md-12-->
</div>
<hr class="divider">
<div class="row">
<div class="col-md-6">
<p class="price">Price</p>
</div>
<div class="col-md-6">
Add to Car<span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>
</div>
</div><!--row-->
</div> <!--thumbnail-->
</div> <!-- 1 -->
<!-- 2 -->
<div class="col-md-6"> <!--2 thumbnail-->
<div class="thumbnail"><img src="http://via.placeholder.com/100x100" name="img-swap_2" alt="Image">
<div class="caption">
<p class="title">Price</p>
<p class="cm">Comment</p>
</div>
<div class="row"> <!--two forms row-->
<div class="col-md-12">
<form class="form-inline">
<div class="form-group">
<label for="">Size</label>
<select class="form-control input-xs">
<option>M</option>
<option>L</option>s
<option>XL</option>
</select>
<label for="">Color</label>
<select class="form-control input-xs color-select" name="img-swap1" id="img-swap_2">
<option value="http://via.placeholder.com/400x400">Black</option>
<option value="http://via.placeholder.com/300x300">White</option>
<option value="http://via.placeholder.com/200x200">Grey</option>
<option value="http://via.placeholder.com/100x100">Navy</option>
</select>
</div>
</form>
</div><!--col-md-12-->
</div>
<hr class="divider">
<div class="row">
<div class="col-md-6">
<p class="price">sss</p>
</div>
<div class="col-md-6">
Add to Car<span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>
</div>
</div><!--row-->
</div> <!--thumbnail-->
</div> <!-- 2 -->
</div><!--1 & 2 thumbnail -->
</div><!--/item-->
</div><!--/carousel-inner-->
<a class="carousel-control left" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="carousel-control right" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div><!--/myCarousel-->
</div>
</div>
I'm simply trying to have JQuery show/hide a div. I've tried using Javascript instead and that still does not work. I've tested to make sure that everywhere in my JS script is being reached. It just isn't applying and I don't know why. Thank you for any help you can give.
Javascript
$(document).ready(function() {
startup();
$('select').material_select();
$('ul.tabs').tabs();
$('.collapsible').collapsible({
accordion: false // A setting that changes the collapsible behavior to expandable instead of the default accordion style
});
});
function startup() {
$("#Assignments").hide();
$("#ClassView").hide();
}
$('.datepicker').pickadate({
selectMonths: true, // Creates a dropdown to control month
selectYears: 15 // Creates a dropdown of 15 years to control year
});
function tabswitch(x) {
if (x == 1) {
$("#Calender").show();
$("#Assignments").hide();
$("#ClassView").hide();
} else if (x == 2) {
$("#Calender").hide();
$("#Assignments").show();
$("#ClassView").hide();
} else if (x == 3) {
$("#Calender").hide();
$("#Assignments").hide();
$("#ClassView").show();
}
}
CSS
#sidebar p {
text-align: center;
color: white;
font-size: 18px;
}
#sideInterior p {
color: black;
}
.tabs a:link {
font-family: monospace;
color: white
}
.tabs a:hover {
color: gray;
}
.tabs a:visited {
color: white;
}
.tabs a:active {
color: white;
}
body {
background-color: #bdbdbd;
}
.Accordion {
background-color: white;
}
li {
margin-left: 5px;
margin-right: 5px;
}
HTML
<!DOCTYPE <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="newStyle.css">
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.js"></script>
<script type="text/javascript" src="JS.js"></script>
<meta charset="utf8">
<title>Scheduling_Main</title>
</head>
<nav>
<div class="nav-wrapper blue darken-4">
Scheduling Project
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>Profile
</li>
<li>Settings
</li>
<li>Help
</li>
</ul>
</div>
</nav>
<body>
<div id="2ndNav" class="row nav-wrapper blue">
<div class="col s3 blue" id="sidebar">
<p>Add to your schedule
<p>
</div>
<div class="col s9" id="tabSpace">
<ul class="tabs blue">
<li class="tab col s3">Calender
</li>
<li class="tab col s3">Assignments
</li>
<li class="tab col s3">Class View
</li>
<div class="indicator white" style="z-index:1"></div>
</ul>
</div>
</div>
<div class="row">
<!--start of sidebar-->
<div class="col s3">
<ul class="collapsible popout" data-collapsible="accordion">
<li class="Accordion">
<div class="collapsible-header"><i class="material-icons">add</i>Add semester</div>
<!--start of "add semester"-->
<div class="collapsible-body">
<div class="input-field">
<input id="Semester_Title" type="text" class="validate">
<label for="Semester_Title">Semester Title</label>
</div>
<div class="startDate">
<label for="Semester_Start">Start Date</label>
<input id="Semester_Start" type="date" class="datepicker">
</div>
<div class="endDate">
<label for="Semester_End">End Date</label>
<input id="Semester_End" type="date" class="datepicker">
</div>
<button class="btn waves-effect waves-light" type="submit" name="action">Submit
<i class="material-icons right">send</i>
</button>
</div>
</li>
<li class="Accordion">
<div class="collapsible-header"><i class="material-icons">add</i>Add course</div>
<!--start of "add course"-->
<div class="collapsible-body">
<div class="input-field">
<select>
<!--list of semesters go here-->
<option value="" disabled selected>Choose the semester</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
<div class="input-field">
<input id="Course_ID" type="text" class="validate">
<label for="Course_ID">Course_ID</label>
</div>
<div class="input-field">
<input id="Course_Title" type="text" class="validate">
<label for="Course_Title">Course Title</label>
</div>
<button class="btn waves-effect waves-light" type="submit" name="action">Submit
<i class="material-icons right">send</i>
</button>
</div>
</li>
<li class="Accordion">
<div class="collapsible-header"><i class="material-icons">add</i>Add assignment</div>
<!--start of "add assignment"-->
<div class="collapsible-body">
<div class="input-field">
<select class>
<!--list of classes go here-->
<option value="" disabled selected>Choose the class</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
<div class="input-field">
<input id="Assignment_Title" type="text" class="validate">
<label for="Assignment_Title">Assignment Title</label>
</div>
<div class="endDate">
<label for="Due_Date">Due Date</label>
<input id="Due_Date" type="date" class="datepicker">
</div>
<button class="btn waves-effect waves-light" type="submit" name="action">Submit
<i class="material-icons right">send</i>
</button>
</div>
</li>
</ul>
</div>
<div>
<!--tab stuff goes here-->
<div id="#Calender" class="col s9">
<p>Calender Test</p>
</div>
<div id="#Assignments" class="col s9">
<p>Assignment Test</p>
</div>
<div id="#ClassView" class="col s9">
<p>Class Test</p>
</div>
</div>
</div>
</body>
</html>
I've changed your code. Please see if this is what you want:
[enter link description here][1]
Just change id name.
[1]: https://jsfiddle.net/tyqsa12u/enter code here
Your HTML elements should not have # in front of their ids. Its just used in CSS selector to refer to them.
Replace
<div id="#Assignments" class="col s9">
<p>Assignment Test</p>
</div>
<div id="#ClassView" class="col s9">
<p>Class Test</p>
</div>
with
<div id="Assignments" class="col s9">
<p>Assignment Test</p>
</div>
<div id="ClassView" class="col s9">
<p>Class Test</p>
</div>
and it should work.