پر کردن مودال با استفاده از اطلاعات فرم

نیاز بود که توی یک جدول اگر توی سلول یکی از ستونها کلیک کردیم یک مودال باز بشود. اما باید اطلاعاتی مربوط به آن ردیف به مودال پاس بدیم. متوجه شدم که این اطلاعات مربوط به ردیف مذکور را میتوان به عنوان یک پایامتر به سلول مربوطه اضافه کرد مثل:

<tbody>
	{% for f in feedbacks %}
		<tr>
			<td
				{% if f.active %} class="text-danger" {% endif %}
			>
				{% if f.active %} (فعال) {% endif %}v.{{f.feedback_version}}
			</td>
			<td>{{f.feedback_date}}</td>
			<td>{{f.user}}</td>
			<td>
				<div class="row">
					<div class="col-4">
						<a
							href="#"
							data-version="{{ f.feedback_version }}"
							main_points="{{ f.main_points|escape }}"
							secondary_points="{{ f.secondary_points|escape }}"
							guids="{{ f.guids_and_recommendations|escape }}"
							feedback_id="{{ f.id }}"
							feedback_version="{{ f.feedback_version }}"
							class="open-modal"
							style="cursor: pointer;"
						>
							جزئیات
						</a>
					</div>
				</div>
			</td>
		</tr>
	{% endfor %}
</tbody>

<tbody>

{% for f in feedbacks %}

<tr>

<td

{% if f.active %} class="text-danger" {% endif %}

{% if f.active %} (فعال) {% endif %}v.{{f.feedback_version}}

</td>

<td>{{f.feedback_date}}</td>

<td>

href="#"

data-version="{{ f.feedback_version }}"

main_points="{{ f.main_points|escape }}"

secondary_points="{{ f.secondary_points|escape }}"

guids="{{ f.guids_and_recommendations|escape }}"

feedback_id="{{ f.id }}"

feedback_version="{{ f.feedback_version }}"

class="open-modal"

style="cursor: pointer;"

جزئیات

</a>

</div>

</td>

</tr>

{% endfor %}

</tbody>

توی خود مودال یک سری فیلد خالی تعریف میکنیم که بعدا با جاواساکریپ اطلاعات پارامترها رو به اون اضافه کنیم:

{% block modals %}
    <div id="mapModal" class="modal fade" tabindex="-1" aria-labelledby="#mapModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="mapModalLabel">
                        جزئیات
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p><strong>نسخه:</strong> <span id="modal-version"></span></p>
                    <p><strong>نکات اصلی:</strong> <span id="main_points"></span></p>
                    <p><strong>نکات فرعی:</strong> <span id="secondary_points"></span></p>
                    <p><strong>راهنماییها:</strong> <span id="guids"></span></p>
                </div>
                <div class="modal-footer">
                    <a href="#" data-bs-dismiss="modal">بستن</a>
                    <a id="activation_btn">
                        فعالسازی
                    </a>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block modals %}

جزئیات

</h5>

</div>

<p><strong>راهنماییها:</strong> <span id="guids"></span></p>

</div>

فعالسازی

</a>

</div>

{% endblock %}

الان توی اسکریپت زیر از هر ردیف سلول مربوطه رو بر اساس اسم کلاس میگیریم. بعد از اون سلول پارامترم مربوطه که دیتا بهش وصل شده رو بر میداریم بعد همون مقدارها رو به مودال میدیم:

<script>
	document.addEventListener('DOMContentLoaded', function () {
		document.querySelectorAll('.open-modal').forEach(function (cell) {
			cell.addEventListener('click', function () {
				const version = this.getAttribute('data-version');
				const main_points = this.getAttribute('main_points');
				const secondary_points = this.getAttribute('secondary_points');
				const guids = this.getAttribute('guids');
				const feedback_version = this.getAttribute('feedback_version');
				const feedback_id = this.getAttribute('feedback_id');

				document.getElementById('modal-version').textContent = version;
				document.getElementById('main_points').innerHTML  = main_points;
				document.getElementById('secondary_points').innerHTML  = secondary_points;
				document.getElementById('guids').innerHTML  = guids;
				document.getElementById('activation_btn').href = "/man/documents/versionactivate/"+feedback_id+"/"+feedback_version+"/";

				const mapModal = new bootstrap.Modal(document.getElementById('mapModal'));
				mapModal.show();
			});
		});
	});
</script>

document.addEventListener('DOMContentLoaded', function () {

document.querySelectorAll('.open-modal').forEach(function (cell) {

cell.addEventListener('click', function () {

const version = this.getAttribute('data-version');

const main_points = this.getAttribute('main_points');

const secondary_points = this.getAttribute('secondary_points');

const guids = this.getAttribute('guids');

const feedback_version = this.getAttribute('feedback_version');

const feedback_id = this.getAttribute('feedback_id');

document.getElementById('modal-version').textContent = version;

document.getElementById('main_points').innerHTML = main_points;

document.getElementById('secondary_points').innerHTML = secondary_points;

document.getElementById('guids').innerHTML = guids;

document.getElementById('activation_btn').href = "/man/documents/versionactivate/"+feedback_id+"/"+feedback_version+"/";

const mapModal = new bootstrap.Modal(document.getElementById('mapModal'));

mapModal.show();

});

</script>

دیدگاهتان را بنویسید لغو پاسخ