We Keep Coding

Cannot read property 'submit' of null i use laravel and javascript

I want to add a product to my favorites, but I do not want to make a load for the entire page, so I use JavaScript as shown in the code where I made an ancor disruption and created a form and took an id from the form and implemented it by using the submit function, but the following error appears and does
Uncaught TypeError: Cannot read property 'submit' of null
Please advise the importance
Thank you
this view
<div class="product-info">
<div class="tab-content" id="myTabContent">
<!-- Start Single Tab -->
<div class="tab-pane fade show active" id="man" role="tabpanel">
<div class="tab-single">
<div class="row">
#foreach($products as $p)
<div class="col-xl-3 col-lg-4 col-md-4 col-12">
<form action="{{route('cart.store')}}" method="post" id="add-cart-{{$p->id}}">
{{ csrf_field() }}
<input type="hidden" name="id" value="{{$p->id}}">
<input type="hidden" name="Product_Name_ar" value="{{$p->Product_Name_ar}}">
<input type="hidden" name="Price" value="{{$p->Price}}">
<div class="single-product">
<div class="product-img">
<a href="{{route('product', ['product' => $p->id])}}">
<img class="default-img" src="{{ asset('images/products/'.$p->image) }}" alt="#">
<img class="hover-img" src="{{ asset('images/products/'.$p->image) }}" alt="#">
</a>
<div class="button-head">
<div class="product-action">
#if(Auth::guard('customer')->check())
<span class="favorite-count">{{ $p->favorite_to_customers->count() }}</span>
<a title="Wishlist" href="javascript:void (0);" onclick="document.getElementById('favorite-{{$p->id}}').submit()" class="{{ Auth::guard('customer')->user()->favorite_products()->where('product_id', $p->id)->count() != 0 ? 'favorite' : '' }}">
<i class="fa fa-heart "></i><span>Add to Favorite</span></a>
<form id="favorite-{{$p->id}}" action="{{route('product.favorite', $p->id)}}" method="post">
{{ csrf_field() }}
</form>
#else
<span class="favorite-count">{{ $p->favorite_to_customers->count() }}</span>
<a title="Wishlist" href="javascript:void (0);" onclick="toastr.info('To add favorite list you to need login first', 'info', {
closeButton: true,
progressBar: true
})">
<i class="fa fa-heart "></i>
<span>Add to Favorite</span></a>
#endif
</div>
<div class="product-action-2">
<button style="background: transparent; border: none; color: black" class="btn btn-warning">Add to chart</button>
</div>
</div>
</div>
<div class="product-content">
<h3>{{ $p->Product_Name_ar }}</h3>
<div class="product-price">
<span>{{ $p->Price }} K.D</span>
</div>
</div>
</div>
</form>
</div>
#endforeach
</div>
</div>
</div>
<!--/ End Single Tab -->
</div>
</div>
This Controller
class Favoritecontroller extends Controller
{
public function add($id) {
$customer = Auth::guard('customer')->user();
$isFavorite = $customer->favorite_products()->where('product_id', $id)->count();
if($isFavorite == 0) {
$customer->favorite_products()->attach($id);
}else {
$customer->favorite_products()->detach($id);
}
return redirect()->back();
}
}
This Route
Route::group(['middleware' => ['auth:customer']], function () {
Route::post('favorite/{id}/add', 'FavoriteController#add')->name('product.favorite');
});

I assume your JS fails here
... onclick="document.getElementById('favorite-{{$p->id}}').submit()"
The proper way to do it
... onclick="addToWhishList({{$p->id}})"
Then in your JS
<script>
function addToWhishList(formId) {
//console.log(formId);
document.getElementById('favorite-' + formId).submit();
}
</script>
Check working Demo

Dropzone isn't working on Modal Showing through ajax

