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>
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 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 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();
});
});
I have one xml. Example XML is given below
<company sample="text">
<employee id="001" sex="M" age="20">Premshree Pillai</employee>
</company>
I need to get company attribute sample value
I am trying this method
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function() {
var currLoanXml = '<company sample="text"><employee id="001" sex="M" age="20">Premshree Pillai</employee></company>';
var pic = $(currLoanXml).find('company').attr('sample');
alert(pic);
};
</script>
Its Shows Undefined in my alert box.
But i can also alert this child tag its working
var pic = $(currLoanXml).find('employee').attr('id');
alert(pic);
What is a problem. I need to get first tag attributes. Please help me.
you need to use filter() instead of find() here because company is the root element, ie currLoanXml refers to the company element. find will look for decedent elements only
var currLoanXml = '<company sample="text"><employee id="001" sex="M" age="20">Premshree Pillai</employee></company>';
var pic = $(currLoanXml).filter('company').attr('sample');
alert(pic);
Demo: Fiddle
You go too deep
$(function() {
var currLoanXml = '<company sample="text"><employee id="001" sex="M" age="20">Premshree Pillai</employee></company>';
var sample = $(currLoanXml).attr('sample');
console.log(sample);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Help on this guys,
I have here a script that adds an ID on body tag
this is the result I see
<body id="xxx-cat">
with the script I'm using below
<script>
$(document).ready(function(){
// Edit xxx-cat to match desired category link id:
$('body').attr("id","xxx-cat");
if ($('body[id]')) {
var bid = $("body").attr("id");
// Keep the next command on one line
$('div.droplinebar li a[class='+bid+']').addClass('current');
}
})
</script>
How can I make the ID's (1,2,3,4), because I have 4 pages and want it like
<body id="1"> for the home page
<body id="2"> for the about
<body id="3"> for the clients
<body id="4"> for the contact
and by the way this is a tumblr custom page, can't use PHP here
As I understand your question, you can change the scripting, but not the page itself (because it is on Tumblr?)
Try something like:
$(document).ready(function(){
var bodyId = '1'; // Set to 1, 2, 3, 4 etc
$("body").attr('id', bodyId);
$('div.droplinebar li a.'+bodyId).addClass('current');
});
However as mentioned in the comments, you shouldn't just use an number for your ID, consider revising this if possible.
found an answer to My question
$(function() {
var pathname = window.location.pathname;
var getLast = pathname.match(/.*\/(.*)$/)[1];
var truePath = getLast.replace(".php","");
if(truePath === '') {
$('body').attr('id', 'home');
}
else {
$('body').attr('id', truePath);
}
});
results
home = <body id="home">
about = <body id="about">
clients = <body id="clients">
contacts = <body id="contacts">