Running JS/JQuery inside of prototype

Question

I'm having a problem with Prototype Draggable windows.. I have a window and i want to launch some jQuery/Ajax/JavaScript functions inside of the window but seems like nothing works.

Look an example i've made with a simple JavaScript popup script and when i click the div it doesn't show, same happens with every function i do.

<script type="text/javascript">
 function show_confirm() {
 var r = confirm("Press a button!");
 if (r == true) {
 alert("You pressed OK!");
 } else {
 alert("You pressed Cancel!");
 }
 }
</script>
<a href="#" onclick="show_confirm()"><div id="delete"></div></a>

For jQuery i already tried noconflict() and it still doesn't work.

EDIT: Here is how i set up the window:

function openApps() {
 new UI.Window({theme: "ultra_dark",
 width: 1170, 
 height: 630,
 superflousEffects: superflousEffects}).center().show().setAjaxContent('myFile.php', {
 method: "GET", 
 onCreate: function() { 
 this.header.update("Applications"); 
 this.setContent('<div class="message">Please wait...</div><div class="spinner"></div>'); 
 }
 }); 
 }

• ShankarSangoli: Where have you used jquery in this example?
• Ricardo: I said that this one is a javascript example but jquery doesn't work too. (I mean if simple JS doesn't work.. how jQuery will?)
• clockworkgeek: How are you setting the content of the window?

Answer 1

Because it is setting the content by AJAX your script is being executed in the context of a callback. The function show_confirm probably becomes a closure within onComplete - something which you don't need to write, it is automatic.

You might need to explicitly assign it to a global variable.

window.show_confirm = function() {
 var r = confirm("Press a button!");
 if (r == true) {
 alert("You pressed OK!");
 } else {
 alert("You pressed Cancel!");
 }
}

Alternatively if you find the retrieved <script> elements are not being executed at all (I think this can happen with some domain issues) then you can use an iframe instead by replacing setAjaxContent('myFile.php', ...) with setUrl('myFile.php'). This is a compromise as I don't see how to have a loading spinner.

• Ricardo: The one you just wrote - Works perfect! so basically ill need to do the same for all the jQuery/JS scripts that i want to run iside of the window? and by the way I don't really need the loading spinner bro, the iframe option sounds bad to me because then the new windows that i will open will all be inside this one which is not what i would like to do.
• clockworkgeek: The other way is to include all necessary scripts in the main document rather than trying to execute AJAX responses. That way there is no scope issue.

Answer 2

Why not use jQuery's UI? It has dialogue windows built in preventing any conflict.

Here's an example of its use in your context:

<script>
$(function() {
 $( "a[id=delete-item]" ).click(function(){
 $( "div[id=dialog-confirm-delete]" ).dialog({
 modal: true,
 buttons: {
 "Delete item": function() {
 $( this ).dialog( "close" );
 },
 Cancel: function() {
 $( this ).dialog( "close" );
 }
 }
 });
 });
});
</script>
<style>
 div[id=dialog-confirm-delete] {
 display: none;
 }
</style>
<div id="dialog-confirm-delete">
 <p>
 This item will be permanently deleted and cannot be recovered. Are you sure?
 </p>
</div>
<a id="delete-item">Delete</a>

And a working example:

http://jsfiddle.net/xsv8B/2/

• Ricardo: Well its a big interface and the windows are alraedy built with Prototype, it will take me around a week to recode that for jQuery.
• nderjung: What I can see is a simple confirmation window executed through a link with no jQuery or Prototype present. If you can give us an idea of how much prototype you have written then maybe we can guide you in a different direction, but for now jQuery UI's dialogue windows seems like the best option.
• Ricardo: well i don't know how it will help you my friend, i mean you can just go to the prototype draggable windows API and see the same thing I'm doing in there. I'm loading a php file into the window and trying to do some js/jquery on the php file.
• nderjung: I was trying to help you? I was just illustrating the use of a draggable window through jQuery. Seeing as there is a conflict and you haven't actually specified the actual source of the conflict, all I can do is suggest ways to overcome this problem generally.
• Ricardo: Yea buddy, here it is i have just edited it and one of the guys here helped me with a good tip, thank you too :)

Answer 3

Try this

<script type="text/javascript">
function show_confirm()
{
var r=confirm("Press a button!");
if (r)
 {
 alert("You pressed OK!");
 }
else
 {
 alert("You pressed Cancel!");
 }
return false;
}
//if you want to use jquery
$(function(){
 $("a").click(function(){
 var r=confirm("Press a button!");
 if (r)
 {
 alert("You pressed OK!");
 }
 else
 {
 alert("You pressed Cancel!");
 }
 return false;
 });
});
</script>
<a href="#" onclick="return show_confirm()"><div id="delete"></div></a>

• Ricardo: well i get this one: [18:49:04.258] show_confirm is not defined
• ShankarSangoli: Kool. I have shown you the jquery way also check my edited answer.