Jquery function with myInterval, onclick, onready

JavaScript
1

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)
        })
2

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

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

3

it seems just not start and no error.

4

so this block of code is not running?!

5

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.

6

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?

7

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:

8

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

image
image1772×591 72.7 KB

10

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()
        })
12

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)

13

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.