Solved

Jquery load HTML file but exclude some tags

Posted on 2013-01-13
7
423 Views
Last Modified: 2013-02-04
Hi,

I want to load (ie: embed) a HTML file into a DIV however I need to exclude some tags and divs. For example I do not want to load the <div id="nav">. I only have javascript/jquery available. (I cannot use any server side scripting).

I can use Jquery .load function to load an entire HTML page into a div, but I only want to load some parts. Is this possible?

<script type="text/javascript">
$(function()
{
        $("#myModal").load("modal.html");
});
</script>

Open in new window


Thanks for any input

EDIT: I changed the question slightly.
0
Comment
Question by:mhdi
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
7 Comments
 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
ID: 38773114
You can do something like this with jquery ajax however older versions of IE may be problematic. #container is the selector of the element you want to load from the other page.

$("#myModal").load("modal.html #container');

Documentation:

http://api.jquery.com/load/
0
 

Author Comment

by:mhdi
ID: 38773126
That seems to work, however I need to load 2 or 3 elements from the page.

eg: <script> elements in the head, #container1 and #containter2

Is this possible?
0
 
LVL 38

Assisted Solution

by:Tom Beck
Tom Beck earned 500 total points
ID: 38773172
You could put your scripts in the containers and giv the containers a class.

$("#myModal").load("modal.html .container");
0
Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

 

Author Comment

by:mhdi
ID: 38773176
I cant modify the source page unfortunatley.

What if I used get() somehow? Then I could remove elements using .remove()?

Im trying to get this to work now but its not working yet.

$.get("trace.html"),function(data){
  $(#removethis).remove();
  $("#output").html(data);
}

Open in new window

0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 38783946
Progress? I somehow missed your latest post.
0
 

Author Comment

by:mhdi
ID: 38790062
Not really.

My page I am importing into has the same Div ID's as the source page. So I am having trouble removing the unwanted divs.

I will have a look at this again soon and post back.
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 38793002
How about using an iFrame? That would eliminate the id overlap problem. You can isolate portions of a web page in an iFrame.

Similar situation here:

http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_27919650.html#a38552510
0

Featured Post

Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

710 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question