I have created the input fields but when i click the first two ,it does well until when i request the third which comes between the first two and also other also comes between.can some help me please.
here is my javascript code:
<script type="text/javascript">
$(document).ready(function() {
it to after "after-add-more" div class.
$(".add-more").click(function(){
var html = $(".copy-fields").html();
$(".after-add-more").after(html);
});
$("body").on("click",".remove",function(){
$(this).parents(".control-group").remove();
});
});
</script>
$(document).ready(function() {
$(".add-more").on('click', function(){
var html = $(".copy-fields").clone();
$(".after-add-more").after(html[0]);
});
$("body").on("click",".remove",function(){
$(this).parents(".control-group").remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<button class = "add-more">ADD</button>
<div class = "after-add-more"></div>
<div class = "copy-fields"><input type = "text" /></div>
</div>
Because you are trying to copy the html content of class .copy-fields, Use clone() instead html() and then use html[0] for insert after as following:
$(document).ready(function() {
$(".add-more").click(function(){
var html = $(".copy-fields").clone();
$(".after-add-more").after(html[0]);
});
$("body").on("click",".remove",function(){
$(this).parents(".control-group").remove();
});
});
Related
I have a code like this:
<html>
<head>
<title>Example formBuilder</title>
</head>
<body>
<div class="build-wrap"></div>
<div class="build-wrap"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://formbuilder.online/assets/js/form-builder.min.js"></script>
<script>
jQuery(function($) {
$(document.getElementsByClassName('build-wrap')).formBuilder();
});
</script>
</body>
</html>
If it was initialized by id, then I could have get data with something like this:
var fbEditor = document.getElementById('build-wrap');
var formBuilder = $(fbEditor).formBuilder();
document.getElementById('getJSON').addEventListener('click', function() {
alert(formBuilder.actions.getData('json'));
});
However, I am using classname to initialize form builder. Is there any way, when click on save, get the respective form-builder data? I am using https://formbuilder.online/
Here is jsfiddle: https://jsfiddle.net/xycvbj3r/3/
#PS: there could be numerous form builder inside php loop.
You can try this:
formBuilder.actions.getData('json');
Or:
formBuilder.actions.getData();
The live demo is here: http://jsfiddle.net/dreambold/q0tfp4yd/10/
I was facing the same issue too. This worked for me
var list = ['#ins1', '#ins2', '#ins3'];
var instances = [];
var init = function(i) {
if (i < list.length) {
var options = JSON.parse(JSON.stringify([]));
$(list[i]).formBuilder(options).promise.then(function(res){
console.log(res, i);
instances.push(res);
i++;
init(i);
});
} else {
return;
}
};
init(0);
And to get data, you can use instances[key].actions.getData()
I am not sure how you are planning to save this data, but to help with your problem of getting form data for a particular form you can use something like this
var formBuilder = $(document.getElementsByClassName('build-wrap')).first().data('formBuilder').actions.getData()
Or to use it over a jQuery Collection then
$(document.getElementsByClassName('build-wrap')).each(function () {
var formBuilder = $(this).data('formBuilder').actions.getData()
})
There is a callback mentioned in the documentation, onsave which runs on editor save. So, when clicking on any form builder's save button, the respected form's data can be received.
Here is the code-
<html>
<head>
<title>Example formBuilder</title>
</head>
<body>
<div class="build-wrap"></div>
<div class="build-wrap"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://formbuilder.online/assets/js/form-builder.min.js"></script>
<script>
jQuery(function($) {
var options = {
onSave: function(evt, formData) {
// This is the respected form's data
console.log('MY DATA_________', formData)
},
};
$(document.getElementsByClassName('build-wrap')).formBuilder(options);
});
</script>
</body>
</html>
Here is the fiddle (couldn't create a working snippet due to not working CDNs.
)- https://jsfiddle.net/nehasoni988/rpo1jnuk/1/#&togetherjs=Mka9TJ4cex
I want to replace javascript to jquery to make each() to this function that show a single embedder tweet.
working version: https://jsfiddle.net/3u5r8e27/
var tweet = document.getElementById("tweet1");
var id = tweet.getAttribute("tweetID");
twttr.widgets.createTweet(id, tweet, {});
tweet = document.getElementById("tweet2");
id = tweet.getAttribute("tweetID2");
twttr.widgets.createTweet(id, tweet, {});
<script sync src="https://platform.twitter.com/widgets.js"></script>
<div class='tweet' id="tweet1" tweetID="1262730246668922885"></div>
<div class='tweet' id="tweet2" tweetID2="1260658846143401984"></div>
Im trying this, but doesnt work. What am doing wrong?
var tweet = 1;
var id = 1;
$(".tweet").each(function() {
tweet = $(this).attr("id");
id = $(this).attr("tweetid");
twttr.widgets.createTweet(id, tweet, {});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script sync src="https://platform.twitter.com/widgets.js"></script>
<div class='tweet' id="tweet1" tweetID="1262730246668922885"></div>
<div class='tweet' id="tweet2" tweetID2="1260658846143401984"></div>
In your original code, tweet1 is a DOM element. In your jQuery code it's an ID. You need to get the element.
And change the DIVs to use the same attribute tweetID, not tweetID and tweetID2.
$(".tweet").each(function() {
var tweet = this;
var id = $(this).attr("tweetID");
twttr.widgets.createTweet(id, tweet, {});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script sync src="https://platform.twitter.com/widgets.js"></script>
<div class='tweet' id="tweet1" tweetID="1262730246668922885"></div>
<div class='tweet' id="tweet2" tweetID="1260658846143401984"></div>
I am having a problem here about copying a text that displays from div (the display comes from jquery) to another div (using javascript).
Here is my code:
<body onload="copyDiv();">
<div id="first_div"></div>
<div id="second_div"></div>
</body>
<script>
// this function provides text for first_div
$(document).ready(function() {
$("#first_div").html('Testing');
});
// this function copies the text that comes from first_div to second_div
function copyDiv() {
var firstDivContent = document.getElementById('first_div');
var secondDivContent = document.getElementById('second_div');
secondDivContent.innerHTML = firstDivContent.innerHTML;
}
</script>
My expected output is, the jquery will provide the text for the first_div, and the javascript function will copy the text from first_div into the second_div. Thanks in advance
Both tasks should be on load and in order:
$( document ).ready(function(){
$("#first_div").html('Testing');
$("#second_div").html($("#first_div").html());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<body>
<div id="first_div"></div>
<div id="second_div"></div>
</body>
By pure JavaScript as per your question content.
function copyDiv() {
var firstDivContent = document.getElementById('first_div');
var secondDivContent = document.getElementById('second_div');
secondDivContent.innerHTML = firstDivContent.innerHTML;
}
<body onload="copyDiv();">
<div id="first_div">Testing</div>
<div id="second_div"></div>
</body>
I am working on an add-on for Confluence. I am using Apache Velocity and Js.
When I print out my template, I get no return from my JS file where I am using jQuery. How can I establish the communication between those two correctly? Thank you!
My JS
jQuery(function ($) {
var initmyConfluenceMacro = function ()
{
$(".myConfluenceMacro").each(function()
{
var html = "wadup";
var dayDates = $(this).find("input.dayDates").val();
html = html + dayDates;
$(this).html(html);
});
};
$(document).ready(function()
{
initmyConfluenceMacro();
});
});
MY Velocity Template.vm
#requireResource("confluence.web.resources:jquery")
#requireResource("com.atlassian.tutorial.myConfluenceMacro:myConfluenceMacro-resources")
My variables : $myCustomVar
My variable js:
<div class="myConfluenceMacro">
<fieldset class="parameters hidden">
<input type="hidden" class="dayDates" value="YO! Was up dude?">
</fieldset>
</div>
I managed it. Like this, it is working, and I get the HTML back!
JS
$(document).ready(function(){
$(".myConfluenceMacro").each(function(){
$(this).html("Hello <b>world!</b>");
});
});
VELOCITY
<script type="text/javascript">
#include( "templates/currencyDetail.js")
</script>
<body>
<div class="myConfluenceMacro">
</div>
I have a textarea in which I put HTML code, and then dynamically preview this HTML inside the preview div:
<div id="preview">
</div>
<textarea id="fooBar">
<div style="background-color:green;"></div>
</textarea>
jQuery code looks like this:
$(document).ready(function () {
var html = $('#fooBar').text();
$('#preview').html(html);
$('#fooBar').on('keyup', function() {
var html = $(this).text();
$('#preview').html(html);
});
});
The problem is that changing HTML code doesn't do nothing. Console log on html variable always shows the same initial content, it's not being changed.
How do I solve this, and why is that so?
Just change the text() to val().
$(document).ready(function () {
var html = $('#fooBar').text();
$('#preview').html(html);
$('#fooBar').on('keyup', function() {
var html = $(this).val();
$('#preview').html(html);
});
});
I think you should use val() instead of text(). val() is used for form elements like textarea in your case, whereas text() is HTML elements. I hope this will work
<div id="preview"></div>
<textarea id="fooBar">
<div style="background-color:green;"></div>
</textarea>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script>
$(document).ready(function () {
var html = $('#fooBar').val();
$('#preview').html(html);
$('#fooBar').on('keyup', function() {
var html = $(this).val();
$('#preview').html(html);
});
});