8262


ボタンをクリック後、フォームを挿入してさらにマルチ言語用にタブ切り替えを実装させたいのですが、うまく行きません。

なんとかしてクリック毎にidを振り当ててその要素にタブ切り替えのファンクションを振り当てたいです。

どんな些細な事でも構いませんのでどなたかご指摘を宜しくお願いいたします。

[code]

    var totalField = 0;
    
    function addField(type) {
      totalField++;
      if (type === 'free') {
        freeText();
      } else if (type === 'insideQuote') {
        insideQuote();
      } else if (type === 'clipsQuote') {
        clipsQuote();
      } else if (type === 'outsideLink') {
        outsideLink();
      }
    }
    
    function freeText() {
      var form_element = document.createElement("form");
      form_element.id = 'freeText_' + totalField;
      form_element.name = 'heading_' + totalField;
      form_element.class = 'col-xs-12';
    
      var form_tab = document.createElement("ul");
      form_tab.id = 'myTab_' + totalField;
      form_tab.setAttribute('class', 'nav nav-tabs');
      form_tab.setAttribute('data-role', 'tablist');
      form_tab.innerHTML = '<li class="active"><a href="#jpn">日本語</a></li><li><a href="#eng">English</a></li>';
    
      var tab_content = document.createElement("div");
      tab_content.id = 'myTabContent_' + totalField;
      tab_content.setAttribute('class', 'tab-content');
    
      var jp_panel = document.createElement("div");
      jp_panel.id = "jpn";
      jp_panel.setAttribute('class', 'tab-pane active');
      jp_panel.setAttribute('aria-labelledby', 'jpn');
    
      var heading = document.createElement("h4");
      heading.innerText = "見出しを入力";
    
      var headingTitle = document.createElement("input");
      headingTitle.type = "text";
      headingTitle.id = "headingTitle_" + totalField;
      headingTitle.name = "headingTitle";
      headingTitle.placeholder = "見出し";
    
      var subHeading = document.createElement("h5");
      subHeading.innerText = "自由文を入力";
    
      var textArea = document.createElement("textarea");
      textArea.id = "content_" + totalField;
      textArea.name = "content";
      textArea.setAttribute('rows', 5);
      textArea.setAttribute('cols', 80);
      textArea.placeholder = "内容 ";
    
      //インナーへ挿入
      jp_panel.appendChild(heading);
      jp_panel.appendChild(headingTitle);
      jp_panel.appendChild(subHeading);
      jp_panel.appendChild(textArea);
    
      var eng_panel = document.createElement("div");
      eng_panel.id = "eng";
      eng_panel.setAttribute('class', 'tab-pane');
      eng_panel.setAttribute('aria-labelledby', 'eng');
    
      var eng_heading = document.createElement("h4");
      eng_heading.innerText = "Heading";
    
      var eng_headingTitle = document.createElement("input");
      eng_headingTitle.type = "text";
      eng_headingTitle.id = "eng_headingTitle_" + totalField;
      eng_headingTitle.name = "eng_headingTitle";
      eng_headingTitle.placeholder = "Cool heading";
    
      var eng_subHeading = document.createElement("h5");
      eng_subHeading.innerText = "Description";
    
      var eng_textArea = document.createElement("textarea");
      eng_textArea.id = "content_" + totalField;
      eng_textArea.name = "content";
      eng_textArea.setAttribute('rows', 5);
      eng_textArea.setAttribute('cols', 80);
      eng_textArea.placeholder = "Some dope content goes here....";
    
      eng_panel.appendChild(eng_heading);
      eng_panel.appendChild(eng_headingTitle);
      eng_panel.appendChild(eng_subHeading);
      eng_panel.appendChild(eng_textArea);
    
      //インナーを挿入
      tab_content.appendChild(jp_panel);
      tab_content.appendChild(eng_panel);
    
      var child_object = document.getElementById('field');
      child_object.appendChild(form_element);
      form_element.appendChild(form_tab);
      form_element.appendChild(tab_content);
    }
[/code]

[code]

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    
    <div id="field" class="col-xs-12"></div>
    <button class="btn btn-default" onclick="addField('free')">
      自由文
    </button>
[/code]


CC BY-SA 3.0
2015-03-23T05:29:18.490
8254
2015-03-24T01:28:23.200
8500
question
javascript jquery bootstrap
Javascript : クリックで追加したtab要素に切り替えさせる


