paypalobjects checkout button not visible in dynamically loaded view
If I place the following code in the main page, it works fine and displays a Paypal checkout button which also works fine.
<div class="rel">
<script src="https://www.paypalobjects.com/api/button.js?"
data-merchant="braintree"
data-id="paypal-button"
data-button="checkout"
data-color="gold"
data-size="medium"
data-shape="pill"
data-button_type="button"
data-button_disabled="false">
</script>
</div>
The problems arises when I update the div on a button click and loads the SCRIPT tag dynamically. The Paypal checkout button does not appear then. Is there a way to make the same button work without switching to the latest official Paypal Checkout API?
There is a button on the main page. I dynamically load the child DIV on that button click, using the below code:
<script>
$(document).ready(function () {
$('#btnPaypal').click(function () {
$.ajax({ url: "@Url.Action("PaypalContent", "NewPaymentMethod")" }).done(function (data) {
$("#divPaypal").show();
$("#divPaypalContent").html(data);
});
})
});
</script>
And data contains inner DIV html and button script as I have shared in the start of the question.
UPDATE:
There are no console errors and the final page source displays only the empty container DIV, as below:
<div class="rel">
</div>
javascript razor paypal
asked Nov 26 '18 at 6:43
user1451111user1451111
5452718
|
show 6 more comments
If I place the following code in the main page, it works fine and displays a Paypal checkout button which also works fine.
<div class="rel">
<script src="https://www.paypalobjects.com/api/button.js?"
data-merchant="braintree"
data-id="paypal-button"
data-button="checkout"
data-color="gold"
data-size="medium"
data-shape="pill"
data-button_type="button"
data-button_disabled="false">
</script>
</div>
The problems arises when I update the div on a button click and loads the SCRIPT tag dynamically. The Paypal checkout button does not appear then. Is there a way to make the same button work without switching to the latest official Paypal Checkout API?
There is a button on the main page. I dynamically load the child DIV on that button click, using the below code:
<script>
$(document).ready(function () {
$('#btnPaypal').click(function () {
$.ajax({ url: "@Url.Action("PaypalContent", "NewPaymentMethod")" }).done(function (data) {
$("#divPaypal").show();
$("#divPaypalContent").html(data);
});
})
});
</script>
And data contains inner DIV html and button script as I have shared in the start of the question.
UPDATE:
There are no console errors and the final page source displays only the empty container DIV, as below:
<div class="rel">
</div>
javascript razor paypal
asked Nov 26 '18 at 6:43
user1451111user1451111
5452718
How do you dynamically change div? please include code.
– Just code
Nov 26 '18 at 6:47
@Justcode I have updated the question. I hope it is clear now.
– user1451111
Nov 26 '18 at 6:59
Please inspect what you are getting in data and check console if there is any error, add data to your question too.
– Just code
Nov 26 '18 at 7:07
@Justcode I have updated the question again. There are no console errors and I am getting theDIVcode in thedata(the 1st code snippet in my question).
– user1451111
Nov 26 '18 at 8:06
that is the problem if you are getting empty container how you are expecting it to be a paypal button if you don't have it in source.
– Just code
Nov 26 '18 at 8:10
|
show 6 more comments
If I place the following code in the main page, it works fine and displays a Paypal checkout button which also works fine.
<div class="rel">
<script src="https://www.paypalobjects.com/api/button.js?"
data-merchant="braintree"
data-id="paypal-button"
data-button="checkout"
data-color="gold"
data-size="medium"
data-shape="pill"
data-button_type="button"
data-button_disabled="false">
</script>
</div>
The problems arises when I update the div on a button click and loads the SCRIPT tag dynamically. The Paypal checkout button does not appear then. Is there a way to make the same button work without switching to the latest official Paypal Checkout API?
There is a button on the main page. I dynamically load the child DIV on that button click, using the below code:
<script>
$(document).ready(function () {
$('#btnPaypal').click(function () {
$.ajax({ url: "@Url.Action("PaypalContent", "NewPaymentMethod")" }).done(function (data) {
$("#divPaypal").show();
$("#divPaypalContent").html(data);
});
})
});
</script>
And data contains inner DIV html and button script as I have shared in the start of the question.
UPDATE:
There are no console errors and the final page source displays only the empty container DIV, as below:
<div class="rel">
</div>
javascript razor paypal
asked Nov 26 '18 at 6:43
user1451111user1451111
5452718
If I place the following code in the main page, it works fine and displays a Paypal checkout button which also works fine.
<div class="rel">
<script src="https://www.paypalobjects.com/api/button.js?"
data-merchant="braintree"
data-id="paypal-button"
data-button="checkout"
data-color="gold"
data-size="medium"
data-shape="pill"
data-button_type="button"
data-button_disabled="false">
</script>
</div>
The problems arises when I update the div on a button click and loads the SCRIPT tag dynamically. The Paypal checkout button does not appear then. Is there a way to make the same button work without switching to the latest official Paypal Checkout API?
There is a button on the main page. I dynamically load the child DIV on that button click, using the below code:
<script>
$(document).ready(function () {
$('#btnPaypal').click(function () {
$.ajax({ url: "@Url.Action("PaypalContent", "NewPaymentMethod")" }).done(function (data) {
$("#divPaypal").show();
$("#divPaypalContent").html(data);
});
})
});
</script>
And data contains inner DIV html and button script as I have shared in the start of the question.
UPDATE:
There are no console errors and the final page source displays only the empty container DIV, as below:
<div class="rel">
</div>
javascript razor paypal
javascript razor paypal
asked Nov 26 '18 at 6:43
user1451111user1451111
5452718
asked Nov 26 '18 at 6:43
user1451111user1451111
5452718
edited Nov 26 '18 at 8:33
user1451111
asked Nov 26 '18 at 6:43
user1451111user1451111
5452718
asked Nov 26 '18 at 6:43
user1451111user1451111
5452718
asked Nov 26 '18 at 6:43
user1451111user1451111
5452718
5452718
How do you dynamically change div? please include code.
– Just code
Nov 26 '18 at 6:47
@Justcode I have updated the question. I hope it is clear now.
– user1451111
Nov 26 '18 at 6:59
Please inspect what you are getting in data and check console if there is any error, add data to your question too.
– Just code
Nov 26 '18 at 7:07
@Justcode I have updated the question again. There are no console errors and I am getting theDIVcode in thedata(the 1st code snippet in my question).
– user1451111
Nov 26 '18 at 8:06
that is the problem if you are getting empty container how you are expecting it to be a paypal button if you don't have it in source.
– Just code
Nov 26 '18 at 8:10
|
show 6 more comments
How do you dynamically change div? please include code.
– Just code
Nov 26 '18 at 6:47
@Justcode I have updated the question. I hope it is clear now.
– user1451111
Nov 26 '18 at 6:59
Please inspect what you are getting in data and check console if there is any error, add data to your question too.
– Just code
Nov 26 '18 at 7:07
@Justcode I have updated the question again. There are no console errors and I am getting theDIVcode in thedata(the 1st code snippet in my question).
– user1451111
Nov 26 '18 at 8:06
that is the problem if you are getting empty container how you are expecting it to be a paypal button if you don't have it in source.
– Just code
Nov 26 '18 at 8:10
How do you dynamically change div? please include code.
– Just code
Nov 26 '18 at 6:47
How do you dynamically change div? please include code.
– Just code
Nov 26 '18 at 6:47
@Justcode I have updated the question. I hope it is clear now.
– user1451111
Nov 26 '18 at 6:59
@Justcode I have updated the question. I hope it is clear now.
– user1451111
Nov 26 '18 at 6:59
Please inspect what you are getting in data and check console if there is any error, add data to your question too.
– Just code
Nov 26 '18 at 7:07
Please inspect what you are getting in data and check console if there is any error, add data to your question too.
– Just code
Nov 26 '18 at 7:07
@Justcode I have updated the question again. There are no console errors and I am getting the
DIV code in the data (the 1st code snippet in my question).– user1451111
Nov 26 '18 at 8:06
@Justcode I have updated the question again. There are no console errors and I am getting the
DIV code in the data (the 1st code snippet in my question).– user1451111
Nov 26 '18 at 8:06
that is the problem if you are getting empty container how you are expecting it to be a paypal button if you don't have it in source.
– Just code
Nov 26 '18 at 8:10
that is the problem if you are getting empty container how you are expecting it to be a paypal button if you don't have it in source.
– Just code
Nov 26 '18 at 8:10
|
show 6 more comments
0
active
oldest
votes
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53475931%2fpaypalobjects-checkout-button-not-visible-in-dynamically-loaded-view%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53475931%2fpaypalobjects-checkout-button-not-visible-in-dynamically-loaded-view%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
How do you dynamically change div? please include code.
– Just code
Nov 26 '18 at 6:47
@Justcode I have updated the question. I hope it is clear now.
– user1451111
Nov 26 '18 at 6:59
Please inspect what you are getting in data and check console if there is any error, add data to your question too.
– Just code
Nov 26 '18 at 7:07
@Justcode I have updated the question again. There are no console errors and I am getting the
DIVcode in thedata(the 1st code snippet in my question).– user1451111
Nov 26 '18 at 8:06
that is the problem if you are getting empty container how you are expecting it to be a paypal button if you don't have it in source.
– Just code
Nov 26 '18 at 8:10