Member Avatar for Simon180

Am having a issue with ajax form for some reason it dont always work post the correct data am having to click the image 3 or 4 times before it will load the portrait and gallery numbers.

can anyone help me out ?

    **       Form.php**
            <script>
            $(document).ready(function() {
                $('.ajaxform').click(function() 
                {
                   var avatar = $(this).data("portrait");
                   var avatardir = $(this).data("gallery");

                   $.post('update.php', {avatar : avatar, avatardir : avatardir}, function(data, status) 
                   {
                     $("#info").html(data);
                     alert("Data: " + data + "\nStatus: " + status);
                   }); 
                });
            });
            </script>

            <div id="info">
              <input name="updateMyPortrait" type="hidden" id="updateMyPortrait" value="1" />
              <input name="avatardir" type="hidden" id="avatardir" value="<?php echo $_POST['avatardir']; ?>" />
              <input name="avatar" type="hidden" id="avatar" value="<?php echo $_POST['avatar']; ?>" />
            </div>

 **       input image for clicking on:**
           <td><div><input class=\"ajaxform\" data-portrait=\"#{$str3}\" data-gallery=\"#{$avatarimg}\" type=\"image\" src=\"{$files[$pos]}\" width=\"88\" height=\"88\" border=\"1\"></div></td>

  **        update.php:**
            <input name="avatardir" type="hidden" id="avatardir" value="<?php echo $_POST['avatardir']; ?>" />
            <input name="avatar" type="hidden" id="avatar" value="<?php echo $_POST['avatar']; ?>" />

Thanks.

Edited by Simon180
  • 3 Contributors
  • 7 Replies
  • 254 Views
  • 21 Hours Discussion Span
  • Latest Post Latest Post by Simon180

Dani AI

Generated

Intermittent posting of the right IDs usually points to a client-side race or attribute-binding problem rather than the server. An input type="image" inside a form will trigger the browser's native submit which can abort an in-flight AJAX request, and jQuery's .data() reads from an internal cache (so it can return stale values if attributes were rewritten). was right to flag the escaped HTML — broken quoting or extra characters from the PHP echo will make data- attributes unreliable. 's comment about large images only applies if image loading actually delays clicks.

Actionable checklist and a safe handler to try:

  • Bind with delegation so dynamically inserted elements are handled.
  • Prevent the default submit on the click.
  • Read raw attributes with .attr() (or this.dataset) and strip any leading # so the server receives a plain id.
  • Disable the trigger while the request runs and show a loading indicator.
  • Use DevTools (Console + Network/XHR) to confirm the POST payload and the server response.

Example jQuery pattern (new, not a repeat of the original snippet):

$(document).on('click', '.ajaxform', function(e){
  e.preventDefault();
  var $btn = $(this);
  var avatar = ($btn.attr('data-portrait') || '').replace(/^#/, '');
  var avatardir = $btn.attr('data-gallery') || '';
  $btn.prop('disabled', true).addClass('busy');
  $.post('update.php', { avatar: avatar, avatardir: avatardir })
    .done(function(resp){ $('#info').html(resp); })
    .fail(function(xhr, status){ console.log('AJAX error', status, xhr.status); })
    .always(function(){ $btn.prop('disabled', false).removeClass('busy'); });
});

Server-side notes: output data- values safely (e.g. htmlspecialchars() or json_encode()), prefer plain numeric IDs (avoid embedding #), and cast incoming $_POST values (intval) in update.php. Also check for PHP notices or extra whitespace in the response — those can break parsing. Finally, switching away from type="image" (use type="button" or an <img> inside a button) avoids implicit form submits and removes a common source of this intermittent behaviour.

Recommended Answers

All 7 Replies

Member Avatar for Taywin

How big is the image file? If it is quite big (even 1 MB), it could take sometimes to load. Ajax is supposed to be for small data transaction so that the client doesn't need to reload the whole page...

Edited by Taywin
Member Avatar for Member #120589

You could show a loading animation (simple animated gif) on load and hide on completion. In the same way you could set a visual 'disabled' e.g. greyed-out overlay) on the upload trigger.

Member Avatar for Simon180

its not loading image only getting the image location basicly gallery ID and Picture ID but it dont seam to be working correctly not always adding the selected ids.

Member Avatar for Member #120589

WHy is all that html got escape chars all over the place? Are you spitting that out in PHP?!

Member Avatar for Simon180

yes all within side of php script, that is aecho "<td><div><input class=\"ajaxform\" data-portrait=\"#{$str3}\" data-gallery=\"#{$avatarimg}\" type=\"image\" src=\"{$files[$pos]}\" width=\"88\" height=\"88\" border=\"1\"></div></td>";

thats reason

Edited by Simon180
Member Avatar for Member #120589

Oh dear. That.s why it didn.t make any sense. So what is the ajax supposed to do? Just replace numbers in input controls?

Member Avatar for Simon180

basicly when you click on a image data-portrait=\"#{$str3}\" AND data-gallery=\"#{$avatarimg}\" will get the image id(portrait) and folder id(gallery) and then post them so I can submit then to database

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.