[Proto-Scripty] Re: Prototype.js / AJAX.response() Script
Hi,
> Any suggestions? Is this possible/doable?
Unfortunately, as far as I can tell on a few minutes' effort, TinyURL
doesn't support cross-origin resource sharing (CORS)[1], and so while
you could do this with Ajax.Request[2]:
new Ajax.Request("http://tinyurl.com/api-create.php?url=http://
www.google.com/", {
method:"GET",
onSuccess: function(response) {
var newUrl = response.responseText;
alert("New URL: " + newUrl);
}
});
...it doesn't work because it fails afoul of the SOP[3].
Apparently you're not the first to want to do this client-side,
because in the course of trying to find out whether TinyURL supported
CORS I ran across a Google AppEngine site[4] that works around this
using JSONP[5]. So you could use that service (if you could find
someone to ask permission from):
function gotTinyURL(data)
{
if (data.ok) {
alert("New URL: " + data.tinyurl);
}
else {
alert("Request failed");
}
}
function getTinyURL(url)
{
var head, script;
head = $$('head')[0];
if (head) {
script = new Element('script', {
type: 'text/javascript',
src: 'http://json-tinyurl.appspot.com/?url=' + url +
"&callback=gotTinyURL"
});
head.appendChild(script);
head.removeChild(script);
}
}
Note that when you call a JSONP service in this way, you are *trusting
that service not to do anything bad* because you're giving them full
access to the page (that's how JSONP works).
HTH,
--
T.J. Crowder
Independent Software Consultant
tj / crowder software / com
www.crowdersoftware.com
[1] http://www.w3.org/TR/access-control/
[2] http://api.prototypejs.org/ajax/ajax/request/
[3] http://en.wikipedia.org/wiki/Same_origin_policy
[4] http://json-tinyurl.appspot.com/
[5] http://en.wikipedia.org/wiki/JSON#JSONP
On Apr 6, 8:25 pm, mTorbin wrote:
> Hey all,
>
> I'm relatively new to prototype.js and I'm attempting to figure out
> the ajax.response() function. I'd like to build a little function
> that achieves the same as PHP's file_get_contents() but using
> Javascript. Specifically I'd like to be able to take advantage of
> TinyURL's open API:
>
> http://tinyurl.com/api-create.php?url=http://www.google.com/
>
> Any suggestions? Is this possible/doable?
>
> Thanks in advance!
>
> - MT
--
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
[Proto-Scripty] Remove script from view
I'm new to Prototype and script.aculo.us and I have this code in my
view that makes a link move left onmouseover and back right
onmouseout. I have had the same problem as others where it executes
the onmouseout event even if onmouseover hasn't finished so I wanted
to put this in my application.js file and I needed to know how to
write it there and call it in the view. This is written in HAML for a
Rails2.3.5 app.
= link_to "BLOG", {:action => "index"}, :id => "sideLink1", :class =>
"sideLink", :onmouseover => "new Effect.Move(this, {x: -10, y: 0,
duration: 0.2}); return false;", :onmouseout => "new Effect.Move(this,
{x: 10, y: 0, duration: 0.2}); return false;"
Any help/suggestions would be much appreciated. Thanks!
--
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
[Proto-Scripty] Prototype.js / AJAX.response() Script
Hey all, I'm relatively new to prototype.js and I'm attempting to figure out the ajax.response() function. I'd like to build a little function that achieves the same as PHP's file_get_contents() but using Javascript. Specifically I'd like to be able to take advantage of TinyURL's open API: http://tinyurl.com/api-create.php?url=http://www.google.com/ Any suggestions? Is this possible/doable? Thanks in advance! - MT -- You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group. To post to this group, send email to prototype-scriptacul...@googlegroups.com. To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.
[Proto-Scripty] Re: [NEW] Optimize table content filtering.
On 6 avr, 17:46, Alex Wallace wrote:
> In general I would simplify things a bit:
>
> * the two selectors ($$) are pretty lengthy- could they be optimized,
I thought the more precise I'll be, the fastest it would be for
Prototype to find.
> Also, try doing those selectors beforehand and caching the values somewhere.
I tried with moving var lines = ... before func declaration, but I get
strange behaviors : lines (tr) no longer hide !
> * Avoid using .each(function(j) { j.singleFunction(); }. Instead try using
> Enumerable.invoke. [1]
Done. No notable speed improvements, but Prototype API confirms what
you say.
> * When going through the lines to hide those with hidden cells, there are a
> lot of expensive functions being used: childElements() should be detected
> before and cached along with the lines variable.
Yeah but with the "lines do not hide anymore" behavior, that's kinda
impossible for now.
> detect() is an expensive
> function in IE, especially if there are a lot of lines and cells. It seems
> there would probably be a way to tighten that behavior up so you only need
> to do one iteration of hiding and showing- maybe operate on the rows first
> instead of cells first followed by the row filtering.
I just want to hide lines (tr) that do not have any "hide"-class
cells.
Thanks for you firsts directions though.
Code is now :
function(nam, val) {
val = val.toLowerCase();
var lines = $$("#annuaire_table > div > table > tbody > tr");
var ourcells = $$("#annuaire_table > div > table > tbody > tr
> ."+nam);
ourcells.invoke("removeClassName",
"highlight").invoke("removeClassName", "hide");
if( val.length > 0 )
{
var rtab = ourcells.partition( function(i) {
return ((i.textContent || i.innerText ||
"").toLowerCase().indexOf(val) >= 0);
} );
rtab[0].invoke("addClassName", "highlight");
rtab[1].invoke("addClassName", "hide");
}
lines.each( function(i) {
var childcells = i.childElements();
if( childcells.detect( function(j) { return
j.hasClassName("hide"); } ) )
{
i.hide();
}
else
{
i.show();
}
} );
};
--
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
Re: [Proto-Scripty] Re: Queues & Effects
Hi again,
I understand what you want, but the problem this time is that you
are dealing with several elements.
When calling invoke, it is just as if you were looping on each item of your
Enumerable and calling the invoked method for each of them, with all
parameters - that is to say with afterFinish callback for each of them. In
other words, afterFinish callback will be called for each item being fade.
your function will be called after each fade which is not what you want.
The only solution I can think about is to loop on your items, build an array
of effects with the sync option, then run the array of effects using an
Effect.Parallel which will be the only one with an afterFinish:
var effects = [];
$$(".solution").each( function(item) {
effects.push( new Effect.Fade(item, {sync: true}));
});
new Effect.Parallel(effects, afterFinish: function() {
search( area, choice, Enumerable.invoke.curry("appear").bind(
$$('solution') ) )
});
On Tue, Apr 6, 2010 at 5:27 PM, C_B wrote:
> Hi,
>
> yes you are. I already had the problem described.
>
> In fact, the following works fine:
>
>Fade
>Appear
>
> All elements of the class solution fade and appear at the same time,
> not one after another.
> Now I want to do the following using a function:
>
> 1. fade all elements of the class solution synchronously (like in the
> "a href" above)
> 2. run owned function search(area, choice) which sets some cookies and
> does some AJAX changing content of all elements of the class
> "solution"
> 3. appear all elements of the class solution synchronously (like in
> the "a href" above)
>
> I have alredy tried doing this by using queues but it does not work -
> as described in my first post, all tasks were done synchronously .
> Now, your version works fine with IDs. So i hope, it also fits to
> elements of classes.
>
> Hope you get me?
>
>
> Cheers!
>
> --
> You received this message because you are subscribed to the Google Groups
> "Prototype & script.aculo.us" group.
> To post to this group, send email to
> prototype-scriptacul...@googlegroups.com.
> To unsubscribe from this group, send email to
> prototype-scriptaculous+unsubscr...@googlegroups.com
> .
> For more options, visit this group at
> http://groups.google.com/group/prototype-scriptaculous?hl=en.
>
>
--
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
Re: [Proto-Scripty] [NEW] Optimize table content filtering.
In general I would simplify things a bit:
* the two selectors ($$) are pretty lengthy- could they be optimized,
perhaps the lines could be found by adding a class name to the tables and
then using getElementsByTagName("tr")? Also, try doing those selectors
beforehand and caching the values somewhere.
* Avoid using .each(function(j) { j.singleFunction(); }. Instead try using
Enumerable.invoke. [1]
* When going through the lines to hide those with hidden cells, there are a
lot of expensive functions being used: childElements() should be detected
before and cached along with the lines variable. detect() is an expensive
function in IE, especially if there are a lot of lines and cells. It seems
there would probably be a way to tighten that behavior up so you only need
to do one iteration of hiding and showing- maybe operate on the rows first
instead of cells first followed by the row filtering.
Best,
Alex
On Tue, Apr 6, 2010 at 10:44 AM, Shinkan wrote:
> Hi everyone,
>
> I'm brand new to Prototype JS.
> I just made use of it to create a basic function which can filter
> table lines (show/hide) according to a column text search.
>
> My first impression is that IE is dozens times slower than FF for this
> thing.
> As I'm new to Prototype, and that my code doesn't seem beautiful at
> all (pretty basic thinking), I wonder if there would be a way to
> "prototipize" it more, so that is would be more efficient and less
> ugly.
> Thanks for any advice that will make me learn Prototype and make my
> code faster.
>
> Here is the excerpt :
>
> field_filter = function(nam, val) {
>var lines = $$("#annuaire_table > div > table > tbody > tr");
>// Gather cells that have our target column name as class :
> they are cells of our current filtering column.
>// IS THERE ANY WAY TO GET THAT FROM "lines" DIRECTLY ?
> instead of traversing DOM once again ?
>var ourcells = $$("#annuaire_table > div > table > tbody > tr
> > ."+nam)
>// Removing previous search results : search results are made
> of class changes.
>ourcells.each( function(i) {
> i.removeClassName("highlight");
> i.removeClassName("hide");
>} );
>// If our filter value is not empty...
>if( val.length > 0 )
>{
> // We partition our column's cells in 2 parts.
> var rtab = ourcells.partition( function(i) {
>i.cleanWhitespace();
>// Those which have a text content matching our search.
>if( i.empty() != true )
>{
> return ((i.textContent || i.innerText ||
> "").toLowerCase().indexOf(val.toLowerCase()) >= 0);
>}
>// Those which don't.
>return false;
> } );
> var containstext = rtab[0];
> var notcontainstext = rtab[1];
> // We add "highlight" class to cells we care about (matching
> search cells).
> containstext.each( function(j)
> { j.addClassName("highlight"); } );
> // We add "hide" class to others.
> notcontainstext.each( function(j)
> { j.addClassName("hide"); } );
>}
>// We hide every table line which has a cell with "hide"
> class.
>lines.each( function(i) {
> var childcells = i.childElements();
> if( childcells.detect( function(j) { return
> j.hasClassName("hide"); } ) )
> {
>i.hide();
> }
> else
> {
>i.show();
> }
>} );
> // THEN, IS THERE ANY WAY TO FIND TABLES WHERE ALL LINES ARE
> HIDDEN ?
> };
>
> Many thanks in advance.
>
> --
> You received this message because you are subscribed to the Google Groups
> "Prototype & script.aculo.us" group.
> To post to this group, send email to
> prototype-scriptacul...@googlegroups.com.
> To unsubscribe from this group, send email to
> prototype-scriptaculous+unsubscr...@googlegroups.com
> .
> For more options, visit this group at
> http://groups.google.com/group/prototype-scriptaculous?hl=en.
>
>
--
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
[Proto-Scripty] Re: body.onload via observe?
Hi, > Use cases for dom:loaded VERSUS window.load are out of question, > right? Oh, absolutely. There's a big difference between those two. :-) > Btw. Is it possible to remove img-Tags on dom:loaded, so that the > images aren't loaded? I'd recommend posting that question as a new, separate thread. -- T.J. On Apr 6, 3:34 pm, matths wrote: > You asked: "What's the use case? Between dom:loaded and window.load, > is there > really any need for body.load?" > > No, there's none. And it seems, that there ist an onLoad attribute for > the body HTML-tag as there is an onLoad attribute for each HTML > element in valid XHTML, but there is no onload event handler for body > in javascript. But there is an onload event handler for window, which > is fine. > > Use cases for dom:loaded VERSUS window.load are out of question, > right? > > Btw. Is it possible to remove img-Tags on dom:loaded, so that the > images aren't loaded? > I can't get this working for images in the markup, seems to work for > images loaded by the css, though. > Any ideas? > > Regards, > Matthias > > On Apr 1, 6:20 pm, "T.J. Crowder" wrote: > > > > > I'm still waiting for the use case, though. -- You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group. To post to this group, send email to prototype-scriptacul...@googlegroups.com. To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.
[Proto-Scripty] [NEW] Optimize table content filtering.
Hi everyone,
I'm brand new to Prototype JS.
I just made use of it to create a basic function which can filter
table lines (show/hide) according to a column text search.
My first impression is that IE is dozens times slower than FF for this
thing.
As I'm new to Prototype, and that my code doesn't seem beautiful at
all (pretty basic thinking), I wonder if there would be a way to
"prototipize" it more, so that is would be more efficient and less
ugly.
Thanks for any advice that will make me learn Prototype and make my
code faster.
Here is the excerpt :
field_filter = function(nam, val) {
var lines = $$("#annuaire_table > div > table > tbody > tr");
// Gather cells that have our target column name as class :
they are cells of our current filtering column.
// IS THERE ANY WAY TO GET THAT FROM "lines" DIRECTLY ?
instead of traversing DOM once again ?
var ourcells = $$("#annuaire_table > div > table > tbody > tr
> ."+nam)
// Removing previous search results : search results are made
of class changes.
ourcells.each( function(i) {
i.removeClassName("highlight");
i.removeClassName("hide");
} );
// If our filter value is not empty...
if( val.length > 0 )
{
// We partition our column's cells in 2 parts.
var rtab = ourcells.partition( function(i) {
i.cleanWhitespace();
// Those which have a text content matching our search.
if( i.empty() != true )
{
return ((i.textContent || i.innerText ||
"").toLowerCase().indexOf(val.toLowerCase()) >= 0);
}
// Those which don't.
return false;
} );
var containstext = rtab[0];
var notcontainstext = rtab[1];
// We add "highlight" class to cells we care about (matching
search cells).
containstext.each( function(j)
{ j.addClassName("highlight"); } );
// We add "hide" class to others.
notcontainstext.each( function(j)
{ j.addClassName("hide"); } );
}
// We hide every table line which has a cell with "hide"
class.
lines.each( function(i) {
var childcells = i.childElements();
if( childcells.detect( function(j) { return
j.hasClassName("hide"); } ) )
{
i.hide();
}
else
{
i.show();
}
} );
// THEN, IS THERE ANY WAY TO FIND TABLES WHERE ALL LINES ARE
HIDDEN ?
};
Many thanks in advance.
--
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
[Proto-Scripty] Re: Queues & Effects
Hi, yes you are. I already had the problem described. In fact, the following works fine: Fade Appear All elements of the class solution fade and appear at the same time, not one after another. Now I want to do the following using a function: 1. fade all elements of the class solution synchronously (like in the "a href" above) 2. run owned function search(area, choice) which sets some cookies and does some AJAX changing content of all elements of the class "solution" 3. appear all elements of the class solution synchronously (like in the "a href" above) I have alredy tried doing this by using queues but it does not work - as described in my first post, all tasks were done synchronously . Now, your version works fine with IDs. So i hope, it also fits to elements of classes. Hope you get me? Cheers! -- You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group. To post to this group, send email to prototype-scriptacul...@googlegroups.com. To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.
[Proto-Scripty] I'm getting an error in line 599 of dragdrop.js
Hi,
i created some sortable lists. Now I'm getting the error "element is
null" in line 599 of the original dragdrop.js when a item from one
list ist dropped into another. When I release the mouse button nothing
happens. When I click it again the item droppes where it should drop.
The code around line 599 would be:
var Sortable = {
SERIALIZE_RULE: /^[^_\-](?:[A-Za-z0-9\-\_]*)[_](.*)$/,
sortables: { },
_findRootElement: function(element) {
while (element.tagName.toUpperCase() != "BODY") {
if(element.id && Sortable.sortables[element.id]) return element;
element = element.parentNode;
}
},
options: function(element) {
element = Sortable._findRootElement($(element));
if(!element) return;
return Sortable.sortables[element.id];
},
...
Where as line 599 would be while (element.tagName.toUpperCase() !=
"BODY") {
Does anybody have an idea why this could be?
Could it be, because the html tags for the sortalble divs are
generated dynamically by javascript?
--
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
[Proto-Scripty] Re: body.onload via observe?
You asked: "What's the use case? Between dom:loaded and window.load, is there really any need for body.load?" No, there's none. And it seems, that there ist an onLoad attribute for the body HTML-tag as there is an onLoad attribute for each HTML element in valid XHTML, but there is no onload event handler for body in javascript. But there is an onload event handler for window, which is fine. Use cases for dom:loaded VERSUS window.load are out of question, right? Btw. Is it possible to remove img-Tags on dom:loaded, so that the images aren't loaded? I can't get this working for images in the markup, seems to work for images loaded by the css, though. Any ideas? Regards, Matthias On Apr 1, 6:20 pm, "T.J. Crowder" wrote: > I'm still waiting for the use case, though. -- You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group. To post to this group, send email to prototype-scriptacul...@googlegroups.com. To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.
Re: [Proto-Scripty] Re: Queues & Effects
Hi,
I guess that you want to fade all items with class solution (you are missing
the dot class prefix) and on the afterFinish, you want to run a function
that has as third parameter a callback function ? Because the way you had
wrote it meant that your owned function *search* returned a function to be
used after effect finished...
It would have been something like
$$('.solution').invoke('fade',({afterFinish: function() {
search(area,
choice, Enumerable.invoke.curry("appear").bind($$('solution')) }));
But i'm afraid it won't be good : by calling invoke, you will call the fade
method on each item of your $$('.solution'), and after each fade, the search
function will be run so the appear function will be runned on all
$$(".solution") items after each search of each fade...
Am i understandable :-/ ?
On Tue, Apr 6, 2010 at 3:20 PM, C_B wrote:
> Thanks a lot! I used Guillaume's version and it works fine!
> If you are able to solve my following problem regarding the same
> matter, you are my hero.
>
>
> I want to realize the same functionality, however with all elements of
> the class "solution". I read about "invoke" but I am not really sure
> regarding your solution.
> Here is my try which is not working:
>
> $$('solution').invoke('fade',({afterFinish: search(area, choice,
> Element.appear.curry($$('solution').invoke))}));
>
>
> (area and choice are parameters of a own function called search)
>
>
> Thanks in advance!
>
> --
> You received this message because you are subscribed to the Google Groups
> "Prototype & script.aculo.us" group.
> To post to this group, send email to
> prototype-scriptacul...@googlegroups.com.
> To unsubscribe from this group, send email to
> prototype-scriptaculous+unsubscr...@googlegroups.com
> .
> For more options, visit this group at
> http://groups.google.com/group/prototype-scriptaculous?hl=en.
>
>
--
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
[Proto-Scripty] Re: Queues & Effects
Thanks a lot! I used Guillaume's version and it works fine!
If you are able to solve my following problem regarding the same
matter, you are my hero.
I want to realize the same functionality, however with all elements of
the class "solution". I read about "invoke" but I am not really sure
regarding your solution.
Here is my try which is not working:
$$('solution').invoke('fade',({afterFinish: search(area, choice,
Element.appear.curry($$('solution').invoke))}));
(area and choice are parameters of a own function called search)
Thanks in advance!
--
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
