Problem loading global attributes (data- *) with jQuery

Question

Problem loading global attributes (data- *) with jQuery

Navigation

#1 by (0 votes)

1

Hi, SO people. Can you help me with my homework? I am a beginner in jQuery and need to solve a "puzzle" that my teacher proposed to the class and allowed us to search here on the site.

Well, we have a list where some car models and their colors are listed, where such information is stored within their respective global data-car and data-color attributes. When the user selects a car from the list, it is directed to a form, which when sent, displays a message saying which car was chosen and its color. So far so good!

The problem is that when the user submits the form and returns (via the Close button) to choose a new car in the list and sends a new form, the information displayed on the screen is always that of the first car chosen. >

The correct thing would be that when a new car model was chosen, the car information on the form would be overwritten and the information on the screen would be that of the new car chosen rather than the first one.

We need to indicate a solution and point out why this is happening. Analyzing the code, we believe that the problem is solved by changing the first lines of the 3 functions in jQuery that start in different ways:

Function 1: Choose car

$(function() {

Function 2: Closes the form and returns to the list of cars

$(document).on('click', '.close', function(){

Function 3: Displays the car message which car was chosen

$(document).ready(function () {

Whoever can help us and make this system work properly, displaying the message properly, will be of our enormous prestige and consideration.

Thank you!

$(function() {
  $(".cars").on('click', function() { //Função para escolher o carro
    var car = $(this).data('car'); //Escolhe o modelo do carro
    var color = $(this).data('color'); //Escolhe a cor do carro
    $('#carlist').addClass('d-none'); //Fecha a lista de carros
    $('#carinfo').removeClass('d-none'); //Abre o formulário
    $('#mycar').attr('data-car', car); //Altera o modelo do carro no formulário
    $('#mycar').attr('data-color', color); //Altera a cor do carro no formulário
  });
});

$(document).on('click', '.close', function() { //Função para fechar o formulário
  $('#carlist').removeClass('d-none'); //Aparece a lista de carros
  $('#carinfo').addClass('d-none'); //Some o formulário
  $('#mycar').attr('data-car', '0'); //Zera novamente o valor "car" do formulário
  $('#mycar').attr('data-color', '0'); //Zera novamente o valor "color" do formulário
});

$(document).ready(function() {
  $("#form").on('submit', function(e) {
    e.preventDefault(); //Evita submeter o formulário via GET		
    var car = $('#mycar').data('car'); //Carrega o carro escolhido
    var color = $('#mycar').data('color'); //Carrega a cor escolhida
    alert(car + " - " + color); //Resultado

  });
});

.cars {
  cursor: pointer;
}

.cars:hover {
  color: #FF0000;
}

.d-none {
  display: none;
}

.close {
  cursor: pointer;
}

.close:hover {
  color: #FF0000;
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script><divid="carlist">
  <div class="cars" data-car="BMW" data-color="black">BMW (Black)</div>
  <div class="cars" data-car="Audi" data-color="white">Audi (White)</div>
  <div class="cars" data-car="Ferrari" data-color="red">Ferrari (Red)</div>
  <div class="cars" data-car="Lamborghini" data-color="yellow">Lamborghini (Yellow)</div>
</div>

<div id="carinfo" class="d-none">
  <span class="close">Close</span>
  <form id="form">
    <input type="text" id="mycar" data-car="0" data-color="0" autocomplete="off">
    <input type="submit" value="Send">
  </form>
</div>

jquery

asked by anonymous 29.11.2018 / 06:32

1 answer

How to import template from another module in Odoo? [closed] Recursive errors generating a word file from the fields of an Excel worksheet (VBA)

score 0 · Accepted Answer

Nice that you are learning, it is normal when we are learning something to make some confusion, for example:

1 - You do not need to declare multiple times within the same scope $(document) , because at the page scope only this $(function()
2 - You have greatly mixed the methods attr and data , causing me to believe, a little confusion for you when manipulating the data.
3 - You do not need to clear the form or clean anything, since you are always picking up the current data (chosen) with $(this).data('car') and $(this).data('color')

$(function() {
  $(".cars").on('click', function() { //Função para escolher o carro
    var car = $(this).data('car'); //Escolhe o modelo do carro
    var color = $(this).data('color'); //Escolhe a cor do carro
    $('#carlist').addClass('d-none'); //Fecha a lista de carros
    $('#carinfo').removeClass('d-none'); //Abre o formulário
    $('#mycar').data('car', car); //Altera o modelo do carro no formulário
    $('#mycar').data('color', color); //Altera a cor do carro no formulário
    $('#mycar').val(car + " - " + color) // Insere os dados no input
  });


  $('.close').on('click', function() { //Função para fechar o formulário
    $('#carlist').removeClass('d-none'); //Aparece a lista de carros
    $('#carinfo').addClass('d-none'); //Some o formulário
  });


  $("#form").on('submit', function(e) {
    e.preventDefault(); //Evita submeter o formulário via GET		
    var car = $('#mycar').data('car'); //Carrega o carro escolhido
    var color = $('#mycar').data('color'); //Carrega a cor escolhida
    alert(car + " - " + color); //Resultado

  });
});

.cars {
  cursor: pointer;
}

.cars:hover {
  color: #FF0000;
}

.d-none {
  display: none;
}

.close {
  cursor: pointer;
}

.close:hover {
  color: #FF0000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><divid="carlist">
  <div class="cars" data-car="BMW" data-color="black">BMW (Black)</div>
  <div class="cars" data-car="Audi" data-color="white">Audi (White)</div>
  <div class="cars" data-car="Ferrari" data-color="red">Ferrari (Red)</div>
  <div class="cars" data-car="Lamborghini" data-color="yellow">Lamborghini (Yellow)</div>
</div>

<div id="carinfo" class="d-none">
  <button class="close">Close</button>
  <form id="form">
    <input type="text" id="mycar" autocomplete="off">
    <input type="submit" value="Send">
  </form>
</div>