load dynamic data from remote url into a bootstrap modal pop up

Question

I have the following href link

<a href="{$data.base_url}find_dates.html"  data-toggle="modal" style="color:#fff;" class="modal-ajax">Click Here to View data</a>

and the pop is showing on page reload, but I want to show it only on click.

$('.modal-ajax').modal();

Now the page is redirect into url. I want to show the pop up

I didnt wrote any js code. i tried this now

$('a').click( function(e) {
    e.preventDefault(); 
    $('.modal-ajax').modal();
    return true; 
} );

but it raises $('.modal-ajax').modal(); is not a function error

Possible duplicate of [How to open a Bootstrap modal window using jQuery?](https://stackoverflow.com/questions/13183630/how-to-open-a-bootstrap-modal-window-using-jquery) — Masoud Keshavarz, Aug 26 '19 at 06:15
No. its differnt. it was working before but now something happened... i didnt wrote any javascript cod — Sherin Reynold, Aug 26 '19 at 06:19
you want to open modal on anchor click , So you need to use ID or class of the Modal i.e $("#modalID") or $(".ModalClass") .Try this way — Ricky, Aug 26 '19 at 06:38

Muhammed Shihabudeen Labba A · Answer 1 · 2019-08-26T06:36:03.833

0

Please try this

<a href="#" data-id="{$data.base_url}find_dates.html"  data-toggle="modal" style="color:#fff;" class="modal-ajax">Click Here to View data</a>


$('.modal-ajax').on('click', function() {
    var url = $(this).attr('data-id');
    //place this value wherever you want in modal.
    $('#openModal').show();
});

edited Aug 26 '19 at 06:36

answered Aug 26 '19 at 06:06

Muhammed Shihabudeen Labba A

587
6
21

sorry here the case is differnt – Sherin Reynold Aug 26 '19 at 06:20
Ok, If you don't want to redirect, may I know the purpose of showing the url in href? – Muhammed Shihabudeen Labba A Aug 26 '19 at 06:23
to load that url data into pop up is what i m tdoing – Sherin Reynold Aug 26 '19 at 06:31
@SherinReynold, please check the answer now – Muhammed Shihabudeen Labba A Aug 26 '19 at 06:36
i didnt have any openModal – Sherin Reynold Aug 26 '19 at 06:37
@SherinReynold, change that to your modal id. – Muhammed Shihabudeen Labba A Aug 26 '19 at 06:38
Uncaught Error: Syntax error, unrecognized expression: http://url error – Sherin Reynold Aug 26 '19 at 06:43

Hasta Dhana · Answer 2 · 2019-08-26T06:12:45.453

0

You could simply put a comment on the javascript code that trigger the modal :

// $('.modal-ajax').modal();

Then add a click event listener for the element you wish to be clicked :

$('a.modal-ajax').click(function(event) {
    event.preventDefault();
    $('.modal-ajax').modal();
});

edited Aug 26 '19 at 06:12

answered Aug 26 '19 at 06:08

Hasta Dhana

4,699
7
17
26

sorry the page is redirecting before showing pop up – Sherin Reynold Aug 26 '19 at 06:11
I've changed my answer, please check again – Hasta Dhana Aug 26 '19 at 06:13
still redirecting. pls help – Sherin Reynold Aug 26 '19 at 06:15
Did the page still redirecting **after** you click the link? – Hasta Dhana Aug 26 '19 at 06:20
hi sir i wrote somethinh like this $('.modal-ajax').click(function(event) { event.preventDefault(); $('.modal-ajax').modal(); return true }); – Sherin Reynold Aug 26 '19 at 07:08
but it shows pop up only on first time. but on second time i shows ....modal() is not a function – Sherin Reynold Aug 26 '19 at 07:09

load dynamic data from remote url into a bootstrap modal pop up

2 Answers2