We Keep Coding

JQuery selector, partial DOM searching for performances

I'm actually working with Jquery and at some point I use Jquery selectors to make my page work. The issue here is that the HTML I work with can get very long depending on the data I work with and it looks like this.
HTML
<div class="mailing"></div>
<input type="text" class="mail_subject"/>
<input type="text" class="mail_body"/> <!-- I can have 1 to n number of these -->
<!-- Preview tags -->
<p class='main_subject'></p>
<p class='main_body'></p>
<!--
And a few more things we don't use here
-->
</div>
<div id="table1">
<table id="ranking">
<tbody>
<!-- Data, can have 0 to ~3500 rows -->
</tbody>
</table>
</div>
As you can see, my page is more or less divided in two parts, the <div class="mailing">, which contains a few forms, and the <div id="table1"> that is about displaying lots of data.
In my mailing div I have a few inputs and an auto-updated preview that takes the data from the inputs. What I have here is a kind of "mail builder" with the preview giving me the result with html formatting.
The problem here is about performance, my JQuery is slowed by the table and I got lag when I type in a form and I don't want it to search the whole document as I already know my data will be in the mailing div.
JS
$('.mailing').on('change click keyup keydown', function () {
// Here I append the mail_subject input to the preview
var text = $(this).val();
$('.main_subject').text($('.subject_select').val());
// Here I append each mail_body input to the preview
$('.bodies_select').each(function () {
text = $(this).val();
/*
* Some computation for the text
*/
jQuery('<span/>', {text: text}).appendTo('.main_body');
});
});
I have a few more functions like theses and a few more computation, but I think we got the idea of what my code looks like.
My question is, is there a way, when I use JQuery selectors like $('.main_subject') or $('.bodies_select') to not search the whole DOM document but only in my mailing div for example? The problem is that I can store my elements in variable since it as multiple occasion to be updated.

You can use context with jQuery to improve performances :
$('.bodies_select', '.mailing')
http://api.jquery.com/jquery/#jQuery1
You can even optimize the selectors with some technics :
https://learn.jquery.com/performance/optimize-selectors/

Sure, you just need to place the parent elemenent before
$('.mailing .main_subject')
You should probably read a bit about selectors
https://api.jquery.com/category/selectors/

Are they any syntax highlighting plugins that will allow you to embed an ignorable html element into a snippet?

