Jump to content

Bootstrap Drop Down only works first time


Recommended Posts

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

Link to post
Share on other sites

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. :psychic:

Post your code.

Link to post
Share on other sites

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>

 

Link to post
Share on other sites

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.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.