Convincing IIS7 to accept URLs containing plusses (+)

nathan — Sat, 03 Jul 2010 00:16:50 +0000

Problem:

Old retiring IIS 5.0 web server has been accepting URLs containing plus (+) for spaces instead of %20 for like 74 years. People have the old URLs bookmarked and stuff so they’ll keep going to them. The content will still exist on the replacement IIS 7 web server. Wouldn’t it be nice to make it transparent?

(Not to mention “foo+bar.pdf” is sane, but “foo%20bar.pdf” reads “foo percent twenty bar”, awkwardly. )

The problem is that IIS7 by default considers naked plusses in the URL as scary and sends a 404.11, URL_DOUBLE_ESCAPED error. Even if you convince it the URL is OK, it no longer maps plus to space and finds a piece of content.

On the old IIS 5.0 server these URLs both work, serving up the document named “foo bar.pdf”:

http://server/foo+bar.pdf

http://server/foo%20bar.pdf

On the new IIS 7 (Windows 2008) server, the second URL works but the first one gives an error.

Solution:

I put this in my application’s web.config file:

 version="1.0" encoding="UTF-8"?>
>
  >
    >
       allowDoubleEscaping="True" />
    >
    >
      >
         name="RewriteUserFriendlyURL1" stopProcessing="false">
           url="\+" />
          >
             input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
             input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          >
           type="Rewrite" url="{UrlDecode:{REQUEST_URI}}" />
        >
      >
    >
  >
>

the allowDoubleEscaping directive on line 5 solves the first part of the problem, allowing IIS to handle unescaped plusses. The rewrite rule below passes the requested URI through the UrlDecode function (line 15), which thankfully still remembers the time-tested convention of plus equaling space. Now both forms of the URL work.

(I didn’t really write the rewrite stanza, I just stumbled around with the rewrite URL editor in the IIS Manager until it worked)

Yay!

Adding WordPress-like tags to a Symfony 1.4 admin generator form

nathan — Sat, 15 May 2010 01:15:46 +0000

Update 2010-08-06: It looks like the sfDoctrineActAsTaggablePlugin team has incorporated much of this into the version they released today. I’ll post more when I get a chance to try it out.

This week I used the sfDoctrineActAsTaggablePlugin to add tag behavior to a Symfony project. My goal was to have a user interface similar to WordPress’s, which I like a lot:

Another goal was to use JQuery UI with the nice visual theme I built with their Theme Roller tool (which I had already installed and added to my symfony project).

The documentation was a little bit sparse and I’ll probably end up doing this again, so here are relevant instructions so Future Me and others may also benefit:

Set up

get/install/checkout sfDoctrineActAsTaggablePlugin. I use this line in the `svn:externals` property on plugins/:

sfDoctrineActAsTaggablePlugin/ http://svn.symfony-project.com/plugins/sfDoctrineActAsTaggablePlugin/tags/RELEASE_1_0_0

enable the plugin in config/ProjectConfiguration.class.php.

    $this->enablePlugins(
                         'sfDoctrinePlugin', 
                         ...
			 'sfDoctrineActAsTaggablePlugin'
			 );

Add the Taggable behavior to your model(s) in config/doctrine/schema.yml
```
    actAs:            { Timestampable: ~ , Taggable: ~ }
```
(not templates: [Taggable] as the README says)
Rebuild your model and forms and everything. My favorite way is to dump the old data to fixtures, then rebuild everything.
```
./symfony --color doctrine:data-dump
./symfony --color doctrine:build --all --and-load --no-confirmation
```

At this point you should have new database tables tag and tagging, and the proper model relations and everything.

Form fields for tags

UI for entering tags, displaying existing tags (with remove buttons)

I’m going to have

a single text input field for adding tags,
a link to display a tag cloud (see below) if the user wants to pick tags by clicking instead of typing
a styled list of existing tags with delete icons
a hidden field for storing tags to be removed after clicking on the delete icons.

The delete icons will trigger a Javascript function which populates the hidden field and hides the tag. Changes won’t be saved until the user submits the form, so we’ll also provide a little reminder.

add the tag field(s) to the configure() method of your form, in lib/form/doctrine/ModelForm.class.php.

    // this text appears in gray until the user focuses on the field
    $default = 'Add tags with commas';
    $this->widgetSchema['new_tags'] = new sfWidgetFormInput
      (
       array('label'   =>  'Add Tags', 'default'   =>  $default),
       array(
             'onclick' => "if (this.value=='$default') { 
                                this.value = ''; this.style.color='black'; }", 
             'size'   =>  '32',
	     'id' => 'new_tags', 
             // don't let the browser autocomplete.  We'll add typeahead, below
	     'autocomplete' => "off",      
	     'style' => 'color:#aaa'
	     )
       );
    // allow the field to remain blank
    $this->setValidator('new_tags', new sfValidatorString(array('required' => false)));
 
    // this hidden field will be populated with JavaScript.
    $this->widgetSchema['remove_tags'] = new sfWidgetFormInputHidden();
    $this->setValidator('remove_tags', new sfValidatorString(array('required' => false)));