I am trying to make dynamic code examples for our api that can be constructed from from input html elements.
A paired down example looks like this, I give the user an input to name the device they would like to create.
<input class="observable-input" data-key="deviceName" type="text" value="deviceKey" />
I would then like that input to update code examples (replacing the device name in the example with the one the user inputs).
<code lang="python">
device = { "name": "<span data-observeKey="deviceName">Name</span>" }
client.createDevicewrite(device)
</code>
I have all of the code setup for observing a change in the input and updating the code examples, this works great. All of the syntax highlighters I have looked at, usually chop the snippet up and rerender the example wrapped with its own html (for styling). Is there an option/configurable way to get a syntax highlighter to not strip the these tags, or is there a different approach I should be looking at for preserving the syntax highlighting and still supporting dynamic updates without having to do a full text search of each snippet's rendered tags.
The example output of the pygment (current syntax highlighter I'm using).
<li>
<div class="line">
<span class="n">device</span>
<span class="o">=</span>
<span class="n">{</span>
<span class="s">"name"</span>
<span class="p">:</span>
<span class="s">"Name"</span>
<span class="n">}</span>
</div>
</li>

I decided to just go with a brute force approach, it ended up being decently performant, ill leave my code here if anyone is interested in what I did
https://gist.github.com/selecsosi/5d41dae843b9dea4888f
Since i use backbone, lodash, and jquery as my base app frameworks the gist uses those. I have a manager which will push updates from inputs to spans on the page which I use to dynamically update the code examples

Loop to change content of href for many anchors

The content of my posts in Wordpress is a big markup. It is coming from MS Word so it is text wrapped by HTML nested tags and inline styles.
I have a segment of code that is repeated many times in the content (It represents text footnotes). This segment, for the first footnote for example is:
<sup><a title="" href="file:///C:/Users/hp/Desktop/file.docx#_ftn1" name="_f
tnref1">
<span class="MsoFootnoteReference">
<span dir="LTR">
<span class="MsoFootnoteReference">
<span lang="EN-US" style="font-size: 16pt; line-height: 115%;">
[1]
</span>
</span>
</span>
</span>
</a></sup>
.....
<a title="" href="file:///C:/Users/hp/Desktop/file.docx#_ftnref1" name="_ftn1">
<span class="MsoFootnoteReference">
<span dir="LTR" lang="EN-US" style="font-size: 12.0pt; font-family: 'Simplified Arabic','serif';">
<span class="MsoFootnoteReference">
<span lang="EN-US" style="font-size: 12pt; line-height: 115%;">
[1]
</span>
</span>
</span>
</span>
</a>
My goal is to change the 2 hrefs from:
href="file:///C:/Users/hp/Desktop/file.docx#_ftn1"
href="file:///C:/Users/hp/Desktop/file.docx#_ftnref1"
to:
href="#_ftn1"
href="#_ftnref1"
so that the user can jump from one anchor to the other.
Questions:
1- Is is better to use server side language instead of jquery?
2- How to loop over the repetitive segments and change the href contents of each couple of anchors?
Thank you very much in advance for your invaluable assistance.
Solution:
With the use of Regular expression provided by Broxzier + PHP, the code below is working and can be applied to any data before persisting it on the database.
if(preg_match_all('/href\s*=\s*"[^"]+(#[^"]+)"/',get_the_content(),$match))
{
echo preg_replace('/href\s*=\s*"[^"]+(#[^"]+)"/','href="$1"', get_the_content());
}

1- Is is better to use server side language instead of jquery?
Neither. The best and fastest option would be to totally remove the website and page name from the link if they're the same as the current page.
One way would be using Regular Expressions, this could be done via JavaScript, but I strongly suggest doing this by using a text editor and replace the old data (Wordpress saves revisions anyway).
The following regex will grab the href attribute
href\s*=\s*"[^"]+(#[^"]+)"
Replace this with:
href="\1"
And you're done.
2- How to loop over the repetitive segments and change the href contents of each couple of anchors?
Use a global flag to do this. Since it's content I advice you to do it manually or change the regex so that it will only match the current url.
Please note that this will also replace occurrences in the content, if there is any text like href="website#flag" in there. I assumed this was not the case.
--

Using jQuery.attr() and hash property of <a>
$('a').has('.MsoFootnoteReference').attr('href',function( idx,oldHref){
return this.hash;
});
You might want to use some html cleaning on your WYSIWYG html submissions that will clean out unwanted classes and modify the href's for you.
For example SimpleHtmlDOM php library uses css type selectors to modify html and you could use it to modify any href with file:// in it for example

IE not updating code after jQuery?

I have a calendar asp page that users schedule times and everyone's times are displayed on this table (similar to Google calendar but only month view). I have it up and running and it works great but I need to edit the page on printing to ensure everything fits on one page. The table is generated through an ASP loop but here is basic structure
<table id='calendar' class="cal">
<tr class="cal">
<td class="cal" onclick="shoForm('5_10');">10
<div class="cellDiv" id="5_10"></div>
</td>
</tr>
</table>
I populate this table using jQuery and AJAX so an example item under one of the cells could be like so:
<div id='1' class='item'>
<span name='itmUserName' id='User1'>User1</span>
<span class='dnPrint'><br/></span>
Project: <span name='tasks' id='2'>Reviewing</span>1.5 hrs
</div>
In jQuery, then I append items to cells like so (where curItemDay is the date for the item):
$("#"+curItemDay).append(
"<div id='"...see above.../div>"
);
Now this all works fine and dandy and visually the web page loads perfect. However, I am trying to hide certain pieces when they click on a "Print" button.
function printThis(){
var names=document.getElementsByName("itmUserName");
for(var i=0;i<names.length;i++){
if(names[i].innerHTML.split(" ").length>1)
names[i].innerHTML=names[i].innerHTML.charAt(0)+names[i].innerHTML.split(" ")[1].charAt(0);
names[i].innerHTML="["+names[i].innerHTML+"] ";
}
...more code....
}
This works fine in FF but in IE it does not work. When I look through the code in IE using the developer console (F12) it doesn't even show the items that were added via jQuery. The page loads and displays everything, but the code doesn't seem to be reflecting what is on the page.
<td class="cal" onclick="shoForm('5_16');">
Text - 16
<div class="cellDiv" id="5_16"/>
</td>
NOTE: IE version is 8.0.6001.18702

You are excessively abusing the innerHTML property.
Instead, why not do something like this:
<span name="itmUserName"><span class="printOn">[</span>J<span class="printOff">ohn </span>S<span class="printOff">mith</span><span class="printOn">]</span></span>
Then use this CSS:
#media screen {.printOn {display:none}}
#media print {.printOff {display:none}}
This will show/hide the relevant parts when the user is printing or viewing on-screen.

I found the answer here: Accessing getElementsByName array after Jquery Ajax IE
Changed
var names=document.getElementsByName("itmUserName");
To
var names=$('[name="itmUserName"]');
And now it works like it should.

Manage entered email-contacts in HTML form as removable blocks with [x] button similar to Gmail?

Are there solutions to manage entered email-contacts in HTML forms as removable blocks with [x] buttons, similar to Gmail?
Instead of generic text input with comma-separated e-mails I want to have more advanced field with autocomplete (not a question here) and autoreplace for entered e-mails where each e-mail becomes a block with quick remove [x] button.
Of course, it's not very complicated to write the solution manually, but I'm sure this has been solved before.
Quick example of what I'm looking for: http://jsfiddle.net/JNVgq/4/
<div class="wrap">
<input class="shadow" value="test#email.com, other#email.com" />
<div class="email"> test#email.com × </div>
<div class="email"> other#email.com × </div>
<input class="current" value="second#e" />
</div>
Found myself unable to google this stuff with no exact and clear keywords.

Here we go: Chosen jQuery Plugin
You can modify the code to use a text box instead of list box to accomplish what you are looking for. See the multiple select example.
EDIT:
Tag-it mentioned anpsmn by looks exactly what you are looking for.

Another option that I used for this (which includes the autocomplete part either from static list or server-side endpoint) is jquery-tokeninput