jquery doesn't work after an ajax call (response in a pop up window)

Question

I've a jsp page with a form and some jquery code. Jquery code works perfectly, but if I return that page in a popup window by using an ajax call, the jquery code doesn't work any more.

I tried also to use delegation, that is:

  $('select[name=myElementName]').on("change", function() {
        // some code
});

  or

  $(document).on("change", 'select[name=myElementName]', function() {
        // some code
});

instead of

 $('select[name=myElementName]').change(function() {    
             // some code
    });

Ajax call:

  var preview = function () {           
    $.ajax({
       type: "POST",
       url: myAction.do,
       data: "id=" + myid,
   success: function (response) {  
    // some code
    var x=window.open('', '_blank', 'titlebar=no,scrollbars=yes,menubar=no,height='+height+',width='+width+',resizable=yes,toolbar=no,location=no,location=0,status=no,left='+left+',top='+top+'');
    x.document.open();
    x.focus();
    x.document.write(response);

    return false;
    },
    error: function () {  
        return false;
    },
  });           
 };

EDIT

On Firefox 26.0 and Chrome 32.0.x, I resolved by using

 x.document.close();

after

x.document.write(replace);

Instead, on IE, all the .js included scripts are ignored (for example the jquery-ui-1.9.1.js).

EDIT 2

I resolved with

  <body onload="myload()">

and in my jsp I've myload() definition in which I call the scripts.

possible duplicate of [Jquery function doesn't work after Ajax call](http://stackoverflow.com/questions/20962471/jquery-function-doesnt-work-after-ajax-call) — undefined, Jan 15 '14 at 12:03
I can't tell if you are trying to run the .on('change'... event listener on the opened page, or the page that you made the request on. Please clarify. — Brian Noah, Jan 19 '14 at 06:41

score 1 · Answer 1 · answered Jan 17 '14 at 18:01

1

It is because you are creating new DOM structure but it doesn't have the event handlers attached. The easiest way is to run the event handler in the ajax callback:

$.ajax({

    ...
    success: function (response) {  
        // some code
        var x=window.open('', '_blank', 'titlebar=no,scrollbars=yes,menubar=no,height='+height+',width='+width+',resizable=yes,toolbar=no,location=no,location=0,status=no,left='+left+',top='+top+'');
        x.document.open();
        x.focus();
        x.document.write(response);

        // now, place the event handler here
        $('select[name=myElementName]', x.document.body).change(function() {    
                     // some code
        });
    }

});

answered Jan 17 '14 at 18:01

Tomas

52,167
46
207
345

but for external .js? – Sefran2 Jan 17 '14 at 21:06
@cricket what do you mean external .js? Perhaps you need to illustrate your example in the question in more detail? – Tomas Jan 17 '14 at 21:31
@cricket if you need to call some external js functionality to install the handlers, then do it in the ajax `success` callback. – Tomas Jan 17 '14 at 21:33
in this case, the response is a whole HTML page. In that page I include the .js for the date picker. Firefox and Chrome recognize it, but not ie. On ie I had to put the other scripts in a function called on page load but I don't know what to do for the included ones. – Sefran2 Jan 19 '14 at 09:01
@Cricket 1) then again, call these scripts from the `success` callback. This is what you have to do. 2) What I have written in the answer helps for the code you demonstrated. Seems that you are now speaking about something else. Unless you demonstrate clearly what you do and what is your problem, no one will actually be able to help you with your actual problem and your bounty will go waste. – Tomas Jan 19 '14 at 19:12

Don Rhummy · Answer 2 · 2014-01-21T17:55:46.203

0

Don't use document.write it completely overwrites whatever is on the page at the time of writing and leads to race conditions (e.g. the external scripts might have already been loaded, but they also might not, leading to unknown order of the write and script loads). Also, I believe documnt.write is putting serialized text into the document, not DOM objects so it may not trigger events.

Instead, you can open the new window and then manipulate the DOM objects there directly (assuming it's on the same server as your main page):

//Open a new window for the success info
var newWindow = window.open(newUrl);

//Now grab some element
var someItem = newWindow.document.getElementById( "someId");

//Manipulate dom either by "someItem.innerHTML" or "someItem.appendChild(...)"

edited Jan 21 '14 at 17:55

answered Jan 20 '14 at 20:04

Don Rhummy

20,170
31
134
252

I don't understand how to use document.onload on a whole html page response, instead of document.write, and then adding it to the DOM. do you have an example or a link about it? – Sefran2 Jan 21 '14 at 13:43
@Cricket easiest way is to put code in the page you're loading in the frame (this *must* live on the same server as the outer page) that tells the outer page it's loaded. The iframe would do this by calling a javascript function in the parent: `parent.iframeLoaded();`. In `iframeLoaded` you would add elements or alter existing elements of the iframe wither with regular javascript or jQuery like this: `$("#myiframe").contents().append( "
Test
" );`. – Don Rhummy Jan 21 '14 at 16:17
I don't (and I would't) use an iframe. I've an ajax call to a java Action that returns an html page (basically it is a preview form with some query code and the inclusion of some external .js). All works, but on IE the external .js are ignored. – Sefran2 Jan 21 '14 at 16:40
@Cricket That makes it easier! (Sorry about the iFrame, I misread what you were doing). Again, stay away from document.write and instead, do what I've shown above (I edited my answer) – Don Rhummy Jan 21 '14 at 17:53

score 0 · Answer 3 · answered Jan 24 '14 at 13:24

0

If you are calling an AJAX server routine and putting the entire response w/o processing it on the client in to a new window, why not opening the window directly with the URL of that AJAX routine and skipping all stuff:

....
var x=window.open(myAction.do + "?id=" + myid, 
 '_blank', 
 'titlebar=no,scrollbars=yes,menubar=no,height='+height+',width='+width+',resizable=yes,toolbar=no,location=no,location=0,status=no,left='+left+',top='+top+'');
....

The only diff here is, that the request is a GET and not a POST request, but the data is just one id, which is acceptable, probably?

answered Jan 24 '14 at 13:24

Axel Amthor

10,616
1
20
42

I'm calling the ajax from a jquery plugin, which gets the url from a jsp. I can't open the window directly – Sefran2 Jan 24 '14 at 15:34
if you can pass the url to an AJAX Call, you can pass it as well to any other javascript function. – Axel Amthor Jan 24 '14 at 21:29

score -1 · Answer 4 · answered Jan 21 '14 at 11:40

I had a similar problem in on of my projects. I solved it by writing a success method after the ajax call.

            {
             $.ajax({
              type: "POST",
              url: "/abc/",
              data:{<data>},
              async:false,
              dataType:'json',
              success: function(response)                   
              {
                success=1;
                Id=response;
                  return;
              }
        });
        if (success)
        {
                #your code here
                var a='/xyz/?Id='+Id
                window.open(a,'_blank');
                window.location.href='/registration/'
        }
        return false;}

score -1 · Answer 5 · answered Jan 21 '14 at 12:09

-1

instead of using document.write, try fetching your success data(records arrived in success function) in a hidden DIV and clone it into your popup that should work

answered Jan 21 '14 at 12:09

Makrand

589
5
14

jquery doesn't work after an ajax call (response in a pop up window)

5 Answers5

Linked