Databases
StackOverflow2013
Postsdbo
PODynamic hover details with data from text file
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODynamic hover details with data from text file
    primarykey
    data
    text
    <p>I'm using the jquery hovercard plugin to pull in text from a text file using ajax when a user hovers over a particular text string - this all works great.</p> <p>I've added the functionality to search through the content on page load and add a <code>label</code> class to any matching names - this works great when the name is defined.</p> <p>With help on my <a href="https://stackoverflow.com/questions/13972038/load-text-from-specific-div-in-text-file-using-ajax">previous question</a>; (many thanks @Alex Klock), I have got it so that only one div's text/html is pulled in from the text file on hover - works great when the name is defined. </p> <p>What I need to do now is pull it all together and make it dynamic, so that all names are pulled out of the text file on page load, the correct <code>label</code> class is added to the relevant name/s, and then the correct/corresponding text/html is displayed on hover. </p> <p>Any help would be massively appreciated : )</p> <p><em>//HTML code</em></p> <pre><code>&lt;div id="content"&gt; &lt;p&gt;jQuery by John Resig is a cross-browser JS library designed to simplify the client-side scripting of HTML. It was released in January of 2006 at BarCamp NYC. Used by over 46% of the 10,000 most visited websites, it's the most popular JavaScript library in use today Tim Berners-Lee.&lt;/p&gt; &lt;p&gt;jQuery is free, Tim Berners-Lee open source software, dual-licensed under the MIT License and GNU General Public License, Tim Berners-Lee Version 2.[4] jQuery's syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and John Resig develop Ajax applications.&lt;/p&gt; &lt;/div&gt; </code></pre> <p><em>//Jquery code</em></p> <pre><code>//based on Highlight words in text with jQuery by (http://www.gotoquiz.com/web-coding/programming/javascript/highlight-words-in-text-with-jquery/) jQuery.fn.addhover = function (str, className) { var regex = new RegExp(str, "gi"); return this.each(function () { $(this).contents().filter(function() { return this.nodeType == 3 &amp;&amp; regex.test(this.nodeValue); }).replaceWith(function() { return (this.nodeValue || "").replace(regex, function(match) { return "&lt;label class=\"" + className + "\" style=\"color:#932121;\"&gt;" + match + "&lt;/label&gt;"; }); }); }); }; $(document).ready(function () { var HTML_FILE_URL = 'helloworld.txt'; $.get(HTML_FILE_URL, function(data) { var fileDom = $(data); fileDom.filter('.contact').each(function() { var savename = $(this).closest(".contact").attr("id"); }); }); $("#content *").addhover("John Resig", "demo-ajax"); var hoverHTMLDemoAjax = '&lt;div class="demo-cb-tweets"&gt;&lt;/div&gt;'; $(".demo-ajax").hovercard({ detailsHTML: hoverHTMLDemoAjax, width: 350, delay: 500, cardImgSrc: 'http://ejohn.org/files/short.sm.jpg', onHoverIn: function () { $.ajax({ url : "helloworld.txt", type: 'GET', dataType: "text", beforeSend: function () { $(".demo-cb-tweets").prepend('&lt;p class="loading-text"&gt;Loading latest tweets...&lt;/p&gt;'); }, success: function (data) { var people = $(data), john = people.filter('#John_Resig'); $(".demo-cb-tweets").empty().append(john); }, complete: function () { $('.loading-text').remove(); } }); } }); }); </code></pre> <p><em>//Helloworld.txt file contents</em></p> <pre><code>&lt;div class="contact" id="John_Resig"&gt; &lt;p&gt;&lt;strong&gt;John_Resig Testing testing testing!&lt;/strong&gt;&lt;/p&gt; &lt;p&gt;And on another line of text : )&lt;/p&gt; &lt;/div&gt; &lt;div class="contact" id="Tim_Berners_Lee"&gt; &lt;p&gt;&lt;strong&gt;Tim_Berners_Lee Testing testing testing!&lt;/strong&gt;&lt;/p&gt; &lt;p&gt;And on another line of text : )&lt;/p&gt; &lt;/div&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCommunity
    1. USss888
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. PODynamic hover details with data from text file
      1. USss888
      1. VTBountyStart
    2. VO
      singulars
      1. PODynamic hover details with data from text file
      1. This table or related slice is empty.
      1. VTUpMod
    1. COIt feels like you're misusing ajax here. You're delaying the initial load of data on the page, but then on one hover, you're requesting everything. I'd suggest using ASP/PHP to limit the response based on needs. You already know what you're hovering over, don't request everything just to filter it. I'll reply soon with a (mildly optimized) solution, that tries to limit loookups. If you want I can offer a PHP file that will greatly optimize this problem. At least how I understand it.
      singulars
      1. PODynamic hover details with data from text file
      1. USKhez
    2. CODouble comment! I see you're a css class "demo-cb-tweets", if the helloworld.txt file is populated with tweets, [there are other ways of populating tweets on a page via ajax](https://github.com/kerberoS/jQuery-Tweets)
      singulars
      1. PODynamic hover details with data from text file
      1. USKhez
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload