Использование модалов приводит к сбросу моего «диапазона» - PullRequest
Новая
       8

Использование модалов приводит к сбросу моего «диапазона»

0 голосов
/ 11 декабря 2018

Мы работаем над школьным проектом, который заключается в создании приложения для пиццы.Страница, на которой отображаются все пиццы, загружает пиццу из файла json.Файл json загружается через Go и ранжируется в HTML.Тем не менее, так как я хотел сделать это немного более изящным, я подумал, что было бы неплохо добавить несколько модов с информацией об ингредиентах в пицце.При открытии модального диапазона диапазон останавливается, хотя.Так что он просто загружает ингредиенты для первой пиццы и показывает их на всех.

Это мой HTML-код: 

    <html>
    <head>
        <title>Pizza House - De lijst met pizza's</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="../html/main.css" rel="stylesheet" type="text/css" />
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div>
            <img src="../images/pizzahouse.png" height="100px" style="vertical-align:middle"> <span class="title">Pizza House - Voor de lekkerste pizza's</span>
        </div>
        <div class="row">
        <h1>De lijst met pizza's</h1>
            {{range .}}
                <div class="col-sm-3">
                    <img src="{{.Image}}"/>
                    <p>{{.Name}}<span>{{.Price | printf "%.2f"}}</span></p>
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#informatie">
                        i
                    </button>

                    <div class="modal fade" id="informatie">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h3>Titel</h3>
                                </div>
                                <div class="modal-body">
                                    <p><span>{{.Ingredienten}}</p>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">terug</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            {{end}}
            <div class="col-sm-3">
                <img src="../images/custompizza.png"/>
                <a href="../view/custompizza">Custom pizza</a>
            </div>
        </div>
    </body>
</html>

Вот часть, которая влияет на это: 

const (
    CUSTOMERFILE = "./data/customers.json"
    PIZZAFILE    = "./data/pizzas.json"
    ORDERFILE    = "./data/orders.json"
    INGREDIENTFILE    = "./data/ingredients.json"
)

func loadData(f string, vv interface{}) error {
    raw, err := ioutil.ReadFile(f)
    if err != nil {
        return err
    }
    err = json.Unmarshal(raw, &vv)
    if err != nil {
        return err
    }
    return nil
}
func GetPizza(name string) (Pizza, error) {
    pp, _ := LoadPizzas()
    for _, p := range pp {
        if p.Name == name {
            return p, nil
        }
    }
    return Pizza{}, errors.New("pizza not found")
}

func LoadPizzas() ([]Pizza, error) {
    var pp []Pizza
    err := loadData(PIZZAFILE, &pp)

    return pp, err
}

А вот фрагмент файла типов, который он использует для справки: 

type Pizza struct {
    Name         string  `json:"name"`
    Price        float32 `json:"price"`
    Image        string  `json:"image"`
    Ingredienten string  `json:"ingredienten"`
}
...