Freshdesk API (jquery fetch ticket example) clickable link after ajax call

Question

Freshdesk API (jquery fetch ticket example) clickable link after ajax call

1.1k Views Asked by Adam At 30 April 2025 at 07:34

The sample code below is the jquery example provided from Freshdesk (https://github.com/freshdesk/fresh-samples). I plug in my url and api key and it works.

I want to customize this so that when the Read button is pressed the json object data that is outputted is clickable, specifically just the ticket "Subject" values. On click this will close the ticket.

I'm not sure where to start with this, ultimately just want to have a clickable value after the ajax call. The action on the click for closing the ticket will be a separate thing I will need to tackle.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(
      function() {
        var yourdomain = 'yourdomain'; // Your freshdesk domain name. Ex., yourcompany
        var api_key = 'API_KEY'; // Ref: https://support.freshdesk.com/support/solutions/articles/215517-how-to-find-your-api-key
        $.ajax(
          {
            url: "https://"+yourdomain+".freshdesk.com/api/v2/tickets",
            type: 'GET',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            headers: {
              "Authorization": "Basic " + btoa(api_key + ":x")
            },
            success: function(data, textStatus, jqXHR) {
              $('#result').text('Success');
              $('#code').text(jqXHR.status);
              $('#response').html(JSON.stringify(data, null, "<br/>"));
            },
            error: function(jqXHR, tranStatus) {
              $('#result').text('Error');
              $('#code').text(jqXHR.status);
              x_request_id = jqXHR.getResponseHeader('X-Request-Id');
              response_text = jqXHR.responseText;
              $('#response').html(" Error Message : <b style='color: red'>"+response_text+"</b>.<br/> Your X-Request-Id is : <b>" + x_request_id + "</b>. Please contact [email protected] with this id for more information.");
            }
          }
        );
      }
    );
});
</script>
</head>
<body>

<button>Read</button>
<br/></br>
<table cellspacing = '10'>
  <tr>
    <td> <b>Result</b></td>
    <td> <div id = 'result'></div> </td>
  </tr>
  <tr>
    <td> <b>Code</b></td>
    <td> <div id = 'code'></div> </td>
  </tr>
  <tr>
    <td> <b>Response</b></td>
    <td> <div id = 'response'></div> </td>
  </tr>
</table>
</body>
</html>

Original Q&A

There are 1 best solutions below

**WelliXL** · Answer 1

Bit late reply.

I've been building alot of things with this example This should help

<!DOCTYPE html>
<html>
<head>
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(
  function() {
    var yourdomain = 'yourdomain'; // Your freshdesk domain name. Ex., yourcompany
    var api_key = 'API_KEY'; // Ref: https://support.freshdesk.com/support/solutions/articles/215517-how-to-find-your-api-key
    $.ajax(
      {
        url: "https://"+yourdomain+".freshdesk.com/api/v2/tickets",
        type: 'GET',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        headers: {
          "Authorization": "Basic " + btoa(api_key + ":x")
        },
        success: function(data, textStatus, jqXHR) {
          $('#result').text('Success');
          $('#code').text(jqXHR.status);
      //Removed the standard response
      //converted the response to JSON
    var jsonText = JSON.stringify(data);
            var obj = data;

            var tbl=$("<table/>").attr('id','mytable');
            $('#response').append(tbl);
    //added a table element and then looped through each subject and added it as a seperate div that cals the closure function

    for(var i=0;i<obj.length;i++){
    var td1="<div id='"+obj[i].subject+"' onclick='CloseTicket()'>Subject: "+obj[i].subject+"<br></div>";
    $('#mytable').append(td1);
     }


        },
        error: function(jqXHR, tranStatus) {
          $('#result').text('Error');
          $('#code').text(jqXHR.status);
          x_request_id = jqXHR.getResponseHeader('X-Request-Id');
          response_text = jqXHR.responseText;
          $('#response').html(" Error Message : <b style='color: red'>"+response_text+"</b>.<br/> Your X-Request-Id is : <b>" + x_request_id + "</b>. Please contact [email protected] with this id for more information.");
        }
      }
    );
  }
);
});

function CloseTicket() {
alert('delete me');
//To test closure function would work
//IRL this would be an update Ticket Call that includeds the ticket id
}
</script>
</head>
<body>

<button>Read</button>
<br/></br>
<table cellspacing = '10'>
 <tr>
    <td> <b>Result</b></td>
   <td> <div id = 'result'></div> </td>
  </tr>
  <tr>
    <td> <b>Code</b></td>
    <td> <div id = 'code'></div> </td>
  </tr>
 <tr>
    <td> <b>Response</b></td>
   <td> <div id = 'response'></div> </td>
  </tr>
</table>
</body>
</html>

Freshdesk API (jquery fetch ticket example) clickable link after ajax call

There are 1 best solutions below

Related Questions in JQUERY

Related Questions in AJAX

Related Questions in FRESHDESK

Trending Questions

Popular # Hahtags

Popular Questions