On click function not working with bootsrap modal

Question

Here is my on click function

 $(".addPizza").on("click", function(event) { event.preventDefault(); console.log("hello") let userId = $("#userId").attr("data-id"); let pizzaRecipe = $('#pizza-recipe').val().trim(); let ingredients = JSON.stringify(obj); let title = $("#pizza-title").val().trim(); let newPizza = { userid: userId, recipe: pizzaRecipe, ingredients: ingredients, totalCal: calTotal, title: title }; $.ajax('/api/pizza', { type: 'POST', data: newPizza }).then(() => { console.log('Created new pizza recipe'); location.reload(); }); $.ajax('/', newPizza).then(() => { console.log('Created new pizza recipe'); // location.reload(); }); }); 

and here is my html modal

 <button id="button" type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Add a recipe</button> <!-- end of button --> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">New Recipe</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <form> <form class="recipe-form" action="/pizza" method="POST"> <a id="userId" data-id=<%=user.id %></a> <input type="text" id="pizza-title" name="pizza-title" placeholder="title"><br> <input type="text" id="pizza-recipe" name="pizza-recipe" placeholder="recipe"><br> <label for="vegy1">Cucumber</label> <input type="number" class="quant" name="vegy1" data-name="cucumber" min="0" max="3" value="0"> <label for="vegy2">Tomato</label> <input type="number" class="quant" name="vegy2" data-name="tomato" min="0" max="3" value="0"> <label for="vegy3">Pineapple</label> <input type="number" class="quant" name="vegy3" data-name="pineapple" min="0" max="3" value="0"> <label for="vegy4">Avocado</label> <input type="number" class="quant" name="vegy4" data-name="avocado" min="0" max="3" value="0"><br> <label for="vegy5">Eggplant</label> <input type="number" class="quant" name="vegy5" data-name="eggplant" min="0" max="3" value="0"> <label for="vegy6">Olive</label> <input type="number" class="quant" name="vegy6" data-name="olive" min="0" max="3" value="0"> <label for="vegy7">Onion</label> <input type="number" class="quant" name="vegy7" data-name="onion" min="0" max="3" value="0"> <label for="vegy8">Mushroom</label> <input type="number" class="quant" name="vegy8" data-name="mushroom" min="0" max="3" value="0"><br> <label for="vegy9">Garlic</label> <input type="number" class="quant" name="vegy9" data-name="garlic" min="0" max="3" value="0"> <label for="vegy10">Spinach</label> <input type="number" class="quant" name="vegy10" data-name="spinach" min="0" max="3" value="0"> <label for="vegy11">Cilantro</label> <input type="number" class="quant" name="vegy11" data-name="cilantro" min="0" max="3" value="0"> <label for="vegy12">Chicken</label> <input type="number" class="quant" name="vegy12" data-name="chicken" min="0" max="3" value="0"><br> <label for="vegy13">Anchovy</label> <input type="number" class="quant" name="vegy13" data-name="anchovy" min="0" max="3" value="0"> <label for="vegy14">Bacon</label> <input type="number" class="quant" name="vegy14" data-name="bacon" min="0" max="3" value="0"> <label for="vegy15">Sausage</label> <input type="number" class="quant" name="vegy15" data-name="sausage" min="0" max="3" value="0"> <label for="vegy16">Beef</label> <input type="number" class="quant" name="vegy16" data-name="beef" min="0" max="3" value="0"><br> <label for="vegy17">Ham</label> <input type="number" class="quant" name="vegy17" data-name="ham" min="0" max="3" value="0"> <label for="vegy18">Pepperoni</label> <input type="number" class="quant" name="vegy18" data-name="pepperoni" min="0" max="3" value="0"> <label for="vegy19">Salami</label> <input type="number" class="quant" name="vegy19" data-name="salami" min="0" max="3" value="0"> <label for="vegy20">Banana</label> <input type="number" class="quant" name="vegy20" data-name="banana" min="0" max="3" value="0"><br> <p id="totalCal"></p> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="submit" class="btn btn-primary addPizza">Add Recipe</button> </div> </form> </div> </div> </div> </div> 

 let mysql = require("mysql"); let connection; if (process.env.JAWSDB_URL) // DB is JawsDB on Heroku connection = mysql.createConnection(process.env.JAWSDB_URL); else // DB is local on localhost connection = mysql.createConnection({ port: 3306, host: 'localhost', user: 'root', password: 'pass', database: 'pizza_recipe_db' }); // Establish connection to MySQL connection.connect((err) => { if (err) { console.error(`error connecting MySQL: ${err.stack} \\n`); return; } console.log(`Connected to MySQL as id ${connection.threadId} \\n`); }); // Export connection module.exports = connection; 

It is also giving me this error when I click on the add recipe button GET http://localhost:3000/ net::ERR_EMPTY_RESPONSTPOST http://localhost:3000/api/pizza net::ERR_CONNECTION_REFUSED

POST http://localhost:3000/api/pizza net::ERR_CONNECTION_REFUSED

I was told I should use "event delegation" I am not sure how to do that though.

Thanks for your help. If you need any more code just let me know. thank you!

Answer 1

You have not closed anchor tag properly in HTML and that's why the user id is not getting right. Check Following line

<a id="userId" data-id=<%=user.id %></a>

It should be

<a id="userId" data-id=<%=user.id %>></a>

As it was not closed correctly, JS was sending userid = 3 </a and at Mysql your column is user_id is not a text, It is unsigned integer. That's why your insertion code was failing to insert the Text value into integer column and throwing sql exception and server operation was exited. That's why you have got a error

http://localhost:3000/          net::ERR_EMPTY_RESPONSTPOST 
http://localhost:3000/api/pizza net::ERR_CONNECTION_REFUSED

As the server is exited and it is not running.

Change the anchor tag given above and your code will be working perfectly.