16541

How to repeat 'onclick' function with AJAX within ID?

Question:

I'm trying to run new AJAX upload and insert a data element from the onClick of an item to multirow , the problem is it work for first row and when I add another row the function is not working when I click on it .

HTML code is :

<table id="images" class="list"> <thead> <tr> <td class="left"><?php echo $entry_image; ?></td> <td class="right"><?php echo $entry_sort_order; ?></td> <td></td> </tr> </thead> <?php $image_row = 0; ?> <?php foreach ($product_images as $product_image) { ?> <tbody id="image-row<?php echo $image_row; ?>"> <tr> <td class="left"><div class="image"><img src="<?php echo $product_image['thumb']; ?>" alt="" id="thumb<?php echo $image_row; ?>" /> <input type="hidden" name="product_image[<?php echo $image_row; ?>][image]" value="<?php echo $product_image['image']; ?>" id="image<?php echo $image_row; ?>" /> <br /> <a onclick="image_upload('image<?php echo $image_row; ?>', 'thumb<?php echo $image_row; ?>');" id="imagerow<?php echo $image_row; ?>" class="rowman"><?php echo $text_browse; ?></a>&nbsp;&nbsp;|&nbsp;&nbsp;<a onclick="$('#thumb<?php echo $image_row; ?>').attr('src', '<?php echo $no_image; ?>'); $('#image<?php echo $image_row; ?>').attr('value', '');"><?php echo $text_clear; ?></a></div></td> <td class="right"><input type="text" name="product_image[<?php echo $image_row; ?>][sort_order]" value="<?php echo $product_image['sort_order']; ?>" size="2" /></td> <td class="left"><a onclick="$('#image-row<?php echo $image_row; ?>').remove();" class="button"><?php echo $button_remove; ?></a></td> </tr> </tbody> <?php $image_row++; ?> <?php } ?> <tfoot> <tr> <td colspan="2"></td> <td class="left"><a onclick="addImage();" class="button"><?php echo $button_add_image; ?></a></td> </tr> </tfoot> </table>

javascript code for Add function for row is :

<pre class="snippet-code-js lang-js prettyprint-override">var image_row = <?php echo $image_row; ?>; function addImage() { html = '<tbody id="image-row' + image_row + '">'; html += ' <tr>'; html += ' <td class="left"><div class="image"><img src="<?php echo $no_image; ?>" alt="" id="thumb' + image_row + '" /><input type="hidden" name="product_image[' + image_row + '][image]" value="" id="image' + image_row + '" /><br /><a onclick="image_upload(\'image' + image_row + '\', \'thumb' + image_row + '\');" id="imagerow' + image_row + '" class="rowman"><?php echo $text_browse; ?></a>&nbsp;&nbsp;|&nbsp;&nbsp;<a onclick="$(\'#thumb' + image_row + '\').attr(\'src\', \'<?php echo $no_image; ?>\'); $(\'#image' + image_row + '\').attr(\'value\', \'\');"><?php echo $text_clear; ?></a></div></td>'; html += ' <td class="right"><input type="text" name="product_image[' + image_row + '][sort_order]" value="" size="2" /></td>'; html += ' <td class="left"><a onclick="$(\'#image-row' + image_row + '\').remove();" class="button"><?php echo $button_remove; ?></a></td>'; html += ' </tr>'; html += '</tbody>'; $('#images tfoot').before(html); image_row++; }

and jQuery code for onclick function is :

<pre class="snippet-code-js lang-js prettyprint-override">function image_upload(field, thumb) { var image_row = <?php echo $image_row; ?>; new AjaxUpload('#imagerow'+image_row ,{ action: 'index.php?route=common/filemanager/upload&image=' + encodeURIComponent($('#' + field).attr('value')), name: 'image', autoSubmit: true, responseType: 'json', onChange: function(file, extension) { this.setData({'directory': ''}); this.submit(); }, onSubmit: function(file, extension) { $('#upload').append('<img src="catalog/view/theme/mall/image/loading.gif" class="loading" style="padding-left: 5px;" />'); }, onComplete: function(file, json) { if (json.success) { $('#' + field).attr('value','data/user/'+file) $.ajax({ url: 'index.php?route=common/filemanager/image&image=' + encodeURIComponent($('#' + field).attr('value')), dataType: 'text', success: function(text) { $('#' + thumb).replaceWith('<img src="' + text + '" alt="" id="' + thumb + '" />'); } }); } if (json.error) { alert(json.error); } $('.loading').remove(); } }); };

here is a pic for explanation <img alt="description image" class="b-lazy" data-src="https://i.stack.imgur.com/NSzVx.png" data-original="https://i.stack.imgur.com/NSzVx.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" />

can I get help?

Answer1:

You should probably divide your javascript from your DOM. If you use JQuery you could do something like this:

<td class="left"><a data-image-row="<?php echo $image_row; ?>" class="button image-row-remove"><?php echo $button_remove; ?></a></td>

and then use on, so JQuery can also recognize new elements:

$(body).on('click', '.image-row-remove', function(){ $('#image-row' + this.data('image-row')).remove(); });

Answer2:

You need to bind the click function to every dynamic generated element. Try this to append your function to every (also dynamically generated) elements in DOM.

