Ajax in Plugins?

scriptor	#1 4. Juni 2010, 03:55
Members	Is there a better description with examples how ajax works in plugins? The Documentation is good to fix me in interest of ajax parts... but i did not understand... Can anyone help? [url=http://www.freak-forum.de]Freak-Forum.de[/url] - The Freakstyle Community<br /> [url=http://www.adelmann-solutions.com]adelmann-solutions, webdesign Freiburg[/url]

GHengeveld	#2 4. Juni 2010, 08:48
Team Thanked: 52 mal	It's really quite simple. You develop the ajax parts as you would when not using Cotonti, with one difference. If you want to use get or post requests through javascript, the URL should look like plug.php?r=plugincode. This will correspond to a file in the root of your plugin folder, which has the hook 'ajax'. I normally name it plugincode.ajax.php. Basically what the ajax hook does is skip the parsing of the header and footer, so it only outputs the data returned by the plugin itself. Very useful if you want to return JSON or XML.

GHengeveld

#2 4. Juni 2010, 08:48

Team
Thanked: 52 mal

It's really quite simple. You develop the ajax parts as you would when not using Cotonti, with one difference. If you want to use get or post requests through javascript, the URL should look like plug.php?r=plugincode. This will correspond to a file in the root of your plugin folder, which has the hook 'ajax'. I normally name it plugincode.ajax.php.

Basically what the ajax hook does is skip the parsing of the header and footer, so it only outputs the data returned by the plugin itself. Very useful if you want to return JSON or XML.

urlkiller	#3 4. Juni 2010, 11:00
Contributors Thanked: 3 mal	i also had some probls getting my head around this. but we could take that to the german forums as iam able to speak it there i could give you some pointers. edit: also EZ seems pretty good with that AJAX parts... URL shortener: <a href="http://bbm.li/!7AD5C7">http://bbm.li/!7AD5C7</a>

ez	#4 4. Juni 2010, 13:39
Contributors Thanked: 10 mal	I can help.... I am using it more and more, it is great , I do not like complete page refreshes, and with ajax you only change parts off your screen. I use a lot of JSON for the reponses, that rocks... @urlkiller: thnx i'll take that as a compliment I can see what I can do, could you tell me what info you want ? ==- I say: Keep it EZ -==

scriptor	#5 4. Juni 2010, 22:26
Members	Hey sorry for this request i have a look on it the last hour and now i now how to use it! And i must say. ITS SO GREAT. ITS SO BEAUTIFUL. Damned Guys your CMS is soooooo gooood [url=http://www.freak-forum.de]Freak-Forum.de[/url] - The Freakstyle Community<br /> [url=http://www.adelmann-solutions.com]adelmann-solutions, webdesign Freiburg[/url]

ez	#6 4. Juni 2010, 22:35
Contributors Thanked: 10 mal	no prob... Njoy p.s. Go JSON for responses (that handles so great in javascript !!) ==- I say: Keep it EZ -==

urlkiller	#7 4. Juni 2010, 22:59
Contributors Thanked: 3 mal	@ez it was meant that way. thanks for your help again URL shortener: <a href="http://bbm.li/!7AD5C7">http://bbm.li/!7AD5C7</a>

scriptor	#8 5. Juni 2010, 04:29
Members	hey guys one more question... ive load a lot of pics with ajax in a div inside the user.details part. I want to see this with the slimbox... but now i see that the part that would reload isnt in the Quellcode and so the slimbox cant work for this pics... anyone an idea? [url=http://www.freak-forum.de]Freak-Forum.de[/url] - The Freakstyle Community<br /> [url=http://www.adelmann-solutions.com]adelmann-solutions, webdesign Freiburg[/url]

scriptor

#8 5. Juni 2010, 04:29

Members

hey guys one more question... ive load a lot of pics with ajax in a div inside the user.details part. I want to see this with the slimbox... but now i see that the part that would reload isnt in the Quellcode and so the slimbox cant work for this pics... anyone an idea?

[url=http://www.freak-forum.de]Freak-Forum.de[/url] - The Freakstyle Community<br />
[url=http://www.adelmann-solutions.com]adelmann-solutions, webdesign Freiburg[/url]

ez	#9 5. Juni 2010, 15:25
Contributors Thanked: 10 mal	Hi scriptor, // AUTOLOAD CODE BLOCK (MAY BE CHANGED OR REMOVED) if (!/android\|iphone\|ipod\|series60\|symbian\|windows ce\|blackberry/i.test(navigator.userAgent)) { jQuery(function($) { $("a[rel^='lightbox']").slimbox({/* Put custom options here /}, null, function(el) { return (this == el) \|\| ((this.rel.length > 8) && (this.rel == el.rel)); }); }); } this code (inside slimbox.js) runs when your page is loaded... but since you load images later (ajax), these images does not go with the initial load... (so slimbox will not fire !, on the ajax images) run this code again.. (Warning: initial images get hit twice maybe... ??, i do not know what would happen... you should test it on a normal image and on a ajax image) Maybe do it like this SAFER WAY* your ajax image: In the ajax images do <a href="images/image-1.jpg" rel="ajxlightbox" title="my caption">image #1</a> The code that you should run AFTER the ajax image is loaded. // AUTOLOAD CODE BLOCK (MAY BE CHANGED OR REMOVED) if (!/android\|iphone\|ipod\|series60\|symbian\|windows ce\|blackberry/i.test(navigator.userAgent)) { jQuery(function($) { $("a[rel^='ajxlightbox']").slimbox({/* Put custom options here */}, null, function(el) { return (this == el) \|\| ((this.rel.length > 8) && (this.rel == el.rel)); }); }); } You can also use id's or something.. just change the JQuery selector // $("a[rel^='lightbox']") $("#idofmyajaximage") In the ajax images do this <a href="images/image-1.jpg" id="#idofmyajaximage" rel="lightbox" title="my caption">image #1</a> ANYWAY you are on your way now with Help .. greetz, EZ ==- I say: Keep it EZ -==

#9 5. Juni 2010, 15:25

Contributors
Thanked: 10 mal

Hi scriptor,

// AUTOLOAD CODE BLOCK (MAY BE CHANGED OR REMOVED)
if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
	jQuery(function($) {
		$("a[rel^='lightbox']").slimbox({/* Put custom options here */}, null, function(el) {
			return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
		});
	});
}

this code (inside slimbox.js) runs when your page is loaded... but since you load images later (ajax), these images does not go with the initial load... (so slimbox will not fire !, on the ajax images)

run this code again.. (Warning: initial images get hit twice maybe... ??, i do not know what would happen... you should test it on a normal image and on a ajax image)

Maybe do it like this SAFER WAY

your ajax image:
In the ajax images do
<a href="images/image-1.jpg" rel="ajxlightbox" title="my caption">image #1</a>

The code that you should run AFTER the ajax image is loaded.

// AUTOLOAD CODE BLOCK (MAY BE CHANGED OR REMOVED)
if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
	jQuery(function($) {
		$("a[rel^='ajxlightbox']").slimbox({/* Put custom options here */}, null, function(el) {
			return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
		});
	});
}

You can also use id's or something.. just change the JQuery selector

// $("a[rel^='lightbox']")
$("#idofmyajaximage")

In the ajax images do this
<a href="images/image-1.jpg" id="#idofmyajaximage" rel="lightbox" title="my caption">image #1</a>

ANYWAY you are on your way now with Help ..

greetz, EZ

==- I say: Keep it EZ -==

urlkiller	#10 6. Juni 2010, 22:41
Contributors Thanked: 3 mal	@scriptor the "quellcode" = sourcecode wont show you the output generated by javascript. you need to add the rel tag to your images in you ajax part that make the code.. and it should work... or use the above code to insert the rel afterwards the code gets generated... URL shortener: <a href="http://bbm.li/!7AD5C7">http://bbm.li/!7AD5C7</a>

scriptor	#11 7. Juni 2010, 16:21
Members	merci for this. this community is so great, i learn every plugin i write something Great [url=http://www.freak-forum.de]Freak-Forum.de[/url] - The Freakstyle Community<br /> [url=http://www.adelmann-solutions.com]adelmann-solutions, webdesign Freiburg[/url]

urlkiller	#12 8. Juni 2010, 05:22
Contributors Thanked: 3 mal	thats one reason i stayed here... btw when working with ajax you should plan from the beginning where and when you use it. just only having ajax is not the right way. it should safe page load time and traffic in general. for example it would be unnecessary to use ajax to load a whole area if only one image changes. (like in the administration panel... ;( ) so plan you plugin with a mindmap or something that you have a clean overview over all functions. the json part mentionend earlier is the BEST way because you only submit a small part with important information (like an array in php) instead of the whole html code... xml is the second best use with ajax. its much more newbie friendly because you can read out the xml file directly with php and thats pretty good to understand... so maybe you should start with that... another way could be to "header" something over the ajax part. a pdf file or an image for example. the ajax part in cot is really a big advantage over the neocrome release... thanks for that devs! URL shortener: <a href="http://bbm.li/!7AD5C7">http://bbm.li/!7AD5C7</a>
Dieser Beitrag wurde von urlkiller (am 8. Juni 2010, 05:33, vor 13 Jahre) bearbeitet

urlkiller

#12 8. Juni 2010, 05:22

Contributors
Thanked: 3 mal

thats one reason i stayed here...

btw when working with ajax you should plan from the beginning where and when you use it.
just only having ajax is not the right way. it should safe page load time and traffic in general.

for example it would be unnecessary to use ajax to load a whole area if only one image changes.
(like in the administration panel... ;( )
so plan you plugin with a mindmap or something that you have a clean overview over all functions.

the json part mentionend earlier is the BEST way because you only submit a small part with important information (like an array in php) instead of the whole html code... xml is the second best use with ajax. its much more newbie friendly because you can read out the xml file directly with php and thats pretty good to understand... so maybe you should start with that...

another way could be to "header" something over the ajax part. a pdf file or an image for example.

the ajax part in cot is really a big advantage over the neocrome release...
thanks for that devs!

URL shortener: <a href="http://bbm.li/!7AD5C7">http://bbm.li/!7AD5C7</a>

Dieser Beitrag wurde von urlkiller (am 8. Juni 2010, 05:33, vor 13 Jahre) bearbeitet