Bootstrap Drop Down only works first time

[Adamhumbug]

Hi All,

I have a number of bootstrap dropdowns in a list of users, each use has one.

When i click one, it drops down and i populate a modal from one of the buttons.

After exiting that modal none of the other dropdowns trigger when clicked.

If i reload the page, they work again for one click.

I am happy to share code if required, just wanted to know if anyone had run into this?

Thanks All

[requinix]

Has anyone run into an issue where they created the same dropdowns as you did, have them pop up a modal like you did, and stop working like yours did?

Maybe.

Post your code.

[Adamhumbug]

This is the modal

 

<div class="modal fade" id="editQuoteModal" tabindex="-1">
	<div class="modal-dialog modal-xl">
		<div class="modal-content">
			<div id='editQuoteContent'>
				<!-- ajax info here -->

			</div>
		</div>
	</div>
</div>	

This is the ajax

	$('.editQuote').click(function(){
		var quoteId = $(this).data("id");
			$.ajax({
				type: 'post',
				data: {"ajax" : 'one', "id" : quoteId},
				success: function(resp){
					$('#editQuoteContent').html(resp)
				}
			})
			$('#editQuoteModal').modal({
				show: true
			})
	});

This is the function

function popEditQuoteModal($qId){
		include 'includes/dbconn.php';
		$stmt = $conn -> prepare("
			SELECT q.id, c.id, c.name, j.name, q.name, q.version, q.date_created, qs.status, qs.id
			FROM quote q
			LEFT JOIN jobs j on q.job_id = j.id
			LEFT JOIN client c on j.client_id = c.id
			LEFT JOIN quote_status qs on q.status = qs.id
			WHERE q.id = ?");
		$stmt -> bind_param('i', $qId);
		$stmt -> execute();
		$stmt -> bind_result($qid, $cid, $cname, $jname, $qname, $version, $dc, $qstat, $qStatId);
		$out ='';
		if($stmt -> fetch()){
			$out .= "<div class='modal-header'>
					<h5 class='modal-title'>Update: $qname</h5>
					<button type='button' class='close' data-dismiss='modal'>
					<span>&times;</span>
					</button>
				</div>
				<div class='modal-body'>


				<form class='needs-validation' novalidate method='post'>
						<div class='form-row'>
							<div class='col-6 mb-3'>
								<label for=''>Client Name</label>
								<select onchange='changeClient()' class='custom-select' required id='selectClient' >
									<option value='' disabled selected >Select a client</option>
									".getClientNamesByID(options, $cid)."
    							</select>
								<div class='valid-feedback'>
									Looks good!
								</div>
								<div class='invalid-feedback'>
									Please provide an instance name.
								</div>
							</div>
							<div class='col-6 mb-3'>
								<label for=''>Job Name</label>
								<select class='custom-select' id='jobByClient' required name='jobId'>
									<option value='' disabled>Select a job</option>
									".getJobsByClient('options', $cid, $qid)."
    							</select>
								<div class='valid-feedback'>
									Looks good!
								</div>
								<div class='invalid-feedback'>
									Please select a job name.
								</div>
							</div>
						</div>
						<div class='form-row'>
							<div class='col-6 mb-3'>
								<label for=''>Quote Name</label>
								<input type='text' class='form-control' placeholder='Quote Name' value='$qname' required name='quoteName'>
								<div class='valid-feedback'>
									Looks good!
								</div>
								<div class='invalid-feedback'>
									Please provide an instance name.
								</div>
							</div>
							<div class='col-3 mb-3'>
								<label for=''>Version</label>
								<input type='text' class='form-control' placeholder='Version' value='$version' required name='Version'>
								<div class='valid-feedback'>
									Looks good!
								</div>
								<div class='invalid-feedback'>
									Please provide a version.
								</div>
							</div>
							<div class='col-3 mb-3'>
								<label for=''>Status</label>
								<select class='custom-select' required name='quoteStatus'>
									<option value='' disabled selected>Select a quote status</option>
									".getQuoteStatusByQSId('options', $qStatId)."
    							</select>
								<div class='valid-feedback'>
									Looks good!
								</div>
								<div class='invalid-feedback'>
									Please select a status.
								</div>
							</div>
						</div>
						<hr>
						<div class='form-row'>
							".getQuotedItemRows($qid)."
						</div>	
						<button type=submit name='updateQuote' class='btn btn-primary col-2 offset-10'>Update</button>
					</form>
				</div>";
		}
		$stmt -> close();
		return $out;
	}

This is the button that the modal is called from

<div class='dropdown-item pointer editQuote' data-id='$qId'>Edit Quote</div>

 

[requinix]

Can't tell from what you've posted, but would you happen to be destroying and recreating the Edit Quote buttons? Such as by replacing the contents of some ancestor container element during an AJAX request?

Separately from that,

1. Make the modal show in the success handler. Otherwise it'll show immediately before the AJAX request has finished and filled in the contents. People on the internet are going to notice this effect much more than you will if you happen to be testing this locally or in a local network.
2. You're attaching the same onclick handler to every single Edit Quote button, and they all do the same thing. That's wasteful. Set up one handler that applies to all of the buttons. If you are doing the destroy/recreate thing then this will also solve your problem.