JQuery - Cloning a div and drop down menu.

mptwoadmin · Oct 24, 2013

Can someone shed some light on what I am missing..I am trying to clone a select box that shows/hides div based on the value of the selection. I can get the first drop down to work and show the correct div..but when I clone a div the next select does not show the div..I am pulling my hair out: well I have not hair.

Thank You in advance.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="

http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Recipe Builder</title>

<script src="

http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"

type="text/javascript" charset="utf-8"></script>
<script language="javascript" src="editinplace.js"></script>

<script type="text/javascript" src="jquery-1.4.min.js"></script>

<script type="text/javascript" src="jquery.sheepItPlugin.js"></script>

<script type="text/javascript">

$(document).ready(function() {

var addressesForm = $("#person_addresses").sheepIt({
separator: '',
allowRemoveLast: true,
allowRemoveCurrent: true,
allowRemoveAll: true,
allowAdd: true,
allowAddN: true,

// Limits
maxFormsCount: 50,//max number of recipe steps
minFormsCount: 0,
iniFormsCount: 1,
nestedForms: [

]

});

});

</script>

<script type="text/javascript">
/*<![CDATA[*/
function Select(sel,id,nu){
document.getElementById(id).style.display=sel.selectedIndex==nu?'block':'none';
}
/*]]>*/
</script>

<script type="text/javascript">
function showHide(id){
el = document.getElementById(id);
el.style.display = (el.style.display != 'block')? 'block' : 'none';
}
</script>

<script>
$(function() {
$("form").submit(function() {
$(this).find(":input").filter(function(){ return !this.value; }).attr("disabled", "disabled");
return true; // ensure form still submits
});
});
</script>

<style>
body
{
background: #A9B7FA;
}

a {
text-decoration:underline;
color:#00F;
cursor

ointer;
}
fieldset {
padding: 1em;
font:80%/1 sans-serif;
width: 550px;
margin: 0 auto;
text-align: left;
position: relative;
background-color:#ececec !important;
display: table-column;
}

fieldset legend {
position: absolute;
top: -0.5em;
left: 0.5em;
font-size: 18px;
font:125%/1 sans-serif;
color: black;
}

label {
float:left;
width:50%;
margin-right:4.0em;
padding-top:0.2em;
text-align:left;
font-weight:bold;
}

.controls div, .controls div input {
float:left;
margin-right: 10px;
}
</style>

<script>
$(document).ready( function() {
$("select").change(function(){
var divId = $(this).find(":selected").attr("data-div-id");
$(".container").hide();
$("#" + divId).show();
alert("#" + divId);
});

});
</script>

</head>

<body>


<cfquery name="_ingredients" datasource="mixroom">
select ingredient_name, value, trigger_type
from qa_ingredients
</cfquery>


<cfquery name="_measurements" datasource="mixroom">
select measure_name, type
from qa_measurements
</cfquery>

<cfset onchange_list="">
<cfloop query="_measurements">
<cfset onchange_list = listappend(onchange_list,"Select(this,'<cfoutput>#measure_name#</cfoutput>_##index##',<cfoutput>#type#</cfoutput>);"," ")>
</cfloop>

<form action="" method="post" enctype="application/x-

http://www-form-urlencoded"

name="myForm" id="myForm">

<fieldset>

<legend><div class="editme"> Recipe #01</div></legend>

<div id="person_addresses">

<div id="person_addresses_template">
<p name="test">
<br>

<label for="selector">Process Step <span id="person_addresses_label"> </span> </label>

<select class="selector_#index#" name="selector" id="test">
<option data-div-id="div0" value="" selected>Select Step</option>
<cfloop query="_ingredients">
<option data-div-id="div<cfoutput>#trigger_type#</cfoutput>_#index#"><cfoutput>#ingredient_name#</cfoutput>
div<cfoutput>#trigger_type#</cfoutput>_#index#
</cfloop>
</select>

<a id="person_addresses_remove_current">
<img class="delete" src="images/cross.png" width="16" height="16" border="0">
</a>

<cfloop query="_measurements">

<div id="div<cfoutput>#type#</cfoutput>_#index#" class="container" style="display:none"><cfoutput>#Measure_Name#</cfoutput></div>
<br>
div<cfoutput>#type#</cfoutput>_#index#
</cfloop>

</p>

</div>


<div id="person_addresses_noforms_template">No Process Steps</div>

<br>


