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

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?) — Ricardo
– Ricardo, Commented Jul 31, 2011 at 15:44

clockworkgeek · Accepted Answer · 2011-08-01 15:36:11Z

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.

answered Aug 1, 2011 at 15:36

clockworkgeek

37.7k9 gold badges93 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ricardo Over a year ago

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 Over a year ago

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.

nderjung · Accepted Answer · 2011-07-31 16:13:06Z

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/

edited Jul 31, 2011 at 16:13

answered Jul 31, 2011 at 15:43

nderjung

1,6274 gold badges17 silver badges38 bronze badges

5 Comments

Ricardo Over a year ago

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 Over a year ago

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 Over a year ago

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 Over a year ago

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 Over a year ago

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 :)

ShankarSangoli · Accepted Answer · 2011-07-31 15:47:03Z

0

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>

answered Jul 31, 2011 at 15:47

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

2 Comments

Ricardo Over a year ago

well i get this one: [18:49:04.258] show_confirm is not defined

ShankarSangoli Over a year ago

Kool. I have shown you the jquery way also check my edited answer.

Collectives™ on Stack Overflow

Running JS/JQuery inside of prototype

3 Answers 3

2 Comments

5 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related