jQuery-Filling an Input Box in WordPress Admin

Though I have somehow managed to produce some relatively complex scripts, I am still at the stage with jQuery that, when I manage to achieve some elementary thing, I throw a little celebration in my trusty old Aeron.

I also tend to forget what I’ve figured out until the next time I have to achieve the same effect. So, here are some notes for future reference, or for the sake of other jQuery hackers, on how I think a textbox should be filled in WordPress Admin… from simple anchor links… and when the content – in this instance long image links –  is too long to be nicely contained.

The Specific Problem

In WP-RUBI, there’s a point where I want to give the user the option to employ some alternative versions of a default image.

Before I decided to spruce things up, the part of the draft version of the “Set Replacement” section in which we’re interested looked something like this:

wp-rubi-settings-3

(Just as a probably at this late date unnecessary reminder: All of the images in this post can be “embiggened,” as we used to say, with a click…)

Now, I could add these default images to the sequence of radio buttons (partially shown) which provide still more options for “Replacement Mode,” but the additional default images are more like “sub-alternatives” than major alternatives, and the options page is already long enough.

A reasonably sophisticated user probably knows to highlight the text, in this case a filename beginning http://localhost…, to be copied, then paste it into the box, but that’s kind of a lame, painstaking process even if you know to do it. Other users will try typing out the characters one by one. Either way, the work will be made more difficult or uncertain by the fact that the text box is too short for a long URL: Users will want check the link, and few users will also suspect that they can produce a look at the textbox contents – or, formally, the “type ‘url’ input box” – just by double-clicking on them.

double_click_text_box_to_sh

I don’t think I was aware I could (sometimes!) double-click to show full textbox contents until today, and I’ve been doing this since before there were computers almost.

I could style the input text to a smaller font-size, but doing so might cause eyestrain, and, anyway, we’re having fun with jQuery: So, let’s do it differently.

Basic Solution

Looking ahead, first we’ll add the elements we’re going to be acting on in the PHP/HTML mark-up, in the form of CSS selectors for jQuery to find. Since I already had an ID for input box (upload_image), the only things I needed to add specific to this objective were the def_image_link classes in the highlighted lines, which add two new image-link choices:

…which is going to output like this:

text-to-textbox-links-new_output

I won’t go into all the whats and whys of the PHP/HTML or the general approach I’m taking here, except to say that it’s all for use in a plug-in options page, this specific plug-in options page, and that, in case it isn’t obvious, plugins_url( 'REST OF LINK', __FILE__ ) converts the whole part of the link prior to REST OF LINK and adds them together: As already noted, the resultant image-links are already long, like, what?, 75 characters? I’m not going to count them, and don’t you do it either! Life’s too short.

Our jQuery script is going to make it so that all that the user has to do is click on any one of those links to transfer it instantly to the textbox.

Simple, right? Too simple for anyone much to bother to document it… until right here!

Actually, I think the problem is more that it’s so simple it was already primitive when jQuery was new, and that was 9 years and 11 months ago.

Our new script (which we’ll register and enqueue separately in its own file, since that seems to work better across installations in initial testing) gets the value of the selected link item def_image_link and puts it into the input textbox id’d as upload_image in the mark-up. Except for those class and id names, the following has hardly been modified from a ready example among many I ran across:

The main difference otherwise between the above and the most basic references you’ll find in jQuery documentation is the use of the “this” keyword on the third line. Otherwise, code doesn’t get much simpler, although non-WordPressers stumbling onto this post might be wondering why I’m typing “jQuery” over and over again, and might also be wondering why the script is being written out instead of attached as it were in situ to the click function. (Short answers: 1) You can’t use the $ sign, or, if you want to, you have to tell WP you’re going to, and, 2), in WordPress it’s preferred and often necessary and actually works out nicely to enqueue even the simplest scripts in separate .js files.)

So, it works, but it’s not very good. Specifically, the results will be sub-optimal in two ways:

  1. When you click on the link, the page “jumps” – or jumps or reloads or travels, etc. – depending on what kind of link you use after “href.” Even if you pointed it directly to upload_image (<a href="#upload_image"…), it would still jump distractingly. Since I want the links actually to link to the image files, but not take the user to them, the action would be even more problematic.
  2. When the textbox is filled, the only part of the image filename that’s actually changing as a result of the operation (_background or _white) is hidden – meaning you can’t tell immediately that the desired exchange of the new filename for the old one was in fact achieved. As already discussed above, users are going to end up looking at the textbox and clicking on it or side-scrolling to be sure it’s what they wanted.

So: Slightly more sophisticated solution

Solving these two problems was almost as simple as creating them was, although one involved using a CSS argument – direction - that I’d never used before.

To solve the first problem, we just need to stop the default click action from occurring. For this purpose, jQuery provides the aptly method event.preventDefault().

