Probleme bei AJAX Messenger mit Jquery

**Viril** · 10.01.2010 11:54

Hallo zuammen,

ich bin gerade dabei einen AJAX-Messenger für meine Seite zu erstellen.

Ich verwende:
- Joomla 1.5
- Jquery im noconflict mode (da Joomla Mootols verwendet)

Folgendes habe ich vor:
In meinem Template habe ich einen DIV-Container definiert der via Jquery alle 10 Sekunden aktualisiert wird.

Aufruf des DIV-Containers im Template:

HTML-Code:

$j(document).ready(function() {
   $j("#actions").load("index.php?option=com_sidebar&task=actions&format=raw");
   var refreshId = setInterval(function() {
      $j("#actions").load('index.php?option=com_sidebar&task=actions&format=raw');
   }, 10000);
});

HTML-Code:

<div id="actions"></div>

Der Inhalt dieses Containers zeigt an, ob der eingeloggte User eine neue Message erhalten hat. Ist das der Fall, so wid ihm ein Link dargestellt (Du hast eine neue Nachricht von XY erhalten)
Der Link öffnet einen Jquery Dialogbox.

Inhalt das DIV-Containers:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-de" lang="de-de" >
<head>
  <script type="text/javascript">
      var $j = jQuery.noConflict();
  </script>
  <script type="text/javascript">
$j(document).ready(function(){
    //define config object
var dialogOpts230 = {
        title: "Neue Message",
        modal: true,
        autoOpen: false,
        height: 250,
        width: 400,
        buttons: {"Senden": function() {document.newmessage230.submit();},
                  "Abbrechen": function() {$j(this).dialog("close");}
                 },
        open: function() {
        //display correct dialog content
        $j("#example230").load("index.php?option=com_message&task=show&messageid=230&format=raw");}
        };
$j("#example230").dialog(dialogOpts230);    //end dialog
   
    $j('#showdialog230').click(
        function (){
            $j("#example230").dialog("open");
            return false;
        }
    );

});
</script>
</head>
<body>
<div class="action-message">
 <a href="#" title="neue Message" id="showdialog230"><img src="components/com_community/images/comment_edit.png" alt="" title="" />neue Message von User XY</a>
</div>
<div id="example230" style="display: none;"><center><img src="templates/y24/img/ajax-loader.gif" alt="Loading..." title="Loading..."/></center></div>
</body>
</html>

Der Inhalt der Dialogbox wird mittels Jquery-Ajax ermittelt (Anhand Message & User-Id werden Berechtigungen geprüft und die Nachricht dargestellt.)
Der Messenger soll ausehen wie eine Art "ICQ-Messenger", sprich der Verlauf der letzten Nachrichten wid dargestellt und eine Textarea darunter gibt dem User die Möglichkeit direkt darauf zu antworten.

Inhalt der Dialog-Box:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-de" lang="de-de" >
<head>
  <script type="text/javascript">
      var $j = jQuery.noConflict();
  </script>
 
  <script type="text/javascript">
$j(document).ready(function(){
    //define config object
var dialogOpts230 = {
        title: "Neue Message",
        modal: true,
        autoOpen: false,
        height: 250,
        width: 400,
        buttons: {"Senden": function() {document.newmessage230.submit();},
                  "Abbrechen": function() {$j(this).dialog("close");}
                 },
        open: function() {
        //display correct dialog content
        $j("#example230").load("index.php?option=com_message&task=show&messageid=230&format=raw");}
        };
$j("#example230").dialog(dialogOpts230);    //end dialog
   
    $j('#showdialog230').click(
        function (){
            $j("#example230").dialog("open");
            return false;
        }
    );

});
</script>
</head>
<body>
<div class="action-message">
 <a href="#" title="neue Message" id="showdialog230"><img src="components/com_community/images/comment_edit.png" alt="" title="" />neue Message von User XY</a>
</div>
<div id="example230" style="display: none;"><center><img src="templates/y24/img/ajax-loader.gif" alt="Loading..." title="Loading..."/></center>
</div>
</body>
</html>

Das ganze funktioniert soweit auch, allerdings habe ich ein Problem:

Warten die USer zu lange mit dem Antworten auf eine Nachricht, nämlich genau 10 Sekunden, so gibt es einen refresh auf das Ursprünglich DIVElement.

Ist das geschehen, so kann die Nachricht nicht mehr versendet werden (Der Submit-Button bleibt ohne wirkung)

Firebug bringt folgende Meldung:
"document.newmessage230.submit is not a function"

Ich verstehe nicht ganz warum... hat mir jemand einen Tip was ich anderes machen kann, damit mein Messenger funktioniert ?

Vielen Dank schonmal im Vorraus.

**Viril** · 10.01.2010 15:52

okay, ich habs mittlerweile anders gelöst.

ich mache das submit nun nicht mit jquery, sondern mit einem einfachen Form innerhalb der Dialogbox - geht genauso.

Thema: Probleme bei AJAX Messenger mit Jquery

LinkBack

Themen-Optionen

Thema durchsuchen

Anzeige

Probleme bei AJAX Messenger mit Jquery

Lesezeichen

Lesezeichen

Berechtigungen