Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Dynamic (AJAX) loaded Bootstrap Modal (Bootstrap 2.1)
$(document).ready(function() {
// Support for AJAX loaded modal window.
// Focuses on first input textbox after it loads the window.
$('[data-toggle="modal"]').click(function(e) {
e.preventDefault();
var url = $(this).attr('href');
if (url.indexOf('#') == 0) {
$(url).modal('open');
} else {
$.get(url, function(data) {
$('<div class="modal hide fade">' + data + '</div>').modal();
}).success(function() { $('input:text:visible:first').focus(); });
}
});
});
<a href="/url/to/load/modal_window.htm" data-toggle="modal">link</a>
<div class="modal-header">
<a class="close" data-dismiss="modal">&times;</a>
<h3>Modal header 2</h3>
</div>
<div class="modal-body">
<p>One body...</p>
</div>
<div class="modal-footer">
<a class="btn btn-primary" onclick="$('.modal-body > form').submit();">Save Changes</a>
<a class="btn" data-dismiss="modal">Close</a>
</div>
@drewjoh

This comment has been minimized.

Show comment Hide comment
@drewjoh

drewjoh Jan 27, 2012

Just a quick hack to get something working.

Owner

drewjoh commented Jan 27, 2012

Just a quick hack to get something working.

@dbmmedia

This comment has been minimized.

Show comment Hide comment
@dbmmedia

dbmmedia Mar 4, 2012

Works fine! = ))
Thanks for the code ...

dbmmedia commented Mar 4, 2012

Works fine! = ))
Thanks for the code ...

@macropin

This comment has been minimized.

Show comment Hide comment
@macropin

macropin May 14, 2012

Thanks! Works well!

Thanks! Works well!

@nyalex

This comment has been minimized.

Show comment Hide comment
@nyalex

nyalex May 31, 2012

You have a typo in the link HTML (index.htm)...it should be "href" :-)

nyalex commented May 31, 2012

You have a typo in the link HTML (index.htm)...it should be "href" :-)

@drewjoh

This comment has been minimized.

Show comment Hide comment
@drewjoh

drewjoh May 31, 2012

Oops, thanks! Fixed. :)

Owner

drewjoh commented May 31, 2012

Oops, thanks! Fixed. :)

@norus

This comment has been minimized.

Show comment Hide comment
@norus

norus Jun 6, 2012

Hi, thanks! Can you add a function to destroy the modal on data-dismiss="modal"?

norus commented Jun 6, 2012

Hi, thanks! Can you add a function to destroy the modal on data-dismiss="modal"?

@vcivelek

This comment has been minimized.

Show comment Hide comment
@vcivelek

vcivelek Jun 13, 2012

it works fine, but after i close the model, the model goes "display none" but not totally disappear from the page.
is this expected?
this is what i see in the page inspector after couple open/close modals:

... class="modal hide fade" style="display: none; ">
... class="modal hide fade" style="display: none; ">
... class="modal hide fade" style="display: none; ">

it works fine, but after i close the model, the model goes "display none" but not totally disappear from the page.
is this expected?
this is what i see in the page inspector after couple open/close modals:

... class="modal hide fade" style="display: none; ">
... class="modal hide fade" style="display: none; ">
... class="modal hide fade" style="display: none; ">

@drewjoh

This comment has been minimized.

Show comment Hide comment
@drewjoh

drewjoh Jun 13, 2012

Sure, good catch. Added code that should delete the modal window when the close button is clicked. Not sure about if they click outside the modal window... an exercise for the developer? :)

Owner

drewjoh commented Jun 13, 2012

Sure, good catch. Added code that should delete the modal window when the close button is clicked. Not sure about if they click outside the modal window... an exercise for the developer? :)

@vcivelek

This comment has been minimized.

Show comment Hide comment
@vcivelek

vcivelek Jun 13, 2012

this didn't seem to fix the issue, at least for me. they still pile up with "display: none"

this didn't seem to fix the issue, at least for me. they still pile up with "display: none"

@vcivelek

This comment has been minimized.

Show comment Hide comment
@vcivelek

vcivelek Jun 13, 2012

after every open modal i see, these 2 divs, first one(modal-backdrop fade in) is blank,
second div(modal hide fade in) has my modal.
after the close, the first one(modal-backdrop fade in) disappears but the second div remains.
it remains with "display: none" though.

div class="modal-backdrop fade in">
div class="modal hide fade in" style="display: block;">

after every open modal i see, these 2 divs, first one(modal-backdrop fade in) is blank,
second div(modal hide fade in) has my modal.
after the close, the first one(modal-backdrop fade in) disappears but the second div remains.
it remains with "display: none" though.

div class="modal-backdrop fade in">
div class="modal hide fade in" style="display: block;">

@drewjoh

This comment has been minimized.

Show comment Hide comment
@drewjoh

drewjoh Jun 13, 2012

Note: Removed the delete code as it doesn't appear to be a full solution.

Owner

drewjoh commented Jun 13, 2012

Note: Removed the delete code as it doesn't appear to be a full solution.

@nextroy

This comment has been minimized.

Show comment Hide comment
@nextroy

nextroy Jun 27, 2012

Hey Drewjoh,

I created a tiny fork which solves multiple insertion of modal content in the page.

nextroy commented Jun 27, 2012

Hey Drewjoh,

I created a tiny fork which solves multiple insertion of modal content in the page.

@norus

This comment has been minimized.

Show comment Hide comment
@norus

norus Jul 16, 2012

You mind sharing the code, nextroy? :)

norus commented Jul 16, 2012

You mind sharing the code, nextroy? :)

@nextroy

This comment has been minimized.

Show comment Hide comment
@nextroy

nextroy Jul 16, 2012

@norus .. check my fork .. its there :)

nextroy commented Jul 16, 2012

@norus .. check my fork .. its there :)

@norus

This comment has been minimized.

Show comment Hide comment
@norus

norus Jul 16, 2012

Thanks, didn't see it the first time :)

norus commented Jul 16, 2012

Thanks, didn't see it the first time :)

@notrab

This comment has been minimized.

Show comment Hide comment
@notrab

notrab Oct 19, 2012

I'm using Bootstrap and this doesn't focus on the input inside the modal contents dynamically loaded but the input box I have in my navbar..

Can anyone suggest a fix?

notrab commented Oct 19, 2012

I'm using Bootstrap and this doesn't focus on the input inside the modal contents dynamically loaded but the input box I have in my navbar..

Can anyone suggest a fix?

@Octen

This comment has been minimized.

Show comment Hide comment
@Octen

Octen Oct 22, 2012

data-target="#" : Not to have : Syntax error, unrecognized expression

<a href="/url/to/load/modal_window.htm" data-target="#" data-toggle="modal">link</a>

Add "remove" from modal, for do not clone :

$("[data-toggle=modal]").click(function(event) {
            event.preventDefault();
            var url = $(this).attr("href");
            if (url.indexOf("#") == 0) {
                $(url).modal('open');
            } else {
                $.get(url, function(data) {
                    $('<div class="modal hide fade">' + data + '</div>').modal().on('hidden', function () { $(this).remove(); });
                }).success(function() { $('input:text:visible:first').focus(); });
            }
        });

Sorry for my poor English ;)

Octen commented Oct 22, 2012

data-target="#" : Not to have : Syntax error, unrecognized expression

<a href="/url/to/load/modal_window.htm" data-target="#" data-toggle="modal">link</a>

Add "remove" from modal, for do not clone :

$("[data-toggle=modal]").click(function(event) {
            event.preventDefault();
            var url = $(this).attr("href");
            if (url.indexOf("#") == 0) {
                $(url).modal('open');
            } else {
                $.get(url, function(data) {
                    $('<div class="modal hide fade">' + data + '</div>').modal().on('hidden', function () { $(this).remove(); });
                }).success(function() { $('input:text:visible:first').focus(); });
            }
        });

Sorry for my poor English ;)

@mrdeeds88

This comment has been minimized.

Show comment Hide comment
@mrdeeds88

mrdeeds88 Nov 9, 2012

Very nice!

Very nice!

@dmassari

This comment has been minimized.

Show comment Hide comment
@dmassari

dmassari Nov 12, 2012

Very useful!

But in my projeto I had a problem....
All my pages are encoded on iso-8859-1 because of many special chars like "ç", 'á', "õ" ... and when I loaded the remote page into my modal, it was all irregular, chars missing/mistake.

Does someone here had this problem? How was it solved by you?

Thanks
Massa

Very useful!

