[HTML/Ajax] jQuery UI Button

martin

martin

Well-Known Member
Hallo

ich benutze die jQuery UI meine Buttons zu gestalten. Das funktioniert auch wunderbar, solange ich die Buttons nicht mit Ajax "nachlade". Hier mal etwas Code:

test.html
PHP: 
<html>
<head>
<script type="text/javascript" src="prototype.js"></script>
<link type="text/css" href="/conf/css/jquery_custom.css" rel="stylesheet" />
<script src='/conf/prototype.js' type='text/javascript'></script>
<script type="text/javascript" src="/conf/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/conf/js/jquery-ui-custom.js"></script>


<script type="text/javascript">



    function catchit(){

	var myAjax = new Ajax.Request(
	"./test1.php",
	{ method: "post", onComplete: show }
	);
    }

    function show( originalRequest ){
        document.getElementById("inhalt").innerHTML = originalRequest.responseText;
    }


    $(function(){
        $(".button").button({
            icons: {
                primary: "ui-icon-plus"
            }
        });
    });

</script>

</head>
<body>

<div class="button" onclick=catchit();>Test</div>
<div id="inhalt" style="border: 1px solid red;"></div>

</body>
</html>

test1.php
PHP: 
<?php

echo '<div class="button" onclick=catchit();>Button2</div>';

?>

Der erste Button "Test" wird dargestellt wie es sein soll, der zweite "Button2", welcher über Ajax geladen werden soll, leider nicht. Wahrscheinlich weil er zur Laufzeit von test.html nocht nicht existiert, aber wie schaffe ich es, dass das Format dennoch übernommen wird?

Danke
 
Hi

Ja, die Jquery Funktionen verändern das DOM bei Aufruf der .button() Funkion.

Im Prinzip musst du einfach nur "$(".button").button({" nach dem Einfügen des HTMLs in den DOM erneut aufrufen.
 
Hi

Wo du das ansprichst… du kannst dir das Leben da eh etwas leichter machen. Du nutzt quasi einen Mix aus Jquery/Scriptaculous und "purem" Javascript.

Ich würde das ganze wie folgt angehen:

Code: 
  function catchit(){ 

$('#inhalt').load('./test1.php', {}, function() { initButtons(); }); 

// das {} bewirkt, dass ein POST request statt ein GET Request gemacht wird - wie in deinem Code

}

    $(function(){ initButtons(); }); 

function initButtons() {
        $(".button").button({ 
            icons: { 
                primary: "ui-icon-plus" 
            } 
        }); 
}
 
Zuletzt bearbeitet:
Danke für den Hinweis. Scruptaculous habe ich schon vorher verbannt, und jetzt werde ich auch die Ajax Sachen umschreiben und mit jQuery machen...Der Wald lichtet sich :-)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben