Link to home
Start Free TrialLog in
Avatar of Crazy Horse
Crazy HorseFlag for South Africa

asked on

Hide or disable button inside modal upon modal launch using jQuery

When a particular button is clicked, an ajax request takes place and upon success, a modal is stored in a variable and then the modal is launched. There is a button inside the modal that I want by default to be hidden or disabled. I cannot seem to get that to happen.

	   $( '.outlet' ).on('click', function(e) {
		   e.preventDefault();
		   var prodName = $(this).data('prodname');
		   var prodId = $(this).data('id');
		   
		   $.ajax({
			   url: url + '/CartAjax/ajaxModal',
			   type: 'POST',
			   data: {prodId: prodId},
			   beforeSend: function() {
			   $( '.outlet' ).prop('disabled', true);
			   $( '.obtext' ).hide();
			   $( '#outletspinner' ).show();
			   
		   },
		   })
		   .done(function (data) {
			     var modal = `

					<div id="myModal" class="modal fade" role="dialog" data-backdrop="static" data-keyboard="false">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal">&times;</button>
									<h4 class="modal-title">${prodName} </h4>
								</div>
								<div class="modal-body">

								<div>
									<select class="form-control" id="branches">
										<option value="">Select Outlet</option>
										${data}
									</select>
	   							</div>

								</div>
								<div class="modal-footer">
									<button type="button" class="btn btn-default closeBranchModal">Close</button>
				                  <button class="btn btn-raised ripple-effect cart-btn closeBranchModal" id="addToCartNF2" data-id="${prodId}"><div class="spinner" style="display: none;"></div><span class="cartBtnTextNF">ADD TO CART</span></button>
								</div>
							</div>
						</div>
					</div>  
					`;
			    $(modal).modal('show');
			   $( '#addToCartNF2' ).hide();

			   	$( '#outletspinner' ).hide();
				$( '.obtext' ).show();
				$( '.outlet' ).prop('disabled', false);
		   })

		   		.fail(function (jqXHR, textStatus, errorThrown) {
				console.log(textStatus + ': ' + errorThrown);
				console.warn(jqXHR.responseText);
			});
	   })

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of leakim971
leakim971
Flag of Guadeloupe image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Crazy Horse

ASKER

Thanks for the suggestion. I didn't use it but it gave me an idea. Instead of using jQuery or CSS I just gave the button the "disabled" attribute e.g.:

<button class="btn" disabled></button>

Open in new window


That solved my problem. I will still award you the points as your suggestion sparked my idea.