But in my projeto I had a problem....
All my pages are encoded on iso-8859-1 because of many special chars like "ç", 'á', "õ" ... and when I loaded the remote page into my modal, it was all irregular, chars missing/mistake.

Does someone here had this problem? How was it solved by you?

Thanks
Massa

@dmassari

This comment has been minimized.

Show comment Hide comment
@dmassari

dmassari Nov 12, 2012

People, I solved my problem setting the header parameters from my remote page, it was too simples.. sorry for the inconvenience.

People, I solved my problem setting the header parameters from my remote page, it was too simples.. sorry for the inconvenience.

@uncle-fred

This comment has been minimized.

Show comment Hide comment
@uncle-fred

uncle-fred Nov 17, 2012

Thanks @Octen. I changed input fields to input:visible:enabled:first and added focus trigger on "shown".

$("[data-toggle=modal]").click(function(event){
event.preventDefault();
var url = $(this).attr("href");
if (url.indexOf("#") == 0) {
$(url).modal('open');
} else {
$.get(url, function(data) {
$('

' + data + "
").modal().on("shown", function () {
$('input:visible:enabled:first').focus();
}).on("hidden", function () {
$(this).remove();
});
});
}
});

Thanks @Octen. I changed input fields to input:visible:enabled:first and added focus trigger on "shown".

$("[data-toggle=modal]").click(function(event){
event.preventDefault();
var url = $(this).attr("href");
if (url.indexOf("#") == 0) {
$(url).modal('open');
} else {
$.get(url, function(data) {
$('

' + data + "
").modal().on("shown", function () {
$('input:visible:enabled:first').focus();
}).on("hidden", function () {
$(this).remove();
});
});
}
});

@polds

This comment has been minimized.

Show comment Hide comment
@polds

polds Nov 22, 2012

The following is a good hack on how to fix this.remove() (worked for me anyways)

  event.preventDefault();
  var url = $(this).attr("href");
  if (url.indexOf("#") == 0) {
      $(url).modal('open');
  } else {
      $.get(url, function(data) {
          $('<div class="modal hide fade">' + data + '</div>').modal().on('hidden', function(){
           $('.modal-backdrop.in').each(function(i) {
              $(this).remove();
          });
        });
      }).success(function() { $('input:text:visible:first').focus(); });
  }

polds commented Nov 22, 2012

The following is a good hack on how to fix this.remove() (worked for me anyways)

  event.preventDefault();
  var url = $(this).attr("href");
  if (url.indexOf("#") == 0) {
      $(url).modal('open');
  } else {
      $.get(url, function(data) {
          $('<div class="modal hide fade">' + data + '</div>').modal().on('hidden', function(){
           $('.modal-backdrop.in').each(function(i) {
              $(this).remove();
          });
        });
      }).success(function() { $('input:text:visible:first').focus(); });
  }
@eusonlito

This comment has been minimized.

Show comment Hide comment
@eusonlito

eusonlito Jan 4, 2013

jquery returns an error.

