✔ Wie benutzt man jQuery’s $.ajax() Funktion

Der Fehler liegt in deiner ShowMsg-Funktion:
Javascript: 
function ShowMsg(data) {
  document.getElementById("outputAll").innerHTML = data;
}
"data" beinhaltet die binären Bilddaten selbst, folglich macht es keinen Sinn, diese in einem HTML-Kontext (innerHTML) anzeigen zu lassen.

Im Prinzip benötigst du auch keine AJAX-Anfrage, da du die URL einfach selbst konstruieren und einem <img>-Element zuweisen kannst:
HTML: 
<!DOCTYPE html>
<html>
  <head>
    <title>Titel (sonst ist das HTML ungültig)</title>
  </head>
  <body>
    <form>
      <input type="checkbox" value="2000" name="jahr[]" id="jahr">2000<br>
      <input type="checkbox" value="2001" name="jahr[]" id="jahr">2001<br>
      <input type="checkbox" value="2002" name="jahr[]" id="jahr">2002<br>
    </form>

    <!-- Ein img-Element ohne src-Attribut ist ungültig. Die sauberste Lösung wäre immer noch, das Element per JS hinzuzufügen. -->
    <img src="empty.png" alt="Diagramm" />

    <!-- Skripte zwecks Schnelligkeit des Seitenaufbaus am Ende einfügen -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script>
     $(document).ready(function() {
      $('form').delegate('input:checkbox', 'click', anzeige);
     });
     function anzeige() {
      var arr = $.map($('input:checkbox:checked'), function(e, i) {
       return +e.value;
      });
 
      var url = 'phplot_bild.php' + $.param({jahre: arr})
      $('img#chart').attr('src', url);
     }
    </script>
  </body>
</html>
 
Das ist mir langsam peinlich, deshalb arbeite ich besser erst mal jQuery - Das Praxistraining durch.
Ich dachte von PHP zu JS ist es nur ein kleiner..., aber das war wohl nix.
Wenn ich damit fertig bin und das trotzdem nicht umsetzen kann, könnt Ihr einem alten Mann bei Rot über die Strasse helfen ;-)
 
ComFreek hat gesagt.:
Im Prinzip benötigst du auch keine AJAX-Anfrage, da du die URL einfach selbst konstruieren und einem <img>-Element zuweisen kannst:
Zum Vergrößern anklicken....
Und so hab ich es gemacht:
Code: 
$(document).ready(function() {
 $('form').delegate('input:checkbox', 'click', anzeige);
 function anzeige(){
  var arr = $.map($('input:checkbox:checked'), function(e, i) {
   return +e.value;
  });
  $('#diagramm').attr('src','ajax_index.php?jahre[]='+arr);
 }
});

Wie kann ich denn den Status der Checkboxen abfragen ohne Event? Einfach nur beim laden der Seite?
Wenn zum Beispiel alle Checkboxen beim Laden der Seite auf checked=true stehen, soll natürlich auch das Diagramm entsprechend geladen werden.
Hab ich da was übersehen?
 
Wenn ich jetzt nichts übersehe, müsstest du anzeige() einfach einmal innerhalb des document.ready-Handlers aufrufen können.

Code: 
$(document).ready(function() {
 $('form').delegate('input:checkbox', 'click', anzeige);
 function anzeige(){
  var arr = $.map($('input:checkbox:checked'), function(e, i) {
   return +e.value;
  });
  $('#diagramm').attr('src','ajax_index.php?jahre[]='+arr);
 }
 // Neu:
 anzeige();
});

(Nur zur Info: Inwieweit der komplette Code ansonsten zielführend ist, vermag ich gerade nicht zu sagen.)
 
Nur der Ästhetik wegen:
Javascript: 
$(function() {
  function display() {
    var arr = $.map( $( "input:checkbox:checked" ), function ( e, i ) {
      return +e.value;
    });
    $( "#diagramm" ).attr( "src", "ajax_index.php?jahre[]=" + arr );
  }

  $( "form" ).on( "click", "input:checkbox", display );
  display();
});
 
