Menu icon Foundation
Dynamically Calling Ajax Reveal Modals?

I'm trying to create an easy list of objects to call modals and ajax content to DRY out my code.

I have my objects listed as so:

var projects = {
		'modals': [{
			'name': '#Modal_ThermoFusion',
			'activate': '.Activate_Modal_ThermoFusion',
			'html': 'http://codepen.io/rafibomb/pen/XKEgmL.html'
		}, {
			'name': '#Modal_Arcade-Game',
			'activate': '.Activate_Modal_Arcade-Game',
			'html': 'http://codepen.io/rafibomb/pen/XKEgmL.html'
		}]
	};

Then I'm calling my objects in a for loop to get through all instances of a modal and call the correct one when necessary.

for (var i = 0; i < projects['modals'].length; i++) {
		$(projects.modals[i].activate).on('click', function() {
		  $.ajax(projects.modals[i].html).
		    done(function(content) {
		     $(projects.modals[i].name).html(content).foundation('open');
		    });
		});
	};

When I use static information my code works perfectly fine. When I use the objects to populate fields I get errors such as:

Uncaught TypeError: Cannot read property 'html' of undefined

or

Uncaught TypeError: Cannot read property 'open' of undefined

 

Is this a limitation of Foundation Reveal Modals or is there something I'm doing wrong? When I console.log() out all the fields, everything is generating correctly, it's something within the for loop that Foundation doesn't like.

 

revealmodalAJAX

I'm trying to create an easy list of objects to call modals and ajax content to DRY out my code.

I have my objects listed as so:

var projects = {
		'modals': [{
			'name': '#Modal_ThermoFusion',
			'activate': '.Activate_Modal_ThermoFusion',
			'html': 'http://codepen.io/rafibomb/pen/XKEgmL.html'
		}, {
			'name': '#Modal_Arcade-Game',
			'activate': '.Activate_Modal_Arcade-Game',
			'html': 'http://codepen.io/rafibomb/pen/XKEgmL.html'
		}]
	};

Then I'm calling my objects in a for loop to get through all instances of a modal and call the correct one when necessary.

for (var i = 0; i < projects['modals'].length; i++) {
		$(projects.modals[i].activate).on('click', function() {
		  $.ajax(projects.modals[i].html).
		    done(function(content) {
		     $(projects.modals[i].name).html(content).foundation('open');
		    });
		});
	};

When I use static information my code works perfectly fine. When I use the objects to populate fields I get errors such as:

Uncaught TypeError: Cannot read property 'html' of undefined

or

Uncaught TypeError: Cannot read property 'open' of undefined

 

Is this a limitation of Foundation Reveal Modals or is there something I'm doing wrong? When I console.log() out all the fields, everything is generating correctly, it's something within the for loop that Foundation doesn't like.

 

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

Tyler Pena about 3 years ago

Found my own solution.

// ***** MODALS ****** //
	// Set Object of Projects to hold all modals and details
	var projects = {
		'modals': [{
			'name': 'Modal_ThermoFusion',
			'activate': '.Activate_Modal_ThermoFusion',
			'html': 'thermofusion_modal.html'
		}, {
			'name': 'Modal_Arcade-Game',
			'activate': '.Activate_Modal_Arcade-Game',
			'html': 'arcade-game_modal.html'
		}]
	};

	var $projects = $('#project-modal');
	var $htmlArray = [];
	var $activateArray = [];

	for (var i = 0; i < projects['modals'].length; i++) {
		/* Use $html variable to find all html object properties
		 * Log found results in new $htmlArray for access
		 * Use $activate to find all activation classes from object properties
		 * Log found results in new $activateArray for access
		*/
		var $html = projects.modals[i].html;
		$htmlArray.push($html);
		var $activate = projects.modals[i].activate;
		$activateArray.push($activate);
		
		/* Call click function when modal activation class is clicked
		 * Log the current index of the clicked modal
		 * Call Ajax to load selected modal template
		 * Load into specified reveal modal
		 * Note * one model is used to hold all projects
		*/
		$($activateArray[i]).on('click', function() {
			var $index = $($activate).index(this) + 1;
			$.ajax($htmlArray[$index]).
				done(function(content) {
					$projects.html(content).foundation('open');
				});
		   //console.log($index);
		});
	};