Jquery function with myInterval, onclick, onready

onload then check if “.stime[val!=‘’]” then run function recalcPrices() with setInterval, which is okay.
My question is, how to run the recalcPrices() with setInterval when I clicked “.btnStart” ??

    function recalcPrices()
    {
        $.each($(".stime[value!='']"), function(k, v) {
            let tid = $(v).data("tid")
            let bid = $(".bid[data-tid="+tid+"]").val()
            let start = $(".sdate[data-tid="+tid+"]").val() + ' ' + $(".stime[data-tid="+tid+"]").val()
            let end = "";
            if ($(".etime[data-tid="+tid+"]").val() != '') {
                $end = $(".edate[data-tid="+tid+"]").val() + ' ' + $(".etime[data-tid="+tid+"]").val()
            }
            $.get(
                "",
                {"ajax":"getPrice", "start":start, "end":end, "bid":bid},
                function(resp) {                    
                    $(".cold[data-tid="+tid+"]").html(resp)
                    console.log('%c'+tid,'background: #ffc0c0; padding:5px; border-radius: 60%;', start, end, resp)                    
                },
                "TEXT"
            )
        })
    }
    
    $().ready( function() {
        
        $(".stime[val!='']").each( function(k,v) {
            recalcPrices()
            myInterval = setInterval('recalcPrices()', 1000)
        })
        

        $(".sdate").on("change", function() {
            let tid = $(this).data("tid")
            let bid = $(this).data("bid")

            console.log(tid + "." + bid + "Change event" + this.value);
        })

        $(".btnStart").click( function() {
            var tid = $(this).data("tid")
            $.get(
                "",
                {"ajax":"startBooking", "tid":tid},
                function(resp) {
                    $(".sdate[data-tid="+tid+"]").val(resp.sdate).show()
                    $(".stime[data-tid="+tid+"]").val(resp.start).show()
                    $(".bid[data-tid="+tid+"]").val(resp.bid)
                    
                },
                "JSON"
            )
            $(this).hide()
            $(".btnFinish[data-tid="+tid+"]").show()
            $(".cold[data-tid="+tid+"]").html('$0.00')
            $(".tblimg[data-tid="+tid+"]").removeClass("w3-grayscale-max w3-opacity")
            console.log("started")
            //recalcPrices()
            //myInterval = setInterval('recalcPrices()', 1000)
        })

how is it running now? is it a default behavior?

if so, how else do you want that to run?

it seems just not start and no error.

so this block of code is not running?!

you may go to the site have a look.
" $(“.stime[val!=‘’]”).each( function(k,v) {" this code under .ready work fine after refresh website. But i would like to make it have the same behaviour when i click Start button.

it’s within .ready situation. I am sure that if stime value=‘’, it do nothing.
so need to refresh if one of the stime value!=‘’.

But i would like to keep it not refresh and click start button to make it happen, is it clear?

sorry i was busy with one of my heroku app deployment issue…

let me have a look, even though i aint coded with jquery like in ages!! so not sure i can help you with “code” but maybe with “suggestive reasoning”, if thats okay with you :slight_smile:

also i dont see any codes there!! and im definitely not “literate” with php at alllllllll. :grin:

Question, when the page loads, you want the setIntervals for each of the tables to start and only stop when Finish is clicked for a given table or do only want a setInterval for any given table to start when the Start button is clicked and then stop when Finish for that same table is clicked?

i want below.

  1. when the page loads, check each table and setIntervals (it’s works)
  2. when click start, setIntervals for clicked table (Not work)
  3. when click finish, clearintervals for clicked table (Not work)

following are the clicked finish js.

        $(".btnFinish").click( function() {
            var tid = $(this).data("tid")
            let start = $(".sdate[data-tid="+tid+"]").val() + ' ' + $(".stime[data-tid="+tid+"]").val() + ":00"
            $.get(
                "",
                {"ajax":"finishBooking", "start":start},
                function(resp) {
                    
                    $(".etime[data-tid="+tid+"]").val(resp.end).show()
                    $(".edate[data-tid="+tid+"]").val(resp.edate).show()
                },
                "JSON"
            )
            $(this).hide()
            $(".btnPay[data-tid="+tid+"]").show()
            $(".btnPayinvoice[data-tid="+tid+"]").show()
        })

Check each table for what? Why would you start the intervals before Start is clicked? I guess I am not understanding the purpose of the app in general. What problem is it solving?

Check each table for what? Why would you start the intervals before Start is clicked?
Ans: it’s mainly for, if the page reloaded, the realtime calculation can be started.

What problem is it solving?
2. when click start, setIntervals for clicked table (Not work)
3. when click finish, clearintervals for clicked table (Not work)