Re: run function with AJAX.Updater

[Jim Longo]

I simplified the javascript file to just show an alert.  And took the quotes off of the evalScripts:true.

The AJAX page will fetch text, html, php but not javascript.  Still looking at numerous tutorials and the documentation but it's pretty sparse and contradictory in a lot of places.

<div id="newTable">NUMBERS</div>

<script type="text/javascript">

function loadScript()  {

new Ajax.Updater('newTable', 'generateNumbers.js', { method: 'get' , evalScripts: true });

}

</script>

<form action=""><input type="button" id="resetButton" value="Refresh Table"  onclick="loadScript();"/>

In the external js file i have the following

<script type="text/javascript"> 

alert("Hello");

</script> 

The result is that the button clears the div, and doesn't populate it with the contents of the javascript, it ends up being empty.

Any tips would be greatly appreciated.

Thanks,

jim

[Phil Petree]

Try using the onsuccess on failure parameters in Ajax updater.

onFailure: function() {alert("bombed");},
onSuccess: ...

On Jul 27, 2012 12:04 AM, "Jim Longo" <jimlo...@gmail.com> wrote:

If it helps, I can replace the js with something real simple (an alert) and it still won't run in the AJAX page.  If I put plain text or html or php in the external file it will run, but not javascript.

On Thursday, July 26, 2012 12:22:54 PM UTC-4, Jim Longo wrote:

Hi, I'm very new to this so excuse my ignorance.

I've simplified this, but basically I have a function in an external js file that I want to be able to re-run from my page using AJAX.Updater

So in my html page I have the following section. A div I want to replace, a function containing the Updater that I want to run from the button.

<div id="newTable">NUMBERS</div>

<script type="text/javascript">

function loadScript()  {

new Ajax.Updater('newTable', 'generateNumbers.js', { method: 'get' , evalScripts: 'true' });

}

</script>

<form action=""><input type="button" id="resetButton" value="Refresh Table"  onclick="loadScript();"/>

In the external js file i have the following

<script type="text/javascript"> 

alert("Hello");

</script> 

 

--
You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group.
To view this discussion on the web visit https://groups.google.com/d/msg/prototype-scriptaculous/-/J37qs3VY54cJ.
To post to this group, send email to prototype-s...@googlegroups.com.
To unsubscribe from this group, send email to prototype-scripta...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.

[Jim Longo]

Thanks for your response. I'm sorry, I forgot to mention I had tried that.  The request is successful (as I mentioned I can pass html and php, just not javascript)

On Friday, July 27, 2012 7:35:11 AM UTC-4, ppetree wrote:

Try using the onsuccess on failure parameters in Ajax updater.

onFailure: function() {alert("bombed");},
onSuccess: ...

[Phil Petree]

then perhaps we're not understanding what you mean by "passed"

 

normal process is:

onSuccess: call a function that processes the incoming data

onFailure: tell the user what happened

 

what gets "passed" is data.

what gets "called" are functions.

 

having code in an external file indicates to me you want to call a function.

 

I think a little more clarity might help us help you.

--
You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group.

To view this discussion on the web visit https://groups.google.com/d/msg/prototype-scriptaculous/-/3bfU0S4hsnQJ.

[Jason Westbrook]

I think I know what is going on

in the first example - everything runs as normal and nothing happens because you are just declaring a function in the external script - the function is not called - plus getLottoNumber() is not defined

the second example you are requesting a javascript file - but are sending a html snippet, <script> blocks are not in js files

my opinion is you can clean this up alot by moving the function to the same page and using more of the prototype utilities

I put a jsfiddle with my changes together for you - I changed out the getLottoNumber() with random number so that it would work - let me know if this makes sense

http://jsfiddle.net/FPBkA/

Jason Westbrook | T: 313-799-3770 | jwest...@gmail.com

[Jim Longo]

Thanks Phil, 

I do want to call a javascript function.

But let me try to simplify my problem.

Here is a page . . . 

<div id="myDiv"></div>

<script type="text/javascript">

new Ajax.Updater('myDiv', 'XYZ.html', {evalScripts: true}) ;

</script>

Here is the page being called . . . 

<script  type="text/javascript">

sayHi = function(){

alert ('Hi');

};

</script>

<input type="button" value="Click Me" onclick="sayHi()"/>

This will work, in the sense that myDiv will remain and the alert will display.

My problem is that if I replace alert with document.write then the page gets replaced with a new page.  I thought the idea behind AJAX.Updater was to replace the DIV with new data, or in this case the result of the function. So in my newbie logic the DIV should get replaced with the text generated by document.write.?  

