2

I need to move the Google Autocomplete whole div into another div.

My div structure:

<html>
<head></head>
<body>
<div class="container">
   <div class="row">
      some contents 
   <div> 
  <div class="pac-container">
    auto complete content 
  </div>
</div>
</body>
</html>

Now I need to move the .pac-container class before row class due to my design issue. How can fix this.

Ashish Kakkad
  • 23,586
  • 12
  • 103
  • 136
soni soniya
  • 43
  • 3
  • 6

4 Answers4

1

This is how I would do it:

$(document).ready(function(){
    $(".pac-container").detach().insertBefore($(".row"));
});

Here is the JSFiddle demo

Basically it detaches the element from the DOM structure, and then inserts it before the element that matches the row class

Ahs N
  • 8,233
  • 1
  • 28
  • 33
  • its not working. becaues my .pac-container content load dynamically. – soni soniya Aug 28 '15 at 07:08
  • Have a look at [this JSFiddle](https://jsfiddle.net/Lx23mr20/1/), the code waits for the content of the `.pac-container` class to finish loading before detaching and moving it. But even without it, it should normally work since ur ajax code should be setting the data received into the `.pac-container` container whenever it is. Can you provide more details please...? – Ahs N Aug 28 '15 at 07:12
  • on page load .pac-container display none . When I change the address from one textbox .pac-container display. – soni soniya Aug 28 '15 at 07:17
  • I used above code, but .pac-container not loaded before row class. – soni soniya Aug 28 '15 at 07:17
0
$('.row').insertAfter('.pac-container');
0

You'll want to use the clone() method in order to get a deep copy of the element:

$(function(){ 
var $button = $('.button').clone();
  $('.package').html($button);
});
SaviNuclear
  • 886
  • 1
  • 7
  • 19
0

Since the pac-container is inserted dynamically, you have to listen for it to be inserted. Since you're using jQuery, here's a solution:

$(document).bind('DOMNodeInserted', function(e) {

  // Ignore dynamically-inserted scripts and other elements
  // since .pac-container is a div
  if (e.target.nodeName === 'DIV') {

    // Prioritizes the contained functions
    setTimeout(function() {
      var $el = $(e.target);
      if ($el.attr('class') === 'pac-container pac-logo') {
        self.cleanAutocomplete($el);
      }
    }, 0);
  }
});

// Remove bound events on document for performance
// and move .pac-container
function cleanAutocomplete($el) {
  $(document).unbind('DOMNodeInserted');
  $el.detach().insertBefore($('.row'));
};

I was trying to solve the same problem and this works for me. I'm using Backbone, so the $(document).bind(...) is contained within the function that's creating the autocomplete with new google.maps.places.Autocomplete(...).

The main thing to watch out for here is that you'll probably have multiple instances of .row so you should probably give it a unique class or ID.

Hope that helps!

SwankyLegg
  • 473
  • 4
  • 14