将jquery变量传递给bootstrap模式选择

时间:2018-04-27 09:31:18

标签: php jquery twig bootstrap-4

首先,我想让你知道我是初学者,(请善待)我首先寻找解决方案,但无法找到。 我正在尝试使用php mvc框架构建博客。在这一刻,当我想编辑一篇文章时,我正在重定向到一个新的页面,并在那里做工作,但我想切换到jquery(或javascript),我仍然坚持选择文章选择菜单中的类别。我有一个包含所有类别的twig全局变量(用于导航)。到目前为止这是我的代码: JS:

$('#editModal').on('show.bs.modal', function (event) {
      var button = $(event.relatedTarget)
      var title = button.data('title')
      var category = button.data('category')
      var body = button.data('body')
      var modal = $(this)
      modal.find('#title').val(title)
      modal.find('#article-id').val(button.data('id'))
      modal.find('#category').val(category)
      modal.find('#body').val(body)
    });

模态:

<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Changed your mind? Paste your thoughts!</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <form class="form" method="post" action="/adminzone/articles/update" id="formEditArticle">
        <div class="modal-body">
            <input id="article-id" name="id" type="hidden" value={{article.id}} />
            <div class="form-group">
                <label for="title">Title</label>
                <input id="title" class="form-control" name="title" placeholder="Title" value="{{ article.title }}" autofocus required pattern=".{2,80}" title="The title must have at least 2 characters and maximim 80."/>
            </div>
            <div class="form-group">
                <label for="category">Category</label>
                <select id="category" class="form-control" name="category" required>
                    {% for category in categories %}
                    <option value="{{ category.id }}" {% if category.id == article.category %} selected="selected" {% endif %}>{{ category.name }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="form-group">
                <label for="body">Body</label>
                <textarea id="body" class="form-control" name="body" placeholder="Paste here your ideas..." required minlength="20"  rows=10>{{ article.body }}</textarea>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-lg btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-lg btn-primary mr-5"><i class="fa fa-lg fa-save"></i> Spreat the word!</button>
            </div>
        </div>
    </form>
    </div>
  </div>
</div>

按钮:

<a href="" class="btn btn-warning fa fa-lg fa-edit" data-toggle="modal" data-target="#editModal" data-id="{{article.id}}" data-title ="{{article.title}}" data-category="{{article.category}}" data-body="{{article.body}}" data-tooltip="tooltip" title="Edit"></a>

0 个答案:

没有答案