80655

Can't change / get value of input after being opened with FeatherLight?

Question:

I've met a weird behavior. I'm trying to get / set the value of an input textbox <strong>After</strong> FeatherLight lightbox is closed. I get "Undefined" when trying to fetch the value of the textbox (again, after it was opened and closed via Featherlight). You can see my source code here:

<a href="https://jsfiddle.net/hgyba4dg/" rel="nofollow">https://jsfiddle.net/hgyba4dg/</a>

The only relevant part is the html code. try running the code on JSFiddle and see the input's value (the textbox's value). You'll see that you'll get "undefined" after closing the Featherlightbox. Here is the html:

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript"> var storeData = null; function openFeatherLight() { if (!storeData) { storeData = $.featherlight($('#MyDiv'), { 'persist' : true , 'beforeOpen' : sayHi , 'beforeClose' : sayBye, 'afterClose' : changeInputValueAfterClose }); } else { storeData.open(); } } function sayHi() { alert('Value of textbox BEFORE opening FeatherLight LightBox Is: ' + $('#MyTextBox').val()); } function sayBye() { alert('Value of textbox BEFORE CLOSING the FeatherLight LightBox Is: ' + $('#MyTextBox').val()); } function changeInputValueAfterClose() { $('#MyTextBox').val("Bla"); alert('Current Value Of Input TextBox After Change is: ' + $('#MyTextBox').val()); alert('We get "Undefined". Why?'); } </script> </head> <body> <div id="Shit" style="display: none;"> <div id="MyDiv"> Text <form id="MyForm"> <input type="text" value="Initial_Value_Set_By_Me_For_Testings" id="MyTextBox"> </form> </div> </div> <input name="Button1" type="button" value="Open FeatherLight" class="AddToMenuButton" onclick="openFeatherLight();"> </body> </html>

Answer1:

After the first time, the DOM elements remain detached (I open to reinsert it one day...). So $('#MyTextBox') won't work afterwards. Either keep a reference to it, or use storeData.$content.find('#MyTextBox')

Recommend

  • Javascript snippet not working (missing lib?)
  • Jquery Google Maps V3 - Information window is always fixed to one marker
  • How to center a menu using flexbox [closed]
  • reduce/reduce conflicts using ocamlyacc
  • Dependable views in Ember
  • jinja2 template not found and internal server error
  • How secure are apple APNS push notifications?
  • Why does the font in these TD elements render at different sizes?
  • Avoid registering duplicate broadcast receivers in Android
  • Java making confirming exit
  • Getting error 'Cannot read property 'document' of undefined' while importing exp
  • Why isn't obj.style.left = “200px”; working in this code?
  • Tell Git to stop prompting me for conflicts when none really exist?
  • Jquery UI tool tip close icon
  • Disabling Alt-F4 on a Win Forms NotifyIcon
  • Display issues when we change from one jquery mobile page to another in firefox
  • DotNetZip - Calculate final zip size before calling Save(stream)
  • Accessing IRQ description array within a module and displaying action names
  • Javascript Callbacks with Object constructor
  • Where to put my custom functions in Wordpress?
  • Warning: Can't call setState (or forceUpdate) on an unmounted component
  • bootstrap to use multiple ng-app
  • How to get icons for entities from eclipse?
  • Load html files in TinyMce
  • How can I get HTML syntax highlighting in my editor for CakePHP?
  • Free memory of cv::Mat loaded using FileStorage API
  • How do I configure my settings file to work with unit tests?
  • Turn off referential integrity in Derby? is it possible?
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • Bitwise OR returns boolean when one of operands is nil
  • XCode 8, some methods disappeared ? ex: layoutAttributesClass() -> AnyClass
  • JaxB to read class hierarchy
  • Easiest way to encapsulate a HTML5 webpage into an android app?
  • Busy indicator not showing up in wpf window [duplicate]
  • costura.fody for a dll that references another dll
  • Binding checkboxes to object values in AngularJs
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • UserPrincipal.Current returns apppool on IIS
  • Conditional In-Line CSS for IE and Others?