CODEWITHSUNDEEP
javascriptjquerycsshidepadding
Bangalore
Bangalore

Reputation: 1580

How to execute Jquery code only once??

I have one jquery method and i used call that method on click of a button . So in that code i have one line " $("#loadingMessage").css('padding-top','6%'); " i need this line execute only once when we call that method first time,later that i gone this line .

So please help me to find one way

the entire method script is below

$('#SearchButton').click(function() {                 
         $(".spinner").css('visibility','hidden');

         $("#loadingMessage").css('padding-top','6%'); //I want this line execute only once, i mean first time

         loaderStart();
         document.getElementById('loadinggif3').style.display = "block";
         $("#loadinggif3").show();
         $(".col-sm-9").css('visibility','hidden');
          var str = $('#SearchText').val();
          str = str.trim();
         if(str=="") return false;
        )};

Upvotes: 17

Views: 90555

Answers (9)

smallYang
smallYang

Reputation: 21

you can use js closure to slove the question.

function once(func) {
    let isExeced = false;
    return function(...arg) {
        if (isExeced) return void 0;
        isExeced = true;
        func.apply(null, arg)
    }
}

Upvotes: 2

Sudip
Sudip

Reputation: 2051

Use a boolean as a global variable, like

var flag = true;

Now, set the condition before the execution, Like

if(flag){  
   $("#loadingMessage").css('padding-top','6%');  
   flag=false;  
}

Upvotes: 17

Omid Ahmadyani
Omid Ahmadyani

Reputation: 1450

you can use bolean in all languages.

in jquery:

var isFirst = true;

if(isFirst){  
$("#loadingMessage").css('padding-top','6%');  
isFirst=false;  
}

Upvotes: 0

quAnton
quAnton

Reputation: 786

If you have to run only once a generic function without a particular event binding then use this.

$(document).one('ready', function(){
   // your code
   $("#id").on("click", function() {
        // other code
   });
});

Useful if inside a function that is called many times (prevents onclick event from beein fired many times)

Upvotes: 5

icaru12
icaru12

Reputation: 1582

Use jQuery .one(). When using .one() method, the event handler function is only run once for each element.

$('#SearchButton').one("click", function () {
    $("#loadingMessage").css('padding-top', '6%');
});

$('#SearchButton').click(function () {
    $(".spinner").css('visibility', 'hidden');

    loaderStart();
    document.getElementById('loadinggif3').style.display = "block";
    $("#loadinggif3").show();
    $(".col-sm-9").css('visibility', 'hidden');
    var str = $('#SearchText').val();
    str = str.trim();
    if (str == "") return false;
});

Upvotes: 24

Mr7-itsurdeveloper
Mr7-itsurdeveloper

Reputation: 1631

use .one for once and use click for others.check below

  <script>
    $(document).ready(function() {
    $('#SearchButton').one('click', function() {
         $("#loadingMessage").css('padding-top','6%'); //I want this line execute only once, i mean first time

    });    


$('#SearchButton').click(function() {                 
         $(".spinner").css('visibility','hidden');


         loaderStart();
         document.getElementById('loadinggif3').style.display = "block";
         $("#loadinggif3").show();
         $(".col-sm-9").css('visibility','hidden');
          var str = $('#SearchText').val();
          str = str.trim();
         if(str=="") return false;
        });


  } ); 

       </script>

Upvotes: 2

low_rents
low_rents

Reputation: 4481

quick and 'dirty' solution:

$.first_time = true;
$('#SearchButton').click(function() {                 
    if($.first_time == true) $("#loadingMessage").css('padding-top','6%');
    $.first_time = false;
});

some explanation: you need a global jQuery variable here ($.first_time in this example), so that it's still known inside the anonymous function of the click event.

Upvotes: 5

Fabricator
Fabricator

Reputation: 12772

If you want to restrict #SearchButton click event to fire only once, use .one method

$('#SearchButton').one('click', function() {
  ...
});

Upvotes: 8

Bas Slagter
Bas Slagter

Reputation: 9929

You can put a check around it that checks the padding-top. If it is not 6%, you need to set it. If it is, you skip the line. Tip: put the result of $('#loadingMessage') in a variable so you do not have to do a second element lookup.

Like so (not tested):

$('#SearchButton').click(function() {                 
    var $loadMsg = $("#loadingMessage");

    if($loadMsg.css('padding-top') !== '6%'){
         $loadMsg.css('padding-top', '6%');
    }
});

This is of course assuming that you want to execute the rest of the code in the click handler every time. Otherwise you can just unbind the click after the handler has been executed. Tip: use the jQuery on() and off() methods instead.

Upvotes: 0

Related Questions