Develop Reference

How to make jquery.dynamiclist run with newer version of jquery?

I would like to use jquery.dynamiclist library in my procject.
In the demo page that's running smoothly there is a jquery library in version 1.8.2.
In my project I use version 1.11.1 and this makes dynamiclist plugin doesn't work.
With newer version when I process form I get data with names of inputs but without values (I get 'undefined').
Here is the code from demo.
What I have to change to make it run with newer version of jquery?
<form class="form-horizontal">
<h2>Example 1: Basic List</h2>
<div class="control-group">
<label class="control-label">Party</label>
<div class="controls">
<input name="partyName" type="text" placeholder="Party Name">
</div>
</div>
<div class="control-group">
<label class="control-label">Guest List</label>
<div id="example1" class="controls">
<div class="list-item">
<input name="guestList[0].name" type="text" placeholder="Guest Name">
<i class="icon-minus"></i> Remove Guest
</div>
<i class="icon-plus"></i> Add Guest
</div>
</div>
<div class="control-group">
<div class="controls">
<input type="submit" class="btn btn-primary btn-large" value="Process Example 1"/>
</div>
</div>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://github.com/ikelin/jquery.dynamiclist/blob/master/jquery.dynamiclist.min.js"></script>
<script>
(function($) {
$(document).ready(function() {
$("#example1").dynamiclist();
// display form submit data
$("form").submit(function(event) {
event.preventDefault();
var data = "";
$(this).find("input, select").each(function() {
var element = $(this);
if (element.attr("type") != "submit") {
data += element.attr("name");
data += "="
data += element.attr("value");
data += "; "
}
});
alert(data);
location.reload(true);
});
});
})(jQuery);
</script>

Simply change element.attr("value"); to element.val();.
Sorry I had to include the plugin code manually because apparently you cannot include the src directly from github. Also commented the reload for the snippet.
<form class="form-horizontal">
<h2>Example 1: Basic List</h2>
<div class="control-group">
<label class="control-label">Party</label>
<div class="controls">
<input name="partyName" type="text" placeholder="Party Name">
</div>
</div>
<div class="control-group">
<label class="control-label">Guest List</label>
<div id="example1" class="controls">
<div class="list-item">
<input name="guestList[0].name" type="text" placeholder="Guest Name">
<i class="icon-minus"></i> Remove Guest
</div>
<i class="icon-plus"></i> Add Guest
</div>
</div>
<div class="control-group">
<div class="controls">
<input type="submit" class="btn btn-primary btn-large" value="Process Example 1"/>
</div>
</div>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
/* jQuery Dynamic List v 2.0.1 / Copyright 2012 Ike Lin / http://www.apache.org/licenses/LICENSE-2.0.txt */
(function(a){a.fn.dynamiclist=function(d){if(this.length>1){this.each(function(){a(this).dynamiclist(d)});return this}var g=a.extend({itemClass:"list-item",addClass:"list-add",removeClass:"list-remove",minSize:1,maxSize:10,withEvents:false,addCallbackFn:null,removeCallbackFn:null},d);var f=function(o,n,j){var m=o.find("."+j.itemClass).length;if(m<j.maxSize){var l=o.find("."+j.itemClass+":first").clone(j.withEvents);l.find("."+j.removeClass).show().click(function(p){e(o,a(this),p,j)});b(l,m);i(l);var k=o.find("."+j.itemClass+":last");k.after(l);if(j.addCallbackFn!=null){j.addCallbackFn(l)}}if(n!=null){n.preventDefault()}};var e=function(o,k,n,j){var m=o.find("."+j.itemClass).length;var l=k.parents("."+j.itemClass+":first");if(m==j.minSize){i(l)}else{l.remove()}c(o,j);if(j.removeCallbackFn!=null){j.removeCallbackFn(l)}n.preventDefault()};var b=function(j,k){j.find("label, input, select, textarea").each(function(){var m=["class","name","id","for"];for(var n=0;n<m.length;n++){var l=a(this).attr(m[n]);if(l){l=l.replace(/\d+\./,k+".");l=l.replace(/\[\d+\]\./,"["+k+"].")}a(this).attr(m[n],l)}})};var c=function(k,j){k.find("."+j.itemClass).each(function(){var l=k.find("."+j.itemClass).index(this);b(a(this),l)})};var i=function(j){j.find("input[type=text], textarea").val("");j.find("input[type=radio]").attr({checked:false});j.find("input[type=checkbox]").attr({checked:false})};var h=function(k){k.find("."+g.itemClass+":first ."+g.removeClass).hide();var j=k.find("."+g.itemClass).length;while(g.minSize>j){f(k,null,g);j++}k.find("."+g.addClass).click(function(l){f(k,l,g)});k.find("."+g.removeClass).click(function(l){e(k,a(this),l,g)});return k};return h(this)}})(jQuery);
</script>
<script>
(function($) {
$(document).ready(function() {
$("#example1").dynamiclist();
// display form submit data
$("form").submit(function(event) {
event.preventDefault();
var data = "";
$(this).find("input, select").each(function() {
var element = $(this);
if (element.attr("type") != "submit") {
data += element.attr("name");
data += "="
data += element.val();
data += "; "
}
});
alert(data);
//location.reload(true);
});
});
})(jQuery);
</script>

