1

I am currently working on a way to load content from another page into my page. What I want to have is, that the content itself is loaded from one div of the the other page into a specific div of my page.

So far it is working to load the other page's content into my div. Also I figured out how to show a specific div of the other page in my page's div.

jsfiddle: http://jsfiddle.net/gfnyyrx2/1/

jQuery:

<script>
jQuery(document).ready(function() {  
    jQuery("#region").html('<object data="http://de.selfhtml.org/#wiki">');
});
</script>

HTML:

<div id="content" class="box"></div>

My problem now is that the whole content from the other page is loaded into my div. the #divname only jumps to the wanted div. But the rest of the other page is loaded as well. If you use the scroll bars you can see the whole content is there.

Is there anyway to ONLY load the content of the div and not the whole content of the other page? And my Second Question is, how can I give the div on my page a size? As you can see in the fiddle I already tried to give my div a height and width. But it only changes the size of the div but not the size of the content Box.

5
  • 1
    $.load also you lets you specify a selector, to extract only part of the loaded content. You need to show the rest of your code. Re size, again you need to show the loaded content as it may be as simple as appropriate CSS styling. Commented Oct 16, 2014 at 8:56
  • Thank you for your reply. there is no real other code around. what i want to do is to load the wiki box from selfhtml into my page's div without any other code (content) around. And with the size. I want the whole box not only a small part of it. just like shown in the fiddle Commented Oct 16, 2014 at 9:14
  • I assume that wiki page on your domain, or at least under your control (in order for you to load any part of it)? Which part of the page are you after (please be specific about the element) as the link you provided (de.selfhtml.org/#wiki) does not seem to be the right page. Commented Oct 16, 2014 at 9:21
  • i got a page with a bit of content arround it (not realy done yet). on my page i want to place a div which should show the grey box on the selfhtml page. the grey box got the code <div id="wiki">. thats why i used the URL http://de.selfhtml.org/#wiki but i only want that grey box on my page. not the whole page as it is right now Commented Oct 16, 2014 at 9:25
  • First part answered below. Please try load. Second part, can you please explain what it should look like as your CSS seems to be doing what you asked it to. Commented Oct 16, 2014 at 9:26

2 Answers 2

2

Without the actual HTML you will have to make some changes to the selectors, but load can be used with a selector, to extract part of the loaded page, like this:

jQuery(function ($) {
    $("#content").load("http://de.selfhtml.org/", "#wiki");
});

http://jsfiddle.net/TrueBlueAussie/gfnyyrx2/3/

Notes:

  • jQuery(function ($) { is both a shortcut DOM ready handler and provides a locally scoped $ for shorter code.
  • The code will not run in a JSFiddle due to cross domain access restrictions on your website (you will see the error in the console).
Sign up to request clarification or add additional context in comments.

2 Comments

Thank you very much. how can i be so blind to net get it with the .load on my own. you are right. i didnt work with the selfhtml because of the cross domain policity. i have to try this another way. but the .load fixed another problem which i had with loading content from my own page into another page of my own side (so without any cross domain) i only cant get the selector working. still loads my whole page
figured it out. api.jquery.com/load. selector is not sepperated with ,"#divname") just with a space and #divname. everything working now. thank you for the help TrueBlueAussie
1

this was done in sencha and i am not getting the entire webpage but i am getting only what the div is required for me.i have done this by regular expression. url is http://news.oneindia.in/business/investors-lose-rs-7300-crore-as-dlf-stocks-dip-after-sebi-ban-1541436.html

    Ext.Ajax.request({
                url : url,
                params : {
                    id : 1
                },
                success : function(response) {
                    //Ext.getCmp('allnavigation').items.items[1].setMasked(true);                                           
                    var text = response.responseText;                       
                    var html = text.match(/<article>.*<p>/);
                    var active = Ext.getCmp('allnavigation').setActiveItem(1);
                    Ext.Viewport.setActiveItem(active);
                    var con = Ext.getCmp('desccontainer');
                    var tpl = ['<div class="contact">', //
                    '<div id="contcontents" style="font-size: 1.1em;color: #000;font-weight: normal;margin-bottom: 10px;padding-top: 20px;padding-left: 30px;">' + title + '</div>', //
                    '<div style = "text-align:center"><img src="' + image + '" alt = "No-Image" style="width:300px;height:340px" ></div>', //
                    '<div id="contcontents" style="">' + html + '</div>', //
                    '<div style="font-size: x-small;padding-top: 10px;">' + pubdate + '</div>', //
                    '</div>'].join('');
                    con.setHtml(tpl)                        
                }
            });

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.