AJAX im Template verwenden

Webentwicklung Wordpress
 
Moin — ich versuche gerade einen Imageupload im Frontend mit AJAX zu bauen. Funktioniert eigentlich auch schon, hatte ein gutes vorgefertigtes Skript gefunden. Leider geht es aber nur in Chrome und Safari. Firefox bringt statt dem Bild, HTML-Gewäsch in den Div-Container.
  1. <div id="ajax-image-container" style="background: yellow; margin: 20px;"></div>
  2.  
  3. <form id="thumbnail_upload" method="post" action="" enctype="multipart/form-data" >
  4. <input type="file" name="thumbnail" id="thumbnail">
  5. <input type="hidden" name="action" id="action" value="my_upload_action"><?php // muss drinbleiben ?>
  6. <input id="submit-ajax" name="submit-ajax" type="submit" value="upload">
  7. </form>
  8.  
  9. <script type="text/javascript">
  10. <?php
  11. //ajaxurl is not defined in the frontend - get it
  12. echo "\t".'var ajaxurl = "' . admin_url('admin-ajax.php') . '";'."\n\n";
  13. ?>
  14.  
  15. jQuery(document).ready(function() {
  16. var options = {
  17. target: '#ajax-image-container', // target element(s) to be updated with server response
  18. beforeSubmit: showRequest, // pre-submit callback
  19. success: showResponse, // post-submit callback
  20. url: '/radar/wp-content/themes/twentyten/artefacts-new-upload-page.php' // admin-ajax.php wäre besser, absolute urls gehen nicht im mozilla
  21. };
  22.  
  23. // bind form using 'ajaxForm'
  24. jQuery('#thumbnail_upload').ajaxForm(options);
  25. });
  26.  
  27. function showRequest(formData, jqForm, options) {
  28. //do extra stuff before submit like disable the submit button
  29. jQuery('#ajax-image-container').html('Sending...' + formData);
  30. jQuery('#submit-ajax').attr("disabled", "disabled");
  31. }
  32.  
  33. function showResponse(responseText, statusText, xhr, $form) {
  34. //do extra stuff after submit
  35. //bildpfad speichern
  36. var image = 'http://localhost/radar/wp-content/artefacts/' + responseText;
  37.  
  38. //bild anzeigen
  39. jQuery('#ajax-image-container').html('<img src="' + image + '"/>');
  40. //bild übergeben
  41. jQuery('#uploaded_image').attr("value", responseText);
  42. }
  43.  
  44. </script>
Quelltext in Zwischenablage kopieren

Ich bin schon soweit, dass ich gelesen habe das Mozilla-Browser wohl keine absoluten URLs für Ajaxanfragen zulassen, wegen Sicherheit und so… hab ich ja aber auch nicht?
Link zu diesem Beitrag in die Zwischenablage kopieren
Mister Ad
Werbung
Schon mal bei Saturn, DaWanda oder notebooksbilliger.de geguckt? Vielleicht wirst du dort fuendig.

 
Die Option target brauchst du schonmal nicht. Das wäre mit der Anweisung in showResponse doppelt. Aber das dürfte das Problem auch nicht beheben.

Was genau kommt beim FF in das div?
Link zu diesem Beitrag in die Zwischenablage kopieren
ohne target bekomme ich den gleichen fehler, aber danke für den hinweis! danke

so sieht das nach dem drücken auf upload im safari/chrome aus (richtig):


im firefox wird irgendwie die gleiche seite nochmal reingeladen:
Link zu diesem Beitrag in die Zwischenablage kopieren
Editiert: 23.03.11, 09:58 Uhr
ah ok, dann wird das Formular zusätzlich nochmal im Browser abgesendet. Da action keine Url hat, wird die selbe Seite geladen. Um das zu unterbinden, schreib in showRequest am Ende:
  1. return false;
Quelltext in Zwischenablage kopieren
Link zu diesem Beitrag in die Zwischenablage kopieren
#