CODEWITHSUNDEEP
javascriptjqueryajaxsheetrock
Zeca Novaes
Zeca Novaes

Reputation: 419

Call event after script in external html loaded by Ajax

I have an Ajax Loaded Div in my page and, inside that div, a Jquery plugin load my Google Spreadsheet. I need to add some "event listening" to detect when that spreadsheet is loaded, but there is a problem with the unpredictable time to load and the fact that a event INSIDE my div (with external html content), as far as I know, can't be listened on my "parent" window. I've tried many ways to do that, by the way.

I'll post my code, but I don't think it can help. What can I say is: The height of my div change when the content is loaded. The Callback function can't work in this case 'cause my script (inside div) only get the spreadsheet after load the page.

index.html

$.ajax({
    url : "test/index.html",
    type : "get",
    async: true,
    success : function(result) {
    $('.mailcontrol').html(result);
    },
    error: function() {
       alert("Error");
    }
 });

test/index.html

<script type="text/javascript">
$('#dat').sheetrock({
  url: 'https://docs.google.com/spreadsheets/ssid'}); 
</script>

Any ideia about some event listening in my case? Thanks!

EDIT:

jrummell answer gave me the ideia to ignore the external html file using the plugin inside the same page, so, I could use the callback function of "sheetrock", as suggested by Andre.

Thanks for the answers!!

New code:

$("#target2").click(function () {
var script = document.createElement( 'script' );
script.type = 'text/javascript';
script.src = 'sheetrock.min.js';
$("#dat").append(script);
$('#dat').sheetrock({
  url: 'https://docs.google.com/spreadsheets',
    callback: function() {
  } 
  }); 
});

Upvotes: 1

Views: 430

Answers (3)

Andr&#233; Bonna
Andr&#233; Bonna

Reputation: 807

Have you tried the original sheetrock callback?

$('#dat').sheetrock({
  url: 'https://docs.google.com/spreadsheets/ssid',
  callback: function() {
      //trigger event to be caught 
  }  
});

Reference: https://github.com/chriszarate/sheetrock#callback

Upvotes: 1

jrummell
jrummell

Reputation: 43087

Try initializing your spreadsheet plugin after the content is loaded:

$.ajax({
    url : "test/index.html",
    type : "get",
    async: true,
    success : function(result) {
        $('.mailcontrol').html(result);
        $('#dat').sheetrock({
            url: 'https://docs.google.com/spreadsheets/ssid'}); 
    },
    error: function() {
       alert("Error");
    }
 });

Upvotes: 1

Andr&#233; Bonna
Andr&#233; Bonna

Reputation: 807

You can use Jquery on() event listening, like this: 

$('.mailcontrol').on('eventName', '#dat', callbackFunction);

The "selector" parameter is a selector string to filter the descendants of the selected elements that trigger the event. In your case "#dat". I suggest using "resize" as eventName.

Reference: http://api.jquery.com/on/

Upvotes: 1

Related Questions