Deatch Append jQuery Returning [object OBJECT]

JavaScript
1

Hi,

I’m using the select2 jquery library in a WooCommerce project and trying to conditionally detach and append a div. The reason why I’m not simply using show and hide is because that continues to output some of the meta data to the product. My detaching it or removing it I wanted to avoid having the content of that data output. Here is the code:

jQuery("#wholefilletsceviche").ready(function ($) {
  $("#wholefilletsceviche").on("select2:select", function (e) {
    var saltBaked = "";

    var saltBaked = $(".salt-baked");

    var data = e.params.data.id;

    if (data !== "Whole") {
      var saltBaked = $(".salt-baked").detach();
    } else if (data === "Whole") {
      $(".extra-options > tbody").append(saltBaked);

      //console.log(saltBaked);
    }
  });
}); //close

I hope it is clear from that code what I’m trying to do, I get the correct output from the console, but here:

$(".extra-options > tbody").append(saltBaked);

I’m getting an the [object OBJECT] error.

There may be a way to do this with the select2 library, I’m not sure at this stage, but I’d like to understand why this isn’t working.

Thanks for the help.

Chris

2

Hi @info2566, you’re declaring the same variable no less than three times inside the same function scope, but the important one is this one:

var saltBaked = $(".salt-baked")

However once you detached() the element, then the next time the function gets called this will be an empty collection; so you have to keep a reference outside of that function:

jQuery('#wholefilletsceviche').ready(function ($) {
  var saltBaked = $('.salt-baked')

  $('#wholefilletsceviche').on('select2:select', function (e) {
    var data = e.params.data.id

    if (data !== 'Whole') {
      saltBaked.detach()
    } else {
      $('.extra-options > tbody').append(saltBaked)
    }
  })
})

Not sure where this is coming from though… it’s not an error but just the string representation of any object, which you get if you e.g. alert() an object.

2 Likes
3

Thanks! That fixed it, not sure what I was trying to do there I have no idea why that variable was declared inside the function, that would normally be obvious the rest of the variable declarations were me thinking i had to declare an empty variable to make it work.

I was getting the [OBJECT object] error output because I appended that variable in DIV tags to try understand what was happening.

Thanks so much it all works as expected now.

Chris

1 Like
4

Presumably as text() then? This would explain why you got the string representation… anyway I’d suggest to always use the console for debugging, or better yet, the actual debugger – saves you a lot of trouble. :-)

5

Yes thanks - I certainly do I have no idea why I was wrapping the variable in divs, I was getting the same error in the console! At least I took that out when I posed the initial question! Thanks so much for helping with that!

Chris

1 Like
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.