0

How can I write a script that will change an input field's text value, but the field is not yet created?

The script is loaded before the input field is created. It needs to know that when any input with a certain class is created, it will then have some text put in to its value. Can this be done with live()?

To clarify, the order of events are:

1 - Application-wide JavaScript for the page is loaded. This contains script something along the lines of:

$('.myDiv input').each(function() {
    $(this).val('some text');
});

2 - A second page-specific script is now loaded, which dynamically creates an input on the page, with no value. I CANNOT MODIFY THIS SCRIPT. This is important, I need a solution that does not modify this script (otherwise I wouldn't be posting here).

$('.myDiv').html('<input type="text" />');
BadHorsie
  • 14,135
  • 30
  • 117
  • 191

3 Answers3

1

Yes, live() will do what you want. It will work as long as you use jQuery to add the elements dynamically.

The jQuery.live() api is clear on this

Use live() to bind on focus or blur or keyup whenever you want to change the value of the input field.

$('.clickme').live('click', function() {
  // Live handler called.
});

UPDATE: assuming you cant change the input elements in any way before the are added.

$('#container').bind("DOMSubtreeModified",function() { 
   $('input.myClass:not(.alreadyChanged)').val("whatever you want to change it to");
   $('input.myClass:not(.alreadyChanged)').addClass('.alreadyChanged');
}

This way you don't need to use live() when a new element is added to the DOM, the function is automatically triggered.

Ali
  • 12,354
  • 9
  • 54
  • 83
  • I clarified my original post. How would I go about using live to change the text of the field though, when it is created? Focus, blur, etc. is simple enough but I wasn't sure what event to use to change the text. – BadHorsie Aug 18 '11 at 10:00
  • If you are creating the input using jQuery why not just change it when you are creating it? If that is not an option, can you call click() or focus() events on the element manually? You could also put a `change()` event on a container div or body itself. So when that div or the body changes, it loops through all your given input fields and changes their text. If you don't want to loop over all the fields each time, you could add an additional class to each input field whose value you have already changed and use the jquery selector to eliminate them `$("input.myClass:not(.alreadyChanged)")`. – Ali Aug 18 '11 at 10:04
  • I cannot change it when I am creating it, because a plugin script is creating it, that I need to avoid modifying just for this. So if you bear this in mind it means I can't add a class to the input, I can't change its value, etc. I have to wait for it to get created, and have a script that listens for when it gets created and then changes its text (if this is possible). – BadHorsie Aug 18 '11 at 10:10
  • Your solution is still the same, you can attach a change listener on the container of the input elements or body as shown above. I've updated my answer. – Ali Aug 18 '11 at 10:24
  • Update: you have to bind to `DOMSubtreeModified` in order to detect changes to the DOM. answer updated. – Ali Aug 18 '11 at 10:27
  • What? no +1 after all that? :-) – Ali Aug 18 '11 at 11:21
0

Since the script is already loaded.

I think the myClass property should be with 

<input style="myClass Styles Here">TEXT is Here</input>

when it is created.

jwchang
  • 10,584
  • 15
  • 58
  • 89
0

live() does not support the load event, unfortunately. Can you put it in the ready event?

$().ready(function(){ $('.myClass').val('my text');});

You could also consider wrapping the jQuery-plugin and change the text immediately after the plugin has been applied. Read more about extending jQuery plugins here: Best Way to Extend a jQuery Plugin

Community
  • 1
  • 1
Jørgen
  • 8,820
  • 9
  • 47
  • 67
  • Hmm, yeah `live('load', function() { ...` would be ideal really. That's basically what I'm trying to do. – BadHorsie Aug 18 '11 at 10:13