mvc Get a value of element in different cshtml with jquery

Question

I have a page ("mypage.cshtml") and two partial view page ( partial1.cshtml, partial2.cshtml ) when Im in mypage click a button and display a modal which call partial1 with @Html.Partial("patial1") in a modal(bootstrap modal). it consist of html. when I a click a button on this modal it calls another modal consist of partial2..

Here is the issue; When I load the page begining (in mypage ) I need to get the value of checkbox that standing in second modal, that is partial2. During I view this modal I can get this value with this:

$("input[type='checkbox'][id='4']").val();

it gives me the value which I expect but at the begining(in mypage.cshtml) this returns "undefined" :S I couldnt understand this stuation both of these modal located in mypage but why I cant get these elements values untill I reach them ?

here is view mypage:

<div id="stack1" class="modal fade" tabindex="-1" data-width="400">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <h4 class="modal-title">@Model.Kurulus.TESIS_ADI</h4>
            </div>
            <div class="modal-body">
                <form id="formKaydet" method="post" action="../KurulusBilgileri/KurulusBilgileriniGuncelle">
                    <div class="row">
                        <div class="col-md-12">
                            @Html.Partial("KurulusBilgileriniGuncelle", Model)
                        </div>
                        <div class="modal-footer">
                            <input type="hidden" name="SANAYI_TIPI" id="input_id" />
                            <input type="hidden" name="SANAYI_TIPI_DIGER" id="input_sanayitipi" />
                            <button type="button" data-dismiss="modal" class="btn default">Geri</button>
                            <a class="btn orange" onclick="sanayitipleriKaydet()">Kaydet A</a>


                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<div id="stack2" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <h4 class="modal-title">@Model.Kurulus.TESIS_ADI</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        @Html.Partial("SanayiTipiSecim", Model.SanayitipiModel)
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                @*<button type="button" data-dismiss="modal" class="btn">Close</button>
                    <button type="button" class="btn yellow">Ok</button>*@
            </div>
        </div>
    </div>
</div>

and my second modal (SanayiTipiSecim)

<table class="table-full-width">
    <thead>
        <tr>
            <th></th>
            <th><strong>Sanayici Tipi</strong></th>
            <th><strong>Açıklama</strong></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <input type="checkbox" name="SANAYI_TIPI" onclick="javascript:sanayitipiTotextarea(1)" id="1" value="Boya Sanayi">
            </td>
            <td>
                Boya Sanayi
            </td>
            <td>
                Boya üretimi yapan imalathaneler
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="SANAYI_TIPI" onclick="javascript:sanayitipiTotextarea(2)" id="2" value="Enerji üretimi ve dağıtımı">
            </td>
            <td>
                Enerji üretimi ve dağıtımı
            </td>
            <td>
                Ör. Enerji üretim merkezleri, enerji ara istasyonları vb?
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="SANAYI_TIPI" id="3" onclick="javascript:sanayitipiTotextarea(3)" value="Elektrik ve Elektronik Mühendisliği">
            </td>
            <td>
                Elektrik ve Elektronik Mühendisliği
            </td>
            <td>
                Elektronik parçaların üretimi vb?
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="SANAYI_TIPI" id="4" onclick="javascript:sanayitipiTotextarea(4)" value="Genel Mühendislik, imalat ve montaj">
            </td>
            <td>
                Genel Mühendislik, imalat ve montaj
            </td>
            <td>
                Herhangi bir mühendislik aktivitesi, üretim veya montaj vb?
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="SANAYI_TIPI" id="5" onclick="javascript:sanayitipiTotextarea(5)" value="Gıda ve içecek">
            </td>
            <td>
                Gıda ve içecek
            </td>
            <td>
                Gıda, alkollü içki vb?
            </td>

script blocks in first page:

