Javascript onclick not working as expected in laravel

Question

I have link in my page , when user clicks on the link it should give me a dialog box , so to test , i did the following code.

Here is my 'view' code

<div class="panel-body">
                <br>
                <form class="form-horizontal" role="form" method="POST" action="{{ url('/unsayd') }}">
                {{ csrf_field() }}

                          <div class="form-group">
                        <div class="col-md-6">

                            @foreach ($posts as $post)

                                <article class = "post" data-postid="{{ $post->id }}">
                                    <p>{{$post->userpost}}</p>
                                <div class='info'>
                                    Posted by {{ $post->user->name }} on {{ $post->user->created_at}}
                                </div>

                                 <div class = 'interaction'>
                                    <a href=#>Like </a> |
                                    @if(Auth::user() == $post->user)
                        |
                                        <a href="#" class="edit">Edit</a> |
                                        <a href="{{ route('post.delete', ['post_id' => $post->id]) }}">Delete</a>

                                    @endif


                            @endforeach

                        </div>
                    </div>

                    <div class="modal fade" tabindex="-1" role="dialog" id="edit-modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Edit Post</h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="post-body">Edit the Post</label>
                        <textarea class="form-control" name="post-body" id="post-body" rows="5"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="modal-save">Save changes</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

When the user clicks the edit link

<a href="#" class="edit">Edit</a>

I want to the js onlick function to be called , Here is the JS code

$('.post').find('.interaction').find('a').eq(2).on('click' , function(){
console.log('It works');

});

When I click the edit button , i dont see anything in the console , but it is supposed to show 'It works'.

This are the scripts included in the main layout

  <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="{{ URL::to('src/js/app.js') }}"></script>

app.js is stored in public\src\js\app.js

What is the issue here and what is the possible way to fix the issue ? NOTE : when i click edit , i can see the app.js is loading in the cmd after running artisan serve.

I am a very beginner , can you say it in a beginner way of understanding — Naveen Kumar
– Naveen Kumar, Commented Jun 2, 2016 at 9:45
Try this code $(document).ready(function() { $('.post .interaction a:eq(2)').click(function() { console.log('It works'); }); }) — Anoop Joshi P
– Anoop Joshi P, Commented Jun 2, 2016 at 9:50
try this $(document).on("click", '.post .interaction a', function() { alert('It works'); }); — Anoop Joshi P
– Anoop Joshi P, Commented Jun 2, 2016 at 10:01

codearts · Accepted Answer · 2016-06-02 09:53:51Z

1

I had the same problem. Here is how I got around it: Here is the view:

<button id="testButton" type=""button">Click me</button>

Here is the js:

$(document).on('click', '#testButton', function () {
    console.log('clicked!');
});

Hope this was helpful.

answered Jun 2, 2016 at 9:53

codearts

2,9566 gold badges36 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Anoop Joshi P · Accepted Answer · 2016-06-02 09:55:58Z

0

I think the script is executed before the element is being rendered. For such situations, you can use the dom ready handler, which will execute whenever the dom is ready,

$(document).ready(function() {
  $('.post .interaction a:eq(2)').click(function() {
    console.log('It works');
  });
})

answered Jun 2, 2016 at 9:55

Anoop Joshi P

25.6k9 gold badges35 silver badges54 bronze badges

Comments

MrCode · Accepted Answer · 2016-06-02 10:06:17Z

0

Two problems:

The jQuery code needs to be wrapped in a DOM ready handler, to ensure the elements exist when you try to access them.
.eq() is zero based, so .eq(2) would select your delete button not edit. You would need .eq(1) for the edit button.

I would rewrite the code to delegate the click to the form, instead of assigning a click to every edit button individually, and since your button has class edit, it would be more appropriate to use that instead of eq().

$(function(){
    $('form.form-horizontal').on('click', '.post .interaction .edit', function(){
        console.log('It works');
    });
});

If you have multiple forms, then give it a unique class or ID and use that in the above.

answered Jun 2, 2016 at 10:06

MrCode

64.6k10 gold badges95 silver badges114 bronze badges

Collectives™ on Stack Overflow

Javascript onclick not working as expected in laravel

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related