Cloned bootstrap-selectpicker selections off by 1
When I clone a bootstrap-select dropdown, the cloned dropdown seems to offset selections by 1. I.e., if I click the second option, the first one is selected.
For example:
If I click "New Castle" in the original dropdown, then "New Castle" is selected
If I click "New Castle" in the cloned dropdown, then "Kent" is selected
The error I get is:
bootstrap-select.js:2727 Uncaught TypeError: Cannot read property 'firstChild' of undefined
Why might this be happening?
A JSFiddle of the error is here: http://jsfiddle.net/jh4wztab/1/
Below is my code:
var count = 2;
$(document).on("click", "#clonejurisdiction", function() {
addselectpicker(count);
count++;
});
function addselectpicker(juriscount) {
juriscount = parseInt(juriscount)
var picker = $('#jurisdictionpicker');
var clone = picker.clone();
var pickercount = juriscount + 1;
clone.attr("id",'jurisdiction' + juriscount);
clone.find(".selectpicker").attr("id",'jurisdictionpicker' + juriscount);
clone.find("[data-id='jurisdiction_']").hide();
clone.appendTo(".juris_name");
clone.find('.selectpicker').selectpicker();
clone.find(":input").attr("placeholder", "Enter a State, County");
}
HTML
<div id="jurisdictionpicker">
<select class="selectpicker jurisdiction" data-live-search="true" data-size="8" title="Select County, State" id="jurisdiction_">
<optgroup label="Popular">
<option value='317'>Kent</option>
<option value='318'>New Castle</option>
<option value='1859'>New York</option>
</optgroup>
<optgroup label="Jurisdictions">
<option value='1'>Autauga</option>
<option value='2'>Baldwin</option>
<option value='3'>Barbour</option>
<option value='4'>Bibb</option>
</optgroup>
</select>
</div>
<button id="clonejurisdiction">
Clone
</button>
<BR><B>Cloned version:</B>
<div class="juris_name">
</div>
javascript jquery twitter-bootstrap select bootstrap-4
add a comment |
When I clone a bootstrap-select dropdown, the cloned dropdown seems to offset selections by 1. I.e., if I click the second option, the first one is selected.
For example:
If I click "New Castle" in the original dropdown, then "New Castle" is selected
If I click "New Castle" in the cloned dropdown, then "Kent" is selected
The error I get is:
bootstrap-select.js:2727 Uncaught TypeError: Cannot read property 'firstChild' of undefined
Why might this be happening?
A JSFiddle of the error is here: http://jsfiddle.net/jh4wztab/1/
Below is my code:
var count = 2;
$(document).on("click", "#clonejurisdiction", function() {
addselectpicker(count);
count++;
});
function addselectpicker(juriscount) {
juriscount = parseInt(juriscount)
var picker = $('#jurisdictionpicker');
var clone = picker.clone();
var pickercount = juriscount + 1;
clone.attr("id",'jurisdiction' + juriscount);
clone.find(".selectpicker").attr("id",'jurisdictionpicker' + juriscount);
clone.find("[data-id='jurisdiction_']").hide();
clone.appendTo(".juris_name");
clone.find('.selectpicker').selectpicker();
clone.find(":input").attr("placeholder", "Enter a State, County");
}
HTML
<div id="jurisdictionpicker">
<select class="selectpicker jurisdiction" data-live-search="true" data-size="8" title="Select County, State" id="jurisdiction_">
<optgroup label="Popular">
<option value='317'>Kent</option>
<option value='318'>New Castle</option>
<option value='1859'>New York</option>
</optgroup>
<optgroup label="Jurisdictions">
<option value='1'>Autauga</option>
<option value='2'>Baldwin</option>
<option value='3'>Barbour</option>
<option value='4'>Bibb</option>
</optgroup>
</select>
</div>
<button id="clonejurisdiction">
Clone
</button>
<BR><B>Cloned version:</B>
<div class="juris_name">
</div>
javascript jquery twitter-bootstrap select bootstrap-4
add a comment |
When I clone a bootstrap-select dropdown, the cloned dropdown seems to offset selections by 1. I.e., if I click the second option, the first one is selected.
For example:
If I click "New Castle" in the original dropdown, then "New Castle" is selected
If I click "New Castle" in the cloned dropdown, then "Kent" is selected
The error I get is:
bootstrap-select.js:2727 Uncaught TypeError: Cannot read property 'firstChild' of undefined
Why might this be happening?
A JSFiddle of the error is here: http://jsfiddle.net/jh4wztab/1/
Below is my code:
var count = 2;
$(document).on("click", "#clonejurisdiction", function() {
addselectpicker(count);
count++;
});
function addselectpicker(juriscount) {
juriscount = parseInt(juriscount)
var picker = $('#jurisdictionpicker');
var clone = picker.clone();
var pickercount = juriscount + 1;
clone.attr("id",'jurisdiction' + juriscount);
clone.find(".selectpicker").attr("id",'jurisdictionpicker' + juriscount);
clone.find("[data-id='jurisdiction_']").hide();
clone.appendTo(".juris_name");
clone.find('.selectpicker').selectpicker();
clone.find(":input").attr("placeholder", "Enter a State, County");
}
HTML
<div id="jurisdictionpicker">
<select class="selectpicker jurisdiction" data-live-search="true" data-size="8" title="Select County, State" id="jurisdiction_">
<optgroup label="Popular">
<option value='317'>Kent</option>
<option value='318'>New Castle</option>
<option value='1859'>New York</option>
</optgroup>
<optgroup label="Jurisdictions">
<option value='1'>Autauga</option>
<option value='2'>Baldwin</option>
<option value='3'>Barbour</option>
<option value='4'>Bibb</option>
</optgroup>
</select>
</div>
<button id="clonejurisdiction">
Clone
</button>
<BR><B>Cloned version:</B>
<div class="juris_name">
</div>
javascript jquery twitter-bootstrap select bootstrap-4
When I clone a bootstrap-select dropdown, the cloned dropdown seems to offset selections by 1. I.e., if I click the second option, the first one is selected.
For example:
If I click "New Castle" in the original dropdown, then "New Castle" is selected
If I click "New Castle" in the cloned dropdown, then "Kent" is selected
The error I get is:
bootstrap-select.js:2727 Uncaught TypeError: Cannot read property 'firstChild' of undefined
Why might this be happening?
A JSFiddle of the error is here: http://jsfiddle.net/jh4wztab/1/
Below is my code:
var count = 2;
$(document).on("click", "#clonejurisdiction", function() {
addselectpicker(count);
count++;
});
function addselectpicker(juriscount) {
juriscount = parseInt(juriscount)
var picker = $('#jurisdictionpicker');
var clone = picker.clone();
var pickercount = juriscount + 1;
clone.attr("id",'jurisdiction' + juriscount);
clone.find(".selectpicker").attr("id",'jurisdictionpicker' + juriscount);
clone.find("[data-id='jurisdiction_']").hide();
clone.appendTo(".juris_name");
clone.find('.selectpicker').selectpicker();
clone.find(":input").attr("placeholder", "Enter a State, County");
}
HTML
<div id="jurisdictionpicker">
<select class="selectpicker jurisdiction" data-live-search="true" data-size="8" title="Select County, State" id="jurisdiction_">
<optgroup label="Popular">
<option value='317'>Kent</option>
<option value='318'>New Castle</option>
<option value='1859'>New York</option>
</optgroup>
<optgroup label="Jurisdictions">
<option value='1'>Autauga</option>
<option value='2'>Baldwin</option>
<option value='3'>Barbour</option>
<option value='4'>Bibb</option>
</optgroup>
</select>
</div>
<button id="clonejurisdiction">
Clone
</button>
<BR><B>Cloned version:</B>
<div class="juris_name">
</div>
javascript jquery twitter-bootstrap select bootstrap-4
javascript jquery twitter-bootstrap select bootstrap-4
edited Nov 14 '18 at 0:17
asked Nov 13 '18 at 22:14
user749798
1,50083058
1,50083058
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Your main problem is when trying to do var clone = picker.clone();
, that code is not actually cloning your original HTML markup for your select
element. When using Bootstrap and writing your HTML markup for a select element like <select class="selectpicker">
, when you use the class selectpicker
the bootstrap javascript transforms your original markup into bootstraps select markup using parts of your original HTML. Once the DOM is rendered, the select element you are interacting with in your browser is not code that you originally wrote at all, it is boostrap's transformation of your HTML. So when you trying to clone()
the bootstrap select element and then calling selectpicker()
on it, it was trying to force bootstrap to transform HTML that was not in a state that it expected it to be to transform it, and was causing your unexpected behavior.
One way to solve this problem is to make your original HTML markup reusable. An easy way to do this is templating. When doing this you can get your template and add whatever view data you need to it and then have bootstrap transform your template HTML on the fly using selectpicker()
Here is a modified version of you originally posted code using Mustache.js for templating purposes. This performs what you wanted without your original select picker bug:
Here is the updated JSFiddle.
javascript:
var count = 1;
$(document).ready(function() {
$("#someDiv").append(getJurisdictionPicker(count));
});
$(document).on("click", "#clonejurisdiction", function() {
var picker = getJurisdictionPicker(count);
$("#jurisName").append(picker);
});
function getJurisdictionPicker(juriscount) {
var template = $("#jurisdictionPickerTemplate").html();
var data = { counter : juriscount };
var templatedText = Mustache.render(template, data);
var temp = $(document.createElement("div")).html(templatedText);
temp.find(".selectpicker").selectpicker();
count++;
return temp;
}
HTML:
<script id="jurisdictionPickerTemplate" type="text/template">
<div id="jurisdictionpicker{{ counter }}">
<select class="selectpicker" data-live-search="true" data-size="8" title="Select County, State">
<optgroup label="Popular">
<option value='317'>Kent</option>
<option value='318'>New Castle</option>
<option value='1859'>New York</option>
</optgroup>
<optgroup label="Jurisdictions">
<option value='1'>Autauga</option>
<option value='2'>Baldwin</option>
<option value='3'>Barbour</option>
<option value='4'>Bibb</option>
</optgroup>
</select>
</div>
</script>
<div id="someDiv">
</div>
<button id="clonejurisdiction">
Clone
</button>
<BR><B>Cloned version:</B>
<div id="jurisName">
</div>
<BR><BR>
If I click "New Castle" in the original dropdown, then "New Castle" is selected<BR>
If I click "New Castle" in the <B>cloned</B> dropdown, then "Kent" is selected<BR>
Thank you for the answer!
– user749798
Nov 14 '18 at 16:19
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
});
}
});
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%2f53290323%2fcloned-bootstrap-selectpicker-selections-off-by-1%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Your main problem is when trying to do var clone = picker.clone();
, that code is not actually cloning your original HTML markup for your select
element. When using Bootstrap and writing your HTML markup for a select element like <select class="selectpicker">
, when you use the class selectpicker
the bootstrap javascript transforms your original markup into bootstraps select markup using parts of your original HTML. Once the DOM is rendered, the select element you are interacting with in your browser is not code that you originally wrote at all, it is boostrap's transformation of your HTML. So when you trying to clone()
the bootstrap select element and then calling selectpicker()
on it, it was trying to force bootstrap to transform HTML that was not in a state that it expected it to be to transform it, and was causing your unexpected behavior.
One way to solve this problem is to make your original HTML markup reusable. An easy way to do this is templating. When doing this you can get your template and add whatever view data you need to it and then have bootstrap transform your template HTML on the fly using selectpicker()
Here is a modified version of you originally posted code using Mustache.js for templating purposes. This performs what you wanted without your original select picker bug:
Here is the updated JSFiddle.
javascript:
var count = 1;
$(document).ready(function() {
$("#someDiv").append(getJurisdictionPicker(count));
});
$(document).on("click", "#clonejurisdiction", function() {
var picker = getJurisdictionPicker(count);
$("#jurisName").append(picker);
});
function getJurisdictionPicker(juriscount) {
var template = $("#jurisdictionPickerTemplate").html();
var data = { counter : juriscount };
var templatedText = Mustache.render(template, data);
var temp = $(document.createElement("div")).html(templatedText);
temp.find(".selectpicker").selectpicker();
count++;
return temp;
}
HTML:
<script id="jurisdictionPickerTemplate" type="text/template">
<div id="jurisdictionpicker{{ counter }}">
<select class="selectpicker" data-live-search="true" data-size="8" title="Select County, State">
<optgroup label="Popular">
<option value='317'>Kent</option>
<option value='318'>New Castle</option>
<option value='1859'>New York</option>
</optgroup>
<optgroup label="Jurisdictions">
<option value='1'>Autauga</option>
<option value='2'>Baldwin</option>
<option value='3'>Barbour</option>
<option value='4'>Bibb</option>
</optgroup>
</select>
</div>
</script>
<div id="someDiv">
</div>
<button id="clonejurisdiction">
Clone
</button>
<BR><B>Cloned version:</B>
<div id="jurisName">
</div>
<BR><BR>
If I click "New Castle" in the original dropdown, then "New Castle" is selected<BR>
If I click "New Castle" in the <B>cloned</B> dropdown, then "Kent" is selected<BR>
Thank you for the answer!
– user749798
Nov 14 '18 at 16:19
add a comment |
Your main problem is when trying to do var clone = picker.clone();
, that code is not actually cloning your original HTML markup for your select
element. When using Bootstrap and writing your HTML markup for a select element like <select class="selectpicker">
, when you use the class selectpicker
the bootstrap javascript transforms your original markup into bootstraps select markup using parts of your original HTML. Once the DOM is rendered, the select element you are interacting with in your browser is not code that you originally wrote at all, it is boostrap's transformation of your HTML. So when you trying to clone()
the bootstrap select element and then calling selectpicker()
on it, it was trying to force bootstrap to transform HTML that was not in a state that it expected it to be to transform it, and was causing your unexpected behavior.
One way to solve this problem is to make your original HTML markup reusable. An easy way to do this is templating. When doing this you can get your template and add whatever view data you need to it and then have bootstrap transform your template HTML on the fly using selectpicker()
Here is a modified version of you originally posted code using Mustache.js for templating purposes. This performs what you wanted without your original select picker bug:
Here is the updated JSFiddle.
javascript:
var count = 1;
$(document).ready(function() {
$("#someDiv").append(getJurisdictionPicker(count));
});
$(document).on("click", "#clonejurisdiction", function() {
var picker = getJurisdictionPicker(count);
$("#jurisName").append(picker);
});
function getJurisdictionPicker(juriscount) {
var template = $("#jurisdictionPickerTemplate").html();
var data = { counter : juriscount };
var templatedText = Mustache.render(template, data);
var temp = $(document.createElement("div")).html(templatedText);
temp.find(".selectpicker").selectpicker();
count++;
return temp;
}
HTML:
<script id="jurisdictionPickerTemplate" type="text/template">
<div id="jurisdictionpicker{{ counter }}">
<select class="selectpicker" data-live-search="true" data-size="8" title="Select County, State">
<optgroup label="Popular">
<option value='317'>Kent</option>
<option value='318'>New Castle</option>
<option value='1859'>New York</option>
</optgroup>
<optgroup label="Jurisdictions">
<option value='1'>Autauga</option>
<option value='2'>Baldwin</option>
<option value='3'>Barbour</option>
<option value='4'>Bibb</option>
</optgroup>
</select>
</div>
</script>
<div id="someDiv">
</div>
<button id="clonejurisdiction">
Clone
</button>
<BR><B>Cloned version:</B>
<div id="jurisName">
</div>
<BR><BR>
If I click "New Castle" in the original dropdown, then "New Castle" is selected<BR>
If I click "New Castle" in the <B>cloned</B> dropdown, then "Kent" is selected<BR>
Thank you for the answer!
– user749798
Nov 14 '18 at 16:19
add a comment |
Your main problem is when trying to do var clone = picker.clone();
, that code is not actually cloning your original HTML markup for your select
element. When using Bootstrap and writing your HTML markup for a select element like <select class="selectpicker">
, when you use the class selectpicker
the bootstrap javascript transforms your original markup into bootstraps select markup using parts of your original HTML. Once the DOM is rendered, the select element you are interacting with in your browser is not code that you originally wrote at all, it is boostrap's transformation of your HTML. So when you trying to clone()
the bootstrap select element and then calling selectpicker()
on it, it was trying to force bootstrap to transform HTML that was not in a state that it expected it to be to transform it, and was causing your unexpected behavior.
One way to solve this problem is to make your original HTML markup reusable. An easy way to do this is templating. When doing this you can get your template and add whatever view data you need to it and then have bootstrap transform your template HTML on the fly using selectpicker()
Here is a modified version of you originally posted code using Mustache.js for templating purposes. This performs what you wanted without your original select picker bug:
Here is the updated JSFiddle.
javascript:
var count = 1;
$(document).ready(function() {
$("#someDiv").append(getJurisdictionPicker(count));
});
$(document).on("click", "#clonejurisdiction", function() {
var picker = getJurisdictionPicker(count);
$("#jurisName").append(picker);
});
function getJurisdictionPicker(juriscount) {
var template = $("#jurisdictionPickerTemplate").html();
var data = { counter : juriscount };
var templatedText = Mustache.render(template, data);
var temp = $(document.createElement("div")).html(templatedText);
temp.find(".selectpicker").selectpicker();
count++;
return temp;
}
HTML:
<script id="jurisdictionPickerTemplate" type="text/template">
<div id="jurisdictionpicker{{ counter }}">
<select class="selectpicker" data-live-search="true" data-size="8" title="Select County, State">
<optgroup label="Popular">
<option value='317'>Kent</option>
<option value='318'>New Castle</option>
<option value='1859'>New York</option>
</optgroup>
<optgroup label="Jurisdictions">
<option value='1'>Autauga</option>
<option value='2'>Baldwin</option>
<option value='3'>Barbour</option>
<option value='4'>Bibb</option>
</optgroup>
</select>
</div>
</script>
<div id="someDiv">
</div>
<button id="clonejurisdiction">
Clone
</button>
<BR><B>Cloned version:</B>
<div id="jurisName">
</div>
<BR><BR>
If I click "New Castle" in the original dropdown, then "New Castle" is selected<BR>
If I click "New Castle" in the <B>cloned</B> dropdown, then "Kent" is selected<BR>
Your main problem is when trying to do var clone = picker.clone();
, that code is not actually cloning your original HTML markup for your select
element. When using Bootstrap and writing your HTML markup for a select element like <select class="selectpicker">
, when you use the class selectpicker
the bootstrap javascript transforms your original markup into bootstraps select markup using parts of your original HTML. Once the DOM is rendered, the select element you are interacting with in your browser is not code that you originally wrote at all, it is boostrap's transformation of your HTML. So when you trying to clone()
the bootstrap select element and then calling selectpicker()
on it, it was trying to force bootstrap to transform HTML that was not in a state that it expected it to be to transform it, and was causing your unexpected behavior.
One way to solve this problem is to make your original HTML markup reusable. An easy way to do this is templating. When doing this you can get your template and add whatever view data you need to it and then have bootstrap transform your template HTML on the fly using selectpicker()
Here is a modified version of you originally posted code using Mustache.js for templating purposes. This performs what you wanted without your original select picker bug:
Here is the updated JSFiddle.
javascript:
var count = 1;
$(document).ready(function() {
$("#someDiv").append(getJurisdictionPicker(count));
});
$(document).on("click", "#clonejurisdiction", function() {
var picker = getJurisdictionPicker(count);
$("#jurisName").append(picker);
});
function getJurisdictionPicker(juriscount) {
var template = $("#jurisdictionPickerTemplate").html();
var data = { counter : juriscount };
var templatedText = Mustache.render(template, data);
var temp = $(document.createElement("div")).html(templatedText);
temp.find(".selectpicker").selectpicker();
count++;
return temp;
}
HTML:
<script id="jurisdictionPickerTemplate" type="text/template">
<div id="jurisdictionpicker{{ counter }}">
<select class="selectpicker" data-live-search="true" data-size="8" title="Select County, State">
<optgroup label="Popular">
<option value='317'>Kent</option>
<option value='318'>New Castle</option>
<option value='1859'>New York</option>
</optgroup>
<optgroup label="Jurisdictions">
<option value='1'>Autauga</option>
<option value='2'>Baldwin</option>
<option value='3'>Barbour</option>
<option value='4'>Bibb</option>
</optgroup>
</select>
</div>
</script>
<div id="someDiv">
</div>
<button id="clonejurisdiction">
Clone
</button>
<BR><B>Cloned version:</B>
<div id="jurisName">
</div>
<BR><BR>
If I click "New Castle" in the original dropdown, then "New Castle" is selected<BR>
If I click "New Castle" in the <B>cloned</B> dropdown, then "Kent" is selected<BR>
edited Nov 14 '18 at 9:01
answered Nov 14 '18 at 8:43
JustSomeDude
769712
769712
Thank you for the answer!
– user749798
Nov 14 '18 at 16:19
add a comment |
Thank you for the answer!
– user749798
Nov 14 '18 at 16:19
Thank you for the answer!
– user749798
Nov 14 '18 at 16:19
Thank you for the answer!
– user749798
Nov 14 '18 at 16:19
add a comment |
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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%2f53290323%2fcloned-bootstrap-selectpicker-selections-off-by-1%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