Menu icon Foundation
dynamically generated modal window

Hi everyone, I am dynamically generating modal windows but although the html looks ok in the console, the window is never toggled and revealed. I spent hours trying to figure out what I missed but I can't see the issue. Hopefully you can help :)

 

$.getJSON('/index.php/readJSON', function(jsonObj) {

		var tbody = $('tbody');
		tbody.empty();
		var table = $('table');

		$.each(jsonObj, function(index, item){

			var table_cells = [];

			var table_row = $('<tr>');
			table_cells[0] = $('<td>', {html: item.Id});
			table_cells[1] = $('<td>', {html: item.Name});
			table_cells[2] = $('<td>', {html: item.Origin});
			table_cells[3] = $('<td>', {html: item.Year});
			table_cells[4] = $('<td>', {html: item.Author});
			table_cells[5] = $('<td>', {html: item.Materials});
			table_cells[6] = $('<td>', {html: item.Location});
			table_cells[7] = $('<td>', {html: item.Description.substr(0,100)+'...'});
			table_cells[8] = $('<td>', {html: item.ImgPath});
			table_cells[9] = $('<td>', {html: item.x3dPath});
			table_cells[10] = $('<td>', {html: item.Texture});
			table_cells[11] = $('<td>');

			var table_del_link = $('<a>', {html: 'DEL' });
			
			table_cells[7].attr('data-open', 'modal_window'+item.Id);  //these are my triggers

			table_del_link.addClass('button');
			table_del_link.attr('onclick', 'deleteRequest('+item.Id+')');
			table_cells[11].append(table_del_link);

			for (var i = 0; i < table_cells.length; i++)
				table_row.append(table_cells[i]);

			tbody.append(table_row);

			//these are my modals
			table.after('<div class="reveal" id="modal_window' + item.Id + '" data-reveal><h1>'
				+ item.Name + '</h1><p class="lead">' + item.Description + '</p><button class="close-button"'
				+ 'data-close aria-label="Close modal" type="button"><span aria-hidden="true">&times;</span>'
				+ '</button></div></div>');

		});
	});

 

In the inspector I see the following HTML

<!-- ... -->
<td data-open="modal_window1">a...</td>
<!-- ... -->

<div class="reveal" id="modal_window1" data-reveal="">
    <h1>a</h1>
    <p class="lead">a</p>
    <button class="close-button" data-close="" aria-label="Close modal" type="button">
        <span aria-hidden="true">×</span>
    </button>
</div>

revealAJAX

Hi everyone, I am dynamically generating modal windows but although the html looks ok in the console, the window is never toggled and revealed. I spent hours trying to figure out what I missed but I can't see the issue. Hopefully you can help :)

 

$.getJSON('/index.php/readJSON', function(jsonObj) {

		var tbody = $('tbody');
		tbody.empty();
		var table = $('table');

		$.each(jsonObj, function(index, item){

			var table_cells = [];

			var table_row = $('<tr>');
			table_cells[0] = $('<td>', {html: item.Id});
			table_cells[1] = $('<td>', {html: item.Name});
			table_cells[2] = $('<td>', {html: item.Origin});
			table_cells[3] = $('<td>', {html: item.Year});
			table_cells[4] = $('<td>', {html: item.Author});
			table_cells[5] = $('<td>', {html: item.Materials});
			table_cells[6] = $('<td>', {html: item.Location});
			table_cells[7] = $('<td>', {html: item.Description.substr(0,100)+'...'});
			table_cells[8] = $('<td>', {html: item.ImgPath});
			table_cells[9] = $('<td>', {html: item.x3dPath});
			table_cells[10] = $('<td>', {html: item.Texture});
			table_cells[11] = $('<td>');

			var table_del_link = $('<a>', {html: 'DEL' });
			
			table_cells[7].attr('data-open', 'modal_window'+item.Id);  //these are my triggers

			table_del_link.addClass('button');
			table_del_link.attr('onclick', 'deleteRequest('+item.Id+')');
			table_cells[11].append(table_del_link);

			for (var i = 0; i < table_cells.length; i++)
				table_row.append(table_cells[i]);

			tbody.append(table_row);

			//these are my modals
			table.after('<div class="reveal" id="modal_window' + item.Id + '" data-reveal><h1>'
				+ item.Name + '</h1><p class="lead">' + item.Description + '</p><button class="close-button"'
				+ 'data-close aria-label="Close modal" type="button"><span aria-hidden="true">&times;</span>'
				+ '</button></div></div>');

		});
	});

 

In the inspector I see the following HTML

<!-- ... -->
<td data-open="modal_window1">a...</td>
<!-- ... -->

<div class="reveal" id="modal_window1" data-reveal="">
    <h1>a</h1>
    <p class="lead">a</p>
    <button class="close-button" data-close="" aria-label="Close modal" type="button">
        <span aria-hidden="true">×</span>
    </button>
</div>

This post has been closed. No new replies can be added.

Iamnot aRobot over 2 years ago

 well I solved but using a custom modal and just passing the data in from the ajax request without need of generating modal for each item in the json