To solve the second problem, we just need to add a CSS class and style it.

Putting them together:

To style the addClass added class “url-rtl” in my plug-in admin css file:

So, now, when the user clicks on one of the links, the textbox gets filled with the live-clicked link’s html, formatted right to left (rtl) instead of left to right (ltr), which latter is the style previously set for all input[type=url]s… And now also, thanks to preventDefault, there isn’t any jumping around.

text-to-textbox-links-for-j

Just after clicking…

Close-up on the rtl part:

text-to-textbox-links-cu

That’s about all there is to it…

…except for one thing: When you thereafter want to work with the url/textbox (#upload_image), dealing with an “rtl”-formatted box in a “ltr” language will be confusing – for instance, if I change my mind and try a shorter URL, it’ll look like it has a bunch of spaces at the beginning…

text-to-textbox-links-rtl-confusion

…and the text itself will behave unexpectedly when and if I try to change it manually. Don’t ask. You just don’t want to deal with it. Luckily, it’s easy to remove the just-added class as soon as anyone clicks on the box – and this time let’s recuperate the familiar “$” sign, since now the re-typing of “jQuery” is getting distracting, at least to me – heck, and while we’re at it let’s add extra readability spaces just because we can:

That works.

(updated 17 July 2016)


WordPresser
Home Page  Public Email  Twitter  Facebook  YouTube  Github   

Writing since ancient times, blogging, e-commercing, and site installing-designing-maintaining since 2001; WordPress theme and plugin configuring and developing since 2004 or so; a lifelong freelancer, not associated nor to be associated with any company, publication, party, university, church, or other institution. 

Posts in this series

Commenter Ignore Button by CK's Plug-Ins

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Related

Noted & Quoted

TV pundits and op-ed writers of every major newspaper epitomize how the Democratic establishment has already reached a consensus: the 2020 nominee must be a centrist, a Joe Biden, Cory Booker or Kamala Harris–type, preferably. They say that Joe Biden should "run because [his] populist image fits the Democrats’ most successful political strategy of the past generation" (David Leonhardt, New York Times), and though Biden "would be far from an ideal president," he "looks most like the person who could beat Trump" (David Ignatius, Washington Post). Likewise, the same elite pundit class is working overtime to torpedo left-Democratic candidates like Sanders.

For someone who was not acquainted with Piketty's paper, the argument for a centrist Democrat might sound compelling. If the country has tilted to the right, should we elect a candidate closer to the middle than the fringe? If the electorate resembles a left-to-right line, and each voter has a bracketed range of acceptability in which they vote, this would make perfect sense. The only problem is that it doesn't work like that, as Piketty shows.

The reason is that nominating centrist Democrats who don't speak to class issues will result in a great swathe of voters simply not voting. Conversely, right-wing candidates who speak to class issues, but who do so by harnessing a false consciousness — i.e. blaming immigrants and minorities for capitalism's ills, rather than capitalists — will win those same voters who would have voted for a more class-conscious left candidate. Piketty calls this a "bifurcated" voting situation, meaning many voters will connect either with far-right xenophobic nationalists or left-egalitarian internationalists, but perhaps nothing in-between.

Comment →

Understanding Trump’s charisma offers important clues to understanding the problems that the Democrats need to address. Most important, the Democratic candidate must convey a sense that he or she will fulfil the promise of 2008: not piecemeal reform but a genuine, full-scale change in America’s way of thinking. It’s also crucial to recognise that, like Britain, America is at a turning point and must go in one direction or another. Finally, the candidate must speak to Americans’ sense of self-respect linked to social justice and inclusion. While Weber’s analysis of charisma arose from the German situation, it has special relevance to the United States of America, the first mass democracy, whose Constitution invented the institution of the presidency as a recognition of the indispensable role that unique individuals play in history.

Comment →

[E]ven Fox didn’t tout Bartiromo’s big scoops on Trump’s legislative agenda, because 10 months into the Trump presidency, nobody is so foolish as to believe that him saying, “We’re doing a big infrastructure bill,” means that the Trump administration is, in fact, doing a big infrastructure bill. The president just mouths off at turns ignorantly and dishonestly, and nobody pays much attention to it unless he says something unusually inflammatory.On some level, it’s a little bit funny. On another level, Puerto Rico is still languishing in the dark without power (and in many cases without safe drinking water) with no end in sight. Trump is less popular at this point in his administration than any previous president despite a generally benign economic climate, and shows no sign of changing course. Perhaps it will all work out for the best, and someday we’ll look back and chuckle about the time when we had a president who didn’t know anything about anything that was happening and could never be counted on to make coherent, factual statements on any subject. But traditionally, we haven’t elected presidents like that — for what have always seemed like pretty good reasons — and the risks of compounding disaster are still very much out there.

Comment →
CK's WP Plugins

Categories

Extraordinary Comments

CK's WP Plugins