CODEWITHSUNDEEP
javascriptlaravel
Rinzler21
Rinzler21

Reputation: 476

Why onClick method inside tr is not calling the function in foreach Laravel 5

I want to do something very simple, that is, making every row of my table clickable, when you click on the row should call a function to redirect you to another page, I did it with jQuery but it gave me certain problems with my bootstrap tables so I want to implement a solution with js, but when you click the row is not calling the function

This is my solution with jQuery, first when you click a row it will call a function that send the href to a form for the redirecting to the other page

$(".clickable-row").click(function() {
                sendForm($(this).data("href"));
            });

function sendForm(projectId){
            console.log('works');
            $("#formProjectId").val(projectId);
            $("#Projectsform").submit();
        }

Here is my foreach

 @foreach($projects

 as $project)
                    <tr class="clickable-row">
                        <td>
                            <a href="#" class="sl-color" onclick="sendForm('{{ $project->Project_Id }}')">{{ $project->Project_Id }}</a>
                        </td>
                        <td>
                            {{ $project->Project_Name }}
                        </td>
                    </tr>
                    @endforeach

This is why I tried to do with javascript and its not working

 @foreach($projects

 as $project)
                    <tr onclick="sendForm('{{ $project->Project_Id }}')">
                        <td>
                            {{ $project->Project_Name }}
                        </td>
                    </tr>
                    @endforeach

Upvotes: 1

Views: 506

Answers (3)

Rinzler21
Rinzler21

Reputation: 476

This is how I solved, I added on event function so if you click any items of the row it will call the sendForm function

document.onclick = function(e){
            if(e.target.id == 'clickable-row'){
                sendForm(e.target.getAttribute("data-target"));
            }
        
        }

This is how my HTML looks like now, the data-target is for specifying the variables I want to pass to the function and the id to validate the exactly clicked element

@foreach($projects

 as $project)
                    <tr>
                        <td id="clickable-row" data-target="{{ $project->Project_Id }}">
                            <a href="#" class="sl-color" onclick="sendForm('{{ $project->Project_Id }}')">{{ $project->Project_Id }}</a>
                        </td>
                        <td id="clickable-row" data-target="{{ $project->Project_Id }}">
                            {{ $project->Project_Name }}
                        </td>
                    </tr>
                    @endforeach

Upvotes: 1

Watercayman
Watercayman

Reputation: 8178

I believe the problem is that js is failing in the first call, and thus never gets to the second call. So from the original call:

$(".clickable-row").click(function() {
            sendForm($(this).data("href"));
    });

It is looking for the data field, but not finding a data element within the <tr>. So it never hits the second call of the same function.

I think it would help to write this into one statement something like html:

  <span class='clickable' data-href='whatever your href is' data-id='{{ $project->Project_Id }}'>{{ $project->Project_Id }}</span>

Then call it via a click event in jquery:

$( document ).ready(function() {
  $('.clickable').on('click', function(){   
    var id = $(this).data( "id" );
    // same for href
   // then perform your actions
 });
});

In JS, you can do the same thing if you just have an onclick event:

function sendForm(projectId){
    document.getElementById("formProjectId").value = projectId;
    document.Projectsform.submit();
}

You'll need to make sure the name of the form is Projectsform, or:

document.getElementById("Projectsform").submit();

Upvotes: 1

Ezequiel Fernandez
Ezequiel Fernandez

Reputation: 1074

mm Strange, you should remove the tag due you are catching the parent tag click. check my pen.

https://codepen.io/ezequiel9/pen/MWJjGeq

$("body").on('click', '.clickable-row', function(e) {
  e.preventDefault();
  sendForm($(this).data("href"));
});

function sendForm(projectId){
  alert('clicked');
  console.log('works');
  $("#formProjectId").val(projectId);
  $("#Projectsform").submit();
}

Upvotes: 1

Related Questions