JQuery Click event works only once

4
votes

In my page there is a table and each table row has two link tags. I want to invoke the second by clicking the first because I want to add some parameters for the 2nd href taking from the 1st href. And the 2nd link is opens in a colorbox Element.

The tags are .

<a id="linkToHiddenATag" href=" '#'.<?php echo $row['employee_id'];?>/<?php echo$row['supervisor_id'];?>" title="Product Operation List">Click for production entry</a>

<a class ="add cboxElement" href="#" id="hiddenATag" ></a>

The full Table is as below:

HTML

                    <div id="searchPanel">
                        <table id="searchTable" class="dataTable">
                            <thead>
                                <tr>
                                    <th style="text-align: left; width: 8%;">SL</th>
                                    <th style="text-align: left; width: 12%;">Employee Code</th>
                                    <th style="text-align: left; width: 12%;">Employee Name</th>
                                    <th style="text-align: left; width: 12%;">Designation</th>
                                    <th style="text-align: left; width: 10%;">Entry Date</th>                                        
                                    <th style="text-align: left; width: 36%;">Entry</th>
                                    <th style="text-align: center; width: 10%;">D'active</th>                                                                                
                                </tr>
                             </thead>
                             <tbody>
                                    <?php $loopCount = 1; if(isset($employeeData)){ foreach ($employeeData as $key => $row):?>
                                    <tr id="tr_<?php echo $row['employee_id']; ?>">

                                        <td style="text-align:center;"><input type="text" class="supervisorwiseSerial" id="supervisorwiseSerial_<?php echo $row['employee_id'];?>" name="supervisorwiseSerial_<?php echo $row['employee_id'];?>" value="<?php echo $row['supervisorwise_serial'] ;?>"></td>
                                        <td><?php echo $row['employee_pre_code']."-".$row['employee_code'];?></td>
                                        <td><?php echo $row['employee_name'];?></td>
                                        <td><?php echo $row['designation_name'];?></td>
                                        <td style="text-align: center;">
                                            <input style="width: 80px;" type="text" placeholder="dd.mm.yyyy" class="dateOfProduction_" name="dateOfProduction_" id="dateOfProduction_<?php echo $row['employee_id']; ?>" required />

                                            </td>
                                            <td style="text-align: center;"><a class="btn btn-success btn-xs" id="setSerial_<?php echo $row['employee_id'];?>" role="button" href="#" >Set serial </a>   || <a id="linkToHiddenATag" href="<?php echo '#'.base_url();?>production_entry/showOperationList/<?php echo $row['employee_id'];?>/<?php echo$row['supervisor_id'];?>" title="Product Operation List">Click for production entry</a></td>                                        

                                        <td  style="text-align:center"><a class="btn btn-warning btn-xs" id="deActiveEmployee" href="<?php echo base_url().'employee'.'/'.'#'.'editOrDeactivate'.$row['employee_id'];?>" target="_blank">D'active Emp</a></td>
                                        <input type="hidden" id="employeeId" value="<?php echo $row['employee_id']; ?>">
                                        <input type="hidden" id="unit_<?php echo $row['employee_id']; ?>" value="<?php echo $row['unit_id']; ?>">
                                        <input type="hidden" id="floor_<?php echo $row['employee_id']; ?>" value="<?php echo $row['floor_id']; ?>">
                                        <input type="hidden" id="section_<?php echo $row['employee_id']; ?>" value="<?php echo $row['section_id']; ?>">
                                        <input type="hidden" id="subsection_<?php echo $row['employee_id']; ?>" value="<?php echo $row['subsection_id']; ?>">
                                        <input type="hidden" id="incharge_<?php echo $row['employee_id']; ?>" value="<?php echo $row['incharge_id']; ?>">
                                    </tr>
                                    <?php $loopCount++; endforeach;}?>
                             </tbody>    
                        </table>                            
                    </div>
                    <div class="panel-footer" style="text-align: right;" id="searchPanelFooter">
                     <a  id="saveAll" name="saveAll" class="btn btn-success btn-md" role="button" href="#">Save All</a>
                     <a class ="add cboxElement" href="#" id="hiddenATag" ></a> 
                    </div>

Javascript:

$(document).on('click', 'a#linkToHiddenATag', function() {

    var url = $(this).attr("href");
    var arrfor = url.split('/');
    var lengthto = arrfor.length;
    var employeeSysIdForOpList = arrfor[lengthto - 2];
    var supervisorIdForOpList = arrfor[lengthto - 1];

    var prodOpGrp = parseInt($('select#operationGroupSelect').val());

    var newhref = '';
    if ($.isNumeric(prodOpGrp)) {
        newhref = '<?php echo base_url().'
        production_entry / showOperationList / ';?>' + employeeSysIdForOpList + '/' + supervisorIdForOpList + '/' + prodOpGrp;

    } else {
        newhref = '<?php echo base_url().'
        production_entry / showOperationList / ';?>' + employeeSysIdForOpList + '/' + supervisorIdForOpList;
    }



    $('a#hiddenATag').removeProp("href");
    $('a#hiddenATag').prop("href", newhref);

    $('a#hiddenATag').click();

});

The problem is that the click event works only once. It never fires again. I failed to detect the problem. Helpful if somebody can help.

3
javascriptjqueryhtml
Why do I see php code <?php echo base_url()? Is it actually a php file where you are writing the js? – Tᴀʀᴇǫ Mᴀʜᴍᴏᴏᴅ
writing within script tag in view page – Hafsul Maru
@HafsulMaru i given answer just let me know if i am wrong – Keval Bhatt
Keval Bhatt , Testing – Hafsul Maru
@HafsulMaru production_entry is undefined – Keval Bhatt

3 Answers

2
votes

I tried with your example it is working. I removed href from example for testing

Problems :

1) And i run your code also it is showing production_entry undefined

2) String concat is wrong also it should be like this if it is in new line (use +) 

 newhref = '<?php echo base_url().'+
           production_entry +'/'+ showOperationList +'/'+ ';?>' 


$(document).on('click', 'a#linkToHiddenATag', function() {

       var url = $(this).attr("href");
       var arrfor = url.split('/');
       var lengthto = arrfor.length;
       var employeeSysIdForOpList = arrfor[lengthto - 2];
       var supervisorIdForOpList = arrfor[lengthto - 1];
       $('body').append('clicked')
       console.log("clicked")
       $('a#hiddenATag').click();

 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="linkToHiddenATag" href="#" title="Product Operation List">Click for production entry</a>
<a class="add cboxElement" href="" id="hiddenATag" onClick="console.log('ss')"></a>
0
votes

I think you should use $('a#hiddenATag').trigger('click'); instead of $('a#hiddenATag').click();

0
votes

Try this 

$('#linkToHiddenATag').on('click',function(){
      */ Write your code */
});