<div id="person_addresses_controls" class="controls">
<div id="person_addresses_add"><input type="Button" value="Add Step"></div>
<div id="person_addresses_remove_last"><input type="Button" value="Remove Step"></div>
<div id="person_addresses_remove_all"><input type="Button" value="Remove All Steps"></div>
<div id="person_addresses_submit"><input type=submit name=submit value=submit class="submit-button"></div>
</div>

</fieldset>
</div>

<input type="Hidden" id="recipe_name" name="recipe_name">
</form>

</body>
</html>

jpadie · Oct 25, 2013

first please always post code between [ignore]

Code:

[/ignore] tags. it is very difficult to read otherwise.

second I assume that you are talking about this code block as, depsite the title referring to cloning, I cannot see anywhere in the code that you are trying to clone anything.

Code:

           $(document).ready(function(){
                $("select").change(function(){
                    var divId = $(this).find(":selected").attr("data-div-id");
                    $(".container").hide();
                    $("#" + divId).show();
                    alert("#" + divId);
                });     
            });

personally I can see nothing wrong with the above with the caveat that the html is difficult to analyse because you have posted the source (full of execrable coldfusion tags) rather than the generated source.

From your question you say that the code 'breaks' when you 'clone' the select box. You haven't, as said, shown the cloning language so I assume that you are just duplicating it with cut/paste. So you are not looking for help on that front.

I suspect that the reason why the overall structure is not working is that your change function is analysing all select boxes. So for that structure to work, each of the data-div-ids would have to be globally unique. If you post the full generated html (view source from a browser or provide a link to a test site) we can tell you more.

note also that you are serving two different versions of jquery. this is seldom a good idea. unless there is a good reason why not, serve the latest version from google's CDN.

mp2admin · Nov 7, 2013

Thanks for the reply. I cleaned up the code (see below) this is original code from the sheepit plugin. I am looking to use the plugin but am unable to reference the cloned div.. I added a test select but need to access each select when cloned. I am "very" new to jquery any help would be greatly appriciated.

Thank You..

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SheepIt! Jquery Form Cloning Plugin - Example 1</title>
<script type="text/javascript" src="jquery-1.4.min.js"></script>
<script type="text/javascript" src="jquery.sheepItPlugin.js"></script>
<script type="text/javascript">
$(document).ready(function() {
     
    var sheepItForm = $('#sheepItForm').sheepIt({
        separator: '',
        allowRemoveLast: true,
        allowRemoveCurrent: true,
        allowRemoveAll: true,
        allowAdd: true,
        allowAddN: true,
        maxFormsCount: 10,
        minFormsCount: 0,
        iniFormsCount: 1
    });
 
});
</script>
<style>

a {
    text-decoration:underline;
    color:#00F;
    cursor:pointer;
}

#sheepItForm_controls div, #sheepItForm_controls div input {
    float:left;    
    margin-right: 10px;
}


</style>

</head>

<body>

<!-- sheepIt Form -->
<div id="sheepItForm">
 
  <!-- Form template-->
  <div id="sheepItForm_template">
    <label for="sheepItForm_#index#_phone">Phone <span id="sheepItForm_label"></span></label>

<select id="sheepItForm_#index#_phone" name="person[phones][#index#][phone]">

<option value="" selected>Select Step</option>

<option value="123">ingred_01
<option value="1234">ingred_02
<option value="1235">ingred_03
</select>

    <a id="sheepItForm_remove_current">
      <img class="delete" src="images/cross.png" width="16" height="16" border="0">
    </a>
  </div>
  <!-- /Form template-->
   
  <!-- No forms template -->
  <div id="sheepItForm_noforms_template">No Steps</div>
  <!-- /No forms template-->
   
  <!-- Controls -->
  <div id="sheepItForm_controls">
    <div id="sheepItForm_add"><a><span>Add Step</span></a></div>
    <div id="sheepItForm_remove_last"><a><span>Remove</span></a></div>
    <div id="sheepItForm_remove_all"><a><span>Remove all</span></a></div>
    <div id="sheepItForm_add_n">
      <input id="sheepItForm_add_n_input" type="text" size="4" />
      <div id="sheepItForm_add_n_button"><a><span>Add</span></a></div></div>
  </div>
  <!-- /Controls -->
   
</div>
<!-- /sheepIt Form -->

</body>
</html>

jpadie · Nov 7, 2013

There's no cloning code in that snip. So I'm a bit lost as to what you want.

If you're wanting help on the sheepit plugin I'd recommend talking to the author. Although there may be people on this board who know about it. I have never used it personally.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

JQuery - Cloning a div and drop down menu.

mptwoadmin

Programmer

jpadie

Technical User

mp2admin

Programmer

jpadie

Technical User

Similar threads

Part and Inventory Search

Sponsor