Copy HTML from element, replace text with jQuery, then append to element

I am trying to create portlets on my website which are generated when a user inputs a number and clicks a button.

I have the HTML in a script tag (that way it's invisible). I am able to clone the HTML contents of the script tag and append it to the necessary element without issue. My problem is, I cannot seem to modify the text inside the template before appending it.

This is a super simplified version of what I'd like to do. I'm just trying to get parts of it working properly before building it up more.

Here is the script tag with the template:

var p = $("#tpl_dashboard_portlet").html();

var h = document.createElement('div');

$(h).html(p);

$(h).find('div.m-portlet').data('s', s);

$(h).find('[data-key="number"]').val(s);

$(h).find('[data-key="name"]').val("TEST");

console.log(h);

console.log($(h).html());

console.log(s);

$("div.m-content").append($(h).html());

<script id="tpl_dashboard_portlet" type="text/html">

    <!--begin::Portlet-->

    <div class="m-portlet">

        <div class="m-portlet__head">

            <div class="m-portlet__head-caption">

                <div class="m-portlet__head-title">

                    <h3 class="m-portlet__head-text">

                        <span data-key="number"></span> [<span data-key="name"></span>]

                    </h3>

                </div>

            </div>

            <div class="m-portlet__head-tools">

            	<ul class="m-portlet_nav">

            		<li class="m-portlet__nav-item">

            			<a href="javascript:void(0)" class="m-portlet__nav-link m-portlet__nav-link--icon"><i class="la la-close"></i></a>

            		</li>

            	</ul>

            </div>

        </div>

        <!--begin::Form-->

        <div class="m-portlet__body">

        	Found! <span data-key="number"></span> [<span data-key="name"></span>]

		</div>

	</div>

    <!--end::Portlet-->

</script>

I'm not sure what I'm doing wrong here. I've tried using .each as well with no luck. Both leave the value of the span tags empty.

(I've removed some of the script, but the variable s does have a value on it)

asked Nov 21 '18 at 15:34

Dubz

186

why are you writing html code inside <script id="tpl_dashboard_portlet" type="text/html">

– secret super star
Nov 21 '18 at 15:37

I found it online before and liked the idea. Not really sure what its benefits could/would be for this, apart from not needing to add the hidden attribute. I just went with it and it worked.

– Dubz
Nov 21 '18 at 15:40

what does s contains?

– secret super star
Nov 21 '18 at 15:50

add a comment |

I am trying to create portlets on my website which are generated when a user inputs a number and clicks a button.

This is a super simplified version of what I'd like to do. I'm just trying to get parts of it working properly before building it up more.

Here is the script tag with the template:

var p = $("#tpl_dashboard_portlet").html();

var h = document.createElement('div');

$(h).html(p);

$(h).find('div.m-portlet').data('s', s);

$(h).find('[data-key="number"]').val(s);

$(h).find('[data-key="name"]').val("TEST");

console.log(h);

console.log($(h).html());

console.log(s);

$("div.m-content").append($(h).html());

<script id="tpl_dashboard_portlet" type="text/html">

    <!--begin::Portlet-->

    <div class="m-portlet">

        <div class="m-portlet__head">

            <div class="m-portlet__head-caption">

                <div class="m-portlet__head-title">

                    <h3 class="m-portlet__head-text">

                        <span data-key="number"></span> [<span data-key="name"></span>]

                    </h3>

                </div>

            </div>

            <div class="m-portlet__head-tools">

            	<ul class="m-portlet_nav">

            		<li class="m-portlet__nav-item">

            			<a href="javascript:void(0)" class="m-portlet__nav-link m-portlet__nav-link--icon"><i class="la la-close"></i></a>

            		</li>

            	</ul>

            </div>

        </div>

        <!--begin::Form-->

        <div class="m-portlet__body">

        	Found! <span data-key="number"></span> [<span data-key="name"></span>]

		</div>

	</div>

    <!--end::Portlet-->

</script>

I'm not sure what I'm doing wrong here. I've tried using .each as well with no luck. Both leave the value of the span tags empty.

(I've removed some of the script, but the variable s does have a value on it)

asked Nov 21 '18 at 15:34

Dubz

186

why are you writing html code inside <script id="tpl_dashboard_portlet" type="text/html">

– secret super star
Nov 21 '18 at 15:37

I found it online before and liked the idea. Not really sure what its benefits could/would be for this, apart from not needing to add the hidden attribute. I just went with it and it worked.

– Dubz
Nov 21 '18 at 15:40

what does s contains?

– secret super star
Nov 21 '18 at 15:50

add a comment |

I am trying to create portlets on my website which are generated when a user inputs a number and clicks a button.

This is a super simplified version of what I'd like to do. I'm just trying to get parts of it working properly before building it up more.

Here is the script tag with the template:

var p = $("#tpl_dashboard_portlet").html();

var h = document.createElement('div');

$(h).html(p);

$(h).find('div.m-portlet').data('s', s);

$(h).find('[data-key="number"]').val(s);

$(h).find('[data-key="name"]').val("TEST");

console.log(h);

console.log($(h).html());

console.log(s);

$("div.m-content").append($(h).html());

<script id="tpl_dashboard_portlet" type="text/html">

    <!--begin::Portlet-->

    <div class="m-portlet">

        <div class="m-portlet__head">

            <div class="m-portlet__head-caption">

                <div class="m-portlet__head-title">

                    <h3 class="m-portlet__head-text">

                        <span data-key="number"></span> [<span data-key="name"></span>]

                    </h3>

                </div>

            </div>

            <div class="m-portlet__head-tools">

            	<ul class="m-portlet_nav">

            		<li class="m-portlet__nav-item">

            			<a href="javascript:void(0)" class="m-portlet__nav-link m-portlet__nav-link--icon"><i class="la la-close"></i></a>

            		</li>

            	</ul>

            </div>

        </div>

        <!--begin::Form-->

        <div class="m-portlet__body">

        	Found! <span data-key="number"></span> [<span data-key="name"></span>]

		</div>

	</div>

    <!--end::Portlet-->

</script>

I'm not sure what I'm doing wrong here. I've tried using .each as well with no luck. Both leave the value of the span tags empty.

(I've removed some of the script, but the variable s does have a value on it)

asked Nov 21 '18 at 15:34

Dubz

186

I am trying to create portlets on my website which are generated when a user inputs a number and clicks a button.

This is a super simplified version of what I'd like to do. I'm just trying to get parts of it working properly before building it up more.

Here is the script tag with the template:

var p = $("#tpl_dashboard_portlet").html();

var h = document.createElement('div');

$(h).html(p);

$(h).find('div.m-portlet').data('s', s);

$(h).find('[data-key="number"]').val(s);

$(h).find('[data-key="name"]').val("TEST");

console.log(h);

console.log($(h).html());

console.log(s);

$("div.m-content").append($(h).html());

<script id="tpl_dashboard_portlet" type="text/html">

    <!--begin::Portlet-->

    <div class="m-portlet">

        <div class="m-portlet__head">

            <div class="m-portlet__head-caption">

                <div class="m-portlet__head-title">

                    <h3 class="m-portlet__head-text">

                        <span data-key="number"></span> [<span data-key="name"></span>]

                    </h3>

                </div>

            </div>

            <div class="m-portlet__head-tools">

            	<ul class="m-portlet_nav">

            		<li class="m-portlet__nav-item">

            			<a href="javascript:void(0)" class="m-portlet__nav-link m-portlet__nav-link--icon"><i class="la la-close"></i></a>

            		</li>

            	</ul>

            </div>

        </div>

        <!--begin::Form-->

        <div class="m-portlet__body">

        	Found! <span data-key="number"></span> [<span data-key="name"></span>]

		</div>

	</div>

    <!--end::Portlet-->

</script>

I'm not sure what I'm doing wrong here. I've tried using .each as well with no luck. Both leave the value of the span tags empty.

(I've removed some of the script, but the variable s does have a value on it)

var p = $("#tpl_dashboard_portlet").html();

var h = document.createElement('div');

$(h).html(p);

$(h).find('div.m-portlet').data('s', s);

$(h).find('[data-key="number"]').val(s);

$(h).find('[data-key="name"]').val("TEST");

console.log(h);

console.log($(h).html());

console.log(s);

$("div.m-content").append($(h).html());

<script id="tpl_dashboard_portlet" type="text/html">

    <!--begin::Portlet-->

    <div class="m-portlet">

        <div class="m-portlet__head">

            <div class="m-portlet__head-caption">

                <div class="m-portlet__head-title">

                    <h3 class="m-portlet__head-text">

                        <span data-key="number"></span> [<span data-key="name"></span>]

                    </h3>

                </div>

            </div>

            <div class="m-portlet__head-tools">

            	<ul class="m-portlet_nav">

            		<li class="m-portlet__nav-item">

            			<a href="javascript:void(0)" class="m-portlet__nav-link m-portlet__nav-link--icon"><i class="la la-close"></i></a>

            		</li>

            	</ul>

            </div>

        </div>

        <!--begin::Form-->

        <div class="m-portlet__body">

        	Found! <span data-key="number"></span> [<span data-key="name"></span>]

		</div>

	</div>

    <!--end::Portlet-->

</script>

var p = $("#tpl_dashboard_portlet").html();

var h = document.createElement('div');

$(h).html(p);

$(h).find('div.m-portlet').data('s', s);

$(h).find('[data-key="number"]').val(s);

$(h).find('[data-key="name"]').val("TEST");

console.log(h);

console.log($(h).html());

console.log(s);

$("div.m-content").append($(h).html());

<script id="tpl_dashboard_portlet" type="text/html">

    <!--begin::Portlet-->

    <div class="m-portlet">

        <div class="m-portlet__head">

            <div class="m-portlet__head-caption">

                <div class="m-portlet__head-title">

                    <h3 class="m-portlet__head-text">

                        <span data-key="number"></span> [<span data-key="name"></span>]

                    </h3>

                </div>

            </div>

            <div class="m-portlet__head-tools">

            	<ul class="m-portlet_nav">

            		<li class="m-portlet__nav-item">

            			<a href="javascript:void(0)" class="m-portlet__nav-link m-portlet__nav-link--icon"><i class="la la-close"></i></a>

            		</li>

            	</ul>

            </div>

        </div>

        <!--begin::Form-->

        <div class="m-portlet__body">

        	Found! <span data-key="number"></span> [<span data-key="name"></span>]

		</div>

	</div>

    <!--end::Portlet-->

</script>

javascript jquery html

asked Nov 21 '18 at 15:34

Dubz

186

asked Nov 21 '18 at 15:34

Dubz

186

asked Nov 21 '18 at 15:34

Dubz

186

asked Nov 21 '18 at 15:34

Dubz

186

asked Nov 21 '18 at 15:34

Dubz

186

why are you writing html code inside <script id="tpl_dashboard_portlet" type="text/html">

– secret super star
Nov 21 '18 at 15:37

I found it online before and liked the idea. Not really sure what its benefits could/would be for this, apart from not needing to add the hidden attribute. I just went with it and it worked.

– Dubz
Nov 21 '18 at 15:40

what does s contains?

– secret super star
Nov 21 '18 at 15:50

add a comment |

why are you writing html code inside <script id="tpl_dashboard_portlet" type="text/html">

– secret super star
Nov 21 '18 at 15:37

I found it online before and liked the idea. Not really sure what its benefits could/would be for this, apart from not needing to add the hidden attribute. I just went with it and it worked.

– Dubz
Nov 21 '18 at 15:40

what does s contains?

– secret super star
Nov 21 '18 at 15:50

why are you writing html code inside <script id="tpl_dashboard_portlet" type="text/html">

– secret super star
Nov 21 '18 at 15:37

I found it online before and liked the idea. Not really sure what its benefits could/would be for this, apart from not needing to add the hidden attribute. I just went with it and it worked.

– Dubz
Nov 21 '18 at 15:40

what does s contains?

– secret super star
Nov 21 '18 at 15:50

add a comment |

1 Answer
1

active

oldest

votes

You have two issues here. Firstly, every time you call $(h) you're creating a new jQuery object from the original template HTML. As such any and all previous changes you made are lost. You need to create the jQuery object from the template HTML once, then make all changes to that object.

Secondly, the span elements you select by data-key attribute do not have value properties to change, you instead need to set their text(). Try this:

var s = 'foo';

var p = $("#tpl_dashboard_portlet").html();

var $h = $('<div />');

$h.html(p);

$h.find('div.m-portlet').data('s', s);

$h.find('[data-key="number"]').text(s);

$h.find('[data-key="name"]').text("TEST");



$("div.m-content").append($h.html());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script id="tpl_dashboard_portlet" type="text/html">

  <div class="m-portlet">

    <div class="m-portlet__head">

      <div class="m-portlet__head-caption">

        <div class="m-portlet__head-title">

          <h3 class="m-portlet__head-text">

            <span data-key="number"></span> [<span data-key="name"></span>]

          </h3>

        </div>

      </div>

      <div class="m-portlet__head-tools">

        <ul class="m-portlet_nav">

          <li class="m-portlet__nav-item">

            <a href="javascript:void(0)" class="m-portlet__nav-link m-portlet__nav-link--icon"><i class="la la-close"></i></a>

          </li>

        </ul>

      </div>

    </div>

    <div class="m-portlet__body">

      Found! <span data-key="number"></span> [<span data-key="name"></span>]

    </div>

  </div>

</script>



<div class="m-content"></div>

answered Nov 21 '18 at 15:51

Rory McCrossan

244k29211247

I feel like an idiot now... The issue was in fact me using val() rather than text(). Switched it and it's working now. I never knew that about creating new jQuery elements though. I just saw it done that way on other scripts and have been doing it that way since. I'll have to be sure to not do that going forward. Thank you for the help though!!!

– Dubz
Nov 21 '18 at 15:55

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53415498%2fcopy-html-from-element-replace-text-with-jquery-then-append-to-element%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

Secondly, the span elements you select by data-key attribute do not have value properties to change, you instead need to set their text(). Try this:

var s = 'foo';

var p = $("#tpl_dashboard_portlet").html();

var $h = $('<div />');

$h.html(p);

$h.find('div.m-portlet').data('s', s);

$h.find('[data-key="number"]').text(s);

$h.find('[data-key="name"]').text("TEST");



$("div.m-content").append($h.html());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script id="tpl_dashboard_portlet" type="text/html">

  <div class="m-portlet">

    <div class="m-portlet__head">

      <div class="m-portlet__head-caption">

        <div class="m-portlet__head-title">

          <h3 class="m-portlet__head-text">

            <span data-key="number"></span> [<span data-key="name"></span>]

          </h3>

        </div>

      </div>

      <div class="m-portlet__head-tools">

        <ul class="m-portlet_nav">

          <li class="m-portlet__nav-item">

            <a href="javascript:void(0)" class="m-portlet__nav-link m-portlet__nav-link--icon"><i class="la la-close"></i></a>

          </li>

        </ul>

      </div>

    </div>

    <div class="m-portlet__body">

      Found! <span data-key="number"></span> [<span data-key="name"></span>]

    </div>

  </div>

</script>



<div class="m-content"></div>

answered Nov 21 '18 at 15:51

Rory McCrossan

244k29211247

I feel like an idiot now... The issue was in fact me using val() rather than text(). Switched it and it's working now. I never knew that about creating new jQuery elements though. I just saw it done that way on other scripts and have been doing it that way since. I'll have to be sure to not do that going forward. Thank you for the help though!!!

– Dubz
Nov 21 '18 at 15:55

add a comment |

Secondly, the span elements you select by data-key attribute do not have value properties to change, you instead need to set their text(). Try this:

var s = 'foo';

var p = $("#tpl_dashboard_portlet").html();

var $h = $('<div />');

$h.html(p);

$h.find('div.m-portlet').data('s', s);

$h.find('[data-key="number"]').text(s);

$h.find('[data-key="name"]').text("TEST");



$("div.m-content").append($h.html());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script id="tpl_dashboard_portlet" type="text/html">

  <div class="m-portlet">

    <div class="m-portlet__head">

      <div class="m-portlet__head-caption">

        <div class="m-portlet__head-title">

          <h3 class="m-portlet__head-text">

            <span data-key="number"></span> [<span data-key="name"></span>]

          </h3>

        </div>

      </div>

      <div class="m-portlet__head-tools">

        <ul class="m-portlet_nav">

          <li class="m-portlet__nav-item">

            <a href="javascript:void(0)" class="m-portlet__nav-link m-portlet__nav-link--icon"><i class="la la-close"></i></a>

          </li>

        </ul>

      </div>

    </div>

    <div class="m-portlet__body">

      Found! <span data-key="number"></span> [<span data-key="name"></span>]

    </div>

  </div>

</script>



<div class="m-content"></div>

answered Nov 21 '18 at 15:51

Rory McCrossan

244k29211247

I feel like an idiot now... The issue was in fact me using val() rather than text(). Switched it and it's working now. I never knew that about creating new jQuery elements though. I just saw it done that way on other scripts and have been doing it that way since. I'll have to be sure to not do that going forward. Thank you for the help though!!!

– Dubz
Nov 21 '18 at 15:55

add a comment |

Secondly, the span elements you select by data-key attribute do not have value properties to change, you instead need to set their text(). Try this:

var s = 'foo';

var p = $("#tpl_dashboard_portlet").html();

var $h = $('<div />');

$h.html(p);

$h.find('div.m-portlet').data('s', s);

$h.find('[data-key="number"]').text(s);

$h.find('[data-key="name"]').text("TEST");



$("div.m-content").append($h.html());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script id="tpl_dashboard_portlet" type="text/html">

  <div class="m-portlet">

    <div class="m-portlet__head">

      <div class="m-portlet__head-caption">

        <div class="m-portlet__head-title">

          <h3 class="m-portlet__head-text">

            <span data-key="number"></span> [<span data-key="name"></span>]

          </h3>

        </div>

      </div>

      <div class="m-portlet__head-tools">

        <ul class="m-portlet_nav">

          <li class="m-portlet__nav-item">

            <a href="javascript:void(0)" class="m-portlet__nav-link m-portlet__nav-link--icon"><i class="la la-close"></i></a>

          </li>

        </ul>

      </div>

    </div>

    <div class="m-portlet__body">

      Found! <span data-key="number"></span> [<span data-key="name"></span>]

    </div>

  </div>

</script>



<div class="m-content"></div>

answered Nov 21 '18 at 15:51

Rory McCrossan

244k29211247

Secondly, the span elements you select by data-key attribute do not have value properties to change, you instead need to set their text(). Try this:

var s = 'foo';

var p = $("#tpl_dashboard_portlet").html();

var $h = $('<div />');

$h.html(p);

$h.find('div.m-portlet').data('s', s);

$h.find('[data-key="number"]').text(s);

$h.find('[data-key="name"]').text("TEST");



$("div.m-content").append($h.html());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script id="tpl_dashboard_portlet" type="text/html">

  <div class="m-portlet">

    <div class="m-portlet__head">

      <div class="m-portlet__head-caption">

        <div class="m-portlet__head-title">

          <h3 class="m-portlet__head-text">

            <span data-key="number"></span> [<span data-key="name"></span>]

          </h3>

        </div>

      </div>

      <div class="m-portlet__head-tools">

        <ul class="m-portlet_nav">

          <li class="m-portlet__nav-item">

            <a href="javascript:void(0)" class="m-portlet__nav-link m-portlet__nav-link--icon"><i class="la la-close"></i></a>

          </li>

        </ul>

      </div>

    </div>

    <div class="m-portlet__body">

      Found! <span data-key="number"></span> [<span data-key="name"></span>]

    </div>

  </div>

</script>



<div class="m-content"></div>

var s = 'foo';

var p = $("#tpl_dashboard_portlet").html();

var $h = $('<div />');

$h.html(p);

$h.find('div.m-portlet').data('s', s);

$h.find('[data-key="number"]').text(s);

$h.find('[data-key="name"]').text("TEST");



$("div.m-content").append($h.html());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script id="tpl_dashboard_portlet" type="text/html">

  <div class="m-portlet">

    <div class="m-portlet__head">

      <div class="m-portlet__head-caption">

        <div class="m-portlet__head-title">

          <h3 class="m-portlet__head-text">

            <span data-key="number"></span> [<span data-key="name"></span>]

          </h3>

        </div>

      </div>

      <div class="m-portlet__head-tools">

        <ul class="m-portlet_nav">

          <li class="m-portlet__nav-item">

            <a href="javascript:void(0)" class="m-portlet__nav-link m-portlet__nav-link--icon"><i class="la la-close"></i></a>

          </li>

        </ul>

      </div>

    </div>

    <div class="m-portlet__body">

      Found! <span data-key="number"></span> [<span data-key="name"></span>]

    </div>

  </div>

</script>



<div class="m-content"></div>

var s = 'foo';

var p = $("#tpl_dashboard_portlet").html();

var $h = $('<div />');

$h.html(p);

$h.find('div.m-portlet').data('s', s);

$h.find('[data-key="number"]').text(s);

$h.find('[data-key="name"]').text("TEST");



$("div.m-content").append($h.html());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script id="tpl_dashboard_portlet" type="text/html">

  <div class="m-portlet">

    <div class="m-portlet__head">

      <div class="m-portlet__head-caption">

        <div class="m-portlet__head-title">

          <h3 class="m-portlet__head-text">

            <span data-key="number"></span> [<span data-key="name"></span>]

          </h3>

        </div>

      </div>

      <div class="m-portlet__head-tools">

        <ul class="m-portlet_nav">

          <li class="m-portlet__nav-item">

            <a href="javascript:void(0)" class="m-portlet__nav-link m-portlet__nav-link--icon"><i class="la la-close"></i></a>

          </li>

        </ul>

      </div>

    </div>

    <div class="m-portlet__body">

      Found! <span data-key="number"></span> [<span data-key="name"></span>]

    </div>

  </div>

</script>



<div class="m-content"></div>

answered Nov 21 '18 at 15:51

Rory McCrossan

244k29211247

answered Nov 21 '18 at 15:51

Rory McCrossan

244k29211247

answered Nov 21 '18 at 15:51

Rory McCrossan

244k29211247

answered Nov 21 '18 at 15:51

Rory McCrossan

244k29211247

I feel like an idiot now... The issue was in fact me using val() rather than text(). Switched it and it's working now. I never knew that about creating new jQuery elements though. I just saw it done that way on other scripts and have been doing it that way since. I'll have to be sure to not do that going forward. Thank you for the help though!!!

– Dubz
Nov 21 '18 at 15:55

add a comment |

I feel like an idiot now... The issue was in fact me using val() rather than text(). Switched it and it's working now. I never knew that about creating new jQuery elements though. I just saw it done that way on other scripts and have been doing it that way since. I'll have to be sure to not do that going forward. Thank you for the help though!!!

– Dubz
Nov 21 '18 at 15:55

I feel like an idiot now... The issue was in fact me using val() rather than text(). Switched it and it's working now. I never knew that about creating new jQuery elements though. I just saw it done that way on other scripts and have been doing it that way since. I'll have to be sure to not do that going forward. Thank you for the help though!!!

– Dubz
Nov 21 '18 at 15:55

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Argthtjtr