The page I am working on has a javascript function executed to print parts of the page. For some reason, printing in Safari, causes the window to somehow update. I say somehow, because it does not really refresh as in reload the page, but rather it starts the "rendering" of the page from start, i.e. scroll to top, flash animations start from 0, and so forth. The effect is reproduced by this fiddle: http://jsfiddle.net/fYmnB/ Clicking the print button and finishing or cancelling a print in Safari causes the screen to "go white" for a sec, which in my real website manifests itself as something "like" a reload. While running print button with, let's say, Firefox, just opens and closes the print dialogue without affecting the fiddle page in any way. Is there something with my way of calling the browsers print method that causes this, or how can it be explained - and preferably, avoided? P.S.: On my real site the same occurs with Chrome. In the ex
That's because you catch the change event on the div that surrounds both dropdowns. When you change the second dropdown, the event handler will be triggered and remove the dropdown where you made the selection and replace it with a new dropdown.
ReplyDeleteIf you want to bind the change event to the parent element, you need to check in which dropdown the change was made (using event.target), so that you don't recreate all the dropdowns. If you use delegate to bind the event handler, this will contain the element where the change was made:
jQuery('.change').delegate('select', 'change', function() { ... });
It might be simpler to bind the event for each select, then you don't have to check wich dropdown that caused the event. If you use delegate, you can bind the event eventhough the element doesn't exist yet, but you need to put a class, name or id on the dropdowns so that they can be identified:
jQuery('.change').delegate('#firstDropdown', 'change', function() { ... });
jQuery('.change').delegate('#secondDropdown', 'change', function() { ... });
your jquery was wrong.
ReplyDeletehere is my answer
Markup is as below
<div class='change'>
<div id="placeholder2" style="width:600px;">
<select>
<option selected="selected">D</option>
<option >E</option>
</select>
</div>
<div id="placeholder" style="width:600px;"></div>
</div>
jQuery should be like this.
jQuery('#placeholder2>select').change(function(){
var testVar= $(this).val();
alert(testVar);
if (testVar == "D")
{
var htmlString = '<select><option>C</option></select>';
jQuery('#placeholder').html(htmlString);
} else
{
var htmlString = '<select><option>A</option><option>B</option></select>';
jQuery('#placeholder').html(htmlString);
}
});
You were not getting the val of the input, but were getting the val of the div containing the input:
ReplyDeletevar testVar= jQuery('#placeholder2').val();
Should be
var testVar = jQuery('#placeholder2 select').val();
Also, the change subscriber should only be on the select, not the div also (to avoid the event firing when the second select is changed):
jQuery('.change').change(function() {
Should be
jQuery('.change select').change(function() {
See here for updated version.
The problem is that you've bound the change event handler to the <div> element that contains both <select> elements. Whenever you change any of those <select> elements, the change event bubbles up to the <div>. That works fine for the first one, but when you change the second it's firing that code again and replacing the entire <select> element.
ReplyDeleteThat's because you're accessing the selected value with
ReplyDeletevar testVar= jQuery('#placeholder2').val();
This tries to get .val() from the div, not the select. Try this:
var testVar= jQuery('#placeholder2 select').val();
Don't forget that when you add new elements, your previously applied methods won't have been applied to them.
ReplyDeleteYou will need to apply the event code to the new elements.
You are creating a div that have the class .change. So the function are handled by all change by its children.
ReplyDeleteHave a look at this code:
http://jsfiddle.net/7FfMd/13/