Ergebnis 1 bis 6 von 6
  1. #1
    macoma ist offline Grünschnabel
    registriert
    18-04-2012
    Beiträge
    3

    bereits gelandenen Div-Inhalt beim nächsten onklick wieder ausblenden

    Hallo Toutorium,

    seit mehreren Tagen brüte ich über ein Problem. Ich habe zwei Slider (jquery), die durch einen onklick über radiobuttons aufgerufen werden. Die Div-Inhalte werden über php aufgerufen. Mein Problem ist nun, daß ich den Inhalt aus dem zuerst angeklickten Div, sobald ich auf den anderen Radiobutton klicke nicht wegbekomme (es erscheinen dann beide Slider). Habe schon so viel ausprobiert und bin langsam am verzweifeln...

    Hier ist der Code der Html-datei:

    HTML-Code:
    <head>
    	<link rel="stylesheet" href="development-bundle/themes/base/jquery.ui.all.css" />
    
    	<script src="js/jquery-1.7.1.min.js"></script>
    	<script src="development-bundle/ui/jquery.ui.core.js"></script>
    	<script src="development-bundle/ui/jquery.ui.widget.js"></script>
    
    	<script src="development-bundle/ui/jquery.ui.mouse.js"></script>
    	<script src="development-bundle/ui/jquery.ui.slider.js"></script>
    	<link rel="stylesheet" href="development-bundle/demos/demos.css"/>
    [CODE]
            <script>
             function get_content(id, value) {
               $.get('http://localhost/slider/ajax.php?param='+value, function(data) {
                   $('#'+id).fadeIn('slow');
                   $('#'+id).html(data);
               })
             }        
            </script
    [/CODE]
    
    </head>
    <body>    
    <form name='form' method='post' accept-charset="utf-8" action='index.php' style='margin:0px; padding:0px;'> 
         <p><strong>Nationale oder internationale Fans:</strong></p>
         <p><input type="radio" name="fans" value="deutsche_fans" onclick="get_content('slider-range-min','deutsche_fans')" /> Deutsche Fans</p>    
         <p><input type="radio" name="fans" value="internationale_fans"  onclick="get_content('slider-range-min_int','internationale_fans')" /> Internationale Fans</p>
    
              <div id="slider-range-min" style="display: none;"></div>
              <div id="slider-range-min_int" style="display: none;"></div>
    </form>
    </body>
    und hier die JS-Scripte für beiden Slider, die ich in der php (sonst erscheinen die Slider nicht vernünftig) und auch im <head>-Bereich der html-Datei plaziert habe:

    Code:
    <script>
    $(function() {
    $( "#slider-range-min" ).slider({
    range: "min",
    value: 100,
    min: 100,
    max: 10000,
    step: 10,
    slide: function( event, ui ) {
    $( "#amount" ).val( ui.value );
    $( "#amount2" ).val( "€ " + (ui.value * "0.10").toFixed(2) ); 
    }
    });
    $( "#amount2" ).val( "€ " + $( "#slider-range-min" ).slider( "value" ) * "0.10" );
    $( "#amount" ).val( $( "#slider-range-min" ).slider( "value" ) );
    });
    </script> 
       
    <script>
    $(function() {
    $( "#slider-range-min_int" ).slider({
    range: "min",
    value: 100,
    min: 100,
    max: 10000,
    step: 10,
    slide: function( event, ui ) {
    $( "#amount_int" ).val( ui.value );
    $( "#amount2_int" ).val( "€ " + (ui.value * "0.07").toFixed(2) ); 
    }
    });
    $( "#amount2_int" ).val( "€ " + $( "#slider-range-min_int" ).slider( "value" ) * "0.07" );
    $( "#amount_int" ).val( $( "#slider-range-min_int" ).slider( "value" ) );
    });
    </script>
    Das hier ist der Inhalt der php-Datei:

    PHP-Code:
    if  ($_GET['param'] == 'deutsche_fans')    {
              
    $deutsche_fans =  "<div class=\"demo\"></div>
             <p<strong>Auswahl deutsche Fans:</strong></p> 
             <div class=\"pricesliderbox12\" style=\"padding-left: 80px;\">Preis deutsch: <input type=\"text\" id=\"amount2\" readonly=\"readonly\" /></div>

        <div class=\"pricesliderbox12\" style=\"float:left; padding-left: 30px; width:420px;\">
        <label for=\"amount\">Anzahl Fans:</label><input type=\"text\" id=\"amount\" name=\"amount\" readonly=\"readonly\" /></div>"
    ;
        echo 
    "</div>";// <!-- End demo -->
        
    echo $deutsche_fans;


    elseif (
    $_GET['param'] == 'internationale_fans')    { 
                 
    $internationale_fans "<div class=\"demo\"></div>
                <p>Auswahl Internationale Fans:</strong></p> 

              <div class=\"pricesliderbox12\" style=\"padding-left: 80px;\">Preis international: <input type=\"text\" id=\"amount2_int\" name=\"price\"
              value=\"amount2_int\" readonly=\"readonly\" />
             </div>

            <div class=\"pricesliderbox12\" style=\"float:left; padding-left: 30px; width:420px;\">
           <label for=\"amount\">Anzahl Fans:</label><input type=\"text\" id=\"amount_int\" name=\"amount_int\" readonly=\"readonly\" />
            </div>"
    ;//<!-- End demo -->    
           
    echo $internationale_fans;

         }
    else {
          echo
    " erst mal gar nichts";
          } 
    Ich würde mich sehr freuen, wenn mir jemand helfen könnte. Über toggle und a href bekomme ich das hin, es sollen aber unbedingt Radiobuttons sein.

  2. #2
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.702

    AW: bereits gelandenen Div-Inhalt beim nächsten onklick wieder ausblenden

    Wieso machst du da zwei getrennte <div>s? Da sowieso immer nur eines angezeigt werden soll, kannst du doch am Anfang deiner get_content-Funktion das Darstellungsfenster verschwinden lassen (z.B. mit fade_out) dann den Inhalt laden und ersetzen. Also ein <div> löschen, die IDs in beiden Aufrufen identisch machen und das Verbergen einfügen.

  3. #3
    Avatar von miniA4kuser
    miniA4kuser ist offline Lounge-Member
    registriert
    12-07-2006
    Beiträge
    3.034

    AW: bereits gelandenen Div-Inhalt beim nächsten onklick wieder ausblenden

    Oder vorher alle div's innerhalb des form's ausblenden:
    Code:
            <script>
             function get_content(id, value) {
               $.get('http://localhost/slider/ajax.php?param='+value, function(data) {
                   $('form div').fadeOut('slow', function () {
                      $('#'+id).fadeIn('slow');
                      $('#'+id).html(data);
                   }
               })
             }        
            </script
    Hoffe ich konnte helfen

  4. #4
    macoma ist offline Grünschnabel
    registriert
    18-04-2012
    Beiträge
    3

    AW: bereits gelandenen Div-Inhalt beim nächsten onklick wieder ausblenden

    Herzlichen Dank für die superschnelle Antwort.

    Hört sich richtig gut an.

    Ich dachte, daß ich unbedingt beide ID's bräuchte, weil die doch in den Sliderfunktionen (da zwei unterschiedliche Preise) definiert sind. Ich wüßte bzw. weiß jetzt gar nicht, wie ich das umsetzten sollte.

  5. #5
    macoma ist offline Grünschnabel
    registriert
    18-04-2012
    Beiträge
    3

    AW: bereits gelandenen Div-Inhalt beim nächsten onklick wieder ausblenden

    Oder vorher alle div's innerhalb des form's ausblenden:
    Danke für den tollen Tipp.
    Wenn ich es aber so mache, wird schon beim ersten Klick alles ausgeblendet und die php-Datei gar nicht aufgerufen. Vielleicht habe ich das auch absolut falsch gemacht.
    Code:
    <script type="text/javascript"> 
             function get_content(id, value) {
               $.get('http://localhost/slider/ajax.php?param='+value, function(data) {
                    $('#formm').fadeOut('slow'), function() {
                      $('#'+id).fadeIn('slow');
                      $('#'+id).html(data);
                   }
               })
             }        
            </script>
    Der Html-Code sieht nun so aus:
    HTML-Code:
    <form name='form' method='get' accept-charset="utf-8" action='index.php' style='margin:0px; padding:0px;'> 
         <p><strong>Nationale oder internationale Fans:</strong></p>
         <p><input type="radio" name="fans" value="deutsche_fans" onclick="get_content('slider-range-min','deutsche_fans')" /> Deutsche Fans</p>
         
         <p><input type="radio" name="fans" value="internationale_fans"  onclick="get_content('slider-range-min_int','internationale_fans')" /> Internationale Fans</p>
      <br /> 
         <div id="formm"> 
              <div id="slider-range-min" style="display: none;" ></div> <br /> <br />
              <div id="slider-range-min_int" style="display: none;"></div>
        </div>
    </form>
    Als ich dem ganzen Formular das div gegeben hatte, wurden auch die Radiobuttons nach dem ersten Klick ausgeblendet.
    Am Anfang waren die beiden div's durch style="display: none; doch auch schon vorher ausgeblendet. Mein Problem ist, daß nach dem 1. Klick, bei dem alles richtig angezeigt wird, beim darauffolgenden, also, sobald man sich doch für die andere Variante entscheidet, beide Varianten angezeigt werden.
    Was mache ich falsch?

  6. #6
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.702

    AW: bereits gelandenen Div-Inhalt beim nächsten onklick wieder ausblenden

    Du hast falsch abgeschrieben...

Ähnliche Themen

  1. Inhalt(e) von einem Div ein- und ausblenden lassen
    Von d.sentker im Forum JavaScript
    Antworten: 5
    Letzter Beitrag: 03-06-2009, 17:33
  2. Antworten: 0
    Letzter Beitrag: 10-04-2009, 20:15
  3. Nach onklick verschwindet Ausgabe wieder
    Von Sonnenschein76 im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 16-09-2007, 00:43
  4. Inhalt ausblenden
    Von Danielo im Forum JavaScript
    Antworten: 4
    Letzter Beitrag: 18-05-2007, 10:45
  5. OnKlick Sound beim Verlassen mit Effekt
    Von moneymeyer im Forum JavaScript
    Antworten: 5
    Letzter Beitrag: 14-03-2004, 15:34

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •