3

I'm trying to add dhtml to the div with the id upload_results. That should work without replacing the current content in the div.

The Code: (interesting part is at the bottom)

<script language="JavaScript">
 function do_show() {
      $("#webcamContainer").fadeIn('');
  }

  webcam.set_hook( 'onComplete', 'my_completion_handler' );

  function do_upload() {
       upload to server
      document.getElementById('upload_results').innerHTML = '<div>Uploading...</div>';
      webcam.upload();
  }

  function my_completion_handler(msg) {
       extract URL out of PHP output
      if (msg.match(/(http\:\/\/\S+)/)) {
          var image_url = RegExp.$1;
           show JPEG image in page
          $("#upload_results").fadeIn('');
          //document.getElementById('upload_results').innerHTML = '<a target="_blank" href="'+image_url+'"><img style="border:#ccc 5px solid;" src="'+image_url+'" width="100px"></a>';// I think here should be something changed
    $('#upload_results').append('<a target="_blank" href="'+image_url+'"><img style="border:#ccc 5px solid;" src="'+image_url+'" width="100px"></a>');      
           reset camera for another shot
          webcam.reset();
      }
      else alert("PHP Error: " + msg);
  }
 </script>


 <div id="upload_results" class="video_header" style="display:none;"></div><!--add data here , without replace current content in div-->
2
  • Looks like you're missing // for single line commenting - that would cause the code to not work.
    – DACrosby
    Jan 12, 2013 at 23:27
  • use one of those websites to quickly find the stuff from the jquery API u need.stackoverflow.com/questions/1660707/… that stuff falls under category manipulation.
    – OneWorld
    Jan 12, 2013 at 23:30

2 Answers 2

7

check out: insertAdjacentHTML method:

https://developer.mozilla.org/en-US/docs/DOM/element.insertAdjacentHTML

5

To append content to the #upload_results element:

$('#upload_results').append('<a target="_blank" href="'+image_url+'"><img style="border:#ccc 5px solid;" src="'+image_url+'" width="100px"></a>');

You could also use .innerHTML += '[...]'; but that's usually considered bad practice as it overwrites existing DOM, trashing out existing listeners and data previously attached to the elements.

5
  • I think its the same like INNER HTML, I tried it and the same function, so it didn't work Jan 12, 2013 at 23:31
  • Are you sure there's nothing else interfering with the code? I'll post a full example if needed. Jan 12, 2013 at 23:34
  • @HamadaBadran Your do_upload function overwrites the inner HTML emptying the upload_results element. Any document.getElementById('upload_results').innerHTML = in your code will overwrite the contents, apart from that I don't see anything that could be going wrong. Jan 12, 2013 at 23:36
  • I am using a WebCam JavaScript Tool to take snaps and I want to show all photos taken... Jan 12, 2013 at 23:38
  • I thought so. It's hard to debug without a live example though. Check if there isn't anything else writing to upload_results e.g. comment out your loading message temporarily and check again. .append() will never overwrite existing contents. Jan 12, 2013 at 23:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.