Custom Module Update Form 404 When Editing Name

1

With v6.0 editing the name of a custom module item on the front end with the update form changes the URL to match the new name. This can result in a 404 page if your update form is redirecting back to the item detail page. I have come up with a javascript to correct this. So far it has worked. I am sure there are some characters it is not filtering out and maybe there is a better way.

Form sample

<form>
   <input type="hidden" id="redirect" name="redirectURL" value="{{request.request_url.path}}">
   <label>Name</label>
   <input type="text" name="prop_Name" id="title" onchange="setredirect()"  value="{{this.Name}}"> 
   <input type="submit" value="Update">
</form>

Obviously are things missing from this form but I am just focusing on what’s needed for this example.

I set the redirect to go back to the current page, the item details page. If the Name is not changed then there is no issue and this works just fine.

I added IDs to both inputs and an “onchange” to the name property.

Here is the javascript.

<script>
  function setredirect(){
    var name = document.getElementById('title').value;
    document.getElementById("redirect").value = "{{request.request_url.path | remove: page }}" + name.replace(/[,']/g,'').replace(/(\s-\s|\s&\s|\s\/\s|\s-\s)/g,'-').replace(/([\s.\/]|\.\s)/g,'-').toLowerCase();
   }
</script>

I have used three different .replace to make it work to match what Treepl does to make the URL. Again there are probably characters missing but these are the ones I have found to be used by my clients so far.

I used the following “assign” to filter out the current page so that I could get the path without hardcoding it in.

{% assign page = request.request_url.path | split: "/" | last %}

Hope this helps. Let me know if you have a better way.

2 Likes