CODEWITHSUNDEEP
javascriptjqueryajax
Anson Aştepta
Anson Aştepta

Reputation: 1143

Ajax : only call the ajax if element existing

for example i have a .ajax() function like below:

function trend() {
    return $.ajax({
        url: '/dashboard/getTrend' + '?period=30d' + "&profileId=" + $(".numberOfProfile0").html(), //getting the api
        type: 'get',
        success: function(data) {

        }
    });
}

It works fine,but i'd like to add a if statement to detect whether the $(".numberOfProfile0").html() exist or not, and will only execute when the $(".numberOfProfile0").html()exist

I tried below but it doesn't seem right

if ($(".numberOfProfile0").length) {
    function trend() {
        return $.ajax({
            url: '/dashboard/getTrend' + '?period=30d' + "&profileId=" + $(".numberOfProfile0").html(), //getting the api
            type: 'get',
            success: function(data) {

            }
        });
    }
}

- UPDATE:

Let's show the whole application This is the function:

  if($(".numberOfProfile0").html().length){
                    function trend1() {
                          return $.ajax({
                            url: '/dashboard/getTrend' + '?period=30d' + "&profileId=" + $(".numberOfProfile0").html(), //getting the api
                            type: 'get',
                            success: function(data) {

                            }
                          });
                        }
                    }

$.when(trend1()).done(function(trend1_data) {

                        //do something
}

Upvotes: 2

Views: 1909

Answers (6)

Meer
Meer

Reputation: 248

You should check the existence of the element inside the before_send callback for aJax and cancel the aJax request if not.

function trend() {
        return $.ajax({
            url: '/dashboard/getTrend' + '?period=30d' + "&profileId=" +        $(".numberOfProfile0").html(), 
            type: 'get',
            before_send: : function( xhr ) {
              if ($(".numberOfProfile0").length > 0  && $(".numberOfProfile0").html().trim() == ''){
                return false;
              }
            }
            success: function(data) {

            }
        });
    }

The above code snippet should work in your case.

Upvotes: -1

Arun Sharma
Arun Sharma

Reputation: 1329

Please remember jQuery selector is not a string. Using jQuery, the correct way to do this is something like $('.selector').val().length , $('.selector').html().length Use $(".numberOfProfile0").html().length > 0 in your code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="numberOfProfile0">lorem</div>

<script>
if ( $(".numberOfProfile0").html().length > 0 ) {
  
   alert("success");
  
 // your function:
  
   //function trend() {
        //return $.ajax({
           // url: '/dashboard/getTrend' + '?period=30d' + "&profileId=" + //$(".numberOfProfile0").html(), //getting the api
           // type: 'get',
            //success: function(data) {

            //}
       // });
   // }
  
  }


</script>

Upvotes: 1

guest271314
guest271314

Reputation: 1

You can use .is() within $.when() at ternary to return trend() if element exists, else return null to $.when(); handle element not existing in DOM. Note, you can remove success option at $.ajax() if response is handled at .done()

function trend() {
  return $.ajax({
    url: "/dashboard/getTrend'"
         + "?period=30d" 
         + "&profileId=" 
         + $(".numberOfProfile0").html(), //getting the api
    type: "get"
  });
}

$.when($(".numberOfProfile0").is("*") ? trend() : null)
.done(function(trend1_data) {
  if (trend1_data === null) {
    // handle `$(".numberOfProfile0")` not existing in `DOM`
  } else {
    // handle `trend1_data` not being `null`, element exists
    // do something
  }
})

Upvotes: 1

Teja
Teja

Reputation: 1254

You are doing it wrong! You are defining the function inside the if, where as you should be calling it inside if.

First define the function.

function trend() {
    return $.ajax({
        url: '/dashboard/getTrend' + '?period=30d' + "&profileId=" + $(".numberOfProfile0").html(), //getting the api
        type: 'get',
        success: function(data) {

        }
    });
}

Then call it.

if ($(".numberOfProfile0").length) {
    trend();   
}

OR

You can put the if check inside the function.

function trend() {
        if ($(".numberOfProfile0").length) {
             return $.ajax({
                 url: '/dashboard/getTrend' + '?period=30d' + "&profileId=" + $(".numberOfProfile0").html(), //getting the api
                 type: 'get',
                 success: function(data) {

                 }
             });
       }
       else{
            return -1;
       }
    }

Upvotes: 1

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

use ($(".numberOfProfile0").html() !== '') that mean if element with class .numberOfProfile0 is not empty

function trend() {
   if ($(".numberOfProfile0").html().trim() !== '') { 
     $.ajax({
        url: '/dashboard/getTrend' + '?period=30d' + "&profileId=" + $(".numberOfProfile0").html(), //getting the api
        type: 'get',
        success: function(data) {

        }
     });
   }
}

Upvotes: 1

Mohit Bhardwaj
Mohit Bhardwaj

Reputation: 10093

I think it should be

function trend() {
    if ( $(".numberOfProfile0").length ) {
        return $.ajax({
            url: '/dashboard/getTrend' + '?period=30d' + "&profileId=" + $(".numberOfProfile0").html(), //getting the api
            type: 'get',
            success: function(data) {

            }
        });
    }//if()
    else
    {
      return false; //or any other appropriate value
    }
}//trend()

Upvotes: 1

Related Questions