jQuery load() not working when page is loaded

Question

My jQuery it's not working.

When the page loaded I want to show and hide some element.

It's work fine with change() function but not working when use load()

and this is my code

$(document).ready(function () {
        const text = '.text-type';
        const sticker = '.sticker-type';
        const image = '.image-type';
        var collection = "form div[data-form-collection='item'] select";

        $(collection).load(function(){
            var type = $(this).val();
            var row = $(this).closest("[data-form-collection='item']");

            switch (type) {
                case 'text':
                    row.find(text).show();
                    row.find(sticker).hide();
                    row.find(image).hide();
                    break;
                case 'sticker':
                    row.find(text).hide();
                    row.find(sticker).show();
                    row.find(image).hide();
                    break;
                case 'image':
                    row.find(text).hide();
                    row.find(sticker).hide();
                    row.find(image).show();
                    break;
            }
        })
})

What is wrong with my code ?

Thank you.

`load()` ( the way you are trying to use it ) it's deprecated . You should use `on load` instead. But, in your case, it won't work because the select element does not trigger a load event . It is already loaded when the page is loaded. So why you want to use that method ? when do you want to change the text ? — Mihai T, Oct 24 '17 at 11:35
@B.Godoak You don't need to do that. At document ready, the ` — Terry, Oct 24 '17 at 11:39

score 2 · Accepted Answer · edited Oct 24 '17 at 11:35

load() function on jQuery is for window obj or img tag, for other elements not. When you use ready, you can assume its all loaded then you can do the same without the load function.

like this:

$(document).ready(function () {
    const text = '.text-type';
    const sticker = '.sticker-type';
    const image = '.image-type';
    var collection = "form div[data-form-collection='item'] select";

    var type = $(collection).val();
    var row = $(collection).closest("[data-form-collection='item']");

    switch (type) {
        case 'text':
            row.find(text).show();
            row.find(sticker).hide();
            row.find(image).hide();
            break;
        case 'sticker':
            row.find(text).hide();
            row.find(sticker).show();
            row.find(image).hide();
            break;
        case 'image':
            row.find(text).hide();
            row.find(sticker).hide();
            row.find(image).show();
            break;
     }

})

Sorry for my bad English...

Wlad · Answer 2 · 2017-10-24T11:40:30.250

0

The .load() gets fired after it got loaded with .load(url, callback)

JQuery Load

Description: Load data from the server and place the returned HTML into the matched element

I guess you are searching for .ready()
Jquery Ready

Description: Specify a function to execute when the DOM is fully loaded.

Btw, the $(document).ready(function () { is fired after the page is loaded

edited Oct 24 '17 at 11:40

answered Oct 24 '17 at 11:30

Wlad

25
7

Not necessarily: that is true for later versions of jQuery (>= v3.0), but the distinction is not drawn in older versions such as v1 and v2. – Terry Oct 24 '17 at 11:31

jQuery load() not working when page is loaded

2 Answers2