Dropzone and Javascript isn't working on bootstrap Modal i'm calling Modal through ajax.Because i have hundreds of records i don't want to place Modal in foreach so i used ajax on button click controller method hits and return a new view and that view i'm calling and main view where modal will be displayed. Modal is working fine but i have used dropzone plugin which isn't working and even no other js code is working neither css.
MainView.blade.php
On button Click the following script hits
this the my main view where i am calling Bootstrap Modal
<div class="modal" id="Edit-SpecsModal-products">
<div class="modal-dialog modal-max ">
<div class="modal-content">
<!-- Modal Header -->
<!-- Modal body -->
<div class="modal-body text-center">
<span class="f-24 black bold">Edit Product</span>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body p0">
<div class="product_details" id="product_details"></div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn-bg2" data-dismiss="modal">Cancel</button>
<input type="button" class="btn-bg1" data-dismiss="modal" onclick="submitForms()">Add to Project</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('.edit_product_model').click(function(){
var product_id = $(this).attr("id");
$.ajax({
url:"{{url('architecture-edit-product')}}/" + product_id ,
method:"post",
headers: {
'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
},
data:{product_id:product_id},
success:function(data){
$('#product_details').html(data.html);
$('#Edit-SpecsModal-products').modal("show");
}
});
});
});
</script>
Controller
public function editArchitectureProductSave(Request $request, $id){
$data['products'] = Product::with('productImages')->where('id',$id)->get();
$returnHTML = view('manufacturer::projects.includes.ajaxhtmlviews.edit-product-Bootstrap-modal', $data)->render();
return response()->json( ['html'=> $returnHTML], 200);
edit-product-Bootstrap-modal.blade.php
<div class="max-wid">
<div class="pl-3 pr-3 mb-5 p0">
<div class="">
<div class=" f-column in">
<div class="">
<ul class="nav nav-tabs nav-border-producttab">
<li class="nav-item ">
<a class="nav-link active" data-toggle="tab" href="#add_new_products2">Add New Product</a>
</li>
</ul>
</div>
<div class="">
<div >
<div class=" mt-3">
<!-- Nav tabs -->
<!-- Tab panes -->
<div class="tab-content model-hit">
<div id="add_new_products2" class="container tab-pane active">
<br>
<div class=" row">
<div class="col-sm-6">
<div class="col-sm-12 p-0 mrg_modal_produt">
<div class="col-sm-12 p-0 label_modal_product">
Product Documents
<div class="clearfix"></div>
<div class="gry f-13">(Specs, CHPS Certificate, Product Data Sheet)</div>
</div>
<div class="my-form1 text-center" id="my-for2">
<?php echo Form::open(array('route' => 'architecture-product-file-save', 'files' => true, 'method' => 'PUT', 'id' => 'product-file-form', 'class' => 'dropzone', 'name' => 'formName')); ?>
<input type="hidden" name="last_product_inserted_id" id="last_product_inserted_id" value="">
<div class="col-sm-12 p-0 mrg_modal_produt">
<div id="preview-template" style="display: none;">
<div class="dz-preview dz-file-preview" style="width: 20% ;">
<div class="dz-image"><img data-dz-thumbnail /></div>
<div class="dz-details">
<div class="dz-size"><span data-dz-size></span></div>
<div class="dz-filename"><span data-dz-name></span></div>
</div>
<div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
<div class="dz-error-message"><span data-dz-errormessage></span></div>
<div class="dz-file-type">
<br />
<select name="file_type" class="dz-file-type-select" id="file_type">
<option value="">Select File Type</option>
<option value="datasheet_file">Datasheet</option>
<option value="cad_file">CAD file</option>
<option value="bim_file">BIM file</option>
<option value="leed_file">LEED Statement</option>
</select>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="col-sm-12 p-0 mrg_modal_produt">
<div class="col-sm-12 p-0 label_modal_product">Product Images</div>
<div class="my-form1 text-center" id="my-for3">
<input form="product-form" id="file-input" name="product_images[]" type="file" multiple>
<div id="preview"></div>
</div>
</div>
</div>
<div class="col-sm-6">
<?php echo Form::open(array('route' => 'architecture-product-save', 'files' => true, 'id' => 'product-form')) ?>
<input type="hidden" name="method_type" value="PUT">
<input type="hidden" name="id" value="{{$products['0']->id}}">
<div class="col-sm-12 p-0 mrg_modal_produt">
<input name="name" type="text" class="form-control input_product_modal" value="{{$products['0']->name}}">
<input name="" type="text" class="form-control input_product_modal" value="Manufacturer Name">
<input type="hidden" name="project_slug" value="{{Request::segment(2)}}">
<textarea name="description" class="form-control input_product_modal" cols="" rows="">{{$products['0']->description}}</textarea>
<input name="leed_file_url" type="text" class="form-control input_product_modal" value="{{$products['0']->leed_file_url}}">
</div>
<div id="product_images_div"></div>
<input type="submit" class="btn btn-info" value="Save" id="save-product-form-submit" style="display:hidden;">
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Code is working fine modal is calling but problem is only when modal from edit-product-Bootstrap-modal.blade.php is called through the script used in mainView.blade.php for Bootstrap Modal is not working

Check if you have disabled autoDiscvoer for dropzone.js on Dropzone.autoDiscover
if its false set its value as true (Dropzone.autoDiscover = true;).
If thats also not working try manually initializing the dropzone by attaching it to the model.
myDropDown = new Dropzone('#product_details', {<options>})

I had a similar problem with modals, where my datepicker.js input field wouldn't work when I click it, but id didn't show any errors. I did some digging, and apparently, modals don't properly load scripts defined in your view (or wherever). I managed to do this, by initializing the same script again, but with another name, in my app.js, something like this:
$(document).ready(function () {
$('.datepickerCustom').datepicker({
//datepicker logic
}).on('changeDate', function (e) {
$(this).parent().find('.datePickerInput').val(e);
});
});
After compiling my views again (webpack), date picker was working fine. There's also another solution. Seems like sometimes js scripts "hide" behind the modal, so you need to set their z-index the modal's z-index which is 1050. This could be done inside your modal view:
<style>
.datepicker {
z-index: 1600 !important; /* has to be larger than 1050 */
}
</style>
If this still doesn't work, there's actually one more solution, where you need to initiate the date picker on the Modal shown event, something like this:
$('#myModal').on('show.bs.modal', function (e) {
if (!data) return e.preventDefault() // stops modal from being shown
})
Hope that any of those solutions can solve your problem. Good luck.

Auto click button if style display is block

everyone, I am totally new to this and I was just wondering, is there a way to auto click a button when styling display:block?
I would really appreciate if someone can point me in the right direction.
<div id="advert" img="" style="display: block;">
<div id="continueItems" class="text-center">
<p> TEXT HERE</p>
</div>
<br>
<div class="text-center">
<button id="statsContinue" class="btn btn-primary text-center" data-itr="continue" onclick="closeStats();">Continue</button>
</div>
</div>

You can check the display property to trigger() the click the event:
if($('#advert').css('display') == 'block')
$('#statsContinue').trigger('click');
function closeStats(){
console.log('auto click happened');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="advert" img="" style="display: block;">
<div id="continueItems" class="text-center">
<p> TEXT HERE</p>
</div>
<br>
<div class="text-center">
<button id="statsContinue" class="btn btn-primary text-center" data-itr="continue" onclick="closeStats();">Continue</button>
</div>
</div>

You could check if the element is visible using .is(':visible') then trigger the click using click() like :
if ($('#advert').is(':visible')) {
$('#statsContinue').click();
}
function closeStats() {
alert('Clik triggered');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="advert" img="" style="display: block;">
<div id="continueItems" class="text-center">
<p> TEXT HERE</p>
</div>
<br>
<div class="text-center">
<button id="statsContinue" class="btn btn-primary text-center" data-itr="continue" onclick="closeStats();">Continue</button>
</div>
</div>

How to get variable class name of jQuery from laravel blade loop

I want to Show/Hide replies for each comment. In order to do that, my jQuery selector has to be variable class name (so that I can show/hide replies of a specific comment without affecting replies of other comments). I've written the PHP code appending comment_id with the class to make the classes different. But I get these IDs from Laravel blade loop and I do not know how to do the same in jQuery. Here's my blade.php -
#foreach($comments as $comment)
<div class="box-comment">
<div class="comment-text">
{{$comment->body}}<br />
<button class="btn btn-link text-muted toggle-replies-{{$comment->id}}">Show/Hide Replies</button>
</div> <!-- /.comment-text -->
</div> <!-- /.box-comment -->
<div class="box-comment reply-box-{{$comment->id}} initially-hidden" style="padding-left: 30px;">
<input type="text" placeholder="Write a reply...">
</div>
#foreach($comment->replies as $reply)
#if($comment->id == $reply->comment_id)
<div class="box-comment reply-box-{{$comment->id}} initially-hidden" style="padding-left: 30px;">
<div class="comment-text">
{{$reply->body}}
</div> <!-- /.comment-text -->
</div> <!-- /.box-comment -->
#endif
#endforeach
#endforeach
And this is jQuery:
<script>
$(document).ready(function() {
$(".toggle-comments").click(function(){
$(".comment-box").slideToggle();
});
$(".toggle-replies-1").click(function(){
$(".reply-box-1").slideToggle();
});
});
</script>
I've manually put a '1' there and it shows/hides the replies of the first comment. I need to do it for all the comments. It shouldn't be difficult but I'm still learning jQuery. I hope someone can help me with it.

Try this :
#foreach($comments as $comment)
<div class="box-comment">
<div class="comment-text">
{{$comment->body}}<br />
<button class="btn btn-link text-muted show_hide_replies" id="{{$comment->id}}">Show Replies</button>
</div>
</div>
<div class="box-comment reply-box-{{$comment->id}} initially-hidden" style="padding-left: 30px;">
<input type="text" placeholder="Write a reply...">
</div>
#foreach($comment->replies as $reply)
#if($comment->id == $reply->comment_id)
<div class="box-comment reply-box-{{$comment->id}} initially-hidden" style="padding-left: 30px;">
<div class="comment-text">
{{$reply->body}}
</div>
</div>
#endif
#endforeach
#endforeach
<script type="text/javascript">
$(document).ready(function() {
$(".toggle-comments").click(function(){
$(".comment-box").slideToggle();
});
$(".show_hide_replies").click(function(ev) {
var getElem = $(this).attr("id");
$(".reply-box-"+getElem).slideToggle()
$(this).text(function(i, text){
return text === "Show Replies" ? "Hide Replies" : "Show Replies";
})
})
});
</script>

get id of form being submitted

I posted a question earlier wrt dynamically created forms, and got excellent advice. At the moment I have a list of forms, formCELL, each created as follows.
html
<div class="container">
<div class="container-element" id="1">
<h3>HEADER</h3>
<form action="refresh.php" id="formCELL" method="post" name="form_1">
<div class="panel-body">
<div class="col-xs-10 com">
CONTENT GOES HERE
</div>
<div class="col-xs-2 btn">
<button class="btn btn-primary" id="refresh" type="submit">Refresh</button>
</div>
</div>
</form>
</div>
<div class="container-element" id="2">
<h3>HEADER</h3>
<form action="refresh.php" id="formCELL" method="post" name="form_2">
<div class="panel-body">
<div class="col-xs-10 com">
CONTENT GOES HERE
</div>
<div class="col-xs-2 btn">
<button class="btn btn-primary" id="refresh" type="submit">Refresh</button>
</div>
</div>
</form>
</div>
<div class="container-element" id="3">
<h3>HEADER</h3>
<form action="refresh.php" id="formCELL" method="post" name="form_3">
<div class="panel-body">
<div class="col-xs-10 com">
CONTENT GOES HERE
</div>
<div class="col-xs-2 btn">
<button class="btn btn-primary" id="refresh" type="submit">Refresh</button>
</div>
</div>
</form>
</div>
<div class="container-element" id="4">
<h3>HEADER</h3>
<form action="refresh.php" id="formCELL" method="post" name="form_4">
<div class="panel-body">
<div class="col-xs-10 com">
CONTENT GOES HERE
</div>
<div class="col-xs-2 btn">
<button class="btn btn-primary" id="refresh" type="submit">Refresh</button>
</div>
</div>
</form>
</div>
</div>
javascript
$(document).ready(function() {
$('#formMAIN').submit(function(event) {
//formCELL is generated here through AJAX call.....
});
});
$('#formCELL').submit(function(event) {
// process the form
alert("about to submit");
//AJAX call to go here
var user_id = $(this).closest("form").attr('id');
alert(user_id);
event.preventDefault();
});
I am trying to get the id of the form being submitted so I can process it further, and I've tried diferent variations of $(this).closest("form").attr('id'); and all return a value of undefined
How can I get the id of the form being submitted?

You can use event.target.id to get form id

Just bind the "submit" event to whole form and then use
$(this).attr('id');

Maybe use data-id bro .
Put data-id as attribute in form
So you can easily get it using
$(this).attr('data-id')