Running JS/JQuery inside of prototype

问题

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

回答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.

回答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/

回答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>

来源：https://stackoverflow.com/questions/6890420/running-js-jquery-inside-of-prototype

标签

javascript

jquery

prototypejs