Home » jQuery » jQuery – Retrieving HTML Fragments

jQuery – Retrieving HTML Fragments

sunset-bird A couple of weeks ago I mentioned that I had built a tooltip using jQuery.  We focused mostly on the positioning of the tooltip at the time because, historically, that’s where most of the work has been.

But there are other time-saving features that also make the tooltip code I wrote a lot more flexible.

For example, in the past, the javascript code we wrote for tooltips often required us to place the HTML for the tooltip in the HTML page we wanted the tooltip on.  This has two drawbacks.

First, if you need the tooltip on multiple pages, you need to include the HTML on multiple pages.  You could, of course, use master pages in ASP.NET or includes of some sort in other web development languages to get around this, but the fact remains that you still need to do this.

Second, the HTML is not as modular as it might be.  This isn’t as big of an issue, since we could argue that most of our HTML is not as modular as it might be, but when I show you how you can overcome this with jQuery, I think you will recognize the improvement.

When I sat down to develop this tooltip, I created an HTML page that has the HTML for the tooltip, and nothing else, in it.  This allowed me to concentrate on the HTML and forget about all the javascript issues.  Once I had the tooltip looking the way I wanted, I copied out the HTML fragment that represented the tooltip, leaving out the HTML that had the head tag, body tag, and other code I needed to make the HTML page an HTML page.  I pasted this code into another HTML file, but this time the HTML file ONLY has the fragment.

The other thing you’ll want to do is to dynamically create the positional DIV that you will use to hold the tooltip.  This is another place where we typically had to put the content in our HTML page.  Instead we will put this information in the jQuery script.  While I could have included this in the fragment, doing it this way actually makes coding the tooltip easier:

$('<div id="tooltip"></div>').appendTo('body');
$('#tooltip').hide().load('js/ToolTip.htm');

Two lines of code to get our shell of a tooltip in the page.

The first line creates the HTML fragment and appends it to the end of the elements inside the body tag.

The second line retrieves the DIV element we just inserted, hides it, and then loads the HTML fragment that represents our tooltip.

Finally, to get content into the tooltip, we use the HTML property.  I created a class called toolTipCenter that is the location where the tooltip content will go.  To insert content for the tooltip, all you need to do is:

$('#tooltip .toolTipCenter').html('Tooltip Content Here.');

 

Other post in jQuery

Related Post

  • jQuery, JSON, and ASP.NETjQuery, JSON, and ASP.NET A few months ago, I demonstrated how to use ASP.NET's JSON capabilities.  Lately, I've been demonstrating how to use jQuery.  Both use a considerable amount of JavaScript so if there is […]
  • jQuery – Date PickerjQuery – Date Picker Today we’ll start taking a look at the final control in the jQuery UI suite.  The Date Picker. This control, as with all the other controls we’ve looked at, is relatively simple […]
  • jQuery Dialog – With Validation ControlsjQuery Dialog – With Validation Controls Chances are, you’ll eventually want to use a dialog box in combination with some form elements, and when you do, you’ll probably want to implement some validation. True, there are some […]
  • jQuery SplitterjQuery Splitter Hey!  This is pretty cool. I was just mentioning at the last jQuery presentation I did that there were some controls that were definitely missing from the jQuery UI suite of […]
  • jQuery – Loading Partial ContentjQuery – Loading Partial Content In previous posts, I've covered the core architecture of jQuery.  How it works.  How you call methods.  A brief overview of what's available. From here on out, we will […]

About Dave Bush

Dave Bush is a Full Stack ASP.NET developer focusing on ASP.NET, C#, Node.js, JavaScript, HTML, CSS, BootStrap, and Angular.JS.Does your team need additional help in any of the above? Contact Dave today.

One Pingback/Trackback