CODEWITHSUNDEEP
javascriptjqueryiframe
user2207726
user2207726

Reputation: 3

independently working div in Jquery

I am trying to make an independently working div which has a form inside of it.

I use jquery to calculate the price of a product depending of the user's selections in the form. However the user is able to add multiple items in his 'cart' so the form is duplicated to another div. The problem is that the calculation pattern can't separate these two divs and the calculation will be incorrect. The form is also interactive so it will be generated by the user's input. This is really complex set and renaming every variable by the 'product number' doesn't sound really efficient to me.

I'm kind of stuck here and i don't really know how to solve this problem. I had an idea that what if I put an iframe inside of the div and load my form and its calculation script inside of it, and then use post command to transfer the price of the product to the 'main page' to calculate the total price of all of the products the user wanted.

However it seems that jQuery scripts doesn't work independently inside of these iframes, they still have connection so they broke each other.

i will appreciate any kind of suggestions and help to solve this matter, thank you!

here's the code so far

Heres the body

var productNumber = 1;

<div id="div_structure">

</div>
<button id="newProduct" >Add new product</button><br \>

add new item

<!-- language: lang-javascript -->

    $('#newProduct').click(function () 
    { 
        $('<div id="productNo'+productNumber+'">')
         .appendTo('#div_structure')
         .html('<label onclick="$(\'#div_productNo'+productNumber+'\').slideToggle()">Product '+productNumber +' </label>'+
               '<button onclick="$(\'#product'+productNumber+'\').remove()">Remove</button>');
        $('<div id="div_product'+productNumber+'" style="display: none;">').appendTo('#product'+productNumber+'');
$('<iframe src="productform.html" seamless frameborder="0" crolling="no" height="600" width="1000">').appendTo('#div_product'+productNumber+'');
        productNumber++;
    });

it also has a function that allows the user to remove the inserted div.

Here's just few lines from the productform

$(document).ready(function()
{
    $('#productCalculation').change(function () 
    {
        shape = $('input[name=productShape]:checked', '#productCalculation').val();
        alert(shape);
    });
});

<form id="productCalculation">
<div id="div_productShape" class="product1">
<h1>Select the shape of the product</h1>
    <input type="radio" name="productShape" value="r1">R1</input><br \>
    <input type="radio" name="productShape" value="r2">R2</input><br \>
    <input type="radio" name="productShape" value="r3">R3</input><br \>
</div>
.
.
.
</form>

I translated all of the variables so they may not function correctly since i didn't test the translated version. So the problem is, if i try to make selections in the second generated div it wont even alert() the selected variable

Upvotes: 0

Views: 178

Answers (1)

Sumurai8
Sumurai8

Reputation: 20737

There are two problems with this code: You say somewhere "I translated all of the variables so they may not function correctly since i didn't test the translated version. So the problem is, if i try to make selections in the second generated div it wont even alert() the selected variable". This is because event handlers are attached to elements that are in the DOM at that specific moment. To get it to work for all elements, use event delegation:

$(document).ready(function()
{
    $(document).on( 'change', '#productCalculation', function () 
    {
        shape = $('input[name=productShape]:checked', '#productCalculation').val();
        alert(shape);
    });
});

Your other question is "My question in a nutshell: Is there a way to restrict jquery to function only in certain div even though i use the same variable names in the second div ". You can use the this variable to access the element the click was invoked on. From this element you can traverse the DOM if needed, for example with .parent().

$('div').on( 'change', function( e ) {
    console.log( $(this).val() );
} );

Upvotes: 1

Related Questions