i am using this plugin
Now i am doing a way to clone the select dropdown. A button to add cloned divs.
So, an user have a initial dropdown, but he can add more. The div is cloned.
The main problem is that when i clone the div, the dropdown is associated to initial dropdown and no to the new, that is cloned. The result is: all dropdowns of the new cloned divs have the event to open the select associated to the first.
Script to call the plug in
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$(".mydds").msDropDown();
})
</script>
script to clone
<script type="text/javascript">
$(document).ready(function() {
$('#adicionar').live('click', function(){
var num = $('.linguas').length;
var newNum = new Number(num + 1);
var newElem = $('#copiar' + num).clone(true).prop('id', 'copiar' + newNum);
newElem.children(':text').prop('name', "myformdata[languages" + newNum + "]").prop('languages', 'languages' + newNum).val('');
$('#copiar' + num).after(newElem);
$('#apagar').prop('disabled', '');
});
</script>
Any idea to solve the problem?
Basically i think the event associated to dropdown is not copied...
thanks
Assuming you have only one dropdown per cloned element, you can use
$('#adicionar').live('click', function(){
var num = $('.linguas').length;
var newNum = new Number(num + 1);
var newElem = $('#copiar' + num).clone(true, true).attr('id', 'copiar' + newNum);
var id = newElem.find('select').msDropDown().data('dd').get('id');
newElem.find('[id]').each(function(){
$(this).attr('id',this.id.replace(id,'customid_' + newNum,'g') );
});
$('#copiar' + num).after(newElem);
newElem.find('select').msDropDown();
});
The problem is that the plugin gives an id to the initial select element, and uses that id to create other elements and also to refer to its related select.
You will need to modify all those ids as well as the reference.. (the code above does just that..)
demo http://jsfiddle.net/gaby/CXBZR/3/
In your script you are calling .clone(true). This true parameter is cloning the events and data.
From the API
.clone( [ withDataAndEvents ] )
withDataAndEvents: A Boolean indicating
whether event handlers should be
copied along with the elements. As of
jQuery 1.4, element data will be
copied as well.
If you remove this, or set it to false, this will stop the events from being cloned onto your new divs.
Related
I want to disable input id of buttons in java script.
My code:
var uniqid = "idModify_" + index;
var buttonModify = $('<input type="button"/>');
buttonModify.attr('id', uniqid);
li.append(buttonModify);
buttonModify.button();
if (my required condition is true)) {
$("#uniqid").attr("disabled", "disabled").addClass("disabled");
}
I have tried $(uniqid ).prop('disabled', true);
it does not work.
Note: index value will be 0 to n every time the button gets added to li.
You need to create ID selector using the variable uniqid
$("#" + uniqid).prop("disabled", true).addClass("disabled");
Better to use already referenced object
buttonModify.prop("disabled", true).addClass("disabled");
When I insert some thing in the input box of module 1 and click add module button to clone the required elements that I need it clones also the inserted input I've tried to prevent that using event.preventDefault(); but it's still copying the input box with the inserted input from module 1 however, I can't clear it using the clear button that is located in the input box moreover the appended select options doesn't work and when I select an option it doesn't change.
Here is my demo of what's happening:-
http://jsfiddle.net/0ojjt9Lu/6/
and here is my javascript code:
$(document).ready(function(){
$("#Sadd").click(function(event) {
event.preventDefault();
var lastId = $("#modules h1").length;
var $newLabel = $("#module-1-label").clone();
var $newSc = $("#module-1-scredit").clone();
var $newSgrade = $("#module-1-sgrade").clone();
$newLabel.html("<h1>Module " + (lastId+1) + ":</h1>");
$newSc.find("label").attr("for", "Sc"+(lastId+1));
$newSc.find("input").attr("name", "Sc"+(lastId+1)).attr("id", "Sc"+(lastId+1));
$newSgrade.find("label").attr("for", "Sgrade"+(lastId+1));
$newSgrade.find("select").attr("name", "Sgrade"+(lastId+1)).attr("id", "Sgrade"+(lastId+1));
$("#modules").append($newLabel, $newSc, $newSgrade);
});
$("#Sremove").click(function() {
var lastId = $("#modules h1").length;
if(lastId > 5){
var lastLi = $("#modules h1").last().closest("li");
var lastLi2 = lastLi.next("li");
var lastLi3 = lastLi2.next("li");
lastLi.remove();
lastLi2.remove();
lastLi3.remove();
}
});
});
Use .val("") on the new input to clear the data in on the clone
or do $(clone).find('input').val(""); if there is more than one input
In your case with the select box you need to add the following lines
After you declare (or on the same line) the variables
var $newSc = $("#module-1-scredit").clone().find('input').val("");
var $newSgrade = $("#module-1-sgrade").clone().find('option:selected').removeAttr('selected');
$newSgrade.find('option[value="-1"]').attr('selected',true);
Edit: Had to handle the reselection of the select due to default value being "-1" however you may need to look at the cloning of this select element. Perhaps on the page have the blank question hidden and just clone that.
These three functions all work on Chrome, but not IE or Firefox. The first functions adds a cloned row. The second function removes a cloned row. The third function resets the entire field. All three are well commented. Does anything obvious stick out to you? I am baffled.
Could it have something to do with the cloned rows using ID's and not classes?
$(function () {
$('#btnAdd').click(function () {
var num = $('.clonedInput').length, // Checks to see how many "duplicatable" input fields we currently have
newNum = new Number(num + 1), // The numeric ID of the new input field being added, increasing by 1 each time
newElem = $('#CloneRow' + num).clone().attr({'id': 'CloneRow' + newNum}).addClass('addedRow').fadeIn('slow'); // create the new element via clone(), and manipulate it's ID using newNum value
/* This is where we manipulate the name/id values of the input inside the new, cloned element
Below are examples of what forms elements you can clone, but not the only ones.
There are 2 basic structures below: one for an H2, and one for form elements.
To make more, you can copy the one for form elements and simply update the classes for its label and input.
Keep in mind that the .val() method is what clears the element when it gets cloned. Radio and checkboxes need .val([]) instead of .val('').
*/
// Hour - select
newElem.find('.input_hr').attr('id', 'ID' + newNum + '_hour').attr('name', 'ID' + newNum + '_hour').val('0');
// Minute - select
newElem.find('.input_min').attr('id', 'ID' + newNum + '_min').attr('name', 'ID' + newNum + '_min').val('0');
// Activiy - text
newElem.find('.input_act').attr('id', 'ID' + newNum + '_act').attr('name', 'ID' + newNum + '_act').val('');
// Category - select
newElem.find('.input_cat').attr('id', 'ID' + newNum + '_cat').attr('name', 'ID' + newNum + '_cat').val('');
// Insert the new element after the last "duplicatable" input field
$('#CloneRow' + num).after(newElem);
$('#ID' + newNum + '_title').focus();
// Enable the "remove" button. This only shows once you have a duplicated section.
$('#btnDel').attr('disabled', false);
// Right now you can only add 13 sections, for a total of 15. Change '13' below to the max number of sections you want to allow.
if (newNum == 20)
$('#btnAdd').attr('disabled', true).prop('value', "That's all, folks!"); // value here updates the text in the 'add' button when the limit is reached
});
$('#btnDel').click(function () {
// Confirmation dialog box. Works on all desktop browsers and iPhone.
// if (confirm("Are you sure you wish to remove this section? This cannot be undone."))
{
var num = $('.clonedInput').length;
// how many "duplicatable" input fields we currently have
$('#CloneRow' + num).slideUp('slow', function () {$(this).remove();
// if only one element remains, disable the "remove" button
if (num -1 === 1)
$('#btnDel').attr('disabled', true);
// enable the "add" button
$('#btnAdd').attr('disabled', false).prop('value', "add section");});
}
return false; // Removes the last section you added
});
// Enable the "add" button
$('#btnAdd').attr('disabled', false);
// Disable the "remove" button
$('#btnDel').attr('disabled', true);
// Reset the entire form
$('#btnRes').click( function () {
{
// Confirmation dialog box. Works on all desktop browsers and iPhone.
if (confirm("Do you really want to reset the form? All data will be lost."))
{
document.getElementById("BudgetFormEng").reset();
$('.addedRow').remove();
$('#output').empty();
};
return false;
};});
I am not receiving any errors from IE or Firefox.
The answer to this question is that I am an idiot. In my html I had <button><span id="btnRes/btnAdd/btnDel"></span></button>. The code was working but you had to click directly on the glyphicon span and not the white space of the button.
I am struggling with a list that can be drag/dropped and nested.
How it should work :
1.Each row has an "add line" button.
2.When this button is clicked, I am trying to insert a new line, which is a text box, directly below/after the element where the button was clicked
3.Then get/add a unique ID for the new element/row.
4.Lastly once typing text in the new elements text box, get this text (to post to server).
The Javascript looks like this now :
$(document).on('click', '#addLabel_Item', function () {
var tree_id = ($(this).prop("title"));
var $tree_box = '#' + tree_id;
var $tree_box_item = '#' + tree_id + ' li';
var currentListItem = $(this).closest(".listed").attr("id");
var $items=$('.listed');
var parentID = $items.index($(this).closest(".listed"));
$("#list_reference_2").show();
//$("#list_reference_2").clone(true).insertAfter($("li").closest("ol#top_list_items li:eq(" + parentID + ")"));
//$("#list_reference_2").clone().insertAfter('ol > li:nth-child(1)');
$("#list_reference_2").clone().insertAfter("ol li:eq(" + parentID + ")");
});
Right now if I click to add a new line, it adds to the proper place on the initial/first click on the button. However, subsequent clicking on a different button adds the lines under the initial/first row rather than under the current one just clicked.
Fiddle showing what it does
Apologies if my explanation is confusing, I am confusing myself a bit :-)
Any help or point in the right direction would be greatly appreciated.
You can add the lines in this way:
$(document).on('click', '#addLabel_Item', function () {
var $li = $(this).closest('.listed');
$("#list_reference_2").show();
$li.after($("#list_reference_2").clone().removeAttr('id'));
$("#list_reference_2").hide();
});
JSFiddle: http://jsfiddle.net/tx7hbkjL/15/
PS: Take a look at your duplicate IDs, like #addLabel_Item. IDs must be unique in the page, use class instead.
Give it a try and let me know if it helps!
Basically on .show() I've been trying to have all of the inputs convert to image tags with the img src equaling the original inputs value like this:
var currentPage = $('.three_paj_els:visible');
var nextPage = currentPage.next('.three_paj_els');
var the_parent_div_id = currentPage.attr('id');
nextPage.show(function() {
$('div#' + the_parent_div_id + ':input').each(function() {
var the_image_SRC = $(this).val();
$(this).replaceWith('<img src="' + the_image_SRC + '" ')
})
})
Been at it for a few hours now. I want only the ones in that specific div that gets shown to convert.
here's a fiddle of what I've been working on http://jsfiddle.net/Utr6v/100/
when you click the next button, the <input type="hidden" /> tags should convert to <img> tags and the images should show.
Thanks a bunch in advance.
-Sal
currentPage doesn't seem to have an ID. But you're overcomplicating it - if you have the element, you can use that to execute jQuery functions on. You don't need to do an element -> ID -> element conversion since that's pointless.
To find descendants you need to put a space between the element selector and the descendant selector, otherwise the selector applies to the elements themselves. In your case, you can just use .find.
Also, you were missing the closing tag of the image.
http://jsfiddle.net/Utr6v/101/
// I guess you want to replace with images on the new page, not the one
// which gets hidden
nextPage.find(':input').each(function() {
var the_image_SRC = $(this).val();
$(this).replaceWith('<img src="' + the_image_SRC + '">')
});