Jquery for dynamic content - javascript

I have a paragraph with some words written in span, which is editable once you click on it.The content would be dynamically called so my current approach is not working. Can you suggest me a solution or a better way to do it?
Here is the fiddle: http://jsfiddle.net/9dq2p7dw/109/
Thanks :)
<h4>Currently working in <span class="editor">xyz*</span><span style=
"display:none;" class="edit"><input type="text" class="form-control input-
sm" id="edited" style="width:100px;z-index: 100;background: white;display:
inline;"></span><button type="submit" id="submit" class="edit"
style="display: none;">save</button>
for past <span>0-5 years*</span>.Studied Graduation from <span>ABC.</span>, 12th from <span>jnnj</span> with <span>80%</span>, 10th from <span>Bkbjkjnk</span> with <span>80%</span></h4>
and here is the jquery for it.
$(document).ready(function(){
$('.bizcontent').click(function(){
$('#myModal2').modal('toggle');
});
$(".editor").click(function(){
$(".edit").show();
$(".editor").hide();
var edit = $("#edited").val();
});
$("#submit").click(function(){
var edit = $("#edited").val();
var ans = confirm("Update your input as "+ edit + " ?");
if (ans== true) {
$(".edit").hide();
$(".editor").replaceWith("<span class='editor'>" + edit + "</span>");
$(".editor").show();
}
else{
$(".editor").show();
$(".edit").hide();
}
});
});