$('body').on('click', '.yourlink', function(e) { }

And change your code (you dont need a onclick function, just give them a certain class and (if needed) a unique id)

Answer3:

finally i found solution with help from my friend @EraMax

at part of HTML code at button :

<a onclick="image_upload('image<?php echo $image_row; ?>', 'thumb<?php echo $image_row; ?>');" id="imagerow<?php echo $image_row; ?>"><?php echo $text_browse; ?></a>

we will add id to onclick event as following

<a onclick="image_upload('image<?php echo $image_row; ?>', 'thumb<?php echo $image_row; ?>' ,'imagerow<?php echo $image_row; ?>');" id="imagerow<?php echo $image_row; ?>" class="upimage"><?php echo $text_browse; ?></a>

on code of generated row at point of onclick button change :

html += ' <td class="left"><div class="image"><img src="<?php echo $no_image; ?>" alt="" id="thumb' + image_row + '" /><input type="hidden" name="product_image[' + image_row + '][image]" value="" id="image' + image_row + '" /><br /><a onclick="image_upload(\'image' + image_row + '\', \'thumb' + image_row + '\');" id="imagerow' + image_row + '" class="rowman"><?php echo $text_browse; ?></a>&nbsp;&nbsp;|&nbsp;&nbsp;<a onclick="$(\'#thumb' + image_row + '\').attr(\'src\', \'<?php echo $no_image; ?>\'); $(\'#image' + image_row + '\').attr(\'value\', \'\');"><?php echo $text_clear; ?></a></div></td>';

to

html += '<td class="left"><div class="image"><img src="<?php echo $no_image; ?>" alt="" id="thumb' + image_row + '" /><input type="hidden" name="shop_image[' + image_row + '][image]" value="" id="image' + image_row + '" /><br /><a onclick="image_upload(\'image' + image_row + '\', \'thumb' + image_row + '\' , \'imagerow' + image_row + '\');" id="imagerow' + image_row + '" ><?php echo $text_browse; ?></a>&nbsp;&nbsp;|&nbsp;&nbsp;<a onclick="$(\'#thumb' + image_row + '\').attr(\'src\', \'<?php echo $no_image; ?>\'); $(\'#image' + image_row + '\').attr(\'value\', \'\');"><?php echo $text_clear; ?></a></div></td>';

finally in jQuery code for onclick event

function image_upload(image, thumb, image_row ){ new AjaxUpload('#'+image_row , { action: 'index.php?route=common/filemanager/upload&image=' + encodeURIComponent($('#' + field).attr('value')), name: 'image', autoSubmit: true, responseType: 'json', onChange: function(file, extension) { this.setData({'directory': ''}); this.submit(); }, onSubmit: function(file, extension) { $('#'+image_row).append('<img src="catalog/view/theme/default/image/loading.gif" class="loading" style="padding-left: 5px;" />'); }, onComplete: function(file, json) { if (json.success) { $('#' + field).attr('value','data/user/'+file); $.ajax({ url: 'index.php?route=common/filemanager/image&image=' + encodeURIComponent($('#' + field).attr('value')), dataType: 'text', success: function(text) { $('#' + thumb).replaceWith('<img src="' + text + '" alt="" id="' + thumb + '" />'); } }); } if (json.error) { alert(json.error); } $('.loading').remove(); } }); };

I hope this is help everyone seek this solution

Recommend

  • Span rows of a table with mousedown and drag in jquery?
  • How to correctly set layout using example below
  • Extending Jquery accordion to rows of a table
  • chart.js - link to other page when click on specific section in chart
  • How to display large table in twig with symfony?
  • Jasny Bootstrap rowlink close modal is not closing?
  • Populate an HTML table from javascript array
  • Reset selector does not reset the table data properly
  • Html table in conflict with angular component header and component body
  • form inside table
  • Bootstrap-datetimepicker - dynamically add shows up in wrong area
  • width returns 0 for IE and Chrome
  • How to select multiple rows at different place in a table using Selenium Webdriver
  • Getting the 'co-ordinates' of a cell using jQuery
  • Getting the inner-most row in the embedded tables
  • How can I refresh the entire table sorting cache after dynamic table update?
  • Zend Framework 2, Module Redirect
  • Why does PHP appear to evaluate this condition incorrectly?
  • Selenium - How to skip the record from the Set after the its first occurrence
  • Contact form problem - I do receive messages, but no contents (blank page)
  • window.onbeforeunload in javascript
  • File loader changed image file name but not the file name in HTML file
  • insert radio value multiple data codeigniter in database to one row?
  • Universal Image Loader reuse images
  • Jquery Mobile pageLoading() Method how does it work?
  • Outputting SharePoint Hyperlink Column as URL
  • Simulate click Geckofx vb,net
  • Java Scanner input dilemma. Automatically inputs without allowing user to type
  • what is the difference between the asp.net mvc application and asp.net web application
  • VB.net deserialize, JSON Conversion from type 'Dictionary(Of String,Object)' to type '
  • Matrix multiplication with MKL
  • How can I get HTML syntax highlighting in my editor for CakePHP?
  • -fvisibility=hidden not passed by compiler for Debug builds
  • How do I configure my settings file to work with unit tests?
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • Busy indicator not showing up in wpf window [duplicate]
  • Binding checkboxes to object values in AngularJs
  • failed to connect to specific WiFi in android programmatically
  • To Get the radio button value in ruby on rails