Serejqa Serejqa - 1 month ago 5
CSS Question

Change data in div by clicking on another div

Could some one help me with one question:

I have 2 divs.

The first one is made of DATA from JSON file.

I have a function that makes few rows (depending on how many DATA I have in JSON).

So by clicking on one row, it should show another div with additional info about this option.

If I click on another option it should update info.


It actually works like that:

I click on first option --> it shows the DIV.

I click on the 2nd option, it is closing the DIV.

I just made the function that change the CSS (display:none/block).

Here is the code of first DIV:

<script type="text/javascript">
function view(n){
style = document.getElementById(n).style;
style.display = (style.display == 'block') ? 'none' : 'block';
}
</script>
<script> // Reading DATA from JSON
$(document).ready(function(){
$.getJSON("accounts.json", function(data){
$.each(data, function(key, value){
$("#main_list").append(
buildRow(value.name
,value.number
,value.city,value.amount,value.currency,value.rate)
);
});
});
});
</script>
<script> // Making divs from JSON
function buildRow(a,b,c,d,e,f){
return '<div class="deposit-small-block first-block size-small-block tt" onclick="view(\'t1\'); return false">\
<div class="button_block">\
<div class="div-for-button">\
<input type="radio" name="on">\
</div>\
</div>\
<div class="deposit-form-block-name">\
<div class="deposit-form-block-name-first white-text"><name>'+a+'</name></div>\
<div class="deposit-form-block-name-second white-text"><number>'+b+'</number></div>\
<div class="deposit-form-block-name-third white-text"><city>'+c+'</city></div>\
</div>\
<div class="deposit-form-block-sum">\
<div class="deposit-form-block-sum-text white-text">\
<amount>'+d+'</amount><br><currency>'+e+'</currency>\
</div>\
</div>\
<div class="deposit-form-block-perc">\
<div class="deposit-form-block-sum-text white-text"><rate>'+f+'</rate></div>\
</div>\
</div>\
'
}
</script>


And the code of 2nd DIV:

<aside id="t1" class="right-sidebar">
<div class="right-sidebar-header">
<div class="right-sidebar-header-text">Информация о выбранном вкладе
</div>
</div>
<script type="text/javascript">

function openbox(id){
display = document.getElementById(id).style.display;

if(display=='none'){
document.getElementById(id).style.display='block';
}else{
document.getElementById(id).style.display='none';
}
}
</script>
<div class="box2">
<div class="first-option">
<div class="best-text"><a href="#"
style="color: black"
class="dot"
onclick="openbox('box');
return false">Условия</a>
</div>

<div id="box" style="display: none;">
<div class="first-option-inside">
<div class="first-option-inside-table-first grey-text">Ставка</div>
<div class="first-option-inside-table-second grey-text">Дата открытия</div>
<div class="first-option-inside-table-third grey-text">Дата окончания</div>
</div>
<div class="first-option-inside">
<div class="first-option-inside-table-first-under">7.4%</div>
<div class="first-option-inside-table-second-under">23.04.2015</div>
<div class="first-option-inside-table-third-under">23.04.2017</div>
</div>
<div class="max-sum-text">Максимальная сумма</div>
<div class="min-sum-text">1 000 000,00 Рубль РФ</div>
<div class="max-sum-text">Неснижаемый остаток</div>
<div class="min-sum-text">1 000,00 Рубль РФ</div>
<div class="max-sum-text">Минимальная сумма пополнения наличными</div>
<div class="min-sum-text">1 000 000,00 Рубль РФ</div>
<div class="max-sum-text">Доступная сумма для снятия</div>
<div class="min-sum-text">20 000,00 Рубль РФ</div>

</div>
</div>


How it looks like:
How it looks like

Then I click on any of name, it opens div.

And when I click on another name, it should update my information (see where circled in black).
here in the black rounds
So should I add this info into my JSON?

Or how to realize this?

Thank you to your answers.

Answer

The way to do it is to carry the index of the needed information within the data array.

So if you put this index in the onclick="view(...) of each row, you carry it to the view() function.
The view() function opens the right panel on click on a row...
So it's the best place to update the relevant infos to view.

So here is the updated script:

var jsonArray=[];
var lastIndexViewed=-1;

