Update marker's popUp content without rewriting all HTML

[Daniel Castillo]

Hi, I would like to know if there's a way to change the content of a marker's popUp without having to rewrite all the html that is already there, I mean, I would like to toggle a class of one of the element inside of the popUp, it appears that the class exist in the DOM, and it toggles right, but after I close the popUp of the markers, returns to it's previous state, as If toggle hasn't applied, I believe is because I need to change the initial HTML of the popUp, I would like to do this without having to rewrite all the html I already built, and since is a pretty heavy html, is complicated to rewrite everything, I tried using update() method, but is not working, hope somebody can help me,

 var objeto = Layerpints._layers;

      for(r in objeto){

        var html = Layerpints._layers[r]._popup._content;

        var html_parse = $.parseHTML(html);

        var up_tick    = $(html_parse).find('.up_tick');

      }

      $(up_tick).each(function(e){

          var id_pint_name = $(this).attr('name');

          if(id == id_pint_name){

            if($(this).hasClass('text-info')){

              console.log("remove class");

              $(this).removeClass('text-info');

              //Layerpints._layers[r]._popup.update();

            }else{

              console.log("add Class");

              $(this).addClass('text-info');

              //Layerpints._layers[r]._popup.update();

            }

          }else{

            console.log("do nothing");

          }

      });

this is the code I'm trying to use hope someone could help, thanks and greetings!

[ghybs]

Hi,

Are you still stuck on your issue?

I think the update() method is meant to be used the reversed way: first change the content (through popup.setContent(...)), then call popup.update().

I do not exactly understand what your code does, but it seems to me that first you retrieve the html content of the popup, then you manipulate it with jQuery.
Then why not re-injecting right away the modified nodes tree with something like popup.setContent($(html_parse)[0])? (then call update).

Hope this helps.

[Daniel Castillo]

Somehow I managed to fixed it by changing the update() method to setContent() method like this

var objeto = Layerpints._layers;
  for(r in objeto){
    var html = Layerpints._layers[r]._popup._content;
    var html_parse = $.parseHTML(html);
    var up_tick    = $(html_parse).find('.up_tick');
  }
  $(up_tick).each(function(e){
    var id_pint_name = $(this).attr('name');
      if(id == id_pint_name){
        if($(this).hasClass('text-info')){

          $(this).removeClass('text-info');
          Layerpints._layers[r]._popup.setContent();
        }else{
          $(this).addClass('text-info');
          Layerpints._layers[r]._popup.setContent();

        }
      }else{
        console.log("do nothing");
      }
  });

the truth is I don't know why this is working since I believed setContent() will empty my popUp but it didn't, perhaps someone could explain further, thanks

[ghybs]

Interestingly, it looks like when you set an empty content to your popup, it will stop re-building its content node at each opening…
So it keeps whatever it has already built and that you may have modified!

I think a proper way would be to inject an HTML Element into the popup content.
After that, you can retrieve and manipulate that Element using `popup.getContent()`, and it will automatically be saved!

var htmlNode = $("<div class='one'>Some HTML</div>")[0],
    popup = L.popup().setContent(htmlNode); // Directly assign an HTML Element as content.

var marker = L.marker([51.441767, 5.470247],{
    draggable: true
}).addTo(map).bindPopup(popup);

// Whatever selection method.
document.getElementById("button").addEventListener("click", function () {
    var $popup = $(popup.getContent()); // Retrieve the HTML Element.
   
    $popup.toggleClass("one"); // Manipulations on the original HTML Element will be kept in the popup closure and reflected at future openings.
});

Demo: http://jsfiddle.net/ve2huzxw/27/

Hope this helps.