0

I've a Yii2 project, and in my project I've script inside my php file that I used to send data and to show loading icon (.gif).

Script jQuery:

<script>
function displayResult() {
    var x = document.getElementById('bootstrap-duallistbox-selected-list_CustomizeHeader[list_header][]');
    document.getElementById("show").style.visibility = "visible";
    if (x.length == 24) {
        var txt = "";
        var val = "";
        for (var i = 0; i < x.length; i++) {
            txt += x[i].text + ",";
            val += x[i].value + ",";
        }
        window.location = 'result?txt=' + btoa(txt) + '&val=' + btoa(val);
    } else {
        alert("At least 24 Headers!");
    }
}
</script>

Style CSS:

<style>
.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }

#show{
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url(../../web/img/ajax-loader6.gif) center no-repeat #fff;
}
</style>

Php Code:

<p>
    <button type="button" onclick="displayResult()" class="btn btn-success">Process the headers</button>
</p>
    <div id='show'></div>

You can see in my CSS, I call a .gif file. All code and script above successfully display the icon, but the icon showed as .jpg file. It doesn't show moving graphic (.gif).

Anyone know how to display icon .gif (moving graphic) in script?

Thanks

Edited:

I've try to use $("#loading").show(); or $("#loading").fadeIn();, and it give me nothing, this method didn't display the icon.

But if I use document.getElementById("loading").style.visibility = "visible";, it give me an icon displayed, but the icon didn't display as a .gif file, it's displayed as a .jpg file (non-moving graphic).

Improve this question
10
  • Would you mind putting together a minimal running example? Commented Jan 9, 2017 at 10:21
  • By the way, attributes in HTML are marked with double quotes, not single. It should be <div id="show"></div> Commented Jan 9, 2017 at 10:22
  • That's pure javascript? Do you have anything on jquery? Commented Jan 9, 2017 at 10:22
  • @HubertGrzeskowiak, I have to correct you when you're saying you cannot use single quotes arround values of HTML attributes. There is not a mistake there. You can use single quotes as you can use double quotes. Yes, it's better to keep the same pattern when you're using them, but there is no rule you can't use single quotes. Commented Jan 9, 2017 at 10:27
  • 1
    @Ionut You're right. Another lesson learned. Thanks Commented Jan 9, 2017 at 10:34

2 Answers 2

Reset to default
1

You can show the elements by using 

$('#show').show();

and to hide the same use 

$('#show').hide();

Make sure you are using the correct format in gif file (just changing jpeg format to gif won't work). You can try using a sample gif file from google to check this or create a gif here http://www.ajaxload.info/

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

I've tried, but I got nothing. Actually, this method didn't display the icon. It's give me nothing. I've tried many .gif file, I also generate my own from link.
You are using Javascript in your code. Have you included jquery in the <head> tag? You can use this link code.jquery.com/jquery-latest.js
I've tried your suggest and the icon displayed well, but if I didn't add style="display: none" inside div, the icon will always showed without limit time and wouldn't show the page content. But if I add style="display: none", the icon will displayed look like a JPEG file. But if I try in another page, your suggest work well.
Yeah, thanks :D the problem has been solved. I Try your suggestion, and I add this in script before the function $(window).load(function() {$("#loading").fadeOut("slow");});. Thanks a lot @XTremeHell :)
0

This is exactly how i do it in my live project 

//Example function called get accounts
    getAccounts: function () {
     //You can start loading here if the loading icon isnt already displayed by default
            $('.loading').show();

    //Do some function here
    this.$http.get('getRequestRoute', function (data) {
        this.accounts = data;

        //When the function is complete you can hide the loading icon
        $('.loading').hide();

    })

},

The basics here is to show the loading icon where ever you want to show it, either by default or display it when you want it to display, then when a set of actions has been completed you then hide the loading icon.

In the example above my loading icon has a class of loading so it can be easily accessed using jQuery $('.loading').

I use the hide and show methods of jquery which do exactly what you think they do, hide and show an element on the web page. this is essentially how you display and hide a loading icon.

Improve this answer

6 Comments

@KenzieeFlavius I've try your suggestion, but I got nothing. It doesn't display the icon. I dont know why, if I use $('.loading').show(); it give me nothing, and when I use document.getElementById("loading").style.visibility = "visible"; it give me a displayed non-moving icon (just like jpg file format).
@Archibald If the elements ID is loading then do $('#loading').show(); use the # to say youre selecting an ID, in my example its selecting a class
Yeah I know about that, I've been used both of them (# and .)but It also display non-moving icon. It display image like .jpg or .png format.
@Archibald Oh if you want to Icon you have to specify it yourself, you can get a gif image of a loading icon or make a png image spin, thats how you make a loading icon work: loading.io
Actually I'm using .gif file for icon, and I call it in CSS you can see the code above. But I don't know which code is wrong that make me didn't get icon displayed as .gif(moving icon).
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.