function view(n,index) {

    if( (lastIndexViewed==index) || (lastIndexViewed==-1) ){    // Improved the condition to take lask viewed in account.
        style = document.getElementById(n).style;
        style.display = (style.display == 'block') ? 'none' : 'block';
    }

    console.log("jsonArray index "+index+" data is required."); // Index is present... Let's use it.

    // Place the info at the right places.
    $("#"+n).find("#rate").html(jsonArray[index].rate);
    $("#"+n).find("#open_date").html(jsonArray[index].open_date);
    $("#"+n).find("#close_date").html(jsonArray[index].close_date);
    $("#"+n).find("#max_sum").html(jsonArray[index].max_sum);
    $("#"+n).find("#min_balance").html(jsonArray[index].min_balance);
    $("#"+n).find("#min_sum_in").html(jsonArray[index].min_sum_in);
    $("#"+n).find("#sum_take").html(jsonArray[index].sum_take);

    // Keep last viewed index in memory to prevent boring div close when trying to view another row.
    lastIndexViewed=index;
}

// Reading DATA from JSON
$(document).ready(function(){
    $.getJSON("accounts.json", function(data){

        // Saving the array to use it later
        console.log(data);
        jsonArray = data;

        $.each(data, function(key, value){
            $("#main_list").append(
                    buildRow(value.name,
                            value.number,
                            value.city,
                            value.amount,
                            value.currency,
                            value.rate,
                            key)            // To carry the index of the array of json objects.
            );
            console.log("On row buiding, the index within jsonArray: "+key);    // This is the index
        });
    });
});

// Making divs from JSON
function buildRow(a,b,c,d,e,f,index){
    return '<div class="deposit-small-block first-block size-small-block tt" onclick="view(\'t1\','+index+'); return false">'+  // The index is sent to the function that opens the right div.
                '<div class="button_block">'+
                    '<div class="div-for-button">'+
                        '<input type="radio" name="on">'+
                    '</div>'+
                '</div>'+
                '<div class="deposit-form-block-name">'+
                    '<div class="deposit-form-block-name-first white-text"><name>'+a+'</name></div>'+
                    '<div class="deposit-form-block-name-second white-text"><number>'+b+'</number></div>'+
                    '<div class="deposit-form-block-name-third white-text"><city>'+c+'</city></div>'+
                '</div>'+
                '<div class="deposit-form-block-sum">'+
                    '<div class="deposit-form-block-sum-text white-text">'+
                        '<amount>'+d+'</amount><br><currency>'+e+'</currency>'+
                    '</div>'+
                '</div>'+
                '<div class="deposit-form-block-perc">'+
                    '<div class="deposit-form-block-sum-text white-text"><rate>'+f+'</rate></div>'+
                '</div>'+
            '</div>'
}



The only HTML changed:
I only added some ids to each div where information is expected.
I didn't remove the classes, which look useless(?).

<div id="box" style="display: none;">
    <div class="first-option-inside">
        <div class="first-option-inside-table-first grey-text">Ставка</div>
        <div class="first-option-inside-table-second grey-text">Дата открытия</div>
        <div class="first-option-inside-table-third grey-text">Дата окончания</div>
    </div>
    <div class="first-option-inside">
        <div id="rate" class="first-option-inside-table-first-under">7.4%</div>
        <div id="open_date" class="first-option-inside-table-second-under">23.04.2015</div>
        <div id="close_date" class="first-option-inside-table-third-under">23.04.2017</div>
    </div>
    <div class="max-sum-text">Максимальная сумма</div>
    <div id="max_sum" class="min-sum-text">1 000 000,00 Рубль РФ</div>
    <div class="max-sum-text">Неснижаемый остаток</div>
    <div id="min_balance" class="min-sum-text">1 000,00 Рубль РФ</div>
    <div class="max-sum-text">Минимальная сумма пополнения наличными</div>
    <div id="min_sum_in" class="min-sum-text">1 000 000,00 Рубль РФ</div>
    <div class="max-sum-text">Доступная сумма для снятия</div>
    <div id="sum_take" class="min-sum-text">20 000,00 Рубль РФ</div>

</div>

id should be used as a unique selector.
class should be used for collections.
I used the same id names as the property names in the json... For clarity.



Have a look at the live link for this solution:



Side note: Notice that I changed the order of your library loading:

<script src="jquery.livefilter.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

to:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script src="jquery.liveFilter.js"></script>

Because liveFilter.js needs jQuery to be loaded first.
I'm not even sure it is used...
In my solution, I commented it out and saw no effect.