二つの問題点あります：

  1. BootstrapのJSのURLには`https`の後はコロン（`:`）がないから、Javascriptはロードしていません。
  2. タブには`data-toggle="tab"`との属性がないから、タブの切り替え機能は有効化していません。

下記のように修正したら、正しく動きます。

[code]

    var totalField = 0;
    
    function addField(type) {
      totalField++;
      if (type === 'free') {
        freeText();
      } else if (type === 'insideQuote') {
        insideQuote();
      } else if (type === 'clipsQuote') {
        clipsQuote();
      } else if (type === 'outsideLink') {
        outsideLink();
      }
    }
    
    function freeText() {
      var form_element = document.createElement("form");
      form_element.id = 'freeText_' + totalField;
      form_element.name = 'heading_' + totalField;
      form_element.class = 'col-xs-12';
    
      var form_tab = document.createElement("ul");
      form_tab.id = 'myTab_' + totalField;
      form_tab.setAttribute('class', 'nav nav-tabs');
      form_tab.setAttribute('data-role', 'tablist');
      form_tab.innerHTML = '<li class="active"><a href="#jpn" data-toggle="tab">日本語</a></li><li><a href="#eng" data-toggle="tab">English</a></li>';
    
      var tab_content = document.createElement("div");
      tab_content.id = 'myTabContent_' + totalField;
      tab_content.setAttribute('class', 'tab-content');
    
      var jp_panel = document.createElement("div");
      jp_panel.id = "jpn";
      jp_panel.setAttribute('class', 'tab-pane active');
      jp_panel.setAttribute('aria-labelledby', 'jpn');
    
      var heading = document.createElement("h4");
      heading.innerText = "見出しを入力";
    
      var headingTitle = document.createElement("input");
      headingTitle.type = "text";
      headingTitle.id = "headingTitle_" + totalField;
      headingTitle.name = "headingTitle";
      headingTitle.placeholder = "見出し";
    
      var subHeading = document.createElement("h5");
      subHeading.innerText = "自由文を入力";
    
      var textArea = document.createElement("textarea");
      textArea.id = "content_" + totalField;
      textArea.name = "content";
      textArea.setAttribute('rows', 5);
      textArea.setAttribute('cols', 80);
      textArea.placeholder = "内容 ";
    
      //インナーへ挿入
      jp_panel.appendChild(heading);
      jp_panel.appendChild(headingTitle);
      jp_panel.appendChild(subHeading);
      jp_panel.appendChild(textArea);
    
      var eng_panel = document.createElement("div");
      eng_panel.id = "eng";
      eng_panel.setAttribute('class', 'tab-pane');
      eng_panel.setAttribute('aria-labelledby', 'eng');
    
      var eng_heading = document.createElement("h4");
      eng_heading.innerText = "Heading";
    
      var eng_headingTitle = document.createElement("input");
      eng_headingTitle.type = "text";
      eng_headingTitle.id = "eng_headingTitle_" + totalField;
      eng_headingTitle.name = "eng_headingTitle";
      eng_headingTitle.placeholder = "Cool heading";
    
      var eng_subHeading = document.createElement("h5");
      eng_subHeading.innerText = "Description";
    
      var eng_textArea = document.createElement("textarea");
      eng_textArea.id = "content_" + totalField;
      eng_textArea.name = "content";
      eng_textArea.setAttribute('rows', 5);
      eng_textArea.setAttribute('cols', 80);
      eng_textArea.placeholder = "Some dope content goes here....";
    
      eng_panel.appendChild(eng_heading);
      eng_panel.appendChild(eng_headingTitle);
      eng_panel.appendChild(eng_subHeading);
      eng_panel.appendChild(eng_textArea);
    
      //インナーを挿入
      tab_content.appendChild(jp_panel);
      tab_content.appendChild(eng_panel);
    
      var child_object = document.getElementById('field');
      child_object.appendChild(form_element);
      form_element.appendChild(form_tab);
      form_element.appendChild(tab_content);
    }
[/code]

[code]

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    
    <div id="field" class="col-xs-12"></div>
    <button class="btn btn-default" onclick="addField('free')">
      自由文
    </button>
[/code]


CC BY-SA 3.0
2015-03-23T10:05:44.733
8262
2015-03-24T01:28:23.200
2015-03-24T01:28:23.200
3371
3371
8254
answer