Why Ajax is not populating DIV on 2nd click?

Question

I am loading data from URL inside a TAB div, data loads successfully on first request/click but on 2nd request/click it goes to the target link and doesn't populate the target DIV.

Anchor:

<li><a data-toggle="tabAjax" href="http://site.cx/admin/get-coach-stylish-view?userId={{userId}}" id="ajax_tab" class="media_node active span" data-target="#coach-view-stylish-ajax" rel="tooltip">Coach View (Stylised)</a></li>

Div to populate with DATA:

<!-- Coach View Stylised -->
<div id="coach-view-stylish-ajax">
</div>
<!-- Coach View Stylised End -->

JS:

<script>

$('[data-toggle="tabAjax"]').click(function(e) {
    e.preventDefault();
    var $this = $(this),
        loadUrl = $this.attr('href'),
        target = $this.attr('data-target');

    $.get(loadUrl, function(data) {
        $(target).html(data);
    });

    $this.tab('show');
    return false;
});

</script>

You could try on method instead of click $( document ).on( "click", '[data-toggle="tabAjax"]' , function( event ){ // your code }); — moshiuramit, Sep 02 '18 at 08:24
@moshiuramit Thanks I combined the below answer with your suggestion and it worked :) — Imad uddin, Sep 02 '18 at 08:38

score 0 · Accepted Answer · answered Sep 02 '18 at 08:15

0

1- try to put a debugger in your code, and check that the code is being called on 2nd click. If not, then you need to rebind the click event.

2- You can try this way

<li><a data-toggle="tabAjax" href="#" data-href="http://site.cx/admin/get-coach-stylish-view?userId={{userId}}" id="ajax_tab" class="media_node active span" data-target="#coach-view-stylish-ajax" rel="tooltip">Coach View (Stylised)</a></li>

make href="#" and store url in data-href="..."

and in your javascript

<script>

$('[data-toggle="tabAjax"]').click(function(e) {
    e.preventDefault();
    var $this = $(this),
        loadUrl = $this.attr('data-href'), //change href to data-href
        target = $this.attr('data-target');

    $.get(loadUrl, function(data) {
        $(target).html(data);
    });

    $this.tab('show');
    return false;
});

</script>

answered Sep 02 '18 at 08:15

Arsalan Hussain

66
4

it blocks going to the target url but it hangs the page and loads nothing now! – Imad uddin Sep 02 '18 at 08:35
@Imaduddin done? put debugger inside the click event and debug where it fails. – Arsalan Hussain Sep 02 '18 at 10:59
yes it worked! How to put debugger can you please elaborate? – Imad uddin Sep 02 '18 at 14:16
just write debugger; wherever you want to debug. for example `code` and before loading the page, make sure the inspect element console is open. It will hit the debug line. – Arsalan Hussain Sep 03 '18 at 05:34
have a look at this url https://stackoverflow.com/questions/66420/how-do-you-launch-the-javascript-debugger-in-google-chrome – Arsalan Hussain Sep 03 '18 at 05:38

Why Ajax is not populating DIV on 2nd click?

1 Answers1