jquery sort table inside iframe

jquery sort table inside iframe

by Adi Jaya

HTML

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


<iframe id="iframewindow"></iframe>
<p>
  <button id="add-new">add new</button>
</p>

CSS

#iframewindow {
  width: 100%;
  height: 200px;
  border: 0;
}

JavaScript

//example variable for css inside iframe head
    var frameCSS = '<style>.item {margin-top: 0;margin-bottom: 5px;padding: 10px;background: #525252;color: #fff;}.item.active {background: red;}</style>';



    //example for html inside iframe body
    var frameHTML = "<div id='sortable'><p class='item'>content 1</p><p class='item'>content 2</p><p class='item'>content 3</p><p class='item'>content 4</p><p class='item'>content 5</p></div>";
    
    //variable global for head iframe and body iframe
    var $iframehead = $("#iframewindow").contents().find("head");
    var $iframebody = $("#iframewindow").contents().find("body");


$iframehead.append(frameCSS); //append css to iframe head
$iframebody.html(frameHTML);  //innerHTML iframe body
   
var $sortable =  $('#iframewindow').contents().find('#sortable');
$sortable.sortable({
			iframeFix: true,
			items: ".item", //selector
			axis: 'y' // vertical sortable
});

//test add element to iframe
$( "#add-new" ).click(function() {
	var templateADD = $( "<p class='item active'>New Content</p>" );
  $( "#iframewindow" ).contents().find( "#sortable" ).append( templateADD );
});