.load() without replacing, just add

Asked

Viewed 132 times

2

I need to use . load(), the problem is that it replaces the content from where I mark to add what you loaded. I can’t create a new div for it to add the loaded content.

Is there any way to specify that he should press the selected div but not replace what is already in this div? It loads and adds, not replaces.

I thought of something like $('div').append(function(){ $('div').load('local') but it doesn’t work.

This was in order not to use php include.

jquery
  • 1

    Usa $.ajax and then .append inside the callback success

1 answer

2

You can request the page by AJAX ($.get(), for example with jQuery) and in callback Success add it to the page with a good understanding, something similar to that:

$.get('ajax/test.html', function(data){
    $('#result').prepend(data);
});

Source: https://stackoverflow.com/a/8808168/2290538

To add the content without removing what there was previously you can use:

  • .prepend(): I insert the content specified by parameter at the beginning of the widget set;
  • .append(): Insert specified content per parameter at the end of the widget set;
  • 1

    Just to complement, you can use.append(). . prepend() = add the content before the other contents of your div. . append() = adds the content after the other contents of your div

  • In the case that div #result would be the tag "head" usaeuhua is that in case I want to put the favicon in this "test.html" so that I only change it and change it in all html pages. I wanted to see if it worked that way.

  • @Thomaslima, was editing with this information, hehe. Check out the edition and thank you for the tip. =)

  • @Undeath, $('#result') in your question example would be the selector: $('div').

  • @Fernando, it was bad... I think I added the comment during its edition. But vlw =)

  • @Undeath, you can try head, it will add, I just don’t know if the rendering will match the expected, but I think so! Try and comment.

  • But it didn’t work... It just didn’t work...

  • @Undeath, as you tried?

  • I added the following code inside the head tag of my index.html: <script type="text/javascript" src="js/head.js"></script> and inside head.js: $.get('html/head.html', Function(data){ $('head').prepend(data); }); and inside head.html: <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" >

  • @Undeath, jQuery has to have been imported before and be properly loaded, note the console if there are any errors! Note how to use jQuery correctly.

  • The footer and header appear with this load system. No problem with them because I have set exclusive Ivs for them to appear. And I imported jQuery with this: <script src="http://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script> in the console appears "no element found" in index.html and head.html

  • I managed otherwise, once I had the content of the html file, I inserted directly the html in jQuery: $(Function(){ $('head'). append( '<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">' ); });

  • @Undeath. It’s the same only way that with static content, you were doing something wrong getting content via AJAX.

  • In the html file that I asked to be collected, I put the <link> directly, without anything of the <html> type before... That’s it?

  • I believe not @Undeath, do the following, run the AJAX call and print the result on console, to see if it’s returning as expected. Something like this: $.get('ajax/test.html', function(data){ console.log(data); });

Show 10 more comments

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.