Removing parent div containing many divs and spans and sections in it using javascript ajax

I have a comment div. so in this div, i have some other divs and spans to show edit and delete buttons, comment text, time, user name, profile pic and footer section for like or dislike.
Here is full code
while($fetch = mysql_fetch_array($rest)) {
<div class="container1" id="container1">
<div class="div-image">
<img src="images.jpg" />
</div>
<div class="div-right">
<div class="div-right-top">
<div class="div-user-name">
<span class="text-user-name">
UserName
</span>
</div>
<div class="div-time">
<span class="time-text">
comment-time
</span>
</div>
<?php if (isset($_SESSION['userid'])) { ?>
<form action="" method="post">
<input type="hidden" name="commentingid" value="FETCHVALUE" />
<div class="div-myoptions">
<span class="time-text div-option-div">
<?php if($userid !== $loggedid) { ?>
<button class="mycomoptions" type="submit" name="favorite">Fav</button>
<button class="mycomoptions" type="submit" name="flag">Report</button>
</form>
<?php } else { ?>
<button class="edit" type="button">Edit</button>
<button class="delete" data-emp-id="<?php echo $comentid ?>">X</button>
<?php } ?>
</span>
</div>
<?php } ?>
</div>
<div class="div-right-mid comment-text">
<?php echo $fetch['usercom'] ?>
</div>
<section class="right-bottom small">
<div class="div-like">
<span class="text-bottom">
Up
</span>
</div>
<div class="div-dislike">
<span class="text-bottom">
Down
</span>
</div>
<div class="div-reply">
<span class="text-bottom">
reply
</span>
</div>
<div id="editcoment" class="collapse">
<p>
<form action="" method="post" name="updatecom" onSubmit="return validateForm();">
<input type="text" />
<button type="submit" name="updatecom">Submit</button></p</form>
</p>
</div>
</section>
</div>
</div>
All I want to do is to delete the container1 div when i click on Delete button
Delete button is working, comment is deleted from database but its not been deleted from the page right after confirmation dialogue done with ajax. so when i refresh the page, comment is deleted. but why is it not working with ajax. is it just because i have spans and sections in the parent div?
here its javascript code
$(document).ready(function(){
$('.mycomoptions').click(function(e){
e.preventDefault();
var delete = $(this).attr('data-emp-id');
var container1 = $(this).parent("#container1 div");
bootbox.dialog({
message: "Delete Comment??",
title: "Sure Delete?",
buttons: {
success: {
label: "No",
className: "btn",
callback: function() {
$('.bootbox').modal('hide');
}
},
danger: {
label: "Yes",
className: "btn-danger",
callback: function() {
$.ajax({
type: 'POST',
url: '<?php echo $_SERVER['PHP_SELF'];?>',
data: 'delete='+delete
})
.done(function(){
container1.remove();
})
}
}
}
});
});
});
When i use simple divs then it works fine, but with this template of divs, its not removing container div on confirming Yes from confirmation dialogue. Need Help to understand how to make container variable to select parent div including all internal divs

You're using var container1 = $(this).parent("#container1 div"); but you have no element with an id of container1. Do you mean to be using $(this).parent(".container1 div")?

jquery close and reset custom box

Hello I have a simple Jquery question, I have a simple jquery popup form that displays a thank you message when users have completed it. They can then close it. I am having trouble getting the box to reset and show the original form once a user closes it.
//open popup Book a demo
$(".actionButtonHeader, .bookADemoBTN").click(function(){
$("#overlay_form").fadeIn(1000);
$(".background_overlay").fadeIn(500);
positionPopup();
e.preventDefault();
});
var email = document.getElementById("email").value;
var subscribed = document.getElementById("subscribed").value
$("#overlay_form").submit(function(e)
{
var postData = $(this).serializeArray();
$.ajax(
{
url : "demoEmailProcess.php",
type: "POST",
data : postData,
success:function(data, textStatus, jqXHR)
{
$(".formContent").html("<div id='messageDemo'><h2 style='text-align: center; font-size: 27px;'>Thank you " + (fullName.value).split(" ")[0]+ "!" + "</h2>" + "<p style='font-size: 21px;'> Your message has beeen successfully sent. We appreciate your interest in Cybertonica and will get back to you within the next 24 hours. </p>" + "<a class='messageLink' href='index.php'>Return to Homepage</a></div>")
},
error: function(jqXHR, textStatus, errorThrown)
{
}
});
e.preventDefault();
});
$("#ajaxform").submit(); //Submit the FORM
//close popup Book a demo
$(".close").click(function(){
$("#overlay_form").fadeOut(500);
$(".background_overlay").fadeOut(500);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="background_overlay"></div>
<form id="overlay_form" style="display:none" action="" method="post" >
<div class="close"><div class="innerClose">X</div></div>
<div class="formContent">
<b class="popupText">Want to see how we manage fraud and increase sales? We would love to hear from you. Book a demo with Cybertonica!</b>
<p class="popupText">Briefly explain your business needs and how you manage fraud and we will happily get back to you within the next 24 hours.</p>
<p id="returnmessage"></p>
<div class="popupRowOne">
<li><b>Full Name<sup>*</sup></b>
<input id="fullName" name="fullName" required type="text">
</li>
<li><b>Company Name<sup>*</sup></b>
<input required name="companyName" id="companyName" type="text"></li>
</div>
<div class="popupRowTwo">
<li><b>Email<sup>*</sup></b>
<input required name="address" id="address" type="text">
</li>
<li><b>Job Title<sup>*</sup></b>
<input required name="jobTitle" id="jobTitle" type="text">
</li>
<li id="hiddenPot"><b>Please leave this blank<sup>*</sup></b>
<input type="text" name="email" id="email">
</li>
</div>
<div class="popupRowThree">
<li><b>Your Message<sup>*</sup></b>
<input name="textMessage" id="textMessage" class="textareaPopup" required>
</li>
</div>
<div id="contactSubscribe">
<p class="checkBoxText"><input type="checkbox" id="subscribed" value="subscribed" name="subscribed" checked> I would like to sign up to Cybertonica newsletter</p>
<button type="submit" id="submit" value="Submit" class="popUpactionButton">Submit</button>
</div>
</div>
</form>

Try this:
After:
$(".background_overlay").fadeOut(500);
Add this line:
$("#overlay_form").reset();

How to pass a single form from dynamically generated forms? (AJAX , Spring)

I have a JSP page that generates all the available products in the database. Each product has a 'Add to cart' button. Here is my JSP code...
<body>
<c:forEach items="${inventories}" var="inventory" varStatus="varStatus">
<form:form id="myForm"
action="${pageContext.request.contextPath}/customer/ajax"
method="POST" modelAttribute="cartProduct">
<div class="col-xs-6 col-sm-3" style="padding: 2%;">
<div class="card">
<form:input type="hidden" path="user.email"
value="${user.getEmail()}" />
<form:input type="hidden" path="product.productId"
value="${inventory.getProduct().getProductId()}" />
<div class="card-block" style="overflow: hidden; padding: 2%">
<h5 style="white-space: nowrap">
${inventory.getProduct().getName()}
</h5>
<p class="card-text text-danger">₱
${inventory.getProduct().getPrice()}</p>
<p class="text-success">In stock</p>
<p>
<span style="">Added to cart</span>
</p>
<form:button class="btn btn-block btn-warning">Add to cart</form:button>
</div>
</div>
</div>
</form:form>
</c:forEach>
</body>
And here is my AJAX code...
<script type="text/javascript">
$(document).ready(function() {
var form = $("form");
var method = form.attr("method");
var url = form.attr("action");
form.on("submit", function(event){
event.preventDefault();
$.ajax({
url : url,
data : form.serialize(),
type : "POST",
success : function(smartphone) {
console.log('success');
},
error : function() {
alert('Something went wrong')
}
});
});
});
This code generates an array of forms containing each product. However, whenever I click on a single product, the ajax code submits all of the products not the single one that I clicked. How can I submit the data from the form that I only clicked?

How do you pull id data with a JQuery button click?

I can pull data from a modal $('#ID').on('shown.bs.modal', function (e) { var somevariable = e.id; }); doing this method, but can't figure out how to do it with a button click.
If that is possible, how can I also inherit the data if this button click opens the modal?
http://www.bootply.com/jCXXE6chXu
$(document).ready(function(){
$(".file_to_upload").click(function (data) {
//alert("works");
var questionID = data.id;
alert(questionID);
$('[id*="uploaded_files_"]').modal('show');
$('[id*="uploaded_files_"]').on('shown.bs.modal', function (e) {
$("#auditinstanceupload").html("<input id='audit_instance_id' name='audit_instance_id' value='"+questionID+"' type='hidden' style='display:none;'>");
$("#auditidupload").html("<input id='audit_id' name='audit_id' value='"+questionID+"' type='hidden' style='display:none;'>");
});
});
});
<!-- 5 is a php row id for an example -->
<a title="Upload file" href="#" id="5"
class="btn btn-default file_to_upload" >upload button</a>
<!-- modal pop up for [F] button -->
<div class='modal fade' style='z-index:10000' id='uploaded_files_5' role='dialog'>
<div class='modal-dialog modal-lg'>
<div class='modal-content'>
<div class='modal-header'>
<button type='button' class='close' data-dismiss='modal' aria-hidden='true'></button>
<h4 class='modal-title'>Perform Audit</h4>
</div>
<div class='modal-body' id='perform_audit1'>
<form id='my_form' name='form' action='ajax/file_upload.php' method='POST' enctype='multipart/form-data' style=''>
<h1>Upload File</h1>
<div id='main'>
<strong>File: </strong><input name='myFile' id='myFile' size='27' type='file'>
<input id='my_button' name='action' value='Upload' onclick='uploadshow()' type='button'>
<input id='auditinstanceupload' style='display:none;' />
<input id='auditidupload' style='display:none;' />
<input id='question_id' name='question_id' value='$row[questionID]' type='hidden'>
</div>
<!--<input id='close_file_upload' value='Close' type='button'>-->
</form>
</div>
<div class='modal-footer'>
<form method = 'POST'>
<input type='button' id='yes_delete' value='Yes ' name='view_audits_delete' />
<button type='button' class='btn btn-default' data-dismiss='modal'>No</button>
</form>
</div>
</div>
</div>
</div>
<!-- modal pop up for [F] file upload button -->

shown.bs.modal is basically used to execute a function when bootstrap modal is fully open.
If you want to execute a function on click of a button, then you don't need this method. This is for a different purpose. You can use jQuery click() function for that purpose:
$( "#modalButtonId" ).click(function() {
alert( "Handler for .click() called." );
//write other methods here
});
source

try this
$(document).ready(function(){
$(".file_to_upload").click(function (data) {
//alert("works");
//var questionID = data.id;
var questionID = $(this).attr("id");
alert(questionID);
$('[id*="uploaded_files_"]').modal('show');
$('[id*="uploaded_files_"]').on('shown.bs.modal', function (e) {
$("#auditinstanceupload").html("<input id='audit_instance_id' name='audit_instance_id' value='"+questionID+"' type='hidden' style='display:none;'>");
$("#auditidupload").html("<input id='audit_id' name='audit_id' value='"+questionID+"' type='hidden' style='display:none;'>");
});
});
});

var questionID = $(this)[0].id
This worked for me!