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>');   
    }
  });  
     }

Answer 1

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/

Answer 2

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.

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>