Add a partial with the admin generator. In apps/frontend/modules/mymodule/config/generator.yml:

      form:
        display:
          # add another section after the other fields...
          Tags: [_tags]

edit the partial, apps/frontend/modules/mymodule/templates/_tags.php

 use_helper('JavascriptBase', 'Tags')  ?>
  
 
// much of this I copied and adapted from a cached admin generator template.
$name = 'new_tags'; $label = ''; $help = ''; 
$class = 'sf_admin_form_row sf_admin_text sf_admin_form_field_tags';
 
 ?>
 
   echo $class ?> $form[$name]->hasError() and print ' errors' ?>">
     echo $form[$name]->renderError() ?>
    
       echo $form[$name]->renderLabel($label) ?>
 
       echo $form[$name]->render($attributes instanceof sfOutputEscaper ? $attributes->getRawValue() : $attributes) ?>
 
 
 // tag cloud will go here, see below ?>
 
 

 
       if ($help): ?>
         echo __($help, array(), 'messages') ?>
       elseif ($help = $form[$name]->renderHelp()): ?>
         echo $help ?>
       endif; ?>
    
  
 
 // list of current tags, with remove buttons ?>


Current tags

   
    foreach ( $form->getObject()->getTags() as $t):   ?>
     
 
echo link_to_function("Remove '$t'", 
           "remove_tag(".json_encode($t).", this.parentElement)", 
           "class=removetag")
 
  ?>  echo $t  ?>
     endforeach;  ?>

Tag(s) removed. Remember to save the complaint.

Add a Javascript function to support the “remove tag” buttons.

$(function() {
            // add fancy jQuery UI button styles.  See additional in "CSS" below
	    $(".taglist a").button({icons:{primary:'ui-icon-trash'}, text: false});
});
 
function remove_tag (tag, element) {
  remove_field = $("#complaint_remove_tags");
  if ( remove_field.val().length ) {
    remove_field.val( remove_field.val()  + "," + tag );
  }
  else {
    remove_field.val( tag );
  }
  $(element).hide();
  $("#remove_tag_help").show();
}

edit the `processForm` action to process the `new_tags` and `remove_tags` fields. I started by copying the `processForm` method from cache/frontend/dev/modules/autoMymodel/actions/actions.class.php into apps/frontend/modules/mymodule/actions/actions.class.php, then added code after validation:

  protected function processForm(sfWebRequest $request, sfForm $form)
  {
    $form->bind($request->getParameter($form->getName()), $request->getFiles($form->getName()));
 
    if ($form->isValid())
    {
      $notice = $form->getObject()->isNew() ? 'The item was created successfully.' : 'The item was updated successfully.';
 
      // NEW: deal with tags
      if ($form->getValue('remove_tags')) {
	foreach (preg_split('/\s*,\s*/', $form->getValue('remove_tags')) as $tag) {
	  $form->getObject()->removeTag($tag);
	}
      }
      if ($form->getValue('new_tags')) {
	foreach (preg_split('/\s*,\s*/', $form->getValue('new_tags')) as $tag) {
          // sorry, it would be better to not hard-code this string
	  if ($tag == 'Add tags with commas') continue;
	  $form->getObject()->addTag($tag);
	}
      }
 
      try {
        $complaint = $form->save();
        // and the remainder is just pasted from the generated actions file

Yay! Now I can add, display, and remove tags. Now for the fancy parts.

Typeahead tag autocompletion

As detailed in the README, sfDoctrineActAsTaggablePlugin has typeahead support. I tried it, but I didn’t feel like the user interaction was quite smooth enough, and I wanted to use the excellent, beautiful, and user-expectation-meeting jQuery UI Autocomplete widget.

I ended up using the action provided by sfDoctrineActAsTaggablePlugin, but modified the view to return JSON instead of an HTML

multiple, remote demo

the jQuery UI Autocomplete documentation

override the completeSuccess view for the taggableComplete/complete action

mkdir -p apps/frontend/modules/taggableComplete/templates
touch apps/frontend/modules/taggableComplete/templates/completeSuccess.php

And here is my new template:


 
// we're rewriting the view for the taggable plugin to output JSON instead of HTML
// see http://wiki.jqueryui.com/Autocomplete
 
$tags_simple = array();
foreach ( $tagSuggestions as $suggestion ) {
  $tags_simple[] =  $suggestion['suggested'];
}
 
echo json_encode($tags_simple);

You can test your autocomplete action with a URL like http://myserver/myproject/taggableComplete/complete/current/p. In my case (because I have some data in my tag table) it returns this JSON-formatted array:

["PHP","plugins"]

Add jQuery UI javascript. I used a