CODEWITHSUNDEEP
jqueryjquery-ui
Irene T.
Irene T.

Reputation: 1393

Jquery UI generated on the fly is not working

I have some Jquery UI sliders with different data-id. How is it possible to detect who is the selected and return the sliders value in a span next to it?

I am generate the sliders and the other elements dynamicaly:

<script>
$(function() {
$( "#slider" ).slider({
value:100,
min: 0,
max: 50000,
step: 50,
create: function () {
    $(this).slider( "option", "value", $(this).next().val() );
},
slide: function( event, ui ) {                 
     //get the id of this slider
var id = $(this).data('id');
     //select the input box that has the same id as the slider within it and set it's value to the current slider value. 
$("span[class*=" + id + "]").text(ui.value);
//$("div[class*=" + id + "]").val(ui.value);
}
});
});
</script>



<script>
$(document).ready(function() {
$("#adding").click(function() {

var intId = $("#buildyourform div").length + 1;
var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + intId + "\"/>");
var fName = $("<input type=\"text\" class=\"fieldname\" value=\"Enter your Facebook fan page url\" />");
var fType = $("<div id=\"slider\" datta-id=\"slider" + intId + "\" style='width:250px; float:left; margin-left:10px;'></div>").slider();
var fLikes= $("<span class=\"slider" + intId + "\" style=\"width: 60px; height: 24px; float: left; margin-left: 13px; margin-top: 7px; border: 1px solid #999; color: rgb(243, 20, 145); text-align: center; font-family: serif;\" />");
var fCost = $("<div class=\"fieldname\" id=\"fcost" + intId + "\" style=\"width: 60px; height: 24px; float: left; margin-left: 6px; margin-top: 7px; border: 1px solid #999; color: rgb(243, 20, 145); text-align: center; font-family: serif;\" />");
var removeButton = $("<input type=\"button\" class=\"remove\" value=\"-\" />");
removeButton.click(function() {
$(this).parent().remove();
});
fieldWrapper.append(fName);
fieldWrapper.append(fType);
fieldWrapper.append(removeButton);
fieldWrapper.append(fLikes);
fieldWrapper.append(fCost);
$("#buildyourform").append(fieldWrapper);
});
});
</script>

And inside the body:

<fieldset id="buildyourform">
<legend>Welcome! <span style="color:#F00; margin-left:13px;">My products</span></legend>
</fieldset>

<div id="adding"></div>

Upvotes: 0

Views: 118

Answers (1)

Runcorn
Runcorn

Reputation: 5224

OK, For doing this you could make a global variable that store the common properties of all the slider as : 

slider_options =
{
  value:100,
  min: 0,
  max: 50000,
  step: 50,
  orientation: "horizontal",
  create: function( e, ui ) {
    //was throwing TypeError: closestHandle is undefined with you previous code so i changed it to  
    var bar=$(this).slider('value');
 },
  slide: function( event, ui ) { 
      var id = $(this).data('id');
      $("span[class*=" + id + "]").text(ui.value);
   },
};

And now it is set you can use it in your slider() initialization code as : 

var fType = $("<div id=\"slider\" data-id=\"slider" + intId + "\" style='width:250px; float:left; margin-left:10px;'></div>").slider(slider_options);

After which you can get the desired data-id on the slide event of the slider.

And here is the Working Demo

Upvotes: 1

Related Questions