views:

97

answers:

2

Let's say I have the following scenario:

<form action="/something.php" method="GET">Click me</div>

<script type="text/javascript"><!--
    $('form').submit(function(e) {
        $.ajax({
            url: this.action,
            method: this.method,
            dataType: 'script'
        });
        return false;
    });
//--></script>

My question pertains to the JavaScript result returned by something.php. I want to reference the form. Normally, I would reference via this (as I did with this.action and this.method above). However, that doesn't seem to work when I return the following:

alert(this);  // displays: [object Window]

It looks like jQuery is executing the script under the guise of the window instead of the element that instantiated the event. Is there a way I can easily reference the object that instantiated the event without having to reference element ID's or anything within the returned JavaScript?

A: 

try in this way:

EDIT:

html:

<div>
   <form id="myCorrectForm" action="/something.php" method="GET">
     <input type="submit" value="Click me" />
   </form>
</div>

js:

<script type="text/javascript"><!--

   // in this environment is created for the variable "frmRef" public
   var frmRef = null;
   $('#myCorrectForm').submit(function(e) {
      frmRef = $(this);
      $.ajax({
        url: frmRef.attr("action"),
        method: frmRef.attr("method"),
        dataType: 'script'
      });
      return false;
   });

//--></script> 

js in "/something.php":

alert($(window.parent.frmRef).attr('id'));
andres descalzo
The form submits via the same action/method combination regardless of using jQuery's helper methods or built-in JS action/method properties on the form. The original issue of `this` referencing the window instead of the object that caused the submit event persists with your method as well as mine.
Matt Huggins
I think you are still misunderstanding the question even after editing your answer. I am not having trouble performing the AJAX request. The problem is that the value of `this` included in my something.php file (which renders JavaScript) references the *Window* object instead of the *form* object.
Matt Huggins
this example works, but for this type of case you can see also the dataType = "jsonp"
andres descalzo
Thanks for the updated code. That's closer, but I'm still disappointed that I can't simply utilize the `this` keyword. It seems like a jQuery limitation, unless there's a reason for it that I'm not aware of.
Matt Huggins
+1  A: 

I found that I can perform the following to allow this in the response to reference the calling object, but I feel like this is more of a hack than should be required:

<form action="/something.php" method="GET">Click me</div>

<script type="text/javascript"><!--
    $('form').submit(function(e) {
        $.ajax({
            url: this.action,
            method: this.method,
            dataType: 'text',
            success: function(data) {
                eval('(function() {' + data + '}).call(this);');
            }
        });
        return false;
    });
//--></script>
Matt Huggins
I better understood your problem, I modify the example.
andres descalzo