<script src="~/Scripts/js/kurulusbilgileri.js"></script>
<script>
    sanayitipleriKaydet = function () {
        debugger
        var data = new Object()
        data.ISIM = $("input[name='ISIM']").val();
        data.ADRES_METIN = $("input[name='ADRES_METIN']").val();
        data.TELEFON = $("input[name='TELEFON']").val();
        data.FAKS = $("input[name='FAKS']").val();
        data.E_POSTA = $("input[name='E_POSTA']").val();
        data.SORUMLU_ISIM = $("input[name='SORUMLU_ISIM']").val();
        data.SORUMLU_SOYISIM = $("input[name='SORUMLU_SOYISIM']").val();
        data.FAALIYET_ALANI = $("input[name='FAALIYET_ALANI']").val();
        data.CEVRE_BILGI = $("input[name='CEVRE_BILGI']").val();
        data.BELEDIYE_MUCAVIR_ALAN = $("input[name='BELEDIYE_MUCAVIR_ALAN']:checked").val();
        debugger
        data.OSB_YERLESIK = $("input[name='OSB_YERLESIK']:checked").val();
        data.KIYI_TESISI = $("input[name='KIYI_TESISI']:checked").val();
        data.VERSIYON = $("input[name='VERSIYON']:checked").val();
        data.SANAYI_TIPI = window.localStorage.getItem("sanayitipiid");
        window.localStorage.removeItem("sanayitipiid");
        debugger

        var jsondata = JSON.stringify(data);
        $.ajax({
            type: "POST",
            contentType: 'application/json',
            url: "/KurulusBilgileri/KurulusBilgileriniGuncelle",
            data: jsondata,
            success: function (result) {
                debugger
                var jsondata = JSON.parse(result)
                if (jsondata.Passed) {
                    debugger
                    $('#tdISIM').empty();
                    $('#tdISIM').append(data.ISIM);
                    $('#tdADRES_METIN').empty();
                    $('#tdADRES_METIN').append(jsondata.data.ADRES_METIN);
                    $('#tdTELEFON').empty();
                    $('#tdTELEFON').append(jsondata.data.TELEFON);
                    $('#tdFAKS').empty();
                    $('#tdFAKS').append(jsondata.data.FAKS);
                    $('#tdE_POSTA').empty();
                    $('#tdE_POSTA').append(jsondata.data.E_POSTA);
                    $('#tdSORUMLU_ISIM').empty();
                    $('#tdSORUMLU_ISIM').append(jsondata.data.SORUMLU_ISIM);
                    $('#tdSANAYI_TIPI > #tdtxtSANAYI_TIPI').empty();
                    $('#tdSANAYI_TIPI > #tdtxtSANAYI_TIPI').append(jsondata.data.SANAYI_TIPI);//sanayitipi id si...
                    $('#tdFAALIYET_ALANI > #tdtxtFAALIYET_ALANI').empty();
                    $('#tdFAALIYET_ALANI > #tdtxtFAALIYET_ALANI').append(jsondata.data.FAALIYET_ALANI);
                    $('#tdCEVRE_BILGI > #tdtxtCEVRE_BILGI').empty();
                    $('#tdCEVRE_BILGI > #tdtxtCEVRE_BILGI').append(jsondata.data.CEVRE_BILGI);
                    debugger

                    if (jsondata.data.BELEDIYE_MUCAVIR_ALAN == "1") {
                        $("#tdBELEDIYE_MUCAVIR_ALAN > input[name='radioBelediyeMucavirAlan']").prop('checked', true);
                    }
                    else
                        $("#tdBELEDIYE_MUCAVIR_ALAN > input[name='radioBelediyeMucavirAlan']").prop('checked',false);
                    if (jsondata.data.OSB_YERLESIK == "1") {
                        $("#tdOSB_YERLESIK > input[name='radioOsbYerlesik']").prop('checked', true);
                    }
                    else
                        $("#tdOSB_YERLESIK > input[name='radioOsbYerlesik']").prop('checked',false);
                    if (jsondata.data.KIYI_TESISI == "1") {
                        $("#tdKIYI_TESISI > input[name='radioKiyiTesisi']").prop('checked', true);
                    }
                    else
                        $("#tdKIYI_TESISI > input[name='radioKiyiTesisi']").prop('checked',false);
                    if (jsondata.data.VERSIYON == "1") {
                        $("#tdVERSIYON > input[name='radioVersion']").prop('checked', true);
                    }
                    else
                        $("#tdVERSIYON > input[name='radioVersion']").prop('checked',false);

                }
            },
            error: function () {
                alert("ajax process in error");
            }
        });
    }

</script>

kurulusbilgileri.js:

$(function () {
    $("#btnSanayiTipiKaydet").on('click', sanayitipleriKaydet)
});

sanayiTipiTextGetir = function (id)
{
    var text = $('input[id=' + id + ']').val();
    debugger;
    return text;
}
sanayitipilistesinigoster = function () {
    $("#stack2").show();
}

sanayitipiTotextarea = function (id) {
    $("#divSanayiTipi").show(600, null);

    var sanayitipi = $("#" + id).val();
    window.localStorage.setItem("sanayitipiid", id);

    $("#input_sanayitipi").val(sanayitipi);
    $("#input_id").val(id);
    $("#stack2").modal('toggle');
}

Answer 1

Since you load your partial trough a modal, I'm assuming that the actual loading is done using AJAX. This means that when you first load your HTML page (the initial one), the partial is not yet part of the DOM (might have not been requested from the server). This in turn means that you checkbox is also not part of the DOM, and therefore is returned as undefined.