Strip White Space From Element Using JQuery

PROBLEM
I don’t think I’m going to explain this very well. Here’s a short story long.

So what I was trying to do was kind of confusing as it is. I’ll try to explain… In Drupal 7 there is a cool module called field group table. I needed this module to display data in a table format. However, one of the limitations of this module is that it doesn’t display the label in the th for grouped elements. So say you have an address that you’d like to display in a table. You can use this module but it won’t display the group name in the th. It’ll go above the information.

The "location" text and "CRS Coordinator" text is above the data and not in the t h

I used some slick JQuery to move the “Location” text inside the empty th like so:

$(".table_site_map_info .group_table td #site_map_location_th div span").first().appendTo(".table_site_map_info .group_table th.field-label-hidden:eq(0)");

That did the trick. However I noticed that there was a space added and the “Location” and “CRS Coordinator” didn’t line up correctly with the “Phone” (which isn’t a group).

The "location" and "CRS coordinator" were moved to the t h but there was a space before them which doesn't align

SOLUTION
Unfortunately the JQuery trim function needs a parameter and all the examples on JQuery and around the web always had it using a JavaScript variable. I just needed to trim elements; not variables.

So in other words, I wanted to do something like $(“.table_site_map_info .group_table th”).trim() . However that didn’t work.

I had to go back tho the drawing board kind of. I first got it out of its span (which I thought initially was the spacing problem). I used:

$(".table_site_map_info .group_table th span").contents().unwrap();

This didn’t work. It got rid of the span but it still had the space. After looking at the HTML in FireBug, I saw an added space in the th. I needed to remove the space. Unfortunately, like I said earlier, the trim function was useless. I had to individually set each HTML element to its trimmed self.

So, here’s my code:

$(".table_site_map_info .group_table th.field-label-hidden:eq(0)").text($.trim($(".table_site_map_info .group_table th.field-label-hidden:eq(0)").text()));

Sorry that this is a long post and it’s mostly useless but I hope it can help someone. I wanted to post this to remember it.

a screen shot of what it's supposed to look like

If anyone has a more efficient way to do all the above using JQuery or Drupal, I’d love to hear it.

Inserting Data Into A Form Input Array

ISSUE
I’ve also struggled with this one for a while, off and on. I have a form that has several textarea’s. Their data is put into an input array. It is looped using a for loop in PHP. Ex:

// for loop in PHP here

<label>Data:</label><br />
<textarea name="data[]" id="data[]" rows="5" cols="40"><?= $data[$x]; ?></textarea> <a href="javascript:popUpWindow('popupsearch.php?frm=input_form&amp;fld=data[]&amp;select_multi=yes', 700, 300);">Lookup Data</a>

// end for loop

This is generated using PHP (a for loop). Basically, the user decides how much data they want and they type it in, or they can look up data. When they click Lookup Data, a window pops up with a search feature for them to search for data. They can choose multiple items to insert into the form. When they do, it closes the popup and inserts the data into the form.

Sounds simple, right?

WORK AROUND
The problem was with the array. My guess is XHTML doesn’t use arrays of id’s (yet). The syntax above is what I tried (and failed) to put before. The work around is:

<label>Data:</label><br />
<textarea name="data[]" id="data_<?= $x; ?>" rows="5" cols="40"><?= $data[$x]; ?></textarea> <a href="javascript:popUpWindow('popupsearch.php?frm=input_form&amp;fld=data_<?= $x; ?>&amp;select_multi=yes', 700, 300);">Lookup Data</a>

The id is no longer in an array. The name is what is actually used later in PHP to get the value(s), so there’s no rewrite of code on the backend side.

I read an article (or I heard) that in HTML 5 when it becomes a standard, they will be combining the id and name elements of inputs. That’s the only problem I can forsee with this code not being able to be used later. I’d have to modify this code and rewrite the backend to recognize each textarea as its own entity instead of an array.

Displaying Quotes In Alerts Using JavaScript And PHP

ISSUE
I’ve been struggling with this problem off and on now for the past like six months. The issue is properly displaying single and double quotes in JavaScript on a onclick action. PHP is being used to get the data for the string.

The data without single or double quotes displayed fine in the alert box, but the other data didn’t.

In a nut shell, I needed:

<a onclick="javascript: alert('$data');">?</a>

The trick was escaping $data to display the proper PHP first, then JavaScript.

The $data string I kept testing was:

Has the ability to quote the Godfather series on command. Must be able to complete a quote or a scene by the slightest dialogue.

“Go to the mattresses!”

FIX
As I said, I tried just about everything trying to get $data to display single and double quotes in the alert box. I started simple by replacing the with /’ and with /”, to no avail. I also tried using the htmlspecialchars function, but that didn’t work either.

Furthermore, I tried to replace the double quotes with single quotes and escape the string. It still didn’t work.

When I finally got close to solving the problem, I realized it wasn’t necessarily escaping the quotes, it was also escaping the line breaks. Since PHP and JavaScript have the same line break escape (\n), it was a little tricky.

I finally got a script off the internet to escape the string and put the special characters into their HTML entities. It didn’t work, but I built on that same idea.

My script is now:

$data = preg_replace("/\r?\n/", "\\n", htmlspecialchars(str_replace("'", "\'", $data)));

echo "<a onclick=\"javascript:alert('$data');\">?</a>\n";

Works like a charm.