Question 69620 in Ajax Question posted in
You can find the official documentation here.

how to stop the first click loop after click next run – Jquery ajax

every click I do a loop in js, but when I click next the first loop is still running, finally there is a double loop on the same id, how do I stop the first loop and replace it with the next loop?

This is a program for creating chats, so when I click on person A, a chat with person A appears, but now what happens if I click on person A and B, the ID to display the chat alternately between Person A and Person B.

file.js

var base_url = window.location.origin + '/' + window.location.pathname.split('/')[1] + '/';

$(document).ready(function() {
    list()
})

function list() {
    setTimeout(function() {
        $.ajax({
            method: "GET",
            url: base_url + 'admin/pesan/get_list',
            dataType: "JSON",
            success: function(data) {
                $('#list_chat').empty()
                    // console.log(data[0].date_add)
                $.each(data, function(i, data) {
                    var temp = null
                    var nama = null
                    var id = null
                    if (data.nama_pengirim == 'Admin') {
                        nama = data.nama_penerima
                        id = data.id_penerima
                    } else {
                        nama = data.nama_pengirim
                        id = data.id_pengirim
                    }
                    // console.log(id)
                    if (temp != nama) {
                        $('#list_chat').append(
                            `<div class="d-flex flex-row mb-1 border-bottom pb-3 mb-3">
                                <a class="d-flex klik_perusahaan" href="#" data-id="` + id + `">
                                    <img alt="Profile Picture" src="` + base_url + `assets/template/img/profile-pic-l.jpg" class="img-thumbnail border-0 rounded-circle mr-3 list-thumbnail align-self-center xsmall">
                                </a>
                                <div class="d-flex flex-grow-1 min-width-zero">
                                    <div class="pl-0 align-self-center d-flex flex-column flex-lg-row justify-content-between min-width-zero">
                                        <div class="min-width-zero">
                                            <a href="#" data-id="` + id + `">
                                                <p class=" mb-0 truncate">` + data.badan_hukum + `. ` + nama + `</p>
                                            </a>
                                            <p class="mb-1 text-muted text-small">` + new Date(data.date_add).getHours() + ":" + new Date(data.date_add).getMinutes() + `</p>
                                        </div>
                                    </div>
                                </div>
                            </div>`
                        )
                    }
                });
            }
        });
        list();
    }, 1000);
}

$('#firstFull').on('click', '.klik_perusahaan', function() {
    var id = $(this).data('id')
    show_pesan(id)
})

function show_pesan(id) {
    setTimeout(function() {
        console.log(id)
        $.ajax({
            type: "post",
            dataType: "json",
            url: base_url + 'admin/pesan/get_pesan',
            data: { 'id': id },
            success: function(data) {
                var nama = null
                if (data[0].nama_pengirim == 'Admin') {
                    nama = data[0].nama_penerima
                } else {
                    nama = data[0].nama_pengirim
                }
                $('.chat-app').empty()
                $('.chat-app').append(
                    `<div class="d-flex flex-row justify-content-between mb-3 chat-heading-container">
                        <div class="d-flex flex-row chat-heading">
                            <a class="d-flex" href="#">
                                <img alt="Profile Picture" src="` + base_url + `assets/template/img/profile-pic-l.jpg" class="img-thumbnail border-0 rounded-circle ml-0 mr-4 list-thumbnail align-self-center small">
                            </a>
                            <div class=" d-flex min-width-zero">
                                <div class="card-body pl-0 align-self-center d-flex flex-column flex-lg-row justify-content-between min-width-zero">
                                    <div class="min-width-zero">
                                        <a href="#">
                                            <p class="list-item-heading mb-1 truncate ">` + data[0].badan_hukum + `. ` + nama + `</p>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="separator mb-5"></div>`
                )
                $.each(data, function(i, data) {
                    if (data.id_pengirim != 'Admin') {
                        $('.chat-app').append(
                            `<div class="card d-inline-block mb-3 float-left mr-2">
                                <div class="position-absolute pt-1 pr-2 r-0">
                                    <span class="text-extra-small text-muted white">09:30</span>
                                </div>
                                <div class="card-body" style="background-color:grey; border-radius:10px !important">
                                    <div class="d-flex flex-row pb-2">
                                        <a class="d-flex" href="#">
                                            <img alt="Profile Picture" src="` + base_url + `assets/template/img/profile-pic-l.jpg" class="img-thumbnail border-0 rounded-circle mr-3 list-thumbnail align-self-center xsmall">
                                        </a>
                                        <div class="d-flex flex-grow-1 min-width-zero">
                                            <div class="m-2 pl-0 align-self-center d-flex flex-column flex-lg-row justify-content-between min-width-zero">
                                                <div class="min-width-zero">
                                                    <p class="mb-0 truncate list-item-heading white">` + data.badan_hukum + `. ` + nama + `</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
    
                                    <div class="chat-text-left">
                                        <p class="mb-0 text-semi-muted white">` + data.pesan + `</p>
                                    </div>
                                </div>
                            </div>
                            <div class="clearfix"></div>`
                        )
                    } else {
                        $('.chat-app').append(
                            `<div class="card d-inline-block mb-3 float-right  mr-2">
                                <div class="position-absolute pt-1 pr-2 r-0">
                                    <span class="text-extra-small text-muted">09:41</span>
                                </div>
                                <div class="card-body">
                                    <div class="d-flex flex-row pb-2">
                                        <a class="d-flex" href="#">
                                            <img alt="Profile Picture" src="` + base_url + `assets/template/img/profile-pic-l-4.jpg" class="img-thumbnail border-0 rounded-circle mr-3 list-thumbnail align-self-center xsmall">
                                        </a>
                                        <div class="d-flex flex-grow-1 min-width-zero">
                                            <div class="m-2 pl-0 align-self-center d-flex flex-column flex-lg-row justify-content-between min-width-zero">
                                                <div class="min-width-zero">
                                                    <p class="mb-0 list-item-heading truncate">Admin</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
    
                                    <div class="chat-text-left">
                                        <p class="mb-0 text-semi-muted">` + data.pesan + `</p>
                                    </div>
                                </div>
                            </div>
                            <div class="clearfix"></div>`
                        )
                    }
                    $('.chat-app').append(
                        `<div class="clearfix"></div>
                        </div>
                        </div>`
                    )
                });
            }
        })
        show_pesan(id)
    }, 1000)
}

view.html

<main>
    <div class="container-fluid">
        <div class="row app-row">
            <div class="col-12 chat-app" id="show_chat">

            </div>
        </div>
    </div>

    <div class="app-menu">
        <ul class="nav nav-tabs card-header-tabs ml-0 mr-0 mb-1" role="tablist">
            <li class="nav-item w-50 text-center">
                <a class="nav-link active" id="first-tab" data-toggle="tab" href="#firstFull" role="tab" aria-selected="true">Messages</a>
            </li>
            <li class="nav-item w-50 text-center">
                <a class="nav-link" id="second-tab" data-toggle="tab" href="#secondFull" role="tab" aria-selected="false">Contacts</a>
            </li>
        </ul>

        <div class="p-4 h-100">
            <div class="form-group">
                <input type="text" class="form-control rounded" placeholder="Search">
            </div>
            <div class="tab-content h-100">
                <div class="tab-pane fade show active  h-100" id="firstFull" role="tabpanel" aria-labelledby="first-tab">

                    <div class="scroll" id="list_chat"></div>

                </div>

                <div class="tab-pane fade  h-100" id="secondFull" role="tabpanel" aria-labelledby="second-tab">
                    <div class="scroll">

                        <?php foreach ($kontak as $data) : ?>
                            <div class="d-flex flex-row mb-3 border-bottom pb-3">
                                <a class="d-flex" href="#">
                                    <img alt="Profile Picture" src="<?= base_url() ?>assets/template/img/profile-pic-l.jpg" class="img-thumbnail border-0 rounded-circle mr-3 list-thumbnail align-self-center xsmall">
                                </a>
                                <div class="d-flex flex-grow-1 min-width-zero">
                                    <div class="m-2 pl-0 align-self-center d-flex flex-column flex-lg-row justify-content-between min-width-zero">
                                        <div class="min-width-zero">
                                            <a href="#">
                                                <p class="mb-0 truncate"><?= $data['badan_hukum'] . '. ' . $data['nama_perusahaan']; ?></p>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        <?php endforeach ?>

                    </div>
                </div>
            </div>
        </div>

        <a class="app-menu-button d-inline-block d-xl-none" href="#">
            <i class="simple-icon-options"></i>
        </a>
    </div>

    <div class="chat-input-container d-flex justify-content-between align-items-center">
        <input class="form-control flex-grow-1" type="text" placeholder="Say something...">
        <div>
            <button type="button" class="btn btn-outline-primary icon-button large">
                <i class="simple-icon-paper-clip"></i>
            </button>
            <button type="button" class="btn btn-primary icon-button large">
                <i class="simple-icon-arrow-right"></i>
            </button>

        </div>
    </div>
</main>

<?php $this->load->view('template/footer') ?>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    i found solution by adding global variable for check in first loop

    file.js

    var z = 0
var id = null

$('#firstFull').on('click', '.klik_perusahaan', function() {
    id = $(this).data('id')
    reload()
})

function reload() {
    if (z == 0) {
        show_pesan(id)
        z = 1
    } else {
        z = 0
    }
}

function show_pesan(id) {
    setTimeout(function() {
        if (z == 1) {
            show_pesan(id)
        } else {
            return reload()
        }
    }, 100)
}

  2. 0

    You need to record a settimeout id globally
    before you create a new settimeout each time
    first determine if an old one exists
    If so, clear the old one before creating a new one
    I hope this will help you

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search