could you help me how to load a textfile into an array via Javascript via a local file?
I'm pretty much a beginner in programming und want to develope a small vocabulary test for my niece. Currently, I am writing the questions and solutions manually. However, I want to just a load a local file, which I can use and then work via array-indexes, if possible. Could you help me here and explain to me how I can load a local textfile into an array?
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Vokabeltrainer</title>
<meta http-equiv="cache-control" content="no-cache">
<script src=#"></script>
<script src="#"></script>
<link href="bootstrap.min.css" rel="stylesheet">
<link href="custom.css" rel="stylesheet">
</head>
<body>
<main>
<div class="container">
<div class="row">
<div class="col-lg-12 col-sm-12 col-md-12">
<h1>Leonie's Vokabeltrainer</h1>
<hr>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-sm-12 col-md-12">
<img src="pictures/Bild3.jpg">
</div>
</div>
<div class="row">
<div class="col-lg-12 col-sm-12 col-md-12">
<p>Liebe Leonie, hier kannst Du die Verbformen für das Simple Present üben!</p>
</div>
</div>
<div class="row">
<div class="col-lg-2 col-sm-12 col-md-12">
<strong>Grundform</strong>
</div>
<div class="col-lg-2 col-sm-12 col-md-12">
<strong>Personalpronomen</strong>
</div>
<div class="col-lg-2 col-sm-12 col-md-12">
<strong>Simple Present:</strong>
</div>
<div class="col-lg-2 col-sm-12 col-md-12">
<!--Hier kommt die Lösung hin, wenn falsch oder richtig geraten wurde-->
</div>
</div>
<div class="row">
<div class="col-lg-2 col-sm-12 col-md-12">
(to) run
</div>
<div class="col-lg-2 col-sm-12 col-md-12">
He...
</div>
<div class="col-lg-3 col-sm-12 col-md-12">
<input type="text" id="check1">
</div>
<div class="col-lg-2 col-sm-12 col-md-12">
<button onclick="checkSolution()">Prüfen!</button>
</div>
<div class="col-lg-2 col-sm-12 col-md-12">
<p id="solution1">
</div>
</div>
<div class="row">
<div class="col-lg-2 col-sm-12 col-md-12">
(to) go
</div>
<div class="col-lg-2 col-sm-12 col-md-12">
They...
</div>
<div class="col-lg-3 col-sm-12 col-md-12">
<input type="text">
</div>
<div class="col-lg-2 col-sm-12 col-md-12">
<button>Prüfen!</button>
</div>
<div class="col-lg-2 col-sm-12 col-md-12">
<!--Hier kommt die Lösung hin, wenn falsch oder richtig geraten wurde-->
</div>
</div>
<div class="row">
<div class="col-lg-2 col-sm-12 col-md-12">
(to) carry
</div>
<div class="col-lg-2 col-sm-12 col-md-12">
She...
</div>
<div class="col-lg-3 col-sm-12 col-md-12">
<input type="text">
</div>
<div class="col-lg-2 col-sm-12 col-md-12">
<button>Prüfen!</button>
</div>
<div class="col-lg-2 col-sm-12 col-md-12">
<!--Hier kommt die Lösung hin, wenn falsch oder richtig geraten wurde-->
</div>
</div>
<div class="row">
<div class="col-lg-12 col-sm-12 col-md-12">
<p id="punke">
</div>
</div>
</div>
</main>
</body>
<script>
let counter = 0;
function checkSolution() {
InputText = document.getElementById("check1").value;
if (InputText === 'runs') {
document.getElementById('solution1').innerHTML = 'super';
counter++;
document.getElementById('punke').innerHTML ='Deine Punkte: ' +counter;
}
else {
document.getElementById('solution1').innerHTML = 'nicht super';
}
}
</script>
</html>
Using plain JS
var dataFile = require("dataFile");
dataFile.readFile("./yourFile.txt", function(text){
var textByLine = text.split("\n")
});
Related
I need to wrap all divs after each h4 tag so then i can modify the column size depending on the results.
As is:
<div class="bannerPrincipales">
<h4 class="col-md-12 hotels-area punta-cana">Punta Cana</h4>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
<h4 class="col-md-12 hotels-area bayahibe">Bayahibe</h4>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
<h4 class="col-md-12 hotels-area riviera-maya">Riviera Maya</h4>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
</div>
To be:
<div class="bannerPrincipales">
<h4 class="col-md-12 hotels-area punta-cana">Punta Cana</h4>
<div class="description-wrap">
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
</div>
<h4 class="col-md-12 hotels-area bayahibe">Bayahibe</h4>
<div class="description-wrap">
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
</div>
<h4 class="col-md-12 hotels-area riviera-maya">Riviera Maya</h4>
<div class="description-wrap">
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left"> </div>
</div>
</div>
What I tried:
$(" h4.hotels-area").each(function(){
$(this).nextAll().wrapAll('<div class="description-wrap"></div>')
});
When I do this it messed up my HTML. I do not have access to the html so i need to do it this way, once i wrap then i will count how many div are into the description-wrap class, but I can't get to wrap.
I thought on wrapping because what i need is to be able to count how many col-md-6 col-sm-12 col-xs-12 padding-banner-left are after each h4 and if the result is an unpaired number the first col-md-6 col-sm-12 col-xs-12 padding-banner-left i will change the cols to col-md-12 without knowing how col-md-6 col-sm-12 col-xs-12 padding-banner-left i have after each h4 i won't be able to achive my goal
You could add a div.description-wrap after each h4 tag inside .bannerPrincipales (with the jQuery.after function).
Then, you could cycle each div inside .bannerPrincipales, and say:
if it has description-wrap class, then it will be the wrapper;
else append it inside wrapper (with the jQuery.append function).
And, finally, you could count the number of divs inside wrapper with the length property.
$(function () {
$('.bannerPrincipales h4').after('<div class="description-wrap"></div>');
let wrapper = null;
$('.bannerPrincipales div').each((i, div) => {
if ($(div).hasClass('description-wrap')) {
wrapper = div;
} else {
$(wrapper).append(div);
}
});
$('.bannerPrincipales .description-wrap').each((i, wrapper) => {
let place = $('.bannerPrincipales h4:eq(' + i + ')').text();
let n = $(wrapper).find('div').length;
console.log(place + ' has ' + n + ' divs');
});
});
.description-wrap {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bannerPrincipales">
<h4 class="col-md-12 hotels-area punta-cana">Punta Cana</h4>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left">a</div>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left">b</div>
<h4 class="col-md-12 hotels-area bayahibe">Bayahibe</h4>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left">c</div>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left">d</div>
<h4 class="col-md-12 hotels-area riviera-maya">Riviera Maya</h4>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left">e</div>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left">f</div>
<div class="col-md-6 col-sm-12 col-xs-12 padding-banner-left">g</div>
</div>
<?php echo form_open('Home/OtherDetail'); ?>
<div class="row" style="margin-bottom:5%;" >
<div class="col col-lg-4 col-md-12 col-sm-12 col-xs-12" style="font-weight: 600; font-size: 100%;">Name:</div>
<div class="col col-lg-8 col-md-12 col-sm-12 col-xs-12"><input type="text" name="name" style="width:100%" value=""></div>
</div>
<div class="row" style="margin-bottom:5%;">
<div class="col col-lg-4 col-md-12 col-sm-12 col-xs-12" style="font-weight: 600;font-size: 100%;">Father Full Name:</div>
<div class="col col-lg-8 col-md-12 col-sm-12 col-xs-12"><input type="text" name="FatherName" style="width:100%" value=""></div>
</div>
<div class="row" style="margin-bottom:5%;">
<div class="col col-lg-4 col-md-12 col-sm-12 col-xs-12" style="font-weight: 600;font-size: 100%;">Address:</div>
<div class="col col-lg-8 col-md-12 col-sm-12 col-xs-12"><input type="text" name="Address" style="width:100%" value=""></div>
</div>
<button >add</button>
<button >negative</button>
<?php form_submit('name',value); ?>
//so all button which are comes in between from open and form close linked with form_open
<?php form_close(); ?>
//so all button which are comes in between from open and form close linked with form_open
Please check the below code and it works perfect.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Simple CodeIgniter App - Todos</title>
<link rel="stylesheet"
href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<?php echo form_open('Home/OtherDetail'); ?>
<div class="row" style="margin-bottom:5%;" >
<div class="col col-lg-4 col-md-12 col-sm-12 col-xs-12" style="font-weight: 600; font-size: 100%;">Name:</div>
<div class="col col-lg-8 col-md-12 col-sm-12 col-xs-12"><input type="text" name="name" style="width:100%" value=""></div>
</div>
<div class="row" style="margin-bottom:5%;">
<div class="col col-lg-4 col-md-12 col-sm-12 col-xs-12" style="font-weight: 600;font-size: 100%;">Father Full Name:</div>
<div class="col col-lg-8 col-md-12 col-sm-12 col-xs-12"><input type="text" name="FatherName" style="width:100%" value=""></div>
</div>
<div class="row" style="margin-bottom:5%;">
<div class="col col-lg-4 col-md-12 col-sm-12 col-xs-12" style="font-weight: 600;font-size: 100%;">Address:</div>
<div class="col col-lg-8 col-md-12 col-sm-12 col-xs-12"><input type="text" name="Address" style="width:100%" value=""></div>
</div>
<a href="Home/new">
<?php echo form_button('add','add'); ?>
<!-- <button type>add</button> -->
</a>
<a href="Home/new">
<?php echo form_button('negative','negative'); ?>
<!-- <button type>negative</button> -->
</a>
<?php echo form_submit('name','btn_name'); ?>//so all button which are comes in between from open and form close linked with form_open
<?php echo form_close(); ?>
</body>
</html>
If you do not want that HTML BUTTON act like Submit, you need to add the tag type="button".
<form>
<button>This button submit</button>
<button type="button">This button DO NOT submit</button>
<!-- Default attribute type value is "submit" -->
</form>
i figure it out why that is happening...
that is happening because of button tag which is in between the form_open tag and form_close tag as i change button tag to div than it is working perfectly....
so there is the conclusion when you submit the form never use any kind of button tag use only div tag ,span tag etc.
I am developing a web page which has multiple drop down menu. Now i need to display some text area according to the options selected in the drop down. If it is a normal drop down i can do that easily. But here the problem is need to display multiple text areas on multiple selection of that drop down.
Here is my code
<div class="row form-group">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 ">
<spring:message text="Nature of Type" />
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<select id="nature" type="text" class="form-control"
multiple="multiple" onchange="ChangeNature(this)">
<option>Airticket(Round Trip)</option>
<option value="visa">Visa</option>
<option value="medical">Medical</option>
<option value="resident">Resident Card</option>
<option value="pickupdrop">Airport Pickup/Drop</option>
<option value="accommodation">First 7 Days Free
Accommodation</option>
<option value="other1">Other 1</option>
<option value="other2">Other 2</option>
</select> <span class="errorspan" id="nature_er">select the
type</span>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"
id="airticket_amt">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 rq-field">
<spring:message text="Airticket Amount" />
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<input id="amount" type='text' class="form-control numcls " />
<span class="errorspan" id="billinghrs_er">enter
airticket the Air ticket amount</span>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
</div>
<div class="row form-group multihide" id="visa_amt">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 ">
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"></div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 rq-field">
<spring:message text="Visa Amount" />
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<input id="amount" type='text' class="form-control numcls " />
<span class="errorspan" id="billinghrs_er">enter the
visa amount</span>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
</div>
<div class="row form-group multihide" id="medical_amt">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 ">
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"></div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 rq-field">
<spring:message text="Medical Amount" />
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<input id="amount" type='text' class="form-control numcls " />
<span class="errorspan" id="billinghrs_er">enter the
medical amount</span>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
</div>
<div class="row form-group multihide" id="residentcard_amt">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 ">
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"></div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 rq-field">
<spring:message text="Resident Card Amount" />
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<input id="amount" type='text' class="form-control numcls " />
<span class="errorspan" id="billinghrs_er">enter the
resident card Air ticket amount</span>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
</div>
<div class="row form-group multihide" id="pickupdrop_amt">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 ">
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"></div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 rq-field">
<spring:message text="Airport Pickup/Drop Amount" />
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<input id="amount" type='text' class="form-control numcls " />
<span class="errorspan" id="billinghrs_er">enter the
pickup/drop Air ticket amount</span>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
</div>
<div class="row form-group multihide" id="accommodation_amt">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 ">
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"></div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 rq-field">
<spring:message text="Free Accommodation Amount" />
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<input id="amount" type='text' class="form-control numcls" />
<span class="errorspan" id="billinghrs_er">enter the
free accommodation Air ticket amount</span>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
</div>
<div class="row form-group multihide" id="other1_amt">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 ">
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"></div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 rq-field">
<spring:message text="Other1 Amount" />
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<input id="amount" type='text' class="form-control numcls" />
<span class="errorspan" id="billinghrs_er">enter the
other1 Air ticket amount</span>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
</div>
<div class="row form-group multihide" id="other2_amt">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 ">
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"></div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 rq-field">
<spring:message text="Other2 Amount" />
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<input id="amount" type='text' class="form-control numcls" />
<span class="errorspan" id="billinghrs_er">enter the
other2 Air ticket amount</span>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
</div>
and here is my script
function ChangeNature(obj) {
var selectValue = obj;
var selected = selectValue.options[selectValue.selectedIndex].value;
/* var visa = document.getElementsByClassName("multihide");
var medical = document.getElementById("medical_amt");
var resident = document.getElementById("residentcard_amt");
var pickupdrop = document.getElementById("pickupdrop_amt");
var acc= document.getElementById("accommodation_amt");
var other1 = document.getElementById("other1_amt");
var other2 = document.getElementById("other2_amt"); */
if(selected ==="visa"){
$("#visa_amt").show();
}
if(selected ==="medical"){
$("#visa_amt").hide();
$("#medical_amt").show();
}
if(selected ==="resident"){
$("#medical_amt").hide();
$("#residentcard_amt").show();
}
if(selected ==="pickupdrop"){
$("#residentcard_amt").hide();
$("#pickupdrop_amt").show();
}
if(selected ==="accommodation"){
$("#pickupdrop_amt").hide();
$("#accommodation_amt").show();
}
else{
$("#accommodation_amt").hide();
}
}
Use a second function.
The first one will be triggered ever time you change the selection of the checkbox. It will change the class of the trigger source (the current active element) and add or remove a class (e.g. selected). After this you start a second function named updateTextAreas.
Inside this Function you get all you elements with the given class (e.g. selected) and walk over the result list. Then you could show the needed text areas and hide all others.
function ChangeNature(obj) {
$(obj).toggleClass('selected');
updateTextAreas();
}
function updateTextAreas(){
// hide everything
$("#visa_amt").hide();
$("#medical_amt").hide();
// get all selected options
$('.selected').each(function(i,e){
if($(e).hasClass("visa")){
$("#visa_amt").show();
}else if($(e).hasClass("medical")){
$("#medical_amt").show();
} [and so on]
});
}
Hope I understand you right.
The problem got solved now. I used the following script.
$('#nature').on('change',function(){
var val = $('#nature').val();
if(val!=null){
arr = val.toString().split(",");
$('.multihide').hide();
for(var i=0;i<arr.length;i++){
if(arr[i]=="airticket"){$("#airticket_amt").show();}
if(arr[i]=="visa"){$("#visa_amt").show();}
if(arr[i]=="medical"){$("#medical_amt").show();}
if(arr[i]=="resident"){$("#residentcard_amt").show();}
if(arr[i]=="pickupdrop"){$("#pickupdrop_amt").show();}
if(arr[i]=="accommodation"){$("#accommodation_amt").show();}
if(arr[i]=="other1"){$("#other1_amt").show();}
if(arr[i]=="other2"){$("#other2_amt").show();}
}
}else{
$('.multihide').hide();
}
});
Thanks to all.
I am currently working on an application where the user gets a list a bunch of divs with details on them, there are also hidden details in each div that can be toggled by the user. The issue is that when you click on "details" for one box it toggles the class on all boxes rather than just within the one that was clicked. I was looking for an answer to this issue and have come up with trying to auto-increment the ID's/Class so that each box that is created will have a unique identifier. I need to make it so that the "extra-details" is only opened in relation to the card "details" is clicked on. Thank you in advance for any help.
My Code
$(".card-details").on("click", function (e) {
e.preventDefault();
$(".extra-details").toggleClass("hidden");
});
h4 {
padding:10px 0 0 5px;
font-size:18px;
font-weight:bold;
}
.card {
border:none;
box-shadow:2px 2px 5px rgba(201,201,201, .5);
padding:5px;
margin:5px;
max-width:350px;
background:transparent;
border:1px solid #efefef;
font-size:12px;
}
hr {
border:1px solid #efefef;
width:100%;
margin-top:0;
}
.card-head {
color:#005ABB;
}
.card-container{
margin-top:20px;
margin-left:5px;
}
.card-info {
margin-left:20px;
background:transparent !important;
}
.card-details {
color:#005ABB;
margin-left:85%;
}
.card-details:hover {
text-decoration:underline;
color:#F9A51B;
cursor:pointer;
}
.hidden{
display:none !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="container">
<div class="row card-container">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
</div>
</div>
</div>
$(this).siblings('.extra-details').toggleClass('hidden') will achieve what you want.
Also note, your 'details' element is not actually a link, only styled like one, so you don't need the e.preventDefault() line.
Try:
$(".card-details").on("click", function (e) {
e.preventDefault();
$(this).siblings(".extra-details").toggleClass("hidden");
});
This works for me.
I just changed the javascript code as shown below.
$(".card-details").click(function() {
$(this).closest(".card").find(".extra-details").toggleClass("hidden");
});
h4 {
padding:10px 0 0 5px;
font-size:18px;
font-weight:bold;
}
.card {
border:none;
box-shadow:2px 2px 5px rgba(201,201,201, .5);
padding:5px;
margin:5px;
max-width:350px;
background:transparent;
border:1px solid #efefef;
font-size:12px;
}
hr {
border:1px solid #efefef;
width:100%;
margin-top:0;
}
.card-head {
color:#005ABB;
}
.card-container{
margin-top:20px;
margin-left:5px;
}
.card-info {
margin-left:20px;
background:transparent !important;
}
.card-details {
color:#005ABB;
margin-left:85%;
}
.card-details:hover {
text-decoration:underline;
color:#F9A51B;
cursor:pointer;
}
.hidden{
display:none !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="container">
<div class="row card-container">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
</div>
</div>
</div>
I have fullCalendar like this:
And I would like to load stores (DALIA GLAMOUR; DALIA 15...) when I change select. But if I write stores in HTML like this:
<div id='row'>
<div id='external-events'>
<div id='external-events-listing'>
<div class="form-group col-sm-2 fc-event" style="background-color:#1abc9c;">
PTO. CARMEN
</div>
<div class="form-group col-sm-2 fc-event" style="background-color:#d35400;">
DALIA GLAMOUR
</div>
<div class="form-group col-sm-2 fc-event" style="background-color:#9b59b6;">
DALIA 15
</div>
<div class="form-group col-sm-2 fc-event" style="background-color:#34495e;">
DALIA 5
</div>
<div class="form-group col-sm-2 fc-event" style="background-color:#3498db;">
SABINA CASINO
</div>
<div class="form-group col-sm-2 fc-event" style="background-color:#95a5a6;">
SASHA LIMONES
</div>
<div class="form-group col-sm-2 fc-event" style="background-color:#f39c12;">
SAM P.BLANCA
</div>
<div class="form-group col-sm-2 fc-event" style="background-color:#f1c40f;">
SAM DEILAND
</div>
<div class="form-group col-sm-2 fc-event" style="background-color:#e74c3c;">
BAJA
</div>
<div class="form-group col-sm-2 fc-event" style="background-color:#27ae60;">
VACACIONES
</div>
</div>
<p>
<input type='checkbox' id='drop-remove' checked='checked' />
<label for='drop-remove'>remove after drop</label>
</p>
</div>
<div id='calendar'></div>
<div style='clear:both'></div>
</div>
It works. But now, I have an ajax y load store like this:
<div id='row'>
<div id='external-events'>
<div id='external-events-listing' >
<div class="form-group col-sm-2 fc-event" ng-repeat="store in vm.stores | orderBy:'store.id' " id="{{store.id}}" style="background-color:{{store.color}}; text-transform: uppercase;">
{{store.name}}
</div>
</div>
<p>
<input type='checkbox' id='drop-remove' checked='checked' />
<label for='drop-remove'>remove after drop</label>
</p>
</div>
<div id='calendar'></div>
<div style='clear:both'></div>
</div>
I have this ajax in my javascript:
ajax.sendApiRequest({zone: vm.store.touristArea}, "GET", "store").then(
function(response) {
vm.stores = response.data.concat(constants.STORE_EVENTS);
console.log("vm.stores", vm.stores)
},
(function(error) {
})
);
But it doesn't work. I saw in inspector, that in first case (without ajax), div with fc-event class, has "ui-draggable ui-draggable-handle" class, but in the second case, not. Any idea?