I think that this function needs a return false at end (I'm using bootstrap 2.1.1):

$("[data-toggle=modal]").on('click', function(event){
  event.preventDefault();

  var url = $(this).attr("href");

  if (url.indexOf("#") == 0) {
      $(url).modal('open');
  } else {
      $.get(url, function(data) {
          $('
' + data + '
').modal().on('hidden', function(){ $('.modal-backdrop.in').each(function(i) { $(this).remove(); }); }); }).success(function() { $('input:text:visible:first').focus(); }); } return false; });

jquery returns an error.

I think that this function needs a return false at end (I'm using bootstrap 2.1.1):

$("[data-toggle=modal]").on('click', function(event){
  event.preventDefault();

  var url = $(this).attr("href");

  if (url.indexOf("#") == 0) {
      $(url).modal('open');
  } else {
      $.get(url, function(data) {
          $('
' + data + '
').modal().on('hidden', function(){ $('.modal-backdrop.in').each(function(i) { $(this).remove(); }); }); }).success(function() { $('input:text:visible:first').focus(); }); } return false; });
@asdaru

This comment has been minimized.

Show comment Hide comment
@asdaru

asdaru Jan 31, 2013

If you will need close modal from script, it will be problem
I will be add parse "date-target" attribute and add Id to modal.
And I have error in Crome when I open several modal without refresh page I submit not last form. I chanded remove modal to remove by "Id" and for my tasks it work right

$(document).ready(function() {
    $('[data-toggle="modal"]').click(function(e) {
        e.preventDefault();
        var data_target=$(this).attr('data-target');
        if (data_target=="#") {
            data_target="#modal"+parseInt(Math.random()*1000);

        }
        var url = $(this).attr('href');
        if (url.indexOf('#') == 0) {
            $(url).modal('open');
        } else {
            $.get(url, function(data) {
                        $('<div class="modal hide fade" id="'+data_target.replace("#","")+'">' + data + '</div>')
                                .modal()
                                .on('hidden', function(){
                                        $(data_target).remove();
                                 });
                    }).success(function() {
                        $('input:text:visible:first').focus();
                    });
        }
    });
    return false;
});

asdaru commented Jan 31, 2013

If you will need close modal from script, it will be problem
I will be add parse "date-target" attribute and add Id to modal.
And I have error in Crome when I open several modal without refresh page I submit not last form. I chanded remove modal to remove by "Id" and for my tasks it work right

$(document).ready(function() {
    $('[data-toggle="modal"]').click(function(e) {
        e.preventDefault();
        var data_target=$(this).attr('data-target');
        if (data_target=="#") {
            data_target="#modal"+parseInt(Math.random()*1000);

        }
        var url = $(this).attr('href');
        if (url.indexOf('#') == 0) {
            $(url).modal('open');
        } else {
            $.get(url, function(data) {
                        $('<div class="modal hide fade" id="'+data_target.replace("#","")+'">' + data + '</div>')
                                .modal()
                                .on('hidden', function(){
                                        $(data_target).remove();
                                 });
                    }).success(function() {
                        $('input:text:visible:first').focus();
                    });
        }
    });
    return false;
});
@JotaBola

This comment has been minimized.

Show comment Hide comment
@JotaBola

JotaBola Mar 16, 2013

Hi

Thank you very much for the trick, i didn't know how to do to change the modal with ajax.
I tried it and it works, but there are some mistakes (there is one div more each click), so i change a line and now it works without problem.

I replace this line (in custom.js) :

$('<div class="modal hide fade">' + data + '</div>').modal();

by :

$('.modal-body').html(data);

I hope it can be helpful and my English is not to bad^^

JB

Hi

Thank you very much for the trick, i didn't know how to do to change the modal with ajax.
I tried it and it works, but there are some mistakes (there is one div more each click), so i change a line and now it works without problem.

I replace this line (in custom.js) :

$('<div class="modal hide fade">' + data + '</div>').modal();

by :

$('.modal-body').html(data);

I hope it can be helpful and my English is not to bad^^

JB

@mdsrosa

This comment has been minimized.

Show comment Hide comment
@mdsrosa

mdsrosa Mar 18, 2013

Thank you. This was very helpfull.

I also replace:

<div class="modal hide fade">' + data + '</div>

with

$('.modal-body').html(data);

Another thing: at the first time you click, the ajax is called twice. But, if you click again, the ajax is called just once. I think that the "event.preventDefault();" is not getting executed at the first click...any thoughts?

mdsrosa commented Mar 18, 2013

Thank you. This was very helpfull.

I also replace:

<div class="modal hide fade">' + data + '</div>

with

$('.modal-body').html(data);

Another thing: at the first time you click, the ajax is called twice. But, if you click again, the ajax is called just once. I think that the "event.preventDefault();" is not getting executed at the first click...any thoughts?

@JotaBola

This comment has been minimized.

Show comment Hide comment
@JotaBola

JotaBola Mar 19, 2013

Hi !

event.preventDefault() is used to stay in the same page. Without it you'll go to the link.

I had the same problem too (i saw it after posting). So what i did is :

$('[data-toggle="modal"]').click(function(e) {
        e.preventDefault();
        if($('#editer-image').attr('aria-hidden'))
        {
            var url = $(this).attr('href');
            if (url.indexOf('#') == 0)
            {
                $(url).modal('open');
            } else {
                $.get(url, function(data){
                        $('.modal-body').html(data);
                }).success(function(){
                        $('input:text:visible:first').focus();
                    });
            }
        }
    });

#editer-image is my div, which is in my modal. After the first click, it gets the attribute aria-hidden (true when the modal is on and false when i close the modal).

With this trick, i call just one time the ajax request.

Hi !

event.preventDefault() is used to stay in the same page. Without it you'll go to the link.

I had the same problem too (i saw it after posting). So what i did is :

$('[data-toggle="modal"]').click(function(e) {
        e.preventDefault();
        if($('#editer-image').attr('aria-hidden'))
        {
            var url = $(this).attr('href');
            if (url.indexOf('#') == 0)
            {
                $(url).modal('open');
            } else {
                $.get(url, function(data){
                        $('.modal-body').html(data);
                }).success(function(){
                        $('input:text:visible:first').focus();
                    });
            }
        }
    });

#editer-image is my div, which is in my modal. After the first click, it gets the attribute aria-hidden (true when the modal is on and false when i close the modal).

With this trick, i call just one time the ajax request.

@StevenHB

This comment has been minimized.

Show comment Hide comment
@StevenHB

StevenHB May 25, 2013

The ajax loads perfectly, however within the popup I have a couple of links/forum posts. How can I keep the modal open without reloading the main page and just post content within the modal?

The ajax loads perfectly, however within the popup I have a couple of links/forum posts. How can I keep the modal open without reloading the main page and just post content within the modal?

@T0MASD

This comment has been minimized.

Show comment Hide comment
@T0MASD

T0MASD May 28, 2013

Thanks for the snippet, I'm trying to work out how to set the button label to "loading" while modal (which takes time to generate) is loading. Any help much appreciated!

T0MASD commented May 28, 2013

Thanks for the snippet, I'm trying to work out how to set the button label to "loading" while modal (which takes time to generate) is loading. Any help much appreciated!

@feryardiant

This comment has been minimized.

Show comment Hide comment
@feryardiant

feryardiant May 31, 2013

Hi! thanks for the gist, very useful and everything looks works fine. but when I open the console log this error appear everytime I click the trigger button :

Uncaught Error: Syntax error, unrecognized expression: http://project.local/bpmpt/data/administrasi/properti/form

i've try to change it into:

$('a[data-toggle="modal"]').click( function (e) {
    e.preventDefault();
    var btn = $(this),
        url = btn.attr('href')

    if (url.indexOf('#') == 0) {
        $(url).modal('open')
    } else {
        btn.button('loading')

        $.get(url, function (data) {
            $('.modal').modal().on('shown', function () {
                $(this).html(data)

                btn.button('reset')
            }).on('hidden', function () {
                $(this).html('')
            })
        })
    }
})

but nothing help, any other idea?

Hi! thanks for the gist, very useful and everything looks works fine. but when I open the console log this error appear everytime I click the trigger button :

Uncaught Error: Syntax error, unrecognized expression: http://project.local/bpmpt/data/administrasi/properti/form

i've try to change it into:

$('a[data-toggle="modal"]').click( function (e) {
    e.preventDefault();
    var btn = $(this),
        url = btn.attr('href')

    if (url.indexOf('#') == 0) {
        $(url).modal('open')
    } else {
        btn.button('loading')

        $.get(url, function (data) {
            $('.modal').modal().on('shown', function () {
                $(this).html(data)

                btn.button('reset')
            }).on('hidden', function () {
                $(this).html('')
            })
        })
    }
})

but nothing help, any other idea?

@axar

This comment has been minimized.

Show comment Hide comment
@axar

axar May 31, 2013

Feryardiant,

I was having the same issue. It's because of data-toggle="modal" change it to something else like data-foo="modal"
on the jQuery filter as well as the Anchor.

a href="asdf/asdf/asdf" data-foo="modal">
.... ....
$('a[data-foo="modal"]').click( function (e) {

axar commented May 31, 2013

Feryardiant,

I was having the same issue. It's because of data-toggle="modal" change it to something else like data-foo="modal"
on the jQuery filter as well as the Anchor.

a href="asdf/asdf/asdf" data-foo="modal">
.... ....
$('a[data-foo="modal"]').click( function (e) {

@feryardiant

This comment has been minimized.

Show comment Hide comment
@feryardiant

feryardiant Jun 5, 2013

thanks @axar you're right. as you said, i do try to change data-toggle="modal" but not in another data attribute, i put it in class="toggle-modal" and the JS like so.

$('a.toggle-modal').click( function (e) {
...

and now it's works well ^_^

thanks @axar you're right. as you said, i do try to change data-toggle="modal" but not in another data attribute, i put it in class="toggle-modal" and the JS like so.

$('a.toggle-modal').click( function (e) {
...

and now it's works well ^_^

@mgostick

This comment has been minimized.

Show comment Hide comment
@mgostick

mgostick Jul 5, 2013

Maybe some of you are looking to force the modal to load fresh content on each pop, I found this instead:

  $('.modal').on('hidden', function() {
    $(this).data('modal', null);
  });

mgostick commented Jul 5, 2013

Maybe some of you are looking to force the modal to load fresh content on each pop, I found this instead:

  $('.modal').on('hidden', function() {
    $(this).data('modal', null);
  });
@eduardouio

This comment has been minimized.

Show comment Hide comment
@eduardouio

eduardouio Jul 6, 2013

It's great
tanks

Esto due genial, gracias por compartir

It's great
tanks

Esto due genial, gracias por compartir

@jpcmf

This comment has been minimized.

Show comment Hide comment
@jpcmf

jpcmf Jul 26, 2013

Any way to add Previous/Next navigation with href attr?

jpcmf commented Jul 26, 2013

Any way to add Previous/Next navigation with href attr?

@CoffeeMusicCode

This comment has been minimized.

Show comment Hide comment
@CoffeeMusicCode

CoffeeMusicCode Jul 29, 2013

Just wanted to say thanks for this.

Just wanted to say thanks for this.

@curtisblackwell

This comment has been minimized.

Show comment Hide comment
@curtisblackwell

curtisblackwell Aug 9, 2013

When trying to fix the two background divs problem mentioned by @vcivelek, I discovered this code is superfluous.

Check out the remote option in the docs.

When trying to fix the two background divs problem mentioned by @vcivelek, I discovered this code is superfluous.

Check out the remote option in the docs.

@androsije

This comment has been minimized.

Show comment Hide comment
@androsije

androsije Aug 18, 2013

How work modal with mysql ( href="#myModal<?php echo $row->id;?"> class="thumbnail" data-toggle="modal" )
I am a new bee in php and I know I'm a little messed up, please help?

How work modal with mysql ( href="#myModal<?php echo $row->id;?"> class="thumbnail" data-toggle="modal" )
I am a new bee in php and I know I'm a little messed up, please help?

@jonhkr

This comment has been minimized.

Show comment Hide comment
@jonhkr

jonhkr Aug 19, 2013

I made some modifications to work with bootstrap 3 and ladda loading buttons support
see my fork at: https://gist.github.com/jonhkr/6269312

jonhkr commented Aug 19, 2013

I made some modifications to work with bootstrap 3 and ladda loading buttons support
see my fork at: https://gist.github.com/jonhkr/6269312

@johnlabu

This comment has been minimized.

Show comment Hide comment
@johnlabu

johnlabu Aug 22, 2013

Hi drewjoh, nice code.
You saved me 20mins.

Hi drewjoh, nice code.
You saved me 20mins.

@imkamesh

This comment has been minimized.

Show comment Hide comment
@imkamesh

imkamesh Aug 28, 2013

can we able to open the modal which contains external link or .aspx or .php file?

can we able to open the modal which contains external link or .aspx or .php file?

@ashwinkumarDhi

This comment has been minimized.

Show comment Hide comment
@ashwinkumarDhi

ashwinkumarDhi Sep 5, 2013

I am using following code for displaying remote page into modal.....
i am using hyperlink on image & one label value
these 2 are the columns of table & they are sortable columns,
if i sort then click hyperlink after that modal is not opening here is my javascript code,
however it works fine for ie 8 but
in fireforx & ie > 8
it requires to refresh the page

$(document).ready(
function(){
$('[data-toggle="modal"]').click(function(e) {
e.preventDefault();

            var url = $(this).attr('href');
            if (url.indexOf('#') == 0) {

                $(url).modal('open');
            } else {

// alert("else url["+url+"]");
$.get(url, function(data) {
$('

' + data + '
').modal().on('hidden', function () { $(this).remove(); });;
}).success(function() { $('input:text:visible:first').focus(); });
}
});
});

I am using following code for displaying remote page into modal.....
i am using hyperlink on image & one label value
these 2 are the columns of table & they are sortable columns,
if i sort then click hyperlink after that modal is not opening here is my javascript code,
however it works fine for ie 8 but
in fireforx & ie > 8
it requires to refresh the page

$(document).ready(
function(){
$('[data-toggle="modal"]').click(function(e) {
e.preventDefault();

            var url = $(this).attr('href');
            if (url.indexOf('#') == 0) {

                $(url).modal('open');
            } else {

// alert("else url["+url+"]");
$.get(url, function(data) {
$('

' + data + '
').modal().on('hidden', function () { $(this).remove(); });;
}).success(function() { $('input:text:visible:first').focus(); });
}
});
});

@ashwinkumarDhi

This comment has been minimized.

Show comment Hide comment
@ashwinkumarDhi

ashwinkumarDhi Sep 5, 2013

Please help me out the above mentined issue? is it true that due to sorting Document i modified & that $(document).ready() function is unable to listen those changes..what is the solution for this, please get out me this issue..

Please help me out the above mentined issue? is it true that due to sorting Document i modified & that $(document).ready() function is unable to listen those changes..what is the solution for this, please get out me this issue..

@Sethathi

This comment has been minimized.

Show comment Hide comment
@Sethathi

Sethathi Oct 24, 2013

Thanks!!!!!!!!!!!!!

Thanks!!!!!!!!!!!!!

@archonic

This comment has been minimized.

Show comment Hide comment
@archonic

archonic Nov 5, 2013

Thanks @drewjoh! This saves me from having a totally absurd amount of static HTML for various modals.

I got rid of the success in event in favor of the autofocus attribiute. (http://www.w3.org/wiki/HTML5_form_additions#autofocus)

archonic commented Nov 5, 2013

Thanks @drewjoh! This saves me from having a totally absurd amount of static HTML for various modals.

I got rid of the success in event in favor of the autofocus attribiute. (http://www.w3.org/wiki/HTML5_form_additions#autofocus)

@Manawyrm

This comment has been minimized.

Show comment Hide comment
@Manawyrm

Manawyrm Aug 19, 2014

Thanks!

Thanks!

@aimanbaharum

This comment has been minimized.

Show comment Hide comment
@aimanbaharum

aimanbaharum Aug 22, 2014

Thanks for a very straighforward script

Thanks for a very straighforward script

@shebinleo

This comment has been minimized.

Show comment Hide comment
@shebinleo

shebinleo Feb 5, 2015

Thanks, very useful.

Thanks, very useful.

@sayolie

This comment has been minimized.

Show comment Hide comment
@sayolie

sayolie May 13, 2016

Thanks @drewjoh great job; please can someone help me on how to pass variable to a remote php file using Ajax $.get, thanks

sayolie commented May 13, 2016

Thanks @drewjoh great job; please can someone help me on how to pass variable to a remote php file using Ajax $.get, thanks

@alexseif

This comment has been minimized.

Show comment Hide comment
@alexseif

alexseif May 13, 2016

Good solution, but the problem here is that the function get's triggered twice, I changed it to
data-toggle="ajax-modal"

Good solution, but the problem here is that the function get's triggered twice, I changed it to
data-toggle="ajax-modal"

@navdeepsingh

This comment has been minimized.

Show comment Hide comment
@navdeepsingh

navdeepsingh Jul 4, 2016

To remove dynamic modal loaded in DOM. the following works for me.
$('<div id="clue-modal" class="modal fade" tabindex="-1" role="dialog"><div class="modal-dialog"><div class="modal-content">' + data + '</div></div></div>').modal().on("hidden.bs.modal", function () { $(this).remove(); });

Can check https://gist.github.com/navdeepsingh/de4718a074b812637330f668d2a73b7e

Thanks!!

navdeepsingh commented Jul 4, 2016

To remove dynamic modal loaded in DOM. the following works for me.
$('<div id="clue-modal" class="modal fade" tabindex="-1" role="dialog"><div class="modal-dialog"><div class="modal-content">' + data + '</div></div></div>').modal().on("hidden.bs.modal", function () { $(this).remove(); });

Can check https://gist.github.com/navdeepsingh/de4718a074b812637330f668d2a73b7e

Thanks!!

@lonely173

This comment has been minimized.

Show comment Hide comment
@lonely173

lonely173 Sep 8, 2016

Gracias,

Gracias,

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment