Friday, 29 November 2019

How is it possible to stop a debounced Rxjs Observable?

I created an observable, which will fire 3 seconds after the last change is made, and calls the publishChange of the service. It works, but I would like to create a doImmediateChange function, which calls publishChange immediately and stops the debounced observable. How is that possible?

My component:

class MyComponent {
    private updateSubject = new Subject<string>();

    ngOnInit() {
        this.updateSubject.pipe(
            debounceTime(3000),
            distinctUntilChanged()
        ).subscribe(val => {
            this.srv.publishChange(val);
        });
    }

    doChange(val: string) {
        this.updateSubject.next(val);
    }

    doImmediateChange(val: string) {

        // Stop the current updateSubject if debounce is in progress and call publish immediately
        // ??
        this.srv.publishChange(val);

    }

}


from How is it possible to stop a debounced Rxjs Observable?

typeahead.js - Uncaught TypeError: this.displayText(...).toLowerCase is not a function

I've been messing around with typeahead.js templates. No matter what I do, I keep getting the following error:

Uncaught TypeError: this.displayText(...).toLowerCase is not a function in typeahead.min.js:2

My JavaScript looks as following:

$('#search-field').typeahead({
    display: 'value',
    templates: {
        suggestion: function(data) {
            return '<p><strong>' + data.value + '</strong> – ' + data.titleid + '</p>';
        }
    },
    source: function (query, process) {
        return $.get(root + '/api/search.php', { query: query }, function (data) {
            console.log('data:' + data); //outputs the JSON correctly.
            data = $.parseJSON(data);
            return process(data);
        });
    }
});

Where /api/search.php looks like:

[{"value":"Name1","titleid":"Test1"},{"value":"Name2","titleid":"Test2"},{"value":"Name3","titleid":"Test3"}]

I've tried copying code from other examples directly into mine, sometimes even the whole piece, but that didn't solve it either, even though it did work in the example.

How can I solve this, and get the template to work?



from typeahead.js - Uncaught TypeError: this.displayText(...).toLowerCase is not a function

jQuery Scrollbar on window resize not working

I am using jquery scrollbar plugin for my website. Everything working good. But when I window resize in mozilla and make scroll div and resize again its looks uneven scrollbar.

How to make the custom scrollbar will be visible if the browser resize also.

script I have tried:

$('.scroll-lmenu').scrollbar({
    autoUpdate :true,
    autoScrollSize: true
});

image

$(document).ready(function(){
    $('.scrollbar-inner').scrollbar();
});
.scrollbar-inner {
    max-height: 300px;
    overflow: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://gromo.github.io/jquery.scrollbar/jquery.scrollbar.js"></script>
<link href="https://gromo.github.io/jquery.scrollbar/jquery.scrollbar.css" rel="stylesheet"/>
   
    <div class="scrollbar-inner">
        <p class="permanent">
            Simple inner scrollbar over content
        </p>
        <p class="permanent">
            <a href="#anchor">Click to test #anchors</a><br><br>
            <input type="text" value="Use TAB to focus next input" style="max-width:220px; width: 100%;">
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
            scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
            Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
            hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
            pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
            sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
            ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
            nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
            viverra nisi, in interdum massa nibh nec erat.
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
            scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
            Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
            hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
            pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
            sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
            ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
            nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
            viverra nisi, in interdum massa nibh nec erat.
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a,
            scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus.
            Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel
            hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue,
            pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam
            sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare,
            ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget
            nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam
            viverra nisi, in interdum massa nibh nec erat.
        </p>
        <input type="text"><br>
        <h3 id="anchor">Anchor</h3>
    </div>


from jQuery Scrollbar on window resize not working