Modal Launching Without Content

[Adamhumbug]

HI All,

I have a modal and i want the content to be populated dynamically with info from the database.  If the Blank Form button is clicked the same modal is generated but with no content.

I though ajax would be the way to do this.

	$('#openNewFormModalButton, .editFormModalShow').on('click', function() {
		if (!$(this).data('form-id')) {
			$formId = null;
		} else {
			$formId = $(this).data('form-id');
		}
		generateFormModal($formId);
	})



	function generateFormModal($formId) {
		console.log($formId)
		$.ajax({
			type: 'post',
			data: {
				'ajax': 'generateFormModal',
				'formId': $formId
			},
			success: function(resp) {
				$('#createNewFormModal').html(resp)
			}
		})

		$('#createNewFormModal').modal('show')
	}

I have checked the console logs and the correct $formId is being passed, currently either null or 1.

I have the container for the content of the modal.

<div class='modal modal-xl fade' id='createNewFormModal' tabindex='-1' aria-hidden='true'>

</div>

I have the switch to call the php function

if (isset($_POST['ajax'])) {
	switch ($_POST['ajax']) {
		case 'generateFormModal':
			exit(generateFormModal($pdo, $_POST['formId']));
			break;
	}
}

and i have the function in php

function generateFormModal($pdo, $formId)
{
	if ($formId != null) {
		$sql = "SELECT name, description from form where id = :id";
		$stmt = $pdo->prepare($sql);

		$stmt->execute([
			':id' => $formId
		]);
		$data = $stmt->fetch();
		$formName = $data['name'];
	}

	$out = "
	<div class='modal-dialog'>
		<div class='modal-content'>
			<form class='needs-validation' novalidate>
				<div class='modal-header'>
					<h5 class='modal-title' id=''>Form Management</h5>
					<button type='button' class='btn-close' data-bs-dismiss='modal' aria-label='Close'></button>
				</div>
				<div class='modal-body'>
					<form id='form-management'>
						<div class='row mb-3'>
							<div class='col-12'>
								<label for='formName'>Form Name</label>
								<input id='formName' type='text' class='form-control' name='formName' value='$formName'>
							</div>
						</div>
						<div class='row mb-3'>
							<div class='col-12'>
								<label for='formDescription'>Form Description</label>
								<textarea id='formDescription' class='form-control' name='formDescription'></textarea>
							</div>
						</div>
						<div class='row mb-3'>
							<div class='col'>
								<div class='btn btn-primary' id='addNewFieldRow'>Add New Row</div>
							</div>
						</div>
						<div class='row'>
							<div class='row mb-1'>
								<div class='col'>
									<label for='field'>Field</label>
								</div>
								<div class='col'>
									<label for='newName'>Field Name</label>
								</div>
								<div class='col'>
									<label for='fieldLabel'>Field Label</label>
								</div>
								<div class='col'>
									<label for='fieldType'>Field Type</label>
								</div>
								<div class='col-2'>
									<label for='fieldWidth'>Width</label>
								</div>
								<div class='col-1 text-center'>
									<label for='fieldOrder'>Order</label>
								</div>
							</div>
						</div>
						<div class='row mb-3' id='sortable'>
							<div class='row mb-1 field-row'>
								<div class='col'>
									<select id='field' class='form-select field' Name='field[]'>
										<option value='0' selected disabled>Please Select</option>
										<?= getCustomFieldOptions(\$pdo) ?>
									</select>
								</div>
								<div class='col'>
									<input id='fieldName' type='text' class='form-control' name='fieldName[]'>
								</div>
								<div class='col'>
									<input id='fieldLabel' type='text' class='form-control' name='fieldLabel[]'>
								</div>
								<div class='col'>
									<select id='fieldType' type='text' class='form-select' name='fieldType[]'>
										<?= getFieldTypes(\$pdo') ?>
									</select>
								</div>
								<div class='col-2'>
									<input id='fieldWidth' type='number' class='form-control' min='1' max='12' name='fieldWidth[]'>
								</div>
								<div class='col-1 text-center handle'>
									<svg class='icon icon-xl' style='width:2rem;height:2.5rem;'>
										<use xlink:href='img/svg/free.svg#cil-move'></use>
									</svg>
								</div>
							</div>
						</div>
						<div class='row'>
							<div class='col-10'>
								<div class='alert alert-success alert-container'></div>
							</div>
							<div class='col-2'>
								<button type='submit' class='btn btn-primary w-100' id='saveForm'>Button</button>
							</div>
						</div>
					</form>
				</div>
				<div class='modal-footer'>
					<button type='button' class='btn btn-secondary' data-bs-dismiss='modal'>Close</button>
					<div class='btn btn-primary' name='addNewPassType' id='addNewPassType'>Save changes</div>
				</div>
			</form>
		</div>
	</div>
";
	return $out;
}

My issue is that when i run this all together, whether the form id is set to null or 1 the screen greys, showing that the modal is trying to load but there is no other content or actual modal shown.  I am also getting a not that helpful JS error of:

 

Uncaught TypeError: 'querySelector' called on an object that does not implement interface Element.

When i inspect all of the modal content is there but nothing shown on the screen other than a darkened background.

Any pointers for this error?

Edited February 28 by Adamhumbug

[Adamhumbug]

turn out the show modal needed to be in the success of the ajax - makes perfect sense..

function generateFormModal($formId) {
		console.log($formId)
		$.ajax({
			type: 'post',
			data: {
				'ajax': 'generateFormModal',
				'formId': $formId
			},
			success: function(resp) {
				$('#createNewFormModal').html(resp)
				$('#createNewFormModal').modal('show')
			}
		})


	}