{"id":1220,"date":"2015-11-11T17:37:53","date_gmt":"2015-11-11T22:37:53","guid":{"rendered":"https:\/\/www.redline13.com\/blog\/?p=1220"},"modified":"2022-01-03T20:01:40","modified_gmt":"2022-01-04T01:01:40","slug":"change-test-name","status":"publish","type":"post","link":"https:\/\/www.redline13.com\/blog\/2015\/11\/change-test-name\/","title":{"rendered":"Change Test Name"},"content":{"rendered":"<p>Customer request<\/p>\n<blockquote>\n<div>I would like to be able to rename a test, I often clone existing tests (a great feature!) and sometimes forget to rename the new test.<\/div>\n<\/blockquote>\n<div>As we were updating the User Interface for <a href=\"https:\/\/www.redline13.com\/blog\/2015\/11\/bootstrap-update\/\">Bootstrap updates<\/a>\u00a0we were able to get this done pretty quickly.<\/div>\n<div>Once you have launched a test, cancelled a test, or completed the test you can update the name as you see need.<\/div>\n<div><\/div>\n<ul>\n<li>Select the &#8216;edit&#8217; icon next to the name<\/li>\n<li>Popup editor appears<\/li>\n<\/ul>\n<div><\/div>\n<div>\u00a0<a href=\"https:\/\/www.redline13.com\/blog\/wp-content\/uploads\/2015\/11\/Screen-Shot-2015-11-11-at-5.33.54-PM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1225\" src=\"https:\/\/www.redline13.com\/blog\/wp-content\/uploads\/2015\/11\/Screen-Shot-2015-11-11-at-5.33.54-PM.png\" alt=\"Screen Shot 2015-11-11 at 5.33.54 PM\" width=\"642\" height=\"152\" \/><\/a><\/div>\n<ul>\n<li>change your test name<\/li>\n<li>click the &#8216;CheckBox&#8217; to save<\/li>\n<\/ul>\n<p><a href=\"https:\/\/www.redline13.com\/blog\/wp-content\/uploads\/2015\/11\/Screen-Shot-2015-11-11-at-5.34.13-PM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1226\" src=\"https:\/\/www.redline13.com\/blog\/wp-content\/uploads\/2015\/11\/Screen-Shot-2015-11-11-at-5.34.13-PM.png\" alt=\"Screen Shot 2015-11-11 at 5.34.13 PM\" width=\"646\" height=\"118\" srcset=\"https:\/\/www.redline13.com\/blog\/wp-content\/uploads\/2015\/11\/Screen-Shot-2015-11-11-at-5.34.13-PM.png 1988w, https:\/\/www.redline13.com\/blog\/wp-content\/uploads\/2015\/11\/Screen-Shot-2015-11-11-at-5.34.13-PM-300x55.png 300w, https:\/\/www.redline13.com\/blog\/wp-content\/uploads\/2015\/11\/Screen-Shot-2015-11-11-at-5.34.13-PM-1024x187.png 1024w, https:\/\/www.redline13.com\/blog\/wp-content\/uploads\/2015\/11\/Screen-Shot-2015-11-11-at-5.34.13-PM-768x141.png 768w, https:\/\/www.redline13.com\/blog\/wp-content\/uploads\/2015\/11\/Screen-Shot-2015-11-11-at-5.34.13-PM-1536x281.png 1536w, https:\/\/www.redline13.com\/blog\/wp-content\/uploads\/2015\/11\/Screen-Shot-2015-11-11-at-5.34.13-PM-1568x287.png 1568w\" sizes=\"auto, (max-width: 646px) 100vw, 646px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"text-decoration: underline;\"><strong>Bonus &#8211; the code using Bootstrap PopOver.<\/strong><\/span><\/p>\n<p>We did not want to include yet another javascript library that did this for us. \u00a0Though if you want there is a good one\u00a0<a href=\"https:\/\/vitalets.github.io\/x-editable\/\">https:\/\/vitalets.github.io\/x-editable\/<\/a>.<\/p>\n<p>Instead we implemented just what we needed using <a href=\"http:\/\/getbootstrap.com\/javascript\/#popovers\">Bootstrap PopOver<\/a>, though we did not make this generic enough to throw into your code but it gives you an idea.<\/p>\n<p><strong>HTML Snippets<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;!-- The icon to edit the test name --&gt;\n&lt;span onclick=\"viewLoadTestHelper.editableShow()\" class=\"name-edit glyphicon glyphicon-edit\" aria-hidden=\"true\" data-placement=\"top\" title=\"Change Test Name\"&gt;&lt;\/span&gt;\n\n&lt;!-- Somewhere else on the page we keep the markup for the edit box --&gt;\n&lt;!-- For an Editable Name, we hide by default --&gt;\n&lt;div id=\"editable-input\" style=\"display:none;\"&gt;\n  &lt;div class=\"form-inline\"&gt;\n    &lt;input type=\"text\" class=\"form-control editable-name\"&gt;\n    &lt;!-- We pass in some data to editable name, but that could be stored in a data- attribute --&gt;\n    &lt;button onclick=\"viewLoadTestHelper.editableName( [your data] )\" type=\"submit\" class=\"btn btn-primary btn-sm \"&gt;&lt;i class=\"glyphicon glyphicon-ok\"&gt;&lt;\/i&gt;&lt;\/button&gt;\n    &lt;!-- Cancel updating the name we will just drop the box --&gt;\n    &lt;button onclick=\"viewLoadTestHelper.editableCancel()\"type=\"button\" class=\"btn btn-default btn-sm \"&gt;&lt;i class=\"glyphicon glyphicon-remove\"&gt;&lt;\/i&gt;&lt;\/button&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;<\/pre>\n<p><strong>And the\u00a0javascript to match<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">var editableHelper = { \n\n  \/**\n   * Set up field for popover editing \n   * Need to pull from page and push into dynamic popover by listening to shown event.\n   *\/\n  editableSetup : function( ){\n    \/\/ Hard cleanup\n    $('.name-edit').popover('destroy');\n\n    \/\/ We use the manual control on the popover\n    \/\/ We are using HTML content\n    \/\/ Pull in the HTML from a content stored in the page (#editable-input)\n    $('.name-edit').popover({ trigger : 'manual', html: true , content: $('#editable-input').html() });\n\n    \/\/ We watch for the popover to show, then grab the text and place it inside the input field. \n    $('.name-edit').on('shown.bs.popover', function () {\n      $('.popover input.editable-name').val(  $(\"#testname\").text() );\n    })\n\n    \/\/ You can put this somewhere on your page where you show errors.\n    $('.on-editable-error').text(\"\");\n  },\n\n  \/** Manual Control of Popover - Show *\/\n  editableShow : function( ) {\n    $('.name-edit').popover('show');\n  },\n\n  \/** Manual Control of Popover - Hide *\/\n  editableCancel : function( ) {\n    $('.name-edit').popover('hide');\n  },\n  \n  \/**\n   * On Save using $.post \n   *\/\n  editableName : function ( loadTestId ) {\n    \/\/ Grab value from field.\n    var name = $('.popover input.editable-name').val();\n    \/\/ Grab original value\n    var oname = $(\"#testname\").text();\n\n    \/\/ Manual Control, hide the popover\n    $('.name-edit').popover('hide');\n    \/\/ Make sure we have content and it is not what we already had.\n    if ( name &amp;&amp; name.trim().length &gt; 0 &amp;&amp; name != oname ) {\n\n      \/\/ POST To your endpoint\n      $.post( '\/YOUR ENDPOINT', { \"name\": name } )\n      .done(function(data) {\n        \/\/ Update field on the page\n        $(\"#testname\").text( name );\n      })\n      .fail( function(error){\n        \/\/ Set error on page if there is an issue.\n        $('.on-editable-error').text(\"Failed to change name! \" + error.statusText );\n      });\n    }\n  }\n}\n\n\/\/ Initialize somewhere on page load.\n$(function() {\n EditableHelper.editableSetup();\n});<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Customer request I would like to be able to rename a test, I often clone existing tests (a great feature!) and sometimes forget to rename the new test. As we were updating the User Interface for Bootstrap updates\u00a0we were able to get this done pretty quickly. Once you have launched a test, cancelled a test, or completed the test you can update the name as you see need. Select the &#8216;edit&#8217; icon next to the name<a class=\"more-link\" href=\"https:\/\/www.redline13.com\/blog\/2015\/11\/change-test-name\/\">Read More &rarr;<\/a><\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[109,505,537],"class_list":{"0":"entry","1":"post","2":"publish","3":"author-richardfriedman","4":"post-1220","6":"format-standard","7":"category-blog","8":"post_tag-bootstrap","9":"post_tag-test-results","10":"post_tag-user-interface"},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.12 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Change Test Name - RedLine13<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.redline13.com\/blog\/2015\/11\/change-test-name\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Change Test Name - RedLine13\" \/>\n<meta property=\"og:description\" content=\"Customer request I would like to be able to rename a test, I often clone existing tests (a great feature!) and sometimes forget to rename the new test. As we were updating the User Interface for Bootstrap updates\u00a0we were able to get this done pretty quickly. Once you have launched a test, cancelled a test, or completed the test you can update the name as you see need. Select the &#8216;edit&#8217; icon next to the nameRead More &rarr;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.redline13.com\/blog\/2015\/11\/change-test-name\/\" \/>\n<meta property=\"og:site_name\" content=\"RedLine13\" \/>\n<meta property=\"article:published_time\" content=\"2015-11-11T22:37:53+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-01-04T01:01:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.redline13.com\/blog\/wp-content\/uploads\/2015\/11\/Screen-Shot-2015-11-11-at-5.33.54-PM.png\" \/>\n<meta name=\"author\" content=\"Rich Friedman\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Rich Friedman\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.redline13.com\/blog\/2015\/11\/change-test-name\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.redline13.com\/blog\/2015\/11\/change-test-name\/\"},\"author\":{\"name\":\"Rich Friedman\",\"@id\":\"https:\/\/www.redline13.com\/blog\/#\/schema\/person\/0fadb7f3ef665407f3c93c8ec84e741a\"},\"headline\":\"Change Test Name\",\"datePublished\":\"2015-11-11T22:37:53+00:00\",\"dateModified\":\"2022-01-04T01:01:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.redline13.com\/blog\/2015\/11\/change-test-name\/\"},\"wordCount\":165,\"publisher\":{\"@id\":\"https:\/\/www.redline13.com\/blog\/#organization\"},\"keywords\":[\"bootstrap\",\"test results\",\"user interface\"],\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.redline13.com\/blog\/2015\/11\/change-test-name\/\",\"url\":\"https:\/\/www.redline13.com\/blog\/2015\/11\/change-test-name\/\",\"name\":\"Change Test Name - RedLine13\",\"isPartOf\":{\"@id\":\"https:\/\/www.redline13.com\/blog\/#website\"},\"datePublished\":\"2015-11-11T22:37:53+00:00\",\"dateModified\":\"2022-01-04T01:01:40+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.redline13.com\/blog\/2015\/11\/change-test-name\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.redline13.com\/blog\/2015\/11\/change-test-name\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.redline13.com\/blog\/2015\/11\/change-test-name\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.redline13.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Change Test Name\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.redline13.com\/blog\/#website\",\"url\":\"https:\/\/www.redline13.com\/blog\/\",\"name\":\"RedLine13\",\"description\":\"(Almost) Free Load Testing in the Cloud\",\"publisher\":{\"@id\":\"https:\/\/www.redline13.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.redline13.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.redline13.com\/blog\/#organization\",\"name\":\"RedLine13\",\"url\":\"https:\/\/www.redline13.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.redline13.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.redline13.com\/blog\/wp-content\/uploads\/2013\/06\/cropped-rl13-header-logo.jpg\",\"contentUrl\":\"https:\/\/www.redline13.com\/blog\/wp-content\/uploads\/2013\/06\/cropped-rl13-header-logo.jpg\",\"width\":300,\"height\":68,\"caption\":\"RedLine13\"},\"image\":{\"@id\":\"https:\/\/www.redline13.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.redline13.com\/blog\/#\/schema\/person\/0fadb7f3ef665407f3c93c8ec84e741a\",\"name\":\"Rich Friedman\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.redline13.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/8651ce662fc18353b90c1922f9d29efb01173afa5500224b4d9a355d858a7bd9?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/8651ce662fc18353b90c1922f9d29efb01173afa5500224b4d9a355d858a7bd9?s=96&d=mm&r=g\",\"caption\":\"Rich Friedman\"},\"sameAs\":[\"http:\/\/richardfriedman@yahoo.com\"],\"url\":\"https:\/\/www.redline13.com\/blog\/author\/richardfriedman\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Change Test Name - RedLine13","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.redline13.com\/blog\/2015\/11\/change-test-name\/","og_locale":"en_US","og_type":"article","og_title":"Change Test Name - RedLine13","og_description":"Customer request I would like to be able to rename a test, I often clone existing tests (a great feature!) and sometimes forget to rename the new test. As we were updating the User Interface for Bootstrap updates\u00a0we were able to get this done pretty quickly. Once you have launched a test, cancelled a test, or completed the test you can update the name as you see need. Select the &#8216;edit&#8217; icon next to the nameRead More &rarr;","og_url":"https:\/\/www.redline13.com\/blog\/2015\/11\/change-test-name\/","og_site_name":"RedLine13","article_published_time":"2015-11-11T22:37:53+00:00","article_modified_time":"2022-01-04T01:01:40+00:00","og_image":[{"url":"https:\/\/www.redline13.com\/blog\/wp-content\/uploads\/2015\/11\/Screen-Shot-2015-11-11-at-5.33.54-PM.png"}],"author":"Rich Friedman","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Rich Friedman","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.redline13.com\/blog\/2015\/11\/change-test-name\/#article","isPartOf":{"@id":"https:\/\/www.redline13.com\/blog\/2015\/11\/change-test-name\/"},"author":{"name":"Rich Friedman","@id":"https:\/\/www.redline13.com\/blog\/#\/schema\/person\/0fadb7f3ef665407f3c93c8ec84e741a"},"headline":"Change Test Name","datePublished":"2015-11-11T22:37:53+00:00","dateModified":"2022-01-04T01:01:40+00:00","mainEntityOfPage":{"@id":"https:\/\/www.redline13.com\/blog\/2015\/11\/change-test-name\/"},"wordCount":165,"publisher":{"@id":"https:\/\/www.redline13.com\/blog\/#organization"},"keywords":["bootstrap","test results","user interface"],"articleSection":["Blog"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.redline13.com\/blog\/2015\/11\/change-test-name\/","url":"https:\/\/www.redline13.com\/blog\/2015\/11\/change-test-name\/","name":"Change Test Name - RedLine13","isPartOf":{"@id":"https:\/\/www.redline13.com\/blog\/#website"},"datePublished":"2015-11-11T22:37:53+00:00","dateModified":"2022-01-04T01:01:40+00:00","breadcrumb":{"@id":"https:\/\/www.redline13.com\/blog\/2015\/11\/change-test-name\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.redline13.com\/blog\/2015\/11\/change-test-name\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.redline13.com\/blog\/2015\/11\/change-test-name\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.redline13.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Change Test Name"}]},{"@type":"WebSite","@id":"https:\/\/www.redline13.com\/blog\/#website","url":"https:\/\/www.redline13.com\/blog\/","name":"RedLine13","description":"(Almost) Free Load Testing in the Cloud","publisher":{"@id":"https:\/\/www.redline13.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.redline13.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.redline13.com\/blog\/#organization","name":"RedLine13","url":"https:\/\/www.redline13.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.redline13.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.redline13.com\/blog\/wp-content\/uploads\/2013\/06\/cropped-rl13-header-logo.jpg","contentUrl":"https:\/\/www.redline13.com\/blog\/wp-content\/uploads\/2013\/06\/cropped-rl13-header-logo.jpg","width":300,"height":68,"caption":"RedLine13"},"image":{"@id":"https:\/\/www.redline13.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.redline13.com\/blog\/#\/schema\/person\/0fadb7f3ef665407f3c93c8ec84e741a","name":"Rich Friedman","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.redline13.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/8651ce662fc18353b90c1922f9d29efb01173afa5500224b4d9a355d858a7bd9?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8651ce662fc18353b90c1922f9d29efb01173afa5500224b4d9a355d858a7bd9?s=96&d=mm&r=g","caption":"Rich Friedman"},"sameAs":["http:\/\/richardfriedman@yahoo.com"],"url":"https:\/\/www.redline13.com\/blog\/author\/richardfriedman\/"}]}},"_links":{"self":[{"href":"https:\/\/www.redline13.com\/blog\/wp-json\/wp\/v2\/posts\/1220","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.redline13.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.redline13.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.redline13.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.redline13.com\/blog\/wp-json\/wp\/v2\/comments?post=1220"}],"version-history":[{"count":1,"href":"https:\/\/www.redline13.com\/blog\/wp-json\/wp\/v2\/posts\/1220\/revisions"}],"predecessor-version":[{"id":8691,"href":"https:\/\/www.redline13.com\/blog\/wp-json\/wp\/v2\/posts\/1220\/revisions\/8691"}],"wp:attachment":[{"href":"https:\/\/www.redline13.com\/blog\/wp-json\/wp\/v2\/media?parent=1220"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.redline13.com\/blog\/wp-json\/wp\/v2\/categories?post=1220"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.redline13.com\/blog\/wp-json\/wp\/v2\/tags?post=1220"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}