Auteur Topic: jQuery find werkt niet  (gelezen 3116 keer)

0 leden en 1 gast bekijken dit topic.

xvilo

  • Global Moderator
  • Verslaafd DigitalPlace Lid
  • *****
  • Berichten: 2675
  • Karma: -44
    • Bekijk profiel
    • http://www.xvilo.com
jQuery find werkt niet
« Gepost op: januari 03, 2016, 04:28:00 pm »
  • [+1]0
  • [-1]0
  • Hallo,

    Ik ben bezig met een form array. Hier in kunnen producten toegevoegd worden, maar de extra input velden worden dynamisch ingeladen met de t<template> HTML5 tag. Nu moet er wel elke keer een nieuwe array beginnen en dat doe ik door de array in de template tag aan te passen en dan toe te voegen aan de form.

    Mijn JS code:
    function prepareButton() {
              var count = 0;
             $('#add').click(function() {
               event.preventDefault();
               var content = document.querySelector('#tempproduct').content;
               // Update something in the template DOM.
           count++;
           console.log('products['+count+'][]');
               console.log(content);
               $(content).find('input').attr("name", 'products['+count+'][]');
               document.querySelector('#products').appendChild(
               document.importNode(content, true));
        });
    }
        prepareButton();

    En mijn html code:
    <!DOCTYPE html>

    <html lang="nl">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
    </head>
    <body>
    <template id="tempproduct">
            <!-- product begin -->
    <div class="row">
    <div class="six columns">
    <input type="text" name="products[0][]" class="product product-title" placeholder="Titel">
    </div>
    <div class="three columns">
    <input type="text" name="products[0][]" class="product" placeholder="Aantal">
    </div>
    <div class="three columns">
    <input type="text" name="products[0][]" class="product" placeholder="Prijs per stuk">
    </div>
    </div>
    <!-- product eind -->
         </template>
                        <div id="products" class="eight columns product-group">
                        <div class="row">
                        <div class="six columns">
                        <h6>Naam</h6>
                        </div>
                        <div class="three columns">
                        <h6>Aantal</h6>
                        </div>
                        <div class="three columns">
                        <h6>Prijs</h6>
                        </div>
                        </div>
                        <!-- product begin -->
                        <div class="row">
                        <div class="six columns">
                        <input type="text" name="products[0][]" class="product product-title" placeholder="Titel">
                        </div>
                        <div class="three columns">
                        <input type="text" name="products[0][]" class="product" placeholder="Aantal">
                        </div>
                        <div class="three columns">
                        <input type="text" name="products[0][]" class="product" placeholder="Prijs per stuk">
                        </div>
                        </div>
                        </div>
    <button type="button" class="button-primary" id="add">Add product</button>
    </body>

    Helaas gaat het nu mis bij het toevoegen, dit wil wel. Allen de find gaat mis en update products[0][] niet naar products[1][]....
    Wat gaat hier mis?

    //xvilo


    gertmenkel

    • Actief DigitalPlace Lid
    • **
    • Berichten: 1125
    • Karma: 131
      • Bekijk profiel
    Re: jQuery find werkt niet
    « Reactie #1 Gepost op: januari 03, 2016, 11:11:00 pm »
  • [+1]0
  • [-1]0
  • Ik geloof dat ik het probleem heb gevonden, er sloot een <div> niet goed waardoor de template niet lukte.....
    Ik heb dit ervan gemaakt, dit lijkt te werken in Firefox:

    xvilo.html
    <!DOCTYPE html>
    <html lang="nl">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      </head>
      <body>
        <template id="tempproduct">
          <!-- product begin -->
          <div class="row">
            <div class="six columns">
              <input type="text" name="products[0][]" class="product product-title" placeholder="Titel">
            </div>
            <div class="three columns">
              <input type="text" name="products[0][]" class="product" placeholder="Aantal">
            </div>
            <div class="three columns">
              <input type="text" name="products[0][]" class="product" placeholder="Prijs per stuk">
            </div>
          </div>
          <!-- product eind -->
        </template>
        <div id="products" class="eight columns product-group">
          <div class="row">
            <div class="six columns">
              <h6>Naam</h6>
            </div>
            <div class="three columns">
              <h6>Aantal</h6>
            </div>
            <div class="three columns">
              <h6>Prijs</h6>
            </div>
          </div>
        </div>
        <!-- product begin -->
        <div class="row">
          <div class="six columns">
            <input type="text" name="products[0][]" class="product product-title" placeholder="Titel">
          </div>
          <div class="three columns">
            <input type="text" name="products[0][]" class="product" placeholder="Aantal">
          </div>
          <div class="three columns">
            <input type="text" name="products[0][]" class="product" placeholder="Prijs per stuk">
          </div>
        </div>
        <button type="button" class="button-primary" id="add">Add product</button>

        <script>
          window.addEventListener('load', function()
          {
            function prepareButton() {
              var count = 0;
              $('#add').click(function(event) {
                event.preventDefault();
                var content = document.querySelector('#tempproduct').content;

                // Update something in the template DOM.
                count++;
                console.log('products['+count+'][]');
                console.log(content);

                $(content).find('input').attr("name", 'products['+count+'][]');
                document.querySelector('#products').appendChild(
                  document.importNode(content, true)
                );
              });
            }
            prepareButton();
          });
        </script>
      </body>
    </html>

    Ik moet zeggen dat ik niet helemaal snap waarom je eerst een template maakt en vervolgens de inhoud van dat template nog eens op de pagina zet, maar ik vertrouw erop dat je weet wat je aan het doen bent :-)

    Mocht dit niet werken, kun je misschien iets duidelijker zijn in wat je precies wil doen? Wat is de (foute) HTML die uit de uitvoerde pagina komt, en wat is de HTML die eruit zou moeten komen?
    ThePirateBay AFK
    Bekijk de vrije en gratis documentaire!

    xvilo

    • Global Moderator
    • Verslaafd DigitalPlace Lid
    • *****
    • Berichten: 2675
    • Karma: -44
      • Bekijk profiel
      • http://www.xvilo.com
    Re: jQuery find werkt niet
    « Reactie #2 Gepost op: januari 03, 2016, 11:21:31 pm »
  • [+1]0
  • [-1]0
  • Tja, het werkt niet steeds niet helemaal. Ik heb nu gewoon de complete source voor je geplakt. Zou moeten werken lokaal....

    <!DOCTYPE html>

    <html lang="nl">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Control Panel | D3 - Creative Agency</title>
        <link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
        <link rel="stylesheet" href="http://cp.thisisd3.com/css/normalize.css" type="text/css">
        <link rel="stylesheet" href="http://cp.thisisd3.com/css/skeleton.css" type="text/css">
        <link href="http://cp.thisisd3.com/css/style.css" rel="stylesheet" type="text/css">
        <link rel="apple-touch-icon" sizes="57x57" href="http://cp.thisisd3.com/apple-touch-icon-57x57.png">
        <link rel="apple-touch-icon" sizes="60x60" href="http://cp.thisisd3.com/apple-touch-icon-60x60.png">
        <link rel="apple-touch-icon" sizes="72x72" href="http://cp.thisisd3.com/apple-touch-icon-72x72.png">
        <link rel="apple-touch-icon" sizes="76x76" href="http://cp.thisisd3.com/apple-touch-icon-76x76.png">
        <link rel="apple-touch-icon" sizes="114x114" href="http://cp.thisisd3.com/apple-touch-icon-114x114.png">
        <link rel="apple-touch-icon" sizes="120x120" href="http://cp.thisisd3.com/apple-touch-icon-120x120.png">
        <link rel="apple-touch-icon" sizes="144x144" href="http://cp.thisisd3.com/apple-touch-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="http://cp.thisisd3.com/apple-touch-icon-152x152.png">
        <link rel="apple-touch-icon" sizes="180x180" href="http://cp.thisisd3.com/apple-touch-icon-180x180.png">
        <link rel="icon" type="image/png" href="http://cp.thisisd3.com/favicon-32x32.png" sizes="32x32">
        <link rel="icon" type="image/png" href="http://cp.thisisd3.com/android-chrome-192x192.png" sizes="192x192">
        <link rel="icon" type="image/png" href="http://cp.thisisd3.com/favicon-96x96.png" sizes="96x96">
        <link rel="icon" type="image/png" href="http://cp.thisisd3.com/favicon-16x16.png" sizes="16x16">
        <link rel="manifest" href="http://cp.thisisd3.com/manifest.json">
        <link rel="mask-icon" href="http://cp.thisisd3.com/safari-pinned-tab.svg" color="#5BBAD5">
        <meta name="apple-mobile-web-app-title" content="Control Panel D3 - Creative Agency">
        <meta name="application-name" content="Control Panel D3 - Creative Agency">
        <meta name="msapplication-TileColor" content="#2d89ef">
        <meta name="msapplication-TileImage" content="/mstile-144x144.png">
        <meta name="theme-color" content="#ffffff">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="http://cp.thisisd3.com/css/intlTelInput.css">
    </head>

    <body>
        <div id="page">
            <header class="mainhead">
                <nav class="top">
                    <div class="container">
                    <a class="navbar-brand brand-long" href="http://cp.thisisd3.com/admin">
                    <svg width="207" height="48">
                    <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://cp.thisisd3.com/img/d3-full-logo.svg" src="http://cp.thisisd3.com/img/d3-full-logo.png" width="268" height="48" alt="TransIP"></image>
                    </svg<span class="sr-only">TransIP</span></a>
                        <ul class="mainnav">
                            <li><a href="http://cp.thisisd3.com/admin/create/">Create</a></li>
                            <li><a href="http://cp.thisisd3.com/admin/users/">Klanten</a></li>
                            <li><a href="http://cp.thisisd3.com/admin/invoices/">Facturen</a></li>
                                                   <li class="has-sub"><a href='/user/0305150'>xvilo</a>
                                <ul>
                                    <li>
                                        <div class="navbar-login">
                                            <p>Klantnummer: <strong>0305150</strong></p>
                                            <p class="small">xxxx</p>
                                            <Br>
                                            <p><a class="button button-primary" href="http://cp.thisisd3.com/user/">Mijn Account</a></p>
                                            <p><a class="button button-primary" href="http://cp.thisisd3.com/logout/">Uitloggen</a></p>
                                        </div>
                                    </li>
                                </ul>
                            </li>
                                                </ul>
                    </div>
                </nav>
            </header>
        </div>
    </body>
    </html>
        <div id="main-content">
            <div id="guts">
            <template id="tempproduct">
          <!-- product begin -->
          <div class="row">
            <div class="six columns">
              <input type="text" name="products[0][]" class="product product-title" placeholder="Titel">
            </div>
            <div class="three columns">
              <input type="text" name="products[0][]" class="product" placeholder="Aantal">
            </div>
            <div class="three columns">
              <input type="text" name="products[0][]" class="product" placeholder="Prijs per stuk">
            </div>
          </div>
          <!-- product eind -->
        </template>
                <div class="container">
                    <div class="row">
                        <div class="twelve columns">
                            <div class="element">
                                <h1>Create</h1>
                                <form class="form" action="send.php" method="post">
    <select id="user_select">
    <option>Selecteer klant</option>
    <option name='userid' value='1'>Monica Pasterkamp</option><option name='userid' value='2'>Niels Jansen</option><option name='userid' value='3'>Bahrom Safi</option><option name='userid' value='4'>Therese Brals</option><option name='userid' value='5'>Marin van Loon</option><option name='userid' value='6'>Kim Pasterkamp</option><option name='userid' value='7'>Alrik Ymker</option><option name='userid' value='8'>Marten Ypma</option><option name='userid' value='9'>Marco Tabak</option><option name='userid' value='10'>Thijs laan</option><option name='userid' value='12'>Sem Schilder</option> </select>
    <div class="row">
                        <div class="four columns">
                        <label for="invoice-number">Factuur nummer:</label>
    <input class="u-full-width" type="text" placeholder="Factuurnummer" id="invoice-number" name="invoice_number" value="0103160">
    <label for="invoice-number">Factuur datum:</label>
    <input class="u-full-width" type="date" placeholder="Factuurnummer" id="invoice-number" name="invoice_number" value="2016-01-03">
    <label for="invoice-number">Order nummer</label>
    <input class="u-full-width" type="text" placeholder="Factuurnummer" id="invoice-number" name="invoice_number" value="0103160">
    <button class="button-primary" name="invoicesubmit" type="Submit">Submit</button> <button type="button" class="button-primary" id="add">Add product</button>
                        </div>
                        <div id="products" class="eight columns product-group">
                        <div class="row">
                        <div class="six columns">
                        <h6>Naam</h6>
                        </div>
                        <div class="three columns">
                        <h6>Aantal</h6>
                        </div>
                        <div class="three columns">
                        <h6>Prijs</h6>
                        </div>
                        </div>
                        <!-- product begin -->
                        <div class="row">
                        <div class="six columns">
                        <input type="text" name="products[0][]" class="product product-title" placeholder="Titel">
                        </div>
                        <div class="three columns">
                        <input type="text" name="products[0][]" class="product" placeholder="Aantal">
                        </div>
                        <div class="three columns">
                        <input type="text" name="products[0][]" class="product" placeholder="Prijs per stuk">
                        </div>
                        </div>
                        </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div> <footer>
    <div class="container">
    </div>
    </footer>
    </div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://cp.thisisd3.com/js/modernizr.js"></script>
    <script src="http://cp.thisisd3.com/js/intlTelInput.min.js"></script>
    <script type="text/javascript" src="http://cp.thisisd3.com/js/app.js"></script>
    </body>
    </html>

    De verwachte output in <div id="products" class="eight columns product-group"> ... </div> zou naar 3 keer op de knop add product klikken zijn:
    <div id="products" class="eight columns product-group">
                        <div class="row">
                        <div class="six columns">
                        <h6>Naam</h6>
                        </div>
                        <div class="three columns">
                        <h6>Aantal</h6>
                        </div>
                        <div class="three columns">
                        <h6>Prijs</h6>
                        </div>
                        </div>
                        <!-- product begin -->
                        <div class="row">
                        <div class="six columns">
                        <input type="text" name="products[0][]" class="product product-title" placeholder="Titel">
                        </div>
                        <div class="three columns">
                        <input type="text" name="products[0][]" class="product" placeholder="Aantal">
                        </div>
                        <div class="three columns">
                        <input type="text" name="products[0][]" class="product" placeholder="Prijs per stuk">
                        </div>
                    <!-- product end -->
                        <!-- product begin -->
                        <div class="row">
                        <div class="six columns">
                        <input type="text" name="products[1][]" class="product product-title" placeholder="Titel">
                        </div>
                        <div class="three columns">
                        <input type="text" name="products[1][]" class="product" placeholder="Aantal">
                        </div>
                        <div class="three columns">
                        <input type="text" name="products[1][]" class="product" placeholder="Prijs per stuk">
                        </div>
                    <!-- product end -->
                        <!-- product begin -->
                        <div class="row">
                        <div class="six columns">
                        <input type="text" name="products[2][]" class="product product-title" placeholder="Titel">
                        </div>
                        <div class="three columns">
                        <input type="text" name="products[2][]" class="product" placeholder="Aantal">
                        </div>
                        <div class="three columns">
                        <input type="text" name="products[2][]" class="product" placeholder="Prijs per stuk">
                        </div>
                    <!-- product end -->
                        <!-- product begin -->
                        <div class="row">
                        <div class="six columns">
                        <input type="text" name="products[3][]" class="product product-title" placeholder="Titel">
                        </div>
                        <div class="three columns">
                        <input type="text" name="products[3][]" class="product" placeholder="Aantal">
                        </div>
                        <div class="three columns">
                        <input type="text" name="products[3][]" class="product" placeholder="Prijs per stuk">
                        </div>
                    <!-- product end -->
                        </div>
                        </div>

    De huidige output na 3 keer klikken is:
    <div id="products" class="eight columns product-group">
                        <div class="row">
                        <div class="six columns">
                        <h6>Naam</h6>
                        </div>
                        <div class="three columns">
                        <h6>Aantal</h6>
                        </div>
                        <div class="three columns">
                        <h6>Prijs</h6>
                        </div>
                        </div>
                        <!-- product begin -->
                        <div class="row">
                        <div class="six columns">
                        <input type="text" name="products[0][]" class="product product-title" placeholder="Titel">
                        </div>
                        <div class="three columns">
                        <input type="text" name="products[0][]" class="product" placeholder="Aantal">
                        </div>
                        <div class="three columns">
                        <input type="text" name="products[0][]" class="product" placeholder="Prijs per stuk">
                        </div>
                    <!-- product end -->
                        <!-- product begin -->
                        <div class="row">
                        <div class="six columns">
                        <input type="text" name="products[0][]" class="product product-title" placeholder="Titel">
                        </div>
                        <div class="three columns">
                        <input type="text" name="products[0][]" class="product" placeholder="Aantal">
                        </div>
                        <div class="three columns">
                        <input type="text" name="products[0][]" class="product" placeholder="Prijs per stuk">
                        </div>
                    <!-- product end -->
                        <!-- product begin -->
                        <div class="row">
                        <div class="six columns">
                        <input type="text" name="products[0][]" class="product product-title" placeholder="Titel">
                        </div>
                        <div class="three columns">
                        <input type="text" name="products[0][]" class="product" placeholder="Aantal">
                        </div>
                        <div class="three columns">
                        <input type="text" name="products[0][]" class="product" placeholder="Prijs per stuk">
                        </div>
                    <!-- product end -->
                        <!-- product begin -->
                        <div class="row">
                        <div class="six columns">
                        <input type="text" name="products[0][]" class="product product-title" placeholder="Titel">
                        </div>
                        <div class="three columns">
                        <input type="text" name="products[0][]" class="product" placeholder="Aantal">
                        </div>
                        <div class="three columns">
                        <input type="text" name="products[0][]" class="product" placeholder="Prijs per stuk">
                        </div>
                    <!-- product end -->
                        </div>
                        </div>


    Heb je zo een wat duidelijker beeld?

    Zoals je hier kunt zien laat hij de name value wel goed ziet, maar replaced hij hem niet goed.
    « Laatst bewerkt op: januari 03, 2016, 11:28:42 pm door xvilo »


    gertmenkel

    • Actief DigitalPlace Lid
    • **
    • Berichten: 1125
    • Karma: 131
      • Bekijk profiel
    Re: jQuery find werkt niet
    « Reactie #3 Gepost op: januari 03, 2016, 11:47:22 pm »
  • [+1]0
  • [-1]0
  • Hmmm, ik zie het ja.

    Sowieso is je javascript niet helemaal goed, ik krijg een stel errors (o.a. een ReferenceError: event is not defined voor app.js:77:22).
    Als ik dat fix, werkt hij perfect in Firefox maar ik zie dat hij in Chrome niet werkt (alhoewel ik niet helemaal snap waarom die geen errors logt)


    Maar goed, gefeliciteerd, je hebt een bug gevonden in jQuery of in Chrome (yaaaaaay).
    $(content).find('input') werkt niet in Chrome (wel in Firefox). Als we het eerste child (de div) pakken en daarop $(...).find() uitvoeren, doet hij het wel. $($(content).children()[0]).find('input'); werkt wel in Chrome en in Firefox.

    (ik heb wat meta's etc weggesloopt om het bestand wat beter aan mijn kant te krijgen, maar het gaat vooral om app.js)
    xvilo.html
    <!DOCTYPE html>

    <html lang="nl">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Control Panel | D3 - Creative Agency</title>
        <link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
        <link rel="stylesheet" href="http://cp.thisisd3.com/css/normalize.css" type="text/css">
        <link rel="stylesheet" href="http://cp.thisisd3.com/css/skeleton.css" type="text/css">
        <link href="http://cp.thisisd3.com/css/style.css" rel="stylesheet" type="text/css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="http://cp.thisisd3.com/css/intlTelInput.css">
    </head>

    <body>
        <div id="page">
            <header class="mainhead">
                <nav class="top">
                    <div class="container">
                    <a class="navbar-brand brand-long" href="http://cp.thisisd3.com/admin">
                    <svg width="207" height="48">
                    <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://cp.thisisd3.com/img/d3-full-logo.svg" src="http://cp.thisisd3.com/img/d3-full-logo.png" width="268" height="48" alt="TransIP"></image>
                    </svg<span class="sr-only">TransIP</span></a>
                        <ul class="mainnav">
                            <li><a href="http://cp.thisisd3.com/admin/create/">Create</a></li>
                            <li><a href="http://cp.thisisd3.com/admin/users/">Klanten</a></li>
                            <li><a href="http://cp.thisisd3.com/admin/invoices/">Facturen</a></li>
                            <li class="has-sub"><a href='/user/0305150'>xvilo</a>
                                <ul>
                                    <li>
                                        <div class="navbar-login">
                                            <p>Klantnummer: <strong>0305150</strong></p>
                                            <p class="small">xxxx</p>
                                            <Br>
                                            <p><a class="button button-primary" href="http://cp.thisisd3.com/user/">Mijn Account</a></p>
                                            <p><a class="button button-primary" href="http://cp.thisisd3.com/logout/">Uitloggen</a></p>
                                        </div>
                                    </li>
                                </ul>
                            </li>
                         </ul>
                    </div>
                </nav>
            </header>
        </div>
        <div id="main-content">
            <div id="guts">
            <template id="tempproduct">
          <!-- product begin -->
          <div class="row">
            <div class="six columns">
              <input type="text" name="products[0][]" class="product product-title" placeholder="Titel">
            </div>
            <div class="three columns">
              <input type="text" name="products[0][]" class="product" placeholder="Aantal">
            </div>
            <div class="three columns">
              <input type="text" name="products[0][]" class="product" placeholder="Prijs per stuk">
            </div>
          </div>
          <!-- product eind -->
        </template>
                <div class="container">
                    <div class="row">
                        <div class="twelve columns">
                            <div class="element">
                                <h1>Create</h1>
                                <form class="form" action="send.php" method="post">
    <select id="user_select">
    <option>Selecteer klant</option>
    <option name='userid' value='1'>Monica Pasterkamp</option><option name='userid' value='2'>Niels Jansen</option><option name='userid' value='3'>Bahrom Safi</option><option name='userid' value='4'>Therese Brals</option><option name='userid' value='5'>Marin van Loon</option><option name='userid' value='6'>Kim Pasterkamp</option><option name='userid' value='7'>Alrik Ymker</option><option name='userid' value='8'>Marten Ypma</option><option name='userid' value='9'>Marco Tabak</option><option name='userid' value='10'>Thijs laan</option><option name='userid' value='12'>Sem Schilder</option> </select>
    <div class="row">
                        <div class="four columns">
                        <label for="invoice-number">Factuur nummer:</label>
    <input class="u-full-width" type="text" placeholder="Factuurnummer" id="invoice-number" name="invoice_number" value="0103160">
    <label for="invoice-number">Factuur datum:</label>
    <input class="u-full-width" type="date" placeholder="Factuurnummer" id="invoice-number" name="invoice_number" value="2016-01-03">
    <label for="invoice-number">Order nummer</label>
    <input class="u-full-width" type="text" placeholder="Factuurnummer" id="invoice-number" name="invoice_number" value="0103160">
    <button class="button-primary" name="invoicesubmit" type="Submit">Submit</button> <button type="button" class="button-primary" id="add">Add product</button>
                        </div>
                        <div id="products" class="eight columns product-group">
                        <div class="row">
                        <div class="six columns">
                        <h6>Naam</h6>
                        </div>
                        <div class="three columns">
                        <h6>Aantal</h6>
                        </div>
                        <div class="three columns">
                        <h6>Prijs</h6>
                        </div>
                        </div>
                        <!-- product begin -->
                        <div class="row">
                        <div class="six columns">
                        <input type="text" name="products[0][]" class="product product-title" placeholder="Titel">
                        </div>
                        <div class="three columns">
                        <input type="text" name="products[0][]" class="product" placeholder="Aantal">
                        </div>
                        <div class="three columns">
                        <input type="text" name="products[0][]" class="product" placeholder="Prijs per stuk">
                        </div>
                        </div>
                        </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div> <footer>
    <div class="container">
    </div>
    </footer>
    </div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://cp.thisisd3.com/js/modernizr.js"></script>
    <script src="http://cp.thisisd3.com/js/intlTelInput.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
    </body>
    </html>
    app.js
    $(function() {
    var enableIt = false;
        //if(Modernizr.history){
    if(enableIt){
        var newHash      = "",
            $mainContent = $("#main-content"),
            $pageWrap    = $("#page-wrap"),
            baseHeight   = 0,
            $el;

        $pageWrap.height($pageWrap.height());
        baseHeight = $pageWrap.height() - $mainContent.height();

        $("ul.mainnav").delegate("a", "click", function() {
            _link = $(this).attr("href");
            history.pushState(null, null, _link);
            loadContent(_link);
            return false;
        });

        function loadContent(href){
            $mainContent
                    .find("#guts")
                    .fadeOut(200, function() {
                        $mainContent.hide().load(href + " #guts", function() {
                            $mainContent.fadeIn(200, function() {
                                $pageWrap.animate({
                                    height: baseHeight + $mainContent.height() + "px"
                                });
                                calcLeftWrapper(); /* fn call */
                            });
                            $("ul.mainnav a").removeClass("current");
                            $("ul.mainnav a[href$='"+href+"']").addClass("current");
                        });
                    });
        }

        $(window).bind('popstate', function(){
           _link = location.pathname.replace(/^.*[\\\/]/, '');
           loadContent(_link);
        });

    }


    });

    $(document).ready(function() {
        calcLeftWrapper();
    });
    $(window).resize(function() {
        calcLeftWrapper();
    });

    function calcLeftWrapper() {
        var $original = $('.original-width');
        var $divWidth = $original.width();
        var $divPosit = $original.offset();
        var $vph = $(window).height();
        var $element = $('.leftwrapper');
        var $height = $vph - $divPosit.top - 15;
        $element.css({
            'width': $divWidth,
            'left': $divPosit.left,
            'top': $divPosit.top,
            'height': $height,
        });
        $element.delay(500).fadeIn(200, function() {
        });
    }

    jQuery("#userdetails-phone").intlTelInput();

    function prepareButton() {
              var count = 0;
             $('#add').click(function(event) {
              event.preventDefault();
            var content = document.querySelector('#tempproduct').content;

               // Update something in the template DOM.
           count++;
           console.log('products['+count+'][]');
               console.log(content);

               // Werkt niet in Chrome
    // var found = $(content).find('input');

    // Werkt wel in Chrome?
    var found = $($(content).children()[0]).find("input");
    console.log(found);
    found.attr("name", 'products['+count+'][]');
               document.querySelector('#products').appendChild(
               document.importNode(content, true));
        });
    }

    console.log('yes');
        prepareButton();
    ThePirateBay AFK
    Bekijk de vrije en gratis documentaire!

    xvilo

    • Global Moderator
    • Verslaafd DigitalPlace Lid
    • *****
    • Berichten: 2675
    • Karma: -44
      • Bekijk profiel
      • http://www.xvilo.com
    Re: jQuery find werkt niet
    « Reactie #4 Gepost op: januari 04, 2016, 08:53:00 pm »
  • [+1]0
  • [-1]0
  • Nou het gekke is eigenlijk, de code die heb werkt wél in chrome in deze setting:
    http://xvilo.com/factuur/create.php (nu even geen facturen gaan verzenden aub) en dan de use me knop om extra velden te maken. Gaat daar wél goed.....

    Ik ga even kijken nog naar jou code nu, @gertmenkel!

    Edit:
    Het voordeel is dat als ik de data submit, ik het nu op deze manier binnen krijg en dus alles makkelijk kan gebruiken in de achterkant:

    array(3) {
      ["invoice_number"]=>
      string(7) "0104160"
      ["invoicesubmit"]=>
      string(0) ""
      ["products"]=>
      array(3) {
        [0]=>
        array(3) {
          [0]=>
          string(9) "Product 1"
          [1]=>
          string(2) "10"
          [2]=>
          string(1) "5"
        }
        [1]=>
        array(3) {
          [0]=>
          string(9) "Product 2"
          [1]=>
          string(1) "1"
          [2]=>
          string(5) "54.34"
        }
        [2]=>
        array(3) {
          [0]=>
          string(9) "Product 3"
          [1]=>
          string(2) "12"
          [2]=>
          string(4) "3.33"
        }
      }
    }

    Overigens nog een gelukkig niet jaar!
    « Laatst bewerkt op: januari 04, 2016, 10:31:44 pm door xvilo »