I would solve it in the following manner.
$(document).ready(function() {
// how the input and the text should be displayed
// {{text}} is replaced with the text
var template = {
input: '<edit><input type="text" class="form-control input-sm" style="width:100px;display:inline;" value="{{text}}" orig="{{text}}"/><button type="submit" class="edit">save</button></span>',
text: '<span>{{text}}</edit>'
}
// for when you click on the span
$("#theText").on('click', 'span', function() {
var span = $(this)
span.replaceWith(template.input.replace(/{{text}}/g, span.text()))
})
// when you click the button
$("#theText").on('click', 'button', function() {
var edit = $(this).parent()
var newValue = edit.find('input').val()
var origValue = edit.find('input').attr('orig')
var value = confirm("Update your input as " + newValue + " ?") ? newValue : origValue
edit.replaceWith(template.text.replace(/{{text}}/g, value))
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4 id="theText">Currently working in
<span>xyz*</span>for past <span>0-5 years*</span>.Studied Graduation from <span>ABC.</span>, 12th from <span>jnnj</span> with <span>80%</span>, 10th from <span>Bkbjkjnk</span> with <span>80%</span>
</h4>

your problem is solved u can see in snippet.
$(document).ready(function() {
$('.bizcontent').click(function() {
$('#myModal2').modal('toggle');
});
$(document).on('click', '.editor', function() {
$(".edit").show();
$(".editor").hide();
var edit = $("#edited").val();
});
$('#submit').on('click', function() {
var edit = $("#edited").val();
var ans = confirm("Update your input as " + edit + " ?");
if (ans == true) {
$(".edit").hide();
$(".editor").replaceWith("<span class='editor'>" + edit + "</span>");
$(".editor").show();
} else {
$(".editor").show();
$(".edit").hide();
}
});
});
.hide {
display: none;
}
.show {
display: block
}
span {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4>Currently working in <span class="editor">xyz*</span><span style= "display:none;" class="edit"><input type="text" class="form-control input-sm" id="edited" style="width:100px;z-index: 100;background: white;display: inline;"></span><button type="submit" id="submit" class="edit" style="display: none;">save</button>
for past <span>0-5 years*</span>.Studied Graduation from <span>ABC.</span>, 12th from <span>jnnj</span> with <span>80%</span>, 10th from <span>Bkbjkjnk</span> with <span>80%</span></h4>

Your problem was that .editor once clicked and edited, was later not clickable, right?
The solution for that is:
$("body").on('click', '.editor', function(){
$(".edit").show();
alert("hi");
$(".editor").hide();
var edit = $("#edited").val();
});
Note: $("body").on('click', '.editor', ....);

Related

get child id from parent javascript onclick

I have the script bellow and i want to get the id of the child removed
<div class="right respleft">
<div class="section-title" id="divin">Ajout d'un champ</div>
<form class="tiny_form" id="form-step2">
<input type="text" id="fiel" placeholder="Nom du champ" /><br/>
<select class="form-control" id="champs">
</select>
<i class="fa fa-plus"></i><br/>
<div id="extender"></div>
</form>
</div>
<div class="sep seppage"></div>
<div class="clear"></div>
<div id="bottom-submit" class="inner clear">
<input type="submit" class="page-next center btn btn-lg btn-default" value="Créer" />
</div>
{% endblock %}
{% block javascripts %}
<script>
//add input
$('a#add_btn').click(function () {
var x = document.getElementById("fiel");
var selected= x.value;
var c = document.getElementById("champs");
// var option = document.createElement("option");
var strUser = document.getElementById("champs").value;
var valChamps=document.getElementById("fiel").value;
$('<p><input type="text" class="highlight_orange" name="items[]" id="' + strUser+ '" value="' + valChamps+ '" />' +
'<a class="delete" href="#step2" id="' + strUser + '"><i class="fa fa-trash-o"></i></a></p>').fadeIn("slow").appendTo('#extender');
c.remove(c.selectedIndex);
i++;
return false;
});
//fadeout selected item and remove
$("#form-step2").on('click', '.delete', function () {
var item = $(this).closest('input');
var id = item.attr('id');
$(this).parent().fadeOut(300, function () {
$(this).empty();
return false;
});
});
function addList(){
var select = document.getElementById("champs");
for(var i = 100; i > 0; --i) {
var option = document.createElement('option');
option.text = 'champ libre '+i;
option.value =i;
select.add(option, 0);
}
}
addList();
</script>
my problems is how to get the id of the removed input text after clicking on remove button.
this is picture of the output
output
Thanks for your helps
You can use siblings method to get the id of input element
//fadeout selected item and remove
$("#form-step2").on('click', '.dynamic-link', function () {
var myId = $(this).siblings('input[type=text]').attr('id');
alert(myId)
$(this).parent().fadeOut(300, function () {
$(this).empty();
return false;
});
});
You can use getAttribute() function:
// your stuff
var myId = c.getAttribute("id");
c.remove(c.selectedIndex);
// more stuff
EDIT
Maybe you need it here:
//fadeout selected item and remove
$("#form-step2").on('click', '.delete', function () {
$(this).parent().fadeOut(300, function () {
var myId = $(this).attr('id');
$(this).empty();
return false;
});
});
Be more specific please
EDIT2
That's the solution:
//fadeout selected item and remove
$("#form-step2").on('click', '.delete', function () {
$(this).parent().fadeOut(300, function () {
var myId = $(this).find('input[type=text]').attr('id');
$(this).empty();
return false;
});
});
See it working: http://jsfiddle.net/vWPJf/57/

jQuery: Duplicating file input groups

I'm trying to use jQuery to duplicate my file input groups, so that when the user selects a file to upload, it automatially creates another file upload field and description field.
This works fine, except for when I change the file of a file I've already selected an input for. When I do that, it duplicates ALL the file input groups.
Any insight into why this is going on?
JSFiddle: http://jsfiddle.net/czLmbjd6/4/
HTML:
<div id = "add-photos">
<input type="file"></input>
<label>Description:</label>
<input type = "text"></input>
</div>
<div id = "additional-photos">
</div>
JS:
$(document).ready(function(){
bindFileInputs();
});
function bindFileInputs(){
$("input:file").change(function (){
addPhotoField();
});
}
function addPhotoField() {
var id = 1; //standin for now, will dynamically update this number later
createPhotoField(id);
}
function createPhotoField(id){
var p = $("#add-photos");
p.clone().appendTo("#additional-photos").removeAttr("id").children().find('input,select').each(function(){
$(this).val('');
if ($(this).attr('type') == 'file'){
console.log("type is file");
$(this).attr('name', 'data[Image][' + id + '][image]');
}
if ($(this).attr('type') == 'text'){
console.log("type is text");
$(this).attr('name', 'data[Image][' + id + '][description]');
}
});
bindFileInputs();
}
Try
$(document).ready(function() {
bindFileInputs($('#add-photos input[type="file"]'));
});
function bindFileInputs(input) {
//use one() to register a handler which will be fired only once
input.one('change', function() {
addPhotoField();
});
}
function addPhotoField() {
var id = 1; //standin for now, will dynamically update this number later
createPhotoField(id);
}
function createPhotoField(id) {
var p = $("#add-photos");
var $clone = p.clone().appendTo("#additional-photos").removeAttr("id");
$clone.find('input,select').val('');
$clone.find('input:text').attr('name', 'data[Image][' + id + '][description]');
var $file = $clone.find('input:file').attr('name', 'data[Image][' + id + '][image]');
bindFileInputs($file)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Select a file with the file upload control. It should create a new file input group.
<div id="add-photos">
<input type="file" />
<label>Description:</label>
<input type="text" />
</div>
<div id="additional-photos"></div>
Try this Js:
$(document).ready(function(){
bindFileInputs();
});
function bindFileInputs(){
$("input:file").change(function (){
if($('.newF').length ==0 ){
createPhotoField(Number($(this).attr('id'))+1);
}
if($(this).hasClass('newF')){
createPhotoField(Number($(this).attr('id'))+1);
}
});
}
function createPhotoField(id){
$('.newF').removeClass('newF')
id+=1;
var p = $("<div/>");
p.appendTo("#additional-photos");
p.html('<input class="newF" id= "'+id+'" type="file"></input><label>Description:</label><input type = "text"></input>')
p.children().find('input,select').each(function(){
$(this).val('');
if ($(this).attr('type') == 'file'){
console.log("type is file");
$(this).attr('name', 'data[Image][' + id + '][image]');
}
if ($(this).attr('type') == 'text'){
console.log("type is text");
$(this).attr('name', 'data[Image][' + id + '][description]');
}
})
bindFileInputs();
}
UPDATED FIDDLE:
http://jsfiddle.net/czLmbjd6/12/
See your call of bindFileInputs(); in createPhotoField. You are adding another handler to change event of all $("input:file") elements in your page. If you change the file in any of these elements (except the last one), addPhotoField will fire two or more times.
Do:
var newItem = p.clone();
newItem.appendTo("#additional-photos").removeAttr("id").children().find('input,select').each(function(){
...
});
// instead of bindFileInputs();
newItem.find("input:file").change(function (){
addPhotoField();
});
Well try this
<div id = "add-photos">
<input type="file" inuse="false"></input>
<label>Description:</label>
<input type = "text"></input>
</div>
<div id = "additional-photos">
</div>
$(document).ready(function(){
bindFileInputs();
});
function bindFileInputs(){
$("input:file").change(function (){
if($(this).attr('inuse') == "false"){
addPhotoField();
}
$(this).attr('inuse', 'true');
});
}
var id = 0;
function addPhotoField() {
id += 1; //standin for now, will dynamically update this number later
createPhotoField(id);
}
function createPhotoField(id){
$("#add-photos").find('input:file').attr('inuse', 'false');
var p = $("#add-photos");
p.clone().appendTo("#additional-photos").removeAttr("id").children().find('input,select').each(function(){
$(this).val('');
if ($(this).attr('type') == 'file'){
console.log("type is file");
$(this).attr('name', 'data[Image][' + id + '][image]');
$(this).attr('inuse', 'false');
}
if ($(this).attr('type') == 'text'){
console.log("type is text");
$(this).attr('name', 'data[Image][' + id + '][description]');
}
});
$("#add-photos").find('input:file').attr('inuse', 'true');
bindFileInputs();
}

Clone form input and clear value

I'm trying to create an upload form. It's working well so far and i'm trying to sort out a couple of bugs that I dislike.
The line that I seem to be having trouble with is
$(element).find(">:first-child").attr("value", "");
When cloning the form, it clones the div and replaces the value with nothing leaving a blank form, this works well, if I were to delete that line I would get the previous form's value, so it would be nice for a blank form to show.
The issue i'm having is when you delete a form all the forms values delete, What I want is when you delete a form, leave the value alone for the other forms.
Here's a fiddle http://jsfiddle.net/d77pd/1/ or see code below
HTML
<button class="clone">Add an Image</button>
<div id="upload_image_sets">
<div id="clonedInput1" class="clonedInput">
<input type="text" id="upload_image_link_1" class="image" size="36" name="hero_options[upload_image_link_1]" value="' . $hero_options['upload_image_link_1'] . '" />
<input id="show_upload_image_link_button_1" class="button upload_images" type="button" value="Upload Image" />
<button class="remove">Remove</button>
</div>
</div>
JavaScript
function updateClonedInput(index, element) {
$(element).appendTo("#upload_image_sets").attr("id", "clonedInput" + index);
$(element).find(">:first-child").attr("id", "cs_product_menu_img_src_" + index);
$(element).find(">:first-child").attr("name", "hero_options[upload_image_link_" + index + "]");
$(element).find(">:first-child").attr("value", "");
$(element).find(">:first-child").next().attr("id", "cs_product_menu_img_src_" + index + "_button");
displayRemove();
}
function displayRemove() {
if ($('.clonedInput').length === 1) {
$('.remove').hide();
} else {
$('.remove').show();
}
}
displayRemove();
$(document).on("click", ".clone", function (e) {
e.preventDefault();
var cloneIndex = $(".clonedInput").length + 1;
var new_Input = $(this).closest('.clonedInput').length ? $(this).closest('.clonedInput').clone() : $(".clonedInput:last").clone();
updateClonedInput(cloneIndex, new_Input);
});
$(document).on("click", ".remove", function (e) {
e.preventDefault();
$(this).parents(".clonedInput").remove();
$(".clonedInput").each(function (cloneIndex, clonedElement) {
updateClonedInput(cloneIndex + 1, clonedElement);
})
});
Clone the form a few times, if you delete any form apart form the 1st one with the content, you'll notice the first form's content deletes, I want this left alone.
First approach:
call $(element).find(">:first-child").attr("value", ""); after calling updateClonedInput(cloneIndex, new_Input); from add function.
Working Demo First approach:
Second Approach:
I have modified some code. pass one more bool argument in function updateClonedInput.which will be set true when added and set false when dom is removed.This will prevent the value getting replaced on remove function:
function updateClonedInput(index, element,param) {
$(element).appendTo("#upload_image_sets").attr("id", "clonedInput" + index);
$(element).find(">:first-child").attr("id", "cs_product_menu_img_src_" + index);
$(element).find(">:first-child").attr("name", "hero_options[upload_image_link_" + index + "]");
if(param)
$(element).find(">:first-child").attr("value", "");
$(element).find(">:first-child").next().attr("id", "cs_product_menu_img_src_" + index + "_button");
displayRemove();
}
function displayRemove() {
if($('.clonedInput').length === 1) {
$('.remove').hide();
} else {
$('.remove').show();
}
}
displayRemove();
$(document).on("click", ".clone", function(e){
e.preventDefault();
var cloneIndex = $(".clonedInput").length + 1;
var new_Input = $(this).closest('.clonedInput').length ? $(this).closest('.clonedInput').clone() : $(".clonedInput:last").clone();
updateClonedInput(cloneIndex, new_Input,true);
});
$(document).on("click", ".remove", function(e){
e.preventDefault();
$(this).parents(".clonedInput").remove();
$(".clonedInput").each( function (cloneIndex, clonedElement) {
updateClonedInput(cloneIndex + 1, clonedElement,false);
})
});
Working Demo Second Approach
An alternate solution that creates a blank clone from the first element once, then uses this every time a new row is required. It also uses CSS to hide/show the Remove button based on the fact that you only need Remove buttons on all rows unless it's the only child.
Disclaimer: I have removed the id manipulation as I am unsure if you really need it. I can update if necessary.
Demo
HTML
<button class="clone">Add an Image</button>
<div id="upload_image_sets">
<div class="clonedInput">
<input type="text" class="image" size="36" name="hero_options[upload_image_link_1]" value="an initial value" />
<input class="button upload_images" type="button" value="Upload Image" />
<button class="remove">Remove</button>
</div>
</div>
CSS
.clonedInput .remove {
display:inline-block;
}
.clonedInput:only-child .remove {
display:none;
}
JavaScript
function resetForm($form) {
$form.find('input:text, input:password, input:file, select, textarea').val('');
$form.find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected');
}
var $blankClone = $('.clonedInput').clone();
resetForm($blankClone);
$(document).on('click', '.clone', function(e) {
e.preventDefault();
$blankClone.clone().appendTo('#upload_image_sets');
});
$('#upload_image_sets').on('click', '.remove', function(e) {
e.preventDefault();
$(this).closest('.clonedInput').remove();
});
resetForm() borrowed from Resetting a multi-stage form with jQuery

Dynamically add remove rows using jQuery

I have a code like this...
<html>
<head>
<title>test</title>
<script type="text/javascript">
var counter = 2;
var idCounter= 3;
function addNew() {
if(counter<=5){
// Get the main Div in which all the other divs will be added
var mainContainer = document.getElementById('mainContainer');
// Create a new div for holding text and button input elements
var newDiv = document.createElement('div');
newDiv.id='divs'+counter;
// Create a new text input
var newText = document.createElement('input');
var newText1 = document.createElement('input');
newText.type = "input";
newText.id="ans"+(idCounter);
idCounter++;
newText1.type = "input";
newText1.id="ans"+(idCounter);
idCounter++;
// newText.value = counter;
// Create a new button input
var newDelButton = document.createElement('input');
newDelButton.type = "button";
newDelButton.value = "Remove";
// Append new text input to the newDiv
newDiv.appendChild(newText);
newDiv.appendChild(newText1);
// Append new button input to the newDiv
newDiv.appendChild(newDelButton);
// Append newDiv input to the mainContainer div
mainContainer.appendChild(newDiv);
counter++;
// Add a handler to button for deleting the newDiv from the mainContainer
newDelButton.onclick = function() {
mainContainer.removeChild(newDiv);
counter--;
}
}
else{
alert('Only 5 rows are allowed');
}}sss
function removeRow(divId){
mainContainer.removeChild(divId);
counter--;
}
</script>
</head>
<body >
<div id="mainContainer">
<div><input type="button" value="Add New Row" onClick="addNew()"></div>
<div id="div1"><input type="text" id="ans1"><input type="text" id="ans2"><input type="button" value="Remove" onClick ="javascript:removeRow(div1);"></div>
</div>
</body>
</html>
I want to achieve the same using jQuery.I also need the values entered in each of these textboxes.Please help.
Okay, because I had nothing better to do, and, to be honest, I was curious, I put this together. As implied in my comment, above, I didn't particularly like the way you had it laid out, so I used the following (x)html:
<form action="#" method="post">
<fieldset id="rows">
<ul>
<li>
<input type="text" id="ans1" name="ans1" />
<input type="text" id="ans2" name="ans2" />
</li>
</ul>
</fieldset>
<fieldset id="controls">
<button id="addRow">add</button>
<button id="removeRow" disabled>remove</button>
</fieldset>
</form>
With the following jQuery (although I've clearly not optimised, or refined it, but it should meet your requirements):
$(document).ready(
function(){
$('#addRow').click(
function() {
var curMaxInput = $('input:text').length;
$('#rows li:first')
.clone()
.insertAfter($('#rows li:last'))
.find('input:text:eq(0)')
.attr({'id': 'ans' + (curMaxInput + 1),
'name': 'ans' + (curMaxInput + 1)
})
.parent()
.find('input:text:eq(1)')
.attr({
'id': 'ans' + (curMaxInput + 2),
'name': 'ans' + (curMaxInput + 2)
});
$('#removeRow')
.removeAttr('disabled');
if ($('#rows li').length >= 5) {
$('#addRow')
.attr('disabled',true);
}
return false;
});
$('#removeRow').click(
function() {
if ($('#rows li').length > 1) {
$('#rows li:last')
.remove();
}
if ($('#rows li').length <= 1) {
$('#removeRow')
.attr('disabled', true);
}
else if ($('#rows li').length < 5) {
$('#addRow')
.removeAttr('disabled');
}
return false;
});
});
JS Fiddle demo of the above
I'm not, however, sure what you mean by:
I also need the values entered in each of these textboxes.
If you can explain what that means, or how you want them to be available (and, ideally, why they're not already available to you) I'll do my best to help.
I have a solution which will help you use here is the code
<script type="text/javascript" src="js/jquery.js"></script>
<script type = 'text/javascript'>
var newRowNum = 1;
var project_id ;
$(function() {
$('#addnew').click(function()
{
newRowNum++; // This is counter
//var i = 0;
///////// <a> <td> <tr>
var addRow = $(this).parent().parent();
///////// In the line below <tr> is created
var newRow = addRow.clone();
$('input', addRow).val('');
$('td:first-child', newRow).html();
$('td:last-child', newRow).html('<a href="" class="remove span">Remove<\/a>');
var newID = 'project'+newRowNum;
var add = 'description'+newRowNum;
newRow.children().children().first('input').attr('id', newID).attr('name', newID);
newRow.children().children().eq(1).attr('id', add).attr('name', add);
$('#table').find('tr:last').after(newRow);
$('a.remove', newRow).click(function()
{
newRowNum--;
$('#table').find('tr:last').remove();
return false;
});
return false;
});
});
</script>
<table width="75%" border="0" align = "center" id = 'table'>
<tr>
<td align = "center">Project </td>
<td align = "center">Description</td>
<td align = "center">Add Row</td>
</tr>
<tr>
<td align = "center"><input type = 'text' size = '35'name = 'project[]' id="project" ></td>
<td align = "center"><input type = 'text'size = '55' name = "description[]" id = 'description'></td>
<td width = '10%'><a id="addnew" href= "" class = 'span'>Add</a></td>
</tr>
</table>
You can also give each text box unique name if you change code like this and changing these two variables
var newID = 'project'+newRowNum;
var add = 'description'+newRowNum;
if you use the first method i shown here it will be easy to post data using array. That's all.

jquery removing string parts from two areas

I'm looking to expand on a recent script i've coded using jquery.
I have this following code
<script type='text/javascript'>
added_departments = new Array();
$("#departments_submit").click(function(){
var depo = $("#depo_list").val();
if(jQuery.inArray(depo, added_departments) != -1)
{
return false;
}
else
{
added_departments.push(depo);
$("#depo_added_list").append("<li>" + depo + "<a href='#' title='"+ depo +"' class='remove_depo'> [X] </a></li>");
var current_value = $("#departments").val();
if(current_value)
{
$("#departments").val(current_value + "," + depo);
}
else
{
$("#departments").val(depo);
}
return false;
}
});
</script>
The above code takes information selected in a select drop down box, adds it to a div to display publicly and also into a hidden form field that processes the data.
i've tried to create now something that will reverse this effect and remove certain selections from the div and the field. which is where i have this code
<script type='text/javascript'>
$(".remove_depo").click(function(){
var removing = $(this).title();
var current_val = $("#deparments").val();
if(current_val == removing) {
$("departments").replace(removing, "");
}
else {
$("departments").replace("," + removing, "");
}
});
</script>
It doesn't cause any errors, but it doesn't do anything either? So I'm really stuck. Any ideas?
EDIT: Updated code
$(".remove_depo").click(function(){
var removing = $(this).attr('title');
var current_val = $("#deparments").val();
if(current_val == removing) {
$("#departments").replace(removing, "");
}
else {
$("#departments").replace("," + removing, "");
}
});
Here is the html
<form method="post" action="javascript:void(0);">Select Departments To Be Added:
<div class="depo_adder">
<select id="depo_list"><option value="">--- INDIVIDUAL TAGS ---</option><option value="blah">blah</option></select>
<button id="departments_submit">Go!</button>
</div></form><form method="post" action="briefings/addbriefing.php">
<div class="form">
<strong>Departments: </strong>
<ul id="depo_added_list"><li>blah [X] </li></ul>
<input name="departments" id="departments" value="blah" type="hidden">
</div>
you're referring to $('departments') - this won't work. You need to specify either an identifierm eg $('#departments') or a class, eg $('.departments)
ah - other answer is also correct, .title() is not a function. You want
$('#foo').attr('title') to get the title.

Categories

Resources