CODEWITHSUNDEEP
javascriptjquerybootstrap-modal
Qandeel Abbassi
Qandeel Abbassi

Reputation: 999

jQuery selectors not working in .load() complete callback

I am using nakupanda bootstrap3-dialog library for modals. Below is the code for creating and showing dialog:

function createIncommingCallDialog(msg){
  offermsg = msg;
  incommingCallDialog = new BootstrapDialog({
      message: $('<div></div>').load('./RemoteDialog.html', function() {
        //this code is not working. Neither .text() nor .click() has any 
        //affect.
        $('.caller').text(offermsg.from);
        $('.incomming').text('incoming call');
        $('#accept').click(function(){
          incommingCallDialog.close();
        });
        $('#decline').click(function(){
          incommingCallDialog.close();
        });
      }),
      closable: false,
  });
  incommingCallDialog.realize();
  incommingCallDialog.getModalFooter().hide();
  incommingCallDialog.getModalHeader().hide();
  incommingCallDialog.getModalBody().css('background-color', '#1A1A1A');
  incommingCallDialog.getModalBody().css('color', '#fff');
  incommingCallDialog.open();
}

I am loading a remote html in the dialog using jquery's .load() method and when it completes i am setting text and listeners of divs and buttons. But nothing happens. Neither .text() nor .click() has any affect inside the complete callback and there is no error in console. What's wrong?

Upvotes: 0

Views: 99

Answers (1)

Qandeel Abbassi
Qandeel Abbassi

Reputation: 999

I just figured out the problem. This code

message: $('<div></div>').load('./RemoteDialog.html', function() {
    //this code is not working. Neither .text() nor .click() has any 
    //affect.
    $('.caller').text(offermsg.from);
    $('.incomming').text('incoming call');
    $('#accept').click(function(){
      incommingCallDialog.close();
    });
    $('#decline').click(function(){
      incommingCallDialog.close();
    });
  }),

was searching for the DOM elements (.caller, .incomming, #accept etc.) in main document and sometimes it couldn't find them because they were loaded inside $('<div></div>') and not yet attached to the main document. So i changed the code to this:

message: $('<div></div>').load('./RemoteDialog.html', function() {
        $(this).find('.caller').text(offermsg.from);
        $(this).find('.incomming').text('incoming call');
        $(this).find('#accept').click(function(){
          incommingCallDialog.close();
        });
        $(this).find('#decline').click(function(){
          incommingCallDialog.close();
        });
      }),

Now it works...

Upvotes: 3

Related Questions