I have created a table dynamically using Javascript .i am able to add rows but not able to delete.
MyHtml:
<div id="Mutipletextboxhandler" style="text-align: center;" class="step" name="Mutipletextboxhandler">
</div>
<input id="Hidden" type="hidden" runat="server" value="" />
<input id="btnAddexisting" type="button" value="Insert item" onclick="AddmultipleTextBox()" />
And my Javascript:
<script type="text/javascript">
function AddmultipleTextBox() {
var div = document.createElement('DIV');
div.innerHTML = GetDynamicmultipleTextBox("");
document.getElementById("Mutipletextboxhandler").appendChild(div);
}
function GetDynamicmultipleTextBox(value) {
return '<table id="d"><tr><td><input name = "mDynamicTextBox1" type="text" value = "' + value + '" /></td><td><input name = "mDynamicTextBox2" type="text" value = "' + value + '" /></td'+
'<td><input name = "mDynamicTextBox3" type="text" value = "' + value + '" /></td>'+
'<td><input type="button" value="Remove" onclick = "RemovemultipleTextBox(this)" /></td>' +
'</tr></table>'
}
**//Problamatic Function is below:**
function RemovemultipleTextBox(div) {
document.getElementById("Mutipletextboxhandler").removeAttributeNode(div);
}
function RecreateDynamicmultipleTextboxes() {
var mvalues = eval('<%=mValues%>');
if (mvalues != null) {
var html = "";
for (var i = 0; i < mvalues.length; i++) {
html += "<div>" + GetDynamicmultipleTextBox(mvalues[i]) + "</div>";
}
document.getElementById("Mutipletextboxhandler").innerHTML = html;
}
}
window.onload = RecreateDynamicmultipleTextboxes;
</script>
Question-Addition of rows is working fine but when i delete ,then
"NO Such interface supported" Error is coming.
Its working fine if i have no tables and only one texbox.
Somebody please help.
try document.getElementById("Mutipletextboxhandler").removeChild(div)
Update:
you can update your funtion as something like this
function RemovemultipleTextBox(div) {
while((div.tagName != "HTML" || div.tagName != "TABLE") && div.id != "d") {
div = div.parentNode
}
if(div.tagName == "TABLE") {
document.getElementById("Mutipletextboxhandler").removeChild(div.parentNode);
}
}
edit:
Let's redo this with a proper handler.
Step 1: Add a class to your input button and remove the onclick.
<input class="button-remove" type="button" value="Remove" />
Step 2: Add this logic every place you call GetDynamicmultipleTextBox. We create the box into a variable, then select the button out of this box and add an event listener.
var box = GetDynamicmultipleTextBox();
box.querySelector('.button-remove').addEventListener('click', function (event) {
var button = event.target,
div = button.parentNode.parentNode.parentNode.parentNode;
document.getElementById("Mutipletextboxhandler").removeChild(div);
});
Step 3: document.getElementById("Mutipletextboxhandler").appendChild(box);
Related
The dynamic add/delete input rows is not working properly. The rows are created using add function, but it is not deleted properly. Basically the delete function call is not working.
$(document).ready(function(){
var counter = 1; //initlal text box count
$("#addButton").click(function () {
if(counter > 3){
alert("Only 3 textboxes allowed");
return false;
}
var selectfield = $('#selectcolumnlist option:selected').val();
var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv');
newTextBoxDiv.after().html('<label>'+ selectfield + ' : </label>' + '<input type="text" name="textbox_' + selectfield + '" id="textbox_'+selectfield+'" placeholder="' + selectfield + '" value="" /><input type="button" value="Remove Button" class="remove_this" id="removeid" />');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
alert(counter);
});
$("#removeid").click(function() {
alert("i'm in");
});
}
Assuming you're creating elements in a correct way, I mean, using unique ids, you should use event-delegation:
// This example selects the element with the class
// .removeid (here you need to set a specific class) or set something unique
// per new dynamically created element.
$("#TextBoxesGroup").on('click', '.remove_this', (function() {
alert("i'm in");
}));
HTML:-
'<td>' + item.Message + ' <input type="button" class="btn btn-info" id="' + item.LogID + '" onclick="Clicked(this);" value="View More" /> <p> ' + item.FormattedMessage + ' </p></td></tr>'
this is button in table
Jquery:-
function Clicked(e)
{
var SelectedID = e.id;
$("p").toggle();
};
In this When i click on button i want to show selected id column only and hide rest columns.
But when i click on button it shows all column or hides all column
In addition to balachandar answer. if you want to hide p tag initially then use display:none for p tag
function Clicked(e)
{
var SelectedID = e.id;
$("#"+SelectedID).next("p").toggle(function(){
var btn_text = $("#"+SelectedID).val();
if(btn_text == "View More"){
$("#"+SelectedID).val("Hide");
}else{
$("#"+SelectedID).val("View More")
}
});
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" class="btn btn-info" id="myID" onclick="Clicked(this)" value="View More" /> <p style="display:none"> Some Text you want to in future </p>
Try this below code
function Clicked(e)
{
var SelectedID = e.id;
$("#"+SelectedID).next("p").toggle();
};
Hope this will help you.
You can select the element by its id and find the p element inside:
function Clicked(e)
{
var SelectedID = e.id;
$("#" + SelectedID).find("p").toggle();
};
Or just use this:
function Clicked(e)
{
$(this).find("p").toggle();
};
function Clicked(e)
{
var SelectedID = e.id;
$("#" + SelectedID).toggle();
};
You can use:
function Clicked(d)
{
var SelectedID = d.id;
$("#" + SelectedID).toggle();
};
This function picks all p inside td of your table and hides all of them, then it shows only the one with the same ID as the button.
function Clicked(e) {
var SelectedID = e.id;
$("td p").hide();
$("#" + SelectedID).show();
};
I am trying to execute the function that was created separately called uploads.js . This javascript file is a custom image uploader function to be used in Wordpress. I was able to run that javascript file whenever i create a new button just by the of the HTML by sending the needed parameters.
There is a part where i created a dynamic button creation function using jquery, where whenever a 'PLUS' sign button is pressed, that function will trigger and a new button is added. The id of that button is automatically incremented by one.
The problem here is, whenever i click on the button that was created not by using the dynamic button function, it was able to execute the uploads.js function. But the dynamic created buttons are not able to. It seems like the id of the dynamic button was not detected. I even inspect the element of that page, the id that was sent is exactly the same from what I have sent as a parameter to the uploads.js function.
Is there something that i have missed or I have done wrong? Below are the codes:
HTML
<tr class="form-field">
<th scope="row">
<label for="component1"> Component 1</label>
<br></br>
<input type='button' class="button button-large" value='+' id='addButton'>
<input type='button' class="button button-large" value='-' id='removeButton'>
<input type='button' class="button button-large" value='Get TextBox Value' id='getButtonValue'>
</th>
<td>
<div id='TextBoxesGroup'>
<div id="ImageDiv1">
<input id="section2_1" class="button" type="button" value="Upload Image" name="upload_s2_1"/>
</div>
<div id="TextBoxDiv1">
<label>Title #1 : </label>
<input type='text' id='title1' />
</div>
<div id="DescDiv1">
<label>Description #1 : </label>
<input type='text' id='description1' /><br></br>
</div>
</div>
</td>
</tr>
uploads.js
jQuery(document).ready(function($){
function dynamic_image( button , textbox )
{
var custom_uploader;
$(button).click(function(e) {
e.preventDefault();
//If the uploader object has already been created, reopen the dialog
if (custom_uploader) {
custom_uploader.open();
return;
}
//Extend the wp.media object
custom_uploader = wp.media.frames.file_frame = wp.media({
title: 'Choose Image',
button: {
text: 'Choose Image'
},
multiple: false
});
//When a file is selected, grab the URL and set it as the text field's value
custom_uploader.on('select', function() {
attachment = custom_uploader.state().get('selection').first().toJSON();
$(textbox).val(attachment.url);
});
//Open the uploader dialog
custom_uploader.open();
});
}
dynamic_image('#upload_image_button' , '#upload_image');
dynamic_image('#section2_1' , '#section2_text1');
dynamic_image('#section2_2' , '#section2_text2');
dynamic_image('#section2_3' , '#section2_text3');
dynamic_image('#section2_4' , '#section2_text4');
dynamic_image('#section2_5' , '#section2_text5');
});
script
<script type="text/javascript">
$(document).ready(function(){
var counter = 2;
$("#addButton").click(function () {
if(counter>5){
alert("Only 5 components are allowed");
return false;
}
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);
var newDescDiv = $(document.createElement('div'))
.attr("id", 'DescDiv' + counter);
var newImageDiv = $(document.createElement('div'))
.attr("id", 'ImageDiv' + counter);
newTextBoxDiv.after().html('<label>Title #'+ counter + ' : </label>' +
'<input type="text" name="textbox' + counter +
'" id="title' + counter + '" value="" >');
newDescDiv.after().html('<label>Description #'+ counter + ' : </label>' +
'<input type="text" name="descbox' + counter +
'" id="desc' + counter + '" value="" ><br></br>');
newImageDiv.after().html('<input class="button" type="button" name="upload_s2_' + counter +
'" value="Upload Image" id="section2_' + counter + '" >');
newImageDiv.appendTo("#TextBoxesGroup");
newTextBoxDiv.appendTo("#TextBoxesGroup");
newDescDiv.appendTo("#TextBoxesGroup");
counter++;
});
$("#removeButton").click(function () {
if(counter==1){
alert("No more component to remove");
return false;
}
counter--;
$("#TextBoxDiv" + counter).remove();
$("#DescDiv" + counter).remove();
$("#ImageDiv" + counter).remove();
});
$("#getButtonValue").click(function () {
var msg = '';
for(i=1; i<counter; i++){
msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
}
alert(msg);
});
});
</script>
Other button(like #section2_2, #section2_3 ...) maybe not exist, When function dynamic_image run.
Then below code cannot have meaning.
dynamic_image('#section2_2' , '#section2_text2');
// cannot find #section2_2 , because not yet added
Try this.
// function is called when input.button(like #section2_1, #section2_2 ...) on #TextBoxesGroup clicked
$('#TextBoxesGroup').on('click','input.button',function(e){
e.preventDefault();
//If the uploader object has already been created, reopen the dialog
if (custom_uploader) {
custom_uploader.open();
return;
}
//Extend the wp.media object
custom_uploader = wp.media.frames.file_frame = wp.media({
title: 'Choose Image',
button: {
text: 'Choose Image'
},
multiple: false
});
//When a file is selected, grab the URL and set it as the text field's value
custom_uploader.on('select', function() {
attachment = custom_uploader.state().get('selection').first().toJSON();
$(textbox).val(attachment.url);
});
//Open the uploader dialog
custom_uploader.open();
})
See example
indicate actually like following
$('#TextBoxesGroup').on('click','input.button',function(e){
var $clickedInput = $(this);// JQuery Object of section2_2
var clickedInputId = $clickedInput.attr('id'); // section2_2
var indicateKey = clickedInputId.substring(10,clickedInputId.length);// 2
var neededTextId = 'section2_text'+indicateKey ; //section2_text2
var $neededText = $("#" +neededTextId ); // JQuery Object of section2_text2
// run logic what you want to do
})
I am trying to detect the current button click to assign values to its respective textboxes. Each time I select any of the button, it will detect the first button click and assign the value to the first textbox. Meaning to say that, the second and third button values are assigned to the first textbox. The upload_textbox variable is not changing its value.
I did some error testing, when upload_textbox variable enters custom_uploader.on('select', function(), the value stays and will not change. I am not sure on why it doesn't.
What have I done wrong here? Below are my codes:
function dynamic_image( button )
{
var custom_uploader;
$(button).on('click','input.button',function(e)
{
e.preventDefault();
var $clickedInput = $(this);// JQuery Object of section2_2
var clickedInputId = $clickedInput.attr('id'); // section2_2
var upload_textbox = '#' + 'upload_image_' + clickedInputId;
//If the uploader object has already been created, reopen the dialog
if (custom_uploader) {
custom_uploader.open();
return;
}
//Extend the wp.media object
custom_uploader = wp.media.frames.file_frame = wp.media(
{
title: 'Choose Image',
button: {
text: 'Choose Image'
},
multiple: false
});
//When a file is selected, grab the URL and set it as the text field's value
custom_uploader.on('select', function()
{
attachment = custom_uploader.state().get('selection').first().toJSON();
$(upload_textbox).val(attachment.url);
//console.log(upload_textbox);
});
//Open the uploader dialog
custom_uploader.open();
})
}
dynamic_image('#TextBoxesGroup');
HTML
<tr class="form-field">
<th scope="row">
<label for="component1"> Component 1</label>
<br></br>
<input type='button' class="button button-large" value='+' id='addButton'>
<input type='button' class="button button-large" value='-' id='removeButton'>
<input type='button' class="button button-large" value='Get TextBox Value' id='getButtonValue'>
</th>
<td>
<div id='TextBoxesGroup'>
<div id="ImageDiv1">
<input id="section2_1" class="button" type="button" value="Upload Image" name="upload_s2_1"/>
</div>
<div id="TextBoxDiv1">
<label>Title #1 : </label>
<input type='text' id='title1' />
</div>
<div id="DescDiv1">
<label>Description #1 : </label>
<input type='text' id='description1' /><br></br>
</div>
</div>
</td>
</tr>
script
<script type="text/javascript">
$(document).ready(function(){
var counter = 2;
$("#addButton").click(function () {
if(counter>5){
alert("Only 5 components are allowed");
return false;
}
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);
var newDescDiv = $(document.createElement('div'))
.attr("id", 'DescDiv' + counter);
var newImageDiv = $(document.createElement('div'))
.attr("id", 'ImageDiv' + counter);
var newUploadDiv = $(document.createElement('div'))
.attr("id", 'UploadDiv' + counter);
newTextBoxDiv.after().html('<label>Title #'+ counter + ' : </label>' +
'<input type="text" name="textbox' + counter +
'" id="title_section2_' + counter + '" value="" >');
newDescDiv.after().html('<label>Description #'+ counter + ' : </label>' +
'<input type="text" name="descbox' + counter +
'" id="desc_section2_' + counter + '" value="" ><br></br>');
newImageDiv.after().html('<input class="button" type="button" name="upload_s2_' + counter +
'" value="Upload Image" id="section2_' + counter + '" >');
newUploadDiv.after().html('<input type="text" name="image_url_' + counter +
'" id="upload_image_section2_' + counter + '" >');
newUploadDiv.appendTo("#TextBoxesGroup");
newImageDiv.appendTo("#TextBoxesGroup");
newTextBoxDiv.appendTo("#TextBoxesGroup");
newDescDiv.appendTo("#TextBoxesGroup");
counter++;
});
$("#removeButton").click(function () {
if(counter==1){
alert("No more component to remove");
return false;
}
counter--;
$("#TextBoxDiv" + counter).remove();
$("#DescDiv" + counter).remove();
$("#ImageDiv" + counter).remove();
});
$("#getButtonValue").click(function () {
var msg = '';
for(i=1; i<counter; i++){
msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
}
alert(msg);
});
});
</script>
Then I suspect this could be the culprit.
//If the uploader object has already been created, reopen the dialog
if (custom_uploader) {
custom_uploader.open();
return;
}
This would always give you instance of first custom_uploader object.
Try to destroy the previous instance and generate new one.
There might be issue with the event binding within dynamic_image method.
Try
$(button).live('click',function(e) (deprecated as of jQuery 1.7 though)
or
$( document ).on( 'click', button, data, function(e)
instead of
$(button).on('click','input.button',function(e)
I hope it helps.
Can you try following.
$(button).change(function(){
//Write code here
});
I have solved my question. The culprit behind this was the custom_uploader mentioned by #Aman. There was a return statement there where it made the function not to take the new value that has been replaced. After doing so, the custom_uploader opens twice because there is two statement of it which it was called. Did it into an if else statement and had it the way I wanted. Below is my updated code.
function dynamic_image( button )
{
var custom_uploader;
var upload_textbox;
$(button).on('click','input.button',function(e)
{
e.preventDefault();
var $clickedInput = $(this);
var clickedInputId = $clickedInput.attr('id');
upload_textbox = '#' + 'upload_image_' + clickedInputId;
//Extend the wp.media object
custom_uploader = wp.media.frames.file_frame = wp.media(
{
title: 'Choose Image',
button: {
text: 'Choose Image'
},
multiple: false
});
//When a file is selected, grab the URL and set it as the text field's value
custom_uploader.on('select', function()
{
attachment = custom_uploader.state().get('selection').first().toJSON();
$(upload_textbox).val(attachment.url);
});
if (custom_uploader) {
custom_uploader.open();
}else
//Open the uploader dialog
custom_uploader.open();
})
}
#Aman, you have mentioned about optimizing it. It seems quite fast at the moment. Maybe if there is a way to optimize it for the better, it would be a great help.
Thank you all, #Regent, #Aman, #Bhushan Kawadkar, #Arindam Nayak, #Raj
I want the variable inputname to go up by 1 every time a new <input /> is added
e.g.
<input name="1" />
<input name="2" />
<input name="3" />
---html---
<p class="add">Add</p>
<div class="added"></div>
---jQuery/javascript---
$(document).ready(function() {
$("p.add").click(function() {
var inputname = somevar;
var added = "<input type=\"text\" name=\""+inputname+"\" />";
$("div.added").append(added);
});
});
here it is on jsfiddle.net if it helps -> http://jsfiddle.net/gamepreneur/54kzw/
Set inputname like this:
var inputname = $('.added input').length + 1;
This gets the total number of added inputs and increments by one, resulting in the new name.
Change the variable scope
Use this:
// declare your variable here so it exists throughout every call, instead of being
// delcared new with every call.
var inputname = somevar;
$(document).ready(function() {
$("p.add").click(function() {
var added = "<input type=\"text\" name=\""+(inputname++)+"\" />";
$("div.added").append(added);
});
});
Alternatives:
Grab the number of inputs ($('div.added input').length) and use that for a counter.
Grab the id of the last item $('div.added input:last').prop('name')) and increment it.
You need to declare inputname in the global scope so that it lasts longer than just the duration of the click function and then you need to increment it each time you use it.
I modified your fiddle to this: http://jsfiddle.net/jfriend00/54kzw/2/
var inputname = 1;
$(document).ready(function() {
$("p.add").click(function() {
var added = "<input type='text' name='" + inputname++ + "' />";
$("div.added").append(added);
});
});
Try
$(document).ready(function() {
$("p.add").click(function() {
var inputname = $('input', $("div.added")).length + 1;
var added = "<input type=\"text\" name=\"" + inputname + "\" />";
$("div.added").append(added);
});
});
Consider adding some other selectors to choose those inputs (like a class selector)