Solved

Jquery load HTML file but exclude some tags

Posted on 2013-01-13
7
412 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
  • 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
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 

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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to dynamically set the form action using jQuery.
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)

747 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now