Develop Reference

Is it possible to Clone input field values in real time in a Cloned DIV? And how?

I have a cloned div that has input fields and dropdowns. The problem is that when the information is entered the clone does not update without refreshing the browser. I would like the clone to update on keyup or down. It being a Cloned div takes away the normal solutions.
Is this even something at is possible?
Updated And how?
$(function(){
var $dataAreaClone = $('.information_entry').clone();
$('.read_only_data_area_C').html($dataAreaClone);
});

I made a basic example in a fiddle. Typing in one master text input will update as many clones as you make of it using keyup: http://jsfiddle.net/3mW8u/

Short answer: yes.
Yeah I know I could have put it in a comment but it fully answers the question. :))
Edit: You can add a listener, and just copy the value on the new divs.
To add listener you can do something like:
$('#mainInput').onkeyup(function(el){
// Update values here
$('.clonedInput').each(function(subEl){subEl.value = el.value;});
})
Note: For simplicity (in the example) I considered the main input has an id, and cloned inputs have same class.

Fire a function on the change event of an already changed select

I have a form with three select fields. I want the second select to populate based off of the first selection and then the third to populate based on the second selection.
So property type -> County -> City. A basic idea of my js is as follows.
$('.property_type').change(function(){
if(this.value == 'com'){
$('.property_detail_county').html('MY HTML');
}else if((this.value == 'res')){
$('.property_detail_county').html('MORE HTML');
}
All of this is in the .ready(). And this is working fine. My problem is, when you try to write the second function that is made to populate the second select(the cities), it doesn't fire anything. Here is my second function, also inside of the ready.
$('.property_detail_county').change(function(){
console.log('Changed');
});
My theory is that the second function is never getting read or loaded because of the condition. Do you guys know of another way to do this?
Thanks in advance.
P.s. If this has already been answered, feel free to just point me in the right direction, I couldn't find the subject anywhere.

It depends on the HTML that you put in the 2nd dropdown. For example, if the HTML is like:
<div id="a"><select>...</select></div>
<div id="b">...</div>
And your javascript does this:
if(this.value == 'com'){
$('.property_detail_county').html('<select>...</select>');
}
You have replaced the 2nd select statement completely and there is no change even tied to it. The change even is tied to the old <select> that you replaced.
You can just reinstate the change code:
if(this.value == 'com'){
$('#b').html('<select id="sel_b">...</select>');
$("#sel_b").click(function() {
... the stuff to do when 2nd one is clicked ...
}
}
It really works better if you define a function to handle that second set of stuff.
Note There are other ways to do this where you detect the change event as it bubbles up to a <div> or some element higher up the DOM tree. You can read about that in the jQuery docs. It's called "event delegation".

How to append ajax data only once?

I am trying to append new returned data to my select tag when user selects a drop down menu
obj.prototype.getText=function(){
codes....
call ajax....
ajax.callback=function(data){
$('#option').append(data);
}
}
$('#dropdown').on('change', function(){
obj.getText()
})
My problem is that I only want to append data when the user clicks the dropdown menu the first time.
my code will keep append more same data to my #option as long as user keeps clicking the drop down menu...
Are there anyways to fix this? Thanks a lot.

Use .one() instead of .on(). It unbinds itself once you trigger the event once:
$('#dropdown').one('change', obj.getText);

You could simply remove the on change event, so it's no longer triggered.
$('#dropdown').off('change');
I would also look into the notion of a "run once" command. This isn't really what I would recommend here, but going forward, it's a cool thing to know. underscore.js does it well

You need to turn off the handler.
something like this.
$('#dropdown').on('change', function(){
obj.getText()
$('#dropdown').off('change');
})

That is probably the best way , turn of event handler , or you could always store a bool value in a hidden field , like
<input type="hidden" id="hidAleadyAppended" />
and then set it to true after it is appended once.
This way if you ever need to know if it has been appended already in other code, that is a quick reliable way to check

Selected value in dropdown won't clear jQuery

I've attached a vertical screen shot of some crazy stuff going on. Am I right to expect j$('[id$=Model_List]').children().remove(); to remove all items in a select list? For some reason the list is still holding on to the old selected value while clearing out the rest of the items.
I'm using the <Apex:selectlist in the html block, just not in the jQuery.
VG930M should be V243H as seen in hte console log...
Hopefully the screenshot gives you a better idea of what I'm talking about...
Any assistance would be greatly appreciated!

You need to remove all values from the drop down and reset the selected value.
j$("select[id$=Model_List] > option").remove();
j$("select[id$=Model_List]").val('');

You also need to clear the selected value:
$('[id$=Model_List]').val('');

I think, that salesforce selectList can not be filled out or cleared with jQuery (sure, you can do it but controller will not take the value).
Try to make it like in this example, with a hidden field:
Command button in Visualforce can't read selected item from dynamic drop down list

Use checkbox to set val() for field

Total N00b here, I have a long form wizard that needs one step to be dynamically shown/hidden dependant on a radio button. All is cool with the code thus far.
function checkRb () {
if($(this).is(":checked")){
//yes
$("#do_frick").val("step5");
//alert ("yeah");
}else {
//no
$("#do_frick").val("submit_step");
//alert ("no");
}
}
The issue is that the hidden field "#do_frick" is several steps further down the page. If I place it in the same div as the checkbox, values change no problem. Place "#do_frick" further down the form and it doesnt change.
I expect that $(this) is only looking inside the current div and not the entire document. I got this far with the help of a very good programmer and dont want to annoy him further with N00b questions, any help greatly appreciated :)
It appears that if I put the "#do_frick" inside a div that is further down the page the form wizard sets the to display:none and anything inside the div cannot be set... would this be correct ?

Please view source of your page to check what is ID of hidden field when it is several steps down. If ID is same then position should not be a problem.
this is not current div. In event handlers it means the object that raised the event. You should check jquery.com for more information on this.
PS:- try setting value of hidden field like this
$("#do_frick").attr("value","submit_step");

look for the id in generated html as suggested above.
Also look for any duplicate id shared by any other element, this will mess up things.

SO after much noodle scratching the answer is a little bug/hiccup in jQuery
Whenever the field is in a div that has the rule "dsiaply: none;" applied jQuery cant reach inside and change it. Checking with firebug, the field has an additional value "disabled=''". Using the command
$('#do_frick').get(0).disabled = false
Sorts it out.. finally:)
Final code:
function checkRb () {
if($(this).is(":checked")){
//yes
$('#do_frick').get(0).disabled = false //The important bit
$("#do_frick").val("step5");
//alert ("yeah");
}else {
//no
$("#do_frick").val("submit_step");
//alert ("no");
}
}