PHP: 
$(document).ready(function() {
 $(function() {
  function anzeige() {
   var arr = $.map( $( "input:checkbox:checked" ), function ( e, i ) {
    return +e.value;
   });
   $( "#diagramm" ).attr( "src", "ajax_index.php.php?jahre=" + arr );
  }
  $( "form" ).on( "click", "input:checkbox", anzeige );
  anzeige();
  $('#auswahl').html('alle Jahre abwählen');
 });

 $("#alle").change(function() {
  $(".jahr").prop('checked', $(this).prop("checked"));
  function anzeige() {
   var arr = $.map( $( "input:checkbox:checked" ), function ( e, i ) {
    return +e.value;
   });
   $( "#diagramm" ).attr( "src", "ajax_index.php?jahre=" + arr );
  }
  anzeige();
  if($('#alle').is(':checked')) {
   $('#auswahl').html('alle Jahre abwählen');
  }
  else {
   $('#auswahl').html('alle Jahre auswählen');
  }
 });
});
@einfach nur crack
Warum das jetzt schöner ist weiss ich nicht, aber ich hab's übernommen ;-)
Das ist, was ich erreichen wollte. Nur scheint mir das für die paar Aufgaben viel zu viel Text.
Zum Beispiel musste ich in der change(function() die Funktion anzeige() nochmal schreiben.
Ich weiss, das geht besser!
Ich weiss nur nicht wie

Das Ergebnis ist: Die Startseite wird mit allen Kontrollkästchen markiert geladen und das Diagramm wird vollständig angezeigt.
Ich kann mit einem Kontrollkästchen alle markieren oder demarkieren, das Ergebnis ist wie erwartet.
Ich kann einzelne Jahre selektieren, das Diagramm ändert sich entsprechend.

Der Vollständigkeit halber hier noch die ajax_index.php und das HTML.

HTML: 
<body>
 <input type="checkbox" value="1" id="alle" checked="true"> <div id="auswahl"></div>
 <form>
  <input type="checkbox" value="2000" name="jahr[]" id="jahr">2000<br>
  <input type="checkbox" value="2001" name="jahr[]" id="jahr">2001<br>
  <input type="checkbox" value="2002" name="jahr[]" id="jahr">2002<br>
 </form>
 <img id="diagramm" src="ajax_index.php" alt="Diagramm">
</body>
PHP: 
<?php
require_once '../datenbankverbindung.php';
if (logged_in() && $_SESSION['usex'] == 1)  {
 require_once '../zeit_waehr_func.php';
 require_once 'phplot.php';

 if (isset($_GET['jahre']))  {
  if ($_GET['jahre'] != '') {
   $sum =  $pdo->prepare("SELECT JAHR, MONAT, if(JAHR < 2002,
                                                SUM(ROUND(SUMME_NE*0.511292,0)),
                                                SUM(ROUND(SUMME_NE,0))
                                               ) as SUMME
                                               FROM ".$rechnung."
                                               WHERE FIND_IN_SET(JAHR, :jahre)
                                               GROUP BY MONAT, JAHR");
   $jahr = explode(',',$_GET['jahre']);
   foreach ($jahr as $val) {
    $jahr[] = intval($val);
   }
   $ids = implode(',', $jahr);
   $sum->bindParam('jahre', $ids);
   $sum->execute();
  }
  else if ($_GET['jahre'] == '')  {
   $dummydiagramm = 1;
   }
  }

  while($summen = $sum->fetch()) {
   $daten[$summen['MONAT']-1][]  = $summen['SUMME'];
   $jahre[$summen['JAHR']]  = 'Jahr '.$summen['JAHR'];
  }

  $i  = 0;
  foreach($daten as $unterarray) {
   array_unshift($unterarray,strval(utf8_decode ($Monatsname[$i++])));
   $daten_neu[]  = $unterarray;
  }

  $diagramm =& new PHPlot(900,500);
  $diagramm->SetTitle(utf8_decode ("Jahresumsätze ").min($jahre)." bis zum Jahr ".max($jahre)." in Euro\n\r(vor 2002 von DM in EURO umgerechnet)");
  $diagramm->SetLegend($jahre);
  $diagramm->SetXTitle('Monate');
  $diagramm->SetYTitle('Umsatz');
  $diagramm->SetLegendUseShapes(TRUE);
  $diagramm->SetImageBorderType('plain');
  $diagramm->SetPointSizes(10);
  $diagramm->SetLineStyles('solid');
  $diagramm->SetLineWidths(2);
  $diagramm->SetPlotAreaWorld(0, NULL, 13, NULL);
  $diagramm->SetXTickIncrement(1);
  $diagramm->SetDataValues($daten_neu);
  $diagramm->DrawGraph();
 }
}
?>
Übrigens, wie heissen die Tags für JS in diesem Forum?
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück