embedding a javascript control in an ajax page

[HaLo2FrEeEk]

I know the title probably isn't the easiest to understand, so I really hope I get some help.  I'm making a page that has a few AJAX options to make it easier on the client.  The first one a person enters a value and some information is retrieved based on that value, in the second one the person chooses from a list of the values retrieved from the first one.  When the person selects the value from the list in the second one it gets some more information and displays it for the person.  It pertains to the length of a film.  My script gets the length of the film in seconds, and the person chooses his own start and end point.  I'm using a slider from Scriptaculous that steps in increments of 1 so the person can simply drag the slider's 2 handles to the start and end points he wants.  The only thing is the slider requires the Scriptaculous libraries which are dynamically loaded based on what's needed.  Since the page with the slider is an AJAX page, the slider is being generated on that page, meaning when it gets to the main page the slider doesn't work.  I have the 2 scriptaculous libraries I need embedded on the main page and on the page generating the slider, but it still won't work when it gets AJAX'ed in.  If I go the the page directly the slider works, but not when it's written to the main page using the AJAX.  I'm wondering if anyone's had experience with this problem and if they would have any idea how to fix it.  Here's the code I'm using on the second AJAX page:

 

<?php

[...]

echo "<script type=\"text/javascript\" language=\"Javascript\"  src=\"/misc/scriptaculous/lib/prototype.js\"></script>";
echo "<script type=\"text/javascript\" language=\"Javascript\"  src=\"/misc/scriptaculous/src/scriptaculous.js\"></script>";
echo "<style type=\"text/css\">";
echo "  div.slider { width:400px; margin:10px 0; background-color:#cccccc; height:10px; position: relative; }";
echo "  div.slider div.handle { width:10px; height:15px; background-color:#000000; cursor:w-resize; position: absolute; }";
echo "</style>";
[...]
echo "Your clip is ".$hrs." hours ".$mins." minutes and ".$secs." seconds long.<br>\n";
echo "Where would you like me to start and stop the recording, in seconds?  (leave as is to have the whole clip recorded)<br><br>\n\n";
echo "<div id=\"length_slider\" class=\"slider\">\n";
echo "  <div class=\"handle\" style=\"background-color: #44ee99;\" title=\"Start\"></div>\n";
echo "  <div class=\"handle\" style=\"background-color: #44ee99;\" title=\"End\"></div>\n";
echo "</div>\n\n";
echo "<input type=\"text\" size=\"5\" name=\"startsec\" id=\"startsec\" value=\"0\"> - ";
echo "<input type=\"text\" size=\"5\" name=\"endsec\" id=\"endsec\" value=\"".$length."\"><br><br>\n\n";
?>
<script type="text/javascript">
  (function() {
    var length_slider = $('length_slider'),
        mintext = $('startsec'),
        maxtext = $('endsec');

    new Control.Slider(length_slider.select('.handle'), length_slider, {
      range: $R(0, <?php echo $length; ?>),
      sliderValue: [0, <?php echo $length; ?>],
      values: $R(0, <?php echo $length; ?>),
      restricted: true,
      onSlide: function(values) {
        mintext.setValue(values[0]);
        maxtext.setValue(values[1]);
      },
      onChange: function(values) {
        mintext.setValue(values[0]);
        maxtext.setValue(values[1]);
      }
    });
  })();
</script>

 

This should work because the Javascript is being initialized on the page generating the slider, and on the main page that's recieving the AJAX input the 2 scriptaculous libraries are embedded.

 

I just want this all to work, I'm tired of working on this and I want to put it all online for people to use.  Somebody please help me.

[corbin]

Are you using a framework or anything to do the AJAX requests?  Normally Javascript is not parsed in AJAX requests.

[HaLo2FrEeEk]

I'm not quite sure what you mean, but I'm using an xmlhttp request to send the values via POST method and it sends it back.  I don't actually have the javascript itself on the page that's being sent back (via the AJAX request), but it's in a script src="" tag.  But the thing is, even if that was the problem, I have that <script src=""...> on both the page being requested through AJAX and on the recieving page, which is doing the requesting.

 

The system I have works, but it's extremely user unfriendly.  The user would have to manually enter the number of seconds where he wanted his film to start and stop, which is not very nice.  I'd much rather have him be able to pull the sliders and have it automatically change the start and stop seconds.  Here is an example of the page being requested through AJAX, by itself (the slider works if you just pull up the page on it's own, without requesting it through AJAX):

 

http://infectionist.com/misc/capture/getlength.php?film=43243|test|00|08|42

 

And now that I look at it (I had to go and edit the code real quick) I realized that I do have Javascript included in that page (other than the embedded source).  It's the initialization javascript to init. the slider:

 

<script type="text/javascript">
  (function() {
    var length_slider = $('length_slider'),
        mintext = $('startsec'),
        maxtext = $('endsec');

    new Control.Slider(length_slider.select('.handle'), length_slider, {
      range: $R(0, <?php echo $length; ?>),
      sliderValue: [0, <?php echo $length; ?>],
      values: $R(0, <?php echo $length; ?>),
      restricted: true,
      onSlide: function(values) {
        mintext.setValue(values[0]);
        maxtext.setValue(values[1]);
      },
      onChange: function(values) {
        mintext.setValue(values[0]);
        maxtext.setValue(values[1]);
      }
    });
  })();
</script>

 

How would I get around that?  I know Javascript doesn't need to be run line-by-line (at least I don't think it does), so how would I go about making this Javascript work on the main page?

[HaLo2FrEeEk]

Sorry for the double post, edit time was expired.

 

Is there a way for me to easily see the contents that are being written to the div on the recieving page?  Meaning, is there a way for me to view the result that the AJAX is getting back from the requested page?  If I could do that, I might be able to find a way to make the javascript come through.  Maybe escaping certain characters, I don't know.  If yo have a better way, please, help me out!

[RichardRotterdam]

Maybe this isn't the answer your looking for but here goes.

What about using two sliders or one slider with two handle bars. You can slide the start and the end time of the video. With that you add a save button which just saves that to the database. I think if you update the database immediately when you slide you'll just strain the database unnecessarily.

[HaLo2FrEeEk]

The whole thing is part of a form that needs to be submitted as one piece of information.  The slider has 2 handles, and they both work when viewing the AJAX page directly (we'll call it page2, and the page that will recieve the information, page1).  Anyways, the slider works when you view page2 directly, but not when it has to send the data through AJAX to page1.  How I have it work is when you change the slider, it updates 2 textboxes automatically.  These textbox values are what will be put into the database.  The problem I'm having is the Javascript can't be sent through AJAX.  Is there any way to encode Javascript so it can be sent through AJAX without being messed up and still works perfectly on the recieving page?  That's what I need, more than anything.  I already have a way to save the slider's values to the database, so it's not an issue with how many handles I have.  Even if I made it 2 sliders with one handle each, it still wouldn't work because the person needs to be able to drag the first handle up to and including the length of the clip-1 and the second handle to 1, with 2 sliders you couldn't do that.  The handles also need to not be able to pass each other, meaning if the min handle is set to 100, the max cannot go any lower than 100.

 

And I didn't realize that the link I posted didn't work, my bad.  Just copy and paste this into your address bar.

 

http://infectionist.com/misc/capture/getlength.php?film=43243|test|00|08|42

 

The whole thing, ending at the 42.  The sliders work, in both IE and FF, on that page.

 

So, to wrap up, I need a way to send Javascript, unharmed, through an AJAX request and have it work as expected on the recieving end.

[HaLo2FrEeEk]

Uhm...hello?  Yeah, still need help here.

 

How can I pass Javascript embedded in a page that I'm requesting through an AJAX request?

[HaLo2FrEeEk]

No REALLY, I need help?!?

[corbin]

Uhm...hello?  Yeah, still need help here.

 

How can I pass Javascript embedded in a page that I'm requesting through an AJAX request?

 

 

 

You will have to tell it to be parsed some how.  You could use a library like jQuery to handle it for you, you could pass the entire page in JS and eval() it, or you could parse <script> tags.  The <script> tags or a library are the best solutions, in my opinion.  I personally would probably just use jQuery.

[HaLo2FrEeEk]

How would I do that, I've never heard of jQuery and I've never used eval.  Here is the Javascript I need to pass:

 

<script type="text/javascript">
  (function() {
    var length_slider = $('length_slider'),
        mintext = $('startsec'),
        maxtext = $('endsec');

    new Control.Slider(length_slider.select('.handle'), length_slider, {
      range: $R(0, <?php echo $length; ?>),
      sliderValue: [0, <?php echo $length; ?>],
      values: $R(0, <?php echo $length; ?>),
      restricted: true,
      onSlide: function(values) {
        mintext.setValue(values[0]);
        maxtext.setValue(values[1]);
      },
      onChange: function(values) {
        mintext.setValue(values[0]);
        maxtext.setValue(values[1]);
      }
    });
  })();
</script>

 

That has to be passed and run with the AJAX output, otherwise the slider won't initiate and both handles will be at position 0 and won't move.

 

Please, in layman's terms, explain to me how I would go about doing that using jQuery or eval(), prefferably something that doesn't require I put another piece of Javascript on my server, I've already got about 20 loading with the header.

[HaLo2FrEeEk]

*AHEM*!!!

[corbin]

    range: $R(0, <?php echo $length; ?>),

      sliderValue: [0, <?php echo $length; ?>],

      values: $R(0, <?php echo $length; ?>),

 

 

Are those the only variables?

 

 

One alternative would be to return just the variables and have the AJAX callback create the slider.

 

 

 

Is the Javascript the only thing you're returning.  If so, just eval() the entire thing (without script tags).  If not, you will either need to parse out the script tags and eval() what's inbetween, or you can use a library.

 

 

What library are you using now for the slider (or is it some random script?)?

 

What ever library it is (if it is one) probably has AJAX JS-parsing abilities.

[HaLo2FrEeEk]

The whole page I'm trying to return (I used test values for the hidden inputs, those don't matter):

 

<script language="Javascript" src="/misc/scriptaculous/lib/prototype.js" type="text/javascript">
<!--//-->
</script>
<script language="Javascript" src="/misc/scriptaculous/src/scriptaculous.js" type="text/javascript">
<!--//-->
</script>
<style type="text/css">
  div.slider { width:400px; margin:10px 0; background-color:#cccccc; height:10px; position: relative; }
  div.slider div.handle { width:10px; height:15px; background-color:#000000; cursor:w-resize; position: absolute; }
</style>
<input type="hidden" name="fileid" id="fileid" value="12345">
<input type="hidden" name="title" id="title" value="test">
<input type="hidden" name="duration" id="duration" value="63">
Your clip is  01 minutes and 03 seconds long.<br>
Where would you like me to start and stop the recording, in seconds?  (leave as is to have the whole clip recorded)<br><br>

<div id="length_slider" class="slider">
  <div class="handle" style="background-color: #44ee99;" title="Start"></div>
  <div class="handle" style="background-color: #44ee99;" title="End"></div>
</div>

<input type="text" size="5" name="startsec" id="startsec" value="0"> - <input type="text" size="5" name="endsec" id="endsec" value="63"><br><br>

<script type="text/javascript">
  (function() {
    var length_slider = $('length_slider'),
        mintext = $('startsec'),
        maxtext = $('endsec');

    new Control.Slider(length_slider.select('.handle'), length_slider, {
      range: $R(0, 63),
      sliderValue: [0, 63],
      values: $R(0, 63),
      restricted: true,
      onSlide: function(values) {
        mintext.setValue(values[0]);
        maxtext.setValue(values[1]);
      },
      onChange: function(values) {
        mintext.setValue(values[0]);
        maxtext.setValue(values[1]);
      }
    });
  })();
</script>

 

This would be the AJAX return if the url I had sent to the AJAX request was this:

 

http://infectionist.com/misc/capture/getlength.php?film=12345|test|00|01|03

 

In the GET[film] variable: 12345 is the ID of the film, "test" is the name, "00" is the hours, "01" is the minutes, and "03" is the seconds.

 

I don't know how to use eval(), I've never had to use it before.  Could you give me an example?  Would it work to make a separate function in my functions.js file that would print the code to the page, and I would call the AJAX request, then call the function to append the javascript to the div where I printed the AJAX result?

[MadTechie]

your need to either put the JS on the main page or parsa the JS on the Ajax responce, if you dont it won't be available.

 

http://www.w3schools.com/jsref/jsref_eval.asp

[corbin]

Edit:  Had this page open and went to eat dinner, so I see MadTechie beat me ;p.

 

 

 

It might be a tiny bit more bandwidth (although if someone used the slider twice, it could be less bandwidth), but you could just not use AJAX for this.

 

 

You could just essentially wrap that PHP page in Javascript.

 

 

function MakeSlider(film_id, name, hours, minutes, seconds) {

    //do stuff here....  Like create the HTML/slider from above.

}

 

That way you would already be in Javascript.

 

 

I bet prototype has JS-parsing in AJAX capabilities by the way.

 

 

Anyway, eval (which would have taken 3 seconds to google ;p) is like PHP's eval.

 

 

It evaluates (as in parses and runs) what ever code is passed to it (as a string).

 

 

Example:

 

 

eval('alert("hello!");');

[HaLo2FrEeEk]

Ok, but I still don't understand how I could implement that into my existing page.  Would I eval each line?  Would I put the whole Javascript as one line inside an eval?  I've tried putting the Javascript on the main page, but it has to be there after I actually write the slider html to the page, otherwise it gives me all sorts of initialization errors and what have you.  So here's my page:

 

<?php

[...]

echo "<script type=\"text/javascript\" language=\"Javascript\"  src=\"/misc/scriptaculous/lib/prototype.js\"></script>";
echo "<script type=\"text/javascript\" language=\"Javascript\"  src=\"/misc/scriptaculous/src/scriptaculous.js\"></script>";
echo "<style type=\"text/css\">";
echo "  div.slider { width:400px; margin:10px 0; background-color:#cccccc; height:10px; position: relative; }";
echo "  div.slider div.handle { width:10px; height:15px; background-color:#000000; cursor:w-resize; position: absolute; }";
echo "</style>";
[...]
echo "Your clip is ".$hrs." hours ".$mins." minutes and ".$secs." seconds long.<br>\n";
echo "Where would you like me to start and stop the recording, in seconds?  (leave as is to have the whole clip recorded)<br><br>\n\n";
echo "<div id=\"length_slider\" class=\"slider\">\n";
echo "  <div class=\"handle\" style=\"background-color: #44ee99;\" title=\"Start\"></div>\n";
echo "  <div class=\"handle\" style=\"background-color: #44ee99;\" title=\"End\"></div>\n";
echo "</div>\n\n";
echo "<input type=\"text\" size=\"5\" name=\"startsec\" id=\"startsec\" value=\"0\"> - ";
echo "<input type=\"text\" size=\"5\" name=\"endsec\" id=\"endsec\" value=\"".$length."\"><br><br>\n\n";
?>
<script type="text/javascript">
  (function() {
    var length_slider = $('length_slider'),
        mintext = $('startsec'),
        maxtext = $('endsec');

    new Control.Slider(length_slider.select('.handle'), length_slider, {
      range: $R(0, <?php echo $length; ?>),
      sliderValue: [0, <?php echo $length; ?>],
      values: $R(0, <?php echo $length; ?>),
      restricted: true,
      onSlide: function(values) {
        mintext.setValue(values[0]);
        maxtext.setValue(values[1]);
      },
      onChange: function(values) {
        mintext.setValue(values[0]);
        maxtext.setValue(values[1]);
      }
    });
  })();
</script>

 

Where do I put the eval?

 

I need the AJAX there because I don't want to refresh the page and things need to be gotten from offsite.  Is there a function equivalent to PHP's explode that Ican use to explode the string I'm passing as the film GET variable?  I need to get each value between the |'s, for example, I pass this as the film variable:

 

12345|test|00|01|03

 

Then I explode that using | as the separator to get each value.  If I could do that in Javascript I might be able to remove the AJAX for this portion of the page, but I need it for the other portion.  I'm sorry I don't seem to know very much but I've never had to use eval so simply knowing what it does doesn't tell me where I need to use it in this case.

[MadTechie]

Is there a function equivalent to PHP's explode that Ican use

 

Yep, Split, ie

result = subject.split(/|/);

 

Why not have a AJAX call that is used only for the slider, then on the responce split the responce and use those for the parameter required (pass them to a JS function that can them all the slider parts) and unhide a div (with the slider)!

[HaLo2FrEeEk]

I'm sorry but that didn't make any sense to me.  You seem to have left out words and I just don't understand what you're trying to say.

[MadTechie]

okay

1. on the main page have the sliders html in a DIV (hidden)

2. on the main page include the JS but as a function

3. create a new function that makes the ajax call and set the responce to split the responce and use them to call the JS function (see 2).