We Keep Coding

dynamically created form depending on <select> does not work

I'm developing a website which must display particular forms for various products depending on the value that the user selects (in <select>) - so a number various forms are created dynamically in a loop by means of a javascript function (buildform() ). The code does not work, e.g. the forms are not created/appended to the wrappers. I narrowed down the problem where i think the problem relates to a different values for the jquery selectors/div-id's (#ecorpproductwrapper"+ecorp_eprodselectid).
When I use (just as a test) #ecorpproductwrapper" (without the variable ecorp_eprodselectid; see also in code below under ALTERNATIVE WORKS) the code works fine, e.g. the forms are built. I checked by means of the console that the ecorpproductwrapper"+ecorp_eprodselectid values are the same for the div-id's and jquery selectors, so I dont understand what goes wrong?
Pls see the simplified code below:
for(var i=0;i<5;i==){
var ecorp_eprodselectid; //will have various values
//function to build form depending on selected value in <select class= eprodtype"+ecorp_eprodselectid >
$(".eprodtype"+ecorp_eprodselectid).focus(function () {
var previous;
// Store the current value on focus and on change
previous = this.value; //old select value
}).change(function() {
var optionsform = buildform(this.value);
console.log('append form'+optionsform);
//NEXT 2 lines doe NOT WORK
$("#ecorpproductwrapper"+ecorp_eprodselectid).children().remove(); //remove previous form
$("#ecorpproductwrapper"+ecorp_eprodselectid).append(optionsform);
//ALTERNATIVE works: $('#ecorpproductwrapper').children().remove(); //remove previous tariif struct form
//ALTERNATIVE works: $('#ecorpproductwrapper').append(optionsform);
var str = "#ecorpproductwrapper"+ecorp_eprodselectid;
console.log('STRING ECORP PRODUCT APPEND: '+str);
console.log('change eprod val: '+this.value);
previous = this.value;
});//$("").focus(function () {
}//for i
//function to build form
var buildform = function(ecorp_eproductid) {
//some code here
//NEXT LINE does not work:
form += '<td> <div id="ecorpproductwrapper'+ ecorp_eprodselectid+'"> </div> </td> </tr>'; //cell with wrapper for ecorp product info
//ALTERNATIVE WORKS: form += '<td> <div id="ecorpproductwrapper"> </div> </td> </tr>'; //cell with wrapper for ecorp product info
//some code here; returns form
}//function buildform

I think you forgot to add ecorp_eprodselectid in your function.
var buildform = function(ecorp_eprodselectid ) {

Few things we assume concerning given text above:
You know this.value works
console.log shows optionsform have HTML that it should have. Not said in OP but if not, the function does not work. function seems to be missing already var buildform = function(someVar) as noted by buysDB
As I cannot see your code, I would try first clear everything 100% by chaning this:
$("#ecorpproductwrapper"+ecorp_eprodselectid).children().remove();
to:
$("#ecorpproductwrapper"+ecorp_eprodselectid).html("");
Then:
$("#ecorpproductwrapper"+ecorp_eprodselectid).html(optionsform);
No need for append if you have no intention to keep anything in DIV.
If you have text also in (#ecorpproductwrapper"+ecorp_eprodselectid) which is why you use children(), consider selecting the DIV that can be cleared.
If that still does not work, something is left out that needs consideration.

Searching jQuery variable full of html [duplicate]

This question already has answers here:
parse html string with jquery
(4 answers)
Closed 8 years ago.
This may be a strange question -- Right now I have a variable that is full of HTML, and I want to use jQuery (or JS) to search that varaible for inputs with checkboxes, and return the information.
So:
alert($(this).parent().parent().html())
var thisIsThat = $(this).parent().parent().html();
alert(thisIsThat)
var Awesome = $(thisIsThat).find('input:checked');
And then after I get that variable, after a successful ajax call, I want to change a specific attribute inside of it, like so:
$(Awesome).attr('value', 'false');
Right now, "Awesome" is returning nothing, which then doesn't allow me to change the attribute like I want to. I may be on the wrong direction as well -- any advice appreciated!

Use this
var thisIsThat = $(this).parent().parent();
alert(thisIsThat)
var Awesome = $(thisIsThat).find('input:checked');
In this case thisIsThat is a object and you can find anything using that object

This is an example showing the same basic idea running off of a string which finds the checkbox fine and unchecks it.
<div id="out"></div>​
<script>
var htmlStr = '<div><input type="checkbox" checked="checked"/></div>';
var temp = $(htmlStr);
var cb = temp.find("input:checked");
cb.attr("checked",false);
jQuery("#out").append(cb);
</script>
jsfiddle
The problem I am betting is that you are checking the checkbox manually. It will not update the DOM attribute when you do that.
Here is a basic example to show you the problem.
<div id="one">
<input type="checkbox" />
</div>
<button>Tell</button>​
<script>
function tellMe(){
var myDiv = jQuery("#one");
var html1 = myDiv.html();
console.log(html1);
}
jQuery("button").click(tellMe);
</script>
Take a look this fiddle of the code above.
Open up the console, and click on the button. You will see it unchecked. Check the checbox and click the button again, same html is outputted even though the checkbox is checked.

change
var Awesome = $(thisIsThat).find('input:checked');
to
var Awesome = $(thisIsThat).find('input[type=checked]');
now loop over it
Awesome.each(function(){
if($(this).is(':checked'))
{
$(this).attr('checked',false);
}
});

jQuery Clone inputs in two forms on the same page?

I have been trying to get two forms on the same page to work and the only issue i'm having is not getting the clone inputs to work, they seem to conflict with each other due to the div elements.
I have been using this tutorial as a guide:
http://www.9lessons.info/2009/06/submit-multiple-forms-jquery-ajax.html
Here is the code working with one form:
http://jsfiddle.net/yBdTA/
And this is what i want to achieve:
http://jsfiddle.net/c4Uce/
Notice when you click on the second 'Add More' link the first input clones rather than the second.
I know i could duplicate the jQuery function for the clone to match the second form:
$(function(){
var removeLink = ' <a class="remove" href="#" onclick="jQuery(this).parent().slideUp(function(){ jQuery(this).remove() }); return false">remove</a>';
jQuery('a.add').relCopy({ append: removeLink});
});
but i want this to be, how can i call it, dynamic? like the 9lessons guide, i can use PHP to create unique identifiers for the clone elements and want the jQuery to match the ID's,
Hope i made this clear.
Help appreciated.

U can try it , it work to multi form
http://jsfiddle.net/yBdTA/2/
(function($) {
function remove(){
$('.clone').each(function(i){
var input= $(this);
input.find('a.remove').click(function(){
input.remove();
});
});
}
$('form').each(function(i){
var form = $(this);
var removeLink = '<a class="remove" href="#">remove</a>';
var iputclone = form.find('p.clone').append(removeLink);
form.find('a.add').click(function(){
iputclone.clone().insertBefore(this);
remove();
});
});
})(jQuery);
Update :
iputclone.clone().insertBefore(this).find('.input').attr('value','');
//So easy, U can think a object when we start will is ifself, use it next, and next

How to swap two div tags?

I want to swap two html div tags entirely, tags and all. I tried the code below code but it does not work.
jQuery('#AllBlock-'+Id).insertAfter('#AllBlock-'+Id.next().next());
How to swap two div tags entirely.

You have some bracket mismatching in your code, it looks like you might be trying to do this:
jQuery('#AllBlock-'+Id).insertAfter($('#AllBlock-'+Id').next().next());
Which would take something like:
<div id="AllBlock-5"></div>
<div id="AllBlock-6"></div>
<div id="AllBlock-7"></div>
And, if called with Id 5, turn it into this:
<div id="AllBlock-6"></div>
<div id="AllBlock-7"></div>
<div id="AllBlock-5"></div>
This is because you're taking block 5, and moving it (using insertAfter) to the place after the block that's next().next() (or next-but-one) from itself, which would be block 7.
If you want to always swap #AllBlock-Id with #AllBlock-[Id+2], so they switch places and end up like the following:
<div id="AllBlock-7"></div>
<div id="AllBlock-6"></div>
<div id="AllBlock-5"></div>
You might want to try:
var $block = jQuery('#AllBlock-'+Id);
var $pivot = $block.next();
var $blockToSwap = $pivot.next();
$blockToSwap.insertBefore($pivot);
$block.insertAfter($pivot);

You can't do this because you can't concatenate a string and a jQuery object.
Try this:
var div = $('#AllBlock-'+Id);
div.insertAfter(div.next().next());

it should be like this
you should close the bracket after Id,
jQuery('#AllBlock-'+Id).insertAfter('#AllBlock-'+Id).next().next());

You'll need to detach the existing dom object first, then re-use it later:
$('#divid').detach().insertAfter('#someotherdivid');

What I understand is you want to swap a div when clicked with the last div. What will you do if it is the last div? move it to the top?
This solution should solve the problem, furthermore, you can modify this regex to match the format of your ID. This can probably be made more concise and robust. For example, you could get the last ID a bit more sophisticatedly. This may just be modifying the selector or something more. I mean, you do not want to go rearranging the footer or something just because its the last div on the page.
$('div').click(function() {
//set regex
var re = /(^\w+-)(\d+)$/i;
//get attr broken into parts
var str = $(this).attr('id').match(re)[1],
id = $(this).attr('id').match(re)[2];
//get div count and bulid last id
var lastStr = $('div:last').attr('id').match(re)[1],
lastID = $('div:last').attr('id').match(re)[2];
//if we have any div but the last, swap it with the end
if ( id !== lastID ) {
$(this).insertAfter('#'+lastStr+lastID);
}
//otherwise, move the last one to the top of the stack
else {
$(this).insertBefore('div:first');
} });
Check out this working fiddle: http://jsfiddle.net/sQYhD/
You may also be interested in the jquery-ui library: http://jqueryui.com/demos/sortable/

How to select a tag with a variable value in jQuery

I am very new to jquery/javscript.
I have a simple question.
Lets say i have a tag like this:
<Table id="mytable" >
<Table>
And i want to add some rows to this table.
Then we do like:
$("#mytable").append("<tr><td>value</td></tr>");
//some thing like this may not be having the right syntax
Now my question is lets the id of the table is in a variable for example:
var table="mytable"; //which is coming from the back end
Now my using the "table" variable how can I append the row..?
Is that going to be
$("#"+table).append("<tr><td>value</td></tr>");//
Can some one help me out in this simple thing?
Thanks,
Swati

that's correct!
var tableId = 'myTable';
$('#' + tableId).append('your row');
will append whatever you put in the 'your row' to the table with the id 'myTable'

That's exactly how you would do it. The selector is only expecting a string, so any form of concatenation or string logic via ternary operators will do the trick. This is a very powerful feature of jQuery selectors.

Yes, you can reference an ID like that by storing a variable in advance. This would append table rows/cells. You may need to dig deeper between the rows and cells depending on what you need to do though. :)
$(document).ready(function () {
var table = "myTable";
$("#" + table).append("<tr><td>row1</td><tr>");
});