Connecting a button's action to a specific element in an array using AJAX and Firebase

Question

Connecting a button's action to a specific element in an array using AJAX and Firebase

I am currently working on a project that involves making an AJAX request from a social API and then appending the results with a button inside the div. This button is meant to save the corresponding item in the array to my Firebase database.

For brevity, I have omitted most of the code related to the AJAX request. Here is the relevant snippet:

 $.ajax({
          type : 'GET',
          url : url,
            dataType : "jsonp",
            cache: false,
         success : function(data){
         console.debug(data);
         vids = data.response.items;

      for(var i in vids) {

        dataTitle = vids[i].title;

        ncode = "<div class='tile'><img src='"+ vids[i].title "'/></a><button class='btn' type='button' onClick='saveToDatabase()'>Save</button></div>";

        $('#content').append( ncode )

In addition, I have a function designed to save the 'title' of the object associated with the button that was appended:

var dataTitle;

function saveToDatabase() { 
 ref.push({
    title: dataTitle
  });  
}

However, a problem arises when the button is clicked as it posts a random title from within the array instead of the intended one. How can I ensure that the button's function binds correctly to the dataTitle? Any assistance would be greatly appreciated!

javascript arrays ajax firebase

Answer 1

Answer №1

The issue here arises from iterating through the entire list and assigning them to a global variable. This results in a lack of randomness as it simply selects the last item in the list, which is the final one assigned to the global variable.

Consider using jQuery instead of creating your own DOM events, and implementing a closure to access the video title.

function saveToDatabase(dataTitle) { 
 ref.push({
    title: dataTitle
  });  
}

$.ajax({
  type : 'GET',
  url : url,
  dataType : "jsonp",
  cache: false,
  success : function(data) {
    console.debug(data); // Note that console.debug may not be supported in all versions of IE
    buildVideoList(data.response.items);
  }
});

function buildVideoList(vids) {
  $.each(vids, function(vid) {
    var $img = $('<img></img>');
    $img.attr('src', sanitize(vid.title));

    var $button = $('<button class="btn">Save</button>');
    $button.click(saveToDatabase.bind(null, vid.title));

    $('<div class="tile"></div>')
      .append($img)
      .append($button)
      .appendTo('#content');
  });
}

// The following sanitization function may need improvement for better efficiency
function sanitize(url) {
  return url.replace(/[<>'"]/, '');
}

Answer 2

The issue here arises from iterating through the entire list and assigning them to a global variable. This results in a lack of randomness as it simply selects the last item in the list, which is the final one assigned to the global variable.

Consider using jQuery instead of creating your own DOM events, and implementing a closure to access the video title.

function saveToDatabase(dataTitle) { 
 ref.push({
    title: dataTitle
  });  
}

$.ajax({
  type : 'GET',
  url : url,
  dataType : "jsonp",
  cache: false,
  success : function(data) {
    console.debug(data); // Note that console.debug may not be supported in all versions of IE
    buildVideoList(data.response.items);
  }
});

function buildVideoList(vids) {
  $.each(vids, function(vid) {
    var $img = $('<img></img>');
    $img.attr('src', sanitize(vid.title));

    var $button = $('<button class="btn">Save</button>');
    $button.click(saveToDatabase.bind(null, vid.title));

    $('<div class="tile"></div>')
      .append($img)
      .append($button)
      .appendTo('#content');
  });
}

// The following sanitization function may need improvement for better efficiency
function sanitize(url) {
  return url.replace(/[<>'"]/, '');
}

Answer 3

Answer №2

Instead of passing the index directly to the function, I decided to store it in a global array for easy access. Surprisingly, this method seems to be working without any issues. Is there any downside to doing it this way?

var vids = []; //global 

function foo() {
 $.ajax({
          type : 'GET',
          url : url,
            dataType : "jsonp",
            cache: false,
         success : function(data){
         console.debug(data);
         vids = data.response.items;

      for(var i in vids) {

        ncode = "<div class='tile'><img src='"+ vids[i].title "'/></a><button class='btn' type='button' onClick='saveToDatabase('+i+')'>Save</button></div>";

        $('#content').append( ncode )
} //end ajax function

function saveToDatabase(i) { 
 ref.push({
    title: vids[i].title
  });  
}

Answer 4

Instead of passing the index directly to the function, I decided to store it in a global array for easy access. Surprisingly, this method seems to be working without any issues. Is there any downside to doing it this way?

var vids = []; //global 

function foo() {
 $.ajax({
          type : 'GET',
          url : url,
            dataType : "jsonp",
            cache: false,
         success : function(data){
         console.debug(data);
         vids = data.response.items;

      for(var i in vids) {

        ncode = "<div class='tile'><img src='"+ vids[i].title "'/></a><button class='btn' type='button' onClick='saveToDatabase('+i+')'>Save</button></div>";

        $('#content').append( ncode )
} //end ajax function

function saveToDatabase(i) { 
 ref.push({
    title: vids[i].title
  });  
}

Connecting a button's action to a specific element in an array using AJAX and Firebase

Answer №1

Answer №2

Similar questions

Using Javascript to generate a button that randomly chooses links within the webpage

Exploring the implementation of constructors and classes in JavaScript

Prohibited Nested Attributes in Embedded Mongoid Document when Using AJAX

Encountering issues when trying to incorporate SASS and CSS libraries in NextJS

"Troubleshooting CSS styling in React material-ui when using withStyles from an external

Having trouble importing a module or library in VueJS?

Keeping an HTML field constantly refreshed with dynamic content from Django

Encountering difficulty with displaying a 404 error using Cloud Functions on Firebase Hosting

Is it possible to place Angular Material components using code?

How can scripts communicate with one another through passing arguments?

Navigating Vue 3's slot attributes: A step-by-step guide

Allow foreign characters with regex while excluding special symbols

Get the contents inside the window.open using Javascript

Ways to discreetly conceal forward and backward buttons in the v-pagination component of Vuetify

Modify the anchor text when a malfunction occurs upon clicking

Compatibility issues between jQuery and AngularJS are causing problems

Is there a way to redirect focus to an object with a lower z-index when working on overlaying a sequence of transparent divs on a map?

Is it possible to create a dynamic template in Angular using external sources?

Encountering a parsererror with $.ajax while processing JSON that includes a new Date() object

Finding a solution for the network error encountered during the execution of XMLHttpRequest.send in the specified file path (...distfxcoreservermain.js:200