Create a Twitter AJAX Button with MooTools, jQuery, or Dojo - javarea.de Forum powered by javarea.de

Archivlink: javarea.de Forum > JavaScript > Create a Twitter AJAX Button with MooTools, jQuery, or Dojo

Vollständigen Link anzeigen: javarea.de Forum > JavaScript > Create a Twitter AJAX Button with MooTools, jQuery, or Dojo

Pages: [1]

geschrieben von rich am 14.12.2010 - 22:10

Hey Jungs....
ich bin auf diese seite hier gestoßen mit einem Ajax script.

http://davidwalsh.name/twitter-button

das Script finde ich sehr interessant und wollte es auch gern verwenden
hier eine Demo: http://davidwalsh.name/dw-content/t....follow.php

wenn ich die Dateien erstelle, funktioniert bei mir aber rein garnichts!
ich versuch das jetzt schon seit einer Woche und finde aber auch keine lösungen.

kann da jemand helfen.
vielen dank
gruß

geschrieben von Danny am 16.12.2010 - 14:30

Hallo,
welches der Javascript Frameworks setzt du denn ein JQuery, MooTools oder Dojo ? Je nach dem verwendeten Codeschnipsel muss auch zumindest die Basisdateien des jeweiligen JS Framework geladen werden.

Ansonsten ist immer ganz interessant zu wissen welche Fehlermeldung kommt ;)

Gruß Danny

geschrieben von rich am 18.12.2010 - 21:47

Hallo Danny,
also es ist egal welches der Javascript Frameworks ich einsetze.

bei JQuery habe ich folgenden fehler:

	HTML-Quelltext
1: 2: 3: 4: 5: 6: 7:	Details zum Fehler auf der Webseite Meldung: Objekt erwartet Zeile: 2 Zeichen: 1 Code: 0 URI: jquery.js

HTML-Quelltext

1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19:

// Idiomatic jQuery by Doug Neiner
jQuery(function ($) {
   /* fetch elements and stop form event */
   $("form.follow-form").submit(function (e) {
      /* stop event */
      e.preventDefault();
      /* "on request" */
      $(this).find('i').addClass('active');
      /* send ajax request */
      $.post('twitter-follow.php', {
         followID: $(this).find('input').val()
      }, function () {
         /* find and hide button, create element */
         $(e.currentTarget)
           .find('button').hide()
           .after('<span class="following"><span></span>Following!</span>');
      });
   });
});

folgendes bekomme ich bei Mootools:

	HTML-Quelltext
1: 2: 3: 4: 5: 6: 7:	Details zum Fehler auf der Webseite Meldung: Das Objekt unterstützt diese Eigenschaft oder Methode nicht. Zeile: 2 Zeichen: 1 Code: 0 URI: mootools.js

HTML-Quelltext

1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25: 
26: 
27: 
28: 
29: 
30: 
31: 
32: 
33: 
34:

/* with mootools */
window.addEvent('domready',function() {
   /* fetch elements */
   $$('form.follow-form').each(function(form) {
      /* stop form event */
      form.addEvent('submit',function(e) {
         /* stop event */
         if(e) e.stop();
         /* send ajax request */
         var i = form.getElement('i');
         new Request({
            url: 'twitter-follow.php',
            method: 'post',
            data: {
               followID: form.getElement('input').value
            },
            onRequest: function() {
               i.addClass('active');
            },
            onSuccess: function() {
               var button = form.getElement('button');
               button.setStyle('display','none');
               new Element('span',{
                  html: '<SPAN></SPAN>Following!',
                  'class': 'following'
               }).inject(button,'after');
            },
            onComplete: function() {
               i.removeClass('active');
            }
         }).send();
      });
   });
});

ja und nun Dojo:

	HTML-Quelltext
1: 2: 3: 4: 5: 6: 7:	Details zum Fehler auf der Webseite Meldung: 'dojo' ist undefiniert Zeile: 2 Zeichen: 1 Code: 0 URI: http://localhost/test/twi/dojo.js

HTML-Quelltext

1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25: 
26:

/* when the DOM is ready */
dojo.ready(function() {
	/* fetch elements */
	dojo.query('form.follow-form').forEach(function(form) {
		/* stop form event */
		dojo.connect(form,'onsubmit',function(e) {
			/* stop event */
			dojo.stopEvent(e);
			/* active class */
			dojo.query('i',form).addClass('active');
			/* get button */
			var button = dojo.query('button',form)[0];
			/* ajax request */
			dojo.xhrPost({
				form: form,
				load: function() {
					dojo.style(button,'display','none');
					dojo.create('span',{
						innerHTML: '<SPAN></SPAN>Following',
						className: 'following'
					},button,'after');
				}
			});
		});
	});
});

kann auch sein, dass ich meine index.php auch falsch aufgebaut habe.

HTML-Quelltext

1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9:

<Link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<SCRIPT type=text/javascript src="dojo.js"></SCRIPT>

<FORM class=follow-form method=post action=index.php>
   <INPUT value=123456 type=hidden name=followID>
   <BUTTON class="btn follow" title=123456 type=submit value="Actions">
      <I></I><SPAN>follow</SPAN>
   </BUTTON>
</FORM>

die sieht auch nicht so aus, wie auf der Demo Seite.
lieben gruß.
rich

geschrieben von rich am 19.12.2010 - 22:53

ach und bei der index php hab ich:

	HTML-Quelltext
1:	<FORM class=follow-form method=post action=index.php>

jetzt stehen, aber auch wenn ich die datei twitter-follow.php benenne passiert nichts.
lieben gruß

geschrieben von Danny am 21.12.2010 - 02:39

Hast du die Seite irgendwo online verlinkt ?
Gruß

geschrieben von rich am 21.12.2010 - 10:10

ich habs eben mal Hoch geladen.
http://www.gigafm.de/ajax

mit allen drei beispielen.

- mootools
- jquery
- dojo

lieben gruß

geschrieben von rich am 01.01.2011 - 15:21

Hallo, ich wünsche allen ein Frohes und Gesundes neues Jahr =)
hoffentlich seit ihr alle gut reingerutscht ^^

hatte sich das jemand schon angeschaut, warum das nicht funktioniert`?
mit freundlichen grüßen
rich