Get the html of a div on another page with jQuery ajax when hover a link

Question

I have found solution for get html of a div on another page using jQuery ajax in here, So I made this script, when mouseenter a link, that will get data using ajax :

index.html

<ul>
    <li><a class="basic" href="data1.html" rel="1" title="Accel World">Accel World</a>
    </li>
    <li><a class="basic" href="data2.html" rel="2" title="Ano Hi Mita Hana">Ano Hi Mita Hana</a>
    </li>
</ul>
<div id="content" class="isi" style="display:none">
<h1 class="title-content"></h1>
<div class="body-content"></div>
</div>

<script src="jquery.min.js"></script>
<script type="text/javascript">

$('a.basic')
.mouseenter(function() {
    var thisrel = $(this).attr('rel');
    var thistitle = $(this).attr('title');
    var thishref = $(this).attr('href');
    var content = $('#content');
    var idcontent = content.attr('id');
    var wadah = idcontent+'-'+thisrel;
    content.attr('id', wadah);
    var thattarget = $('#'+wadah);
    thattarget.show();
    thattarget.find('.title-content').text(thistitle);
    $.ajax({
        url: thishref,
        type:'GET',
        success: function(data){
             thattarget.find('.body-content').append($(data).find('#sct_content').html());
           console.log(thattarget.attr('id'));
        }
    })
  })
  .mouseleave(function() {
     var isi = $('.isi');
     var titleisi = $('.title-content').empty();
     var bodyisi = $('.body-content').empty();
     $(isi).attr('id', 'content');
     $(isi).hide();
  });
</script>

data1.html and data2.html

<!-- html stuff -->
 <div id="sct_content">
   <div class="article">data 1 <!-- data 2 for data2.html --></div>
 </div>
<!-- html stuff -->

And this logs on console when mouseenter on link :

> XHR finished loading: GET "http://localhost/getip/data1.html". jquery.min.js:4
  send jquery.min.js:4
  m.extend.ajax jquery.min.js:4
  (anonymous function) custom.html:34
  m.event.special.(anonymous function).handle jquery.min.js:3
  m.event.dispatch jquery.min.js:3
  r.handle
content-1

problem : The data not appear on .body-content, because selector $(data) is undefined

I think your problem is with `$(wadah)` may be it needs to be `$('#' + wadah)`. — Satpal, Jul 19 '14 at 10:27

score 1 · Answer 1 · answered Jul 19 '14 at 10:26

1

Remove ajax and Try This $(wadah).find('.body-content').load( thishref+" div#sct_content" );

answered Jul 19 '14 at 10:26

Jithin Lukose

344
4
18

Thanks @jithin but I have used that before ask, I give your +1 because you are a good person. – GeekToL Jul 19 '14 at 11:18

score 0 · Answer 2 · edited May 23 '17 at 12:24

0

Jithin's answer works fine but I have used that before ask. I found solution in here

The following jQuery Won't work:

$(data).find('#sct_content').html();

as the divs are top level elements and data isn't an element but a string, to make it work you need to use .filter

$(data).filter('#sct_content')

edited May 23 '17 at 12:24

Community

1
1

answered Jul 19 '14 at 11:11

GeekToL

1,815
1
24
46

Get the html of a div on another page with jQuery ajax when hover a link

2 Answers2