I have tried to figure what you mean by using onSuccess, but I fail to get the right syntax, and it's very hard to find in the docs.  I assume you mean to call the function as part of the onSuccess parameters.  However the example above does seem to execute the function from called page, it's just that it works with alert but not document.write and this is doesn't make sense to me (yet).

On Friday, July 27, 2012 10:46:33 AM UTC-4, ppetree wrote:

then perhaps we're not understanding what you mean by "passed"

 

normal process is:

onSuccess: call a function that processes the incoming data

onFailure: tell the user what happened

 

what gets "passed" is data.

what gets "called" are functions.

 

having code in an external file indicates to me you want to call a function.

 

I think a little more clarity might help us help you.

[Phil Petree]

Jim,

 

Did Jason's code not work?

 

And you're right, the examples and docs totally suck... it's like trying to decipher some secret code that someone forgot to let the rest of us "normal" programmers in on.

The purpose of AJAX calls is to reduce bandwidth and server hits by reducing the number of page hits.  It's easier, cheaper, faster to just send the data the user needs vs the entire page.

 

Prototype has two functions for Ajax calls: Ajax.Updater and Ajax.Request. I stopped using Ajax.Updater for anything other than single element updates. 

 

Breaking down an Ajax.Request call for you it would look something like this:

 

  var options = {
    method: 'post',
    parameters: $('myform').serialize(),
    onSuccess: success_function,
    onFailure: ajax_err,
    on0: ajax_err
  };
  new Ajax.Request( url+".php", options );

function success_function(transport)

{

  var json = transport.responseText.evalJSON(true);

 

  // php would return:

  // $options = Array('status' => "OK", 'text' => "OK");  
  // $output = json_encode($options);
  // echo $output;

  // it's the status in the Array we're checking...

  if(json.status == "OK")
  {
    // do stuff
    $(activeButton).replace('<font color="green">Subscribed'); 
  }
}

function ajax_err(transport)
{
  alert("An AJAX error occurred: " +transport.statusText);
}

 

--
You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group.

To view this discussion on the web visit https://groups.google.com/d/msg/prototype-scriptaculous/-/-2gPjjF2osEJ.

[Phil Petree]

Jim,

I shoulda put this in my last email...

Here are two ways to set the individual fields using prototype:

$('my_div').innerHTML = szUpdate;
$('my_form_field').value='what I want the value to be';

function success_function(transport)

{

   var json = transport.responseText.evalJSON(true);

   // php would return:

   // $options = Array('status' => "OK", 'text' => "OK");
   // $output = json_encode($options);
   // echo $output;

   // it's the status in the Array we're checking...

   if(json.status == "OK")
   {
     // do stuff
     $(activeButton).replace('<font color="green">Subscribed');

     $('my_div').innerHTML = "<h1>AJAX Response</h1><p>" +json.text +"</p>";
    }
}

[Jason Westbrook]

Phil

setting the content of an element via the innerHTML property was deprecated for the $("elmentid").update(content) function. Or by using the $("elmentid").insert(content) function if appropriate.

Jason Westbrook | T: 313-799-3770 | jwest...@gmail.com

[Phil Petree]

Thanks for that Jason...  must be another part of that "inner chamber" code I'm yet to break! LOL (just teasing)

[Jim Longo]

Thanks both Jason and Phil, there's a lot of new things to try there.  I'll see if they lead me anywhere, and prevent me from breaking the wall that I have been banging my head against. :)

On Friday, July 27, 2012 4:23:10 PM UTC-4, Jason wrote:

Phil

setting the content of an element via the innerHTML property was deprecated for the $("elmentid").update(content) function. Or by using the $("elmentid").insert(content) function if appropriate.

Jason Westbrook | T: 313-799-3770 | 

[Jim Longo]

P.S. The reason I haven't tried Jason's code yet, was there were too many elements in there that I didn't understand at all, and I'm loathe to open any more wormholes.  But I'll take another look at it.

[Phil Petree]

Don't worry about that wall, I've already got a nice soft dent in it!

--
You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group.

To view this discussion on the web visit https://groups.google.com/d/msg/prototype-scriptaculous/-/DdzCL1yvk7oJ.

[Victor]

Here is the page being called . . . 

<script  type="text/javascript">

sayHi = function(){

alert ('Hi');

};

</script>

<input type="button" value="Click Me" onclick="sayHi()"/>

My problem is that if I replace alert with document.write then the page gets replaced with a new page.  I thought the idea behind AJAX.Updater was to replace the DIV with new data, or in this case the result of the function. So in my newbie logic the DIV should get replaced with the text generated by document.write.? 

You cannot use document.write() after your initial page is finished loading (in other words you cannot use document.write in fragments requested via AJAX). You should use DOM manipulation methods like Element#insert() or Element#update().