Get meta title and description with Javascript - javascript

I'm trying to get the meta title and description from any website I add into the URL field. What am I missing here? If I put something in the URL field and click fetch it nothing appears. When I put say "https://www.espn.com/" for the URL within the JS function it's pulling the whole website into the preview.
What am I missing?
//DISPLAY META
$(document).ready(function() {
$('.seoTitle').on('keyup', function() {
$('.seoTitleNew').text($(this).val());
});
$('.seoMeta').on('keyup', function() {
$('.seoMetaNew').text($(this).val());
});
});
//END DISPLAY META
//GET URL META
function myMetaFunction() {
var url = document.getElementById("seoUrlFetch").innerHTML;
//if you try "https://www.espn.com/" below for url it pulls in the whole page
$.get(url, function(data) {
$(data).filter('meta[property="og:title"]').attr("content");
document.getElementById("seoTitleDisplay").innerHTML = data;
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div>
<span>URL </span><input type="text" id="seoUrlFetch" class="seoURL" placeholder="Enter single URL or paste multiple URLs to fetch data from..." autocapitalize="none"> <button id="fetchURLButton" onclick="myMetaFunction()">Fetch</button>
</div>
<div>
<span>Title </span><input class="seoTitle" type="text" placeholder="Your title..." autocapitalize="none">
</div>
<div>
<span>Meta </span><textarea class="seoMeta" type="text" placeholder="Your meta description..." autocapitalize="none"></textarea>
</div>
</div>
<div>
<div>
<p id="seoTitleDisplay" class="seoTitleNew"></p>
</div>
<div>
<span class="seoMetaNew"></span>
</div>
</div>

It looks like you're setting the innerHTML to the entire returned document.
Based on jquery's documentation, the filter function will not mutate the original argument you pass to it -- it constructs a new jquery object that is filtered (https://api.jquery.com/filter/).
Try the following
const filteredData = $(data).filter('meta[property="og:title"]').attr("content");
document.getElementById("seoTitleDisplay").innerHTML = filteredData;

Related

How to include user input in the html string of a some parent DOM element?

I want to store the content of a div container in windows history, by running the following line:
window.history.pushState($('#myDivId').html(), "title", 'some url');
I would later use this info when user presses the back button.
Problem:
User has a form to fill, with one input. User types his name (say John) and clicks on submit. The onSubmit function is triggered and here I get the html content of parent div and store it in history object. The problem is, user input (John) in this example, is not captured.
The following screenshot shows the output of my script below:
Code Snippet
function onSubmit() {
var str = $('#myDivId').html();
alert("this goes to windows history: " + str);
// window.history.pushState($('#myDivId').html(), "title", 'some url');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form onsubmit="onSubmit()">
<div id="myDivId">
First name: <input id="firstNameId" type="text" name="FirstName" value=""><br>
<input type="submit" value="submit">
</div>
</form>
How can include user input in the str before pushing it in the history?
Update:
This is a simplified example, in the real scenario I have several input fields in the container. So I am looking for a way to capture all the input values through the container.
The value attribute represents the default value of the field, not the current value.
There is no HTML attribute which reflects that.
If you want to store it, then you need to store it explicitly.
I'd approach this by using serializeArray() (and converting it to JSON to store in the history), and then looping over it to restore the data to the form.
Here I'm using a delegate event to set value property as value attribute
function onSubmit() {
var str = $('#myDivId').html();
alert("this goes to windows history: " + str);
// window.history.pushState($('#myDivId').html(), "title", 'some url');
}
$(document).on('input', '.attr-input', function() {
$(this).attr('value', this.value)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form onsubmit="onSubmit()">
<div id="myDivId">
First name: <input id="firstNameId" class="attr-input" type="text" name="FirstName" value=""><br>
<input type="submit" value="submit">
</div>
</form>
I am not clear what you are asking. I have provided a solution as per my understanding.
function onSubmit() {
$("#firstNameId").attr('value', $("#firstNameId").val())
var str = $('#myDivId').html();
alert("this goes to windows history: " + str);
// window.history.pushState($('#myDivId').html(), "title", 'some url');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form onsubmit="onSubmit()">
<div id="myDivId">
First name: <input id="firstNameId" type="text" name="FirstName" value=""><br>
<input type="submit" value="submit">
</div>
</form>

Scraping data from input value

there is website which has:
<html>
<body>
<form action="/action_page.php">
First name: <div class="col-md-8 col-sm-8 col-xs-6"><strong><input type="text" class="no-style" value="John"></strong></div>
Last name: <div class="col-md-8 col-sm-8 col-xs-6"><strong><input type="text" class="no-style" value="Miller"></strong></div>
Email: <div class="col-md-8 col-sm-8 col-xs-6"><strong><input type="text" class="no-style" value="j.miller#gmail.com"></strong></div>
<input type="submit" value="Send">
</form>
</body>
</html>
Is it possible to scrape data from input value (John, Miller, j.miller#gmail.com) and show it in my page (maybe putting that site into iframe and scrape from it?) or maybe using something like:
// Get HTML from page
$.get( 'http://example.com/', function( html ) {
// Loop through elements you want to scrape content from
$(html).find("ul").find("li").each( function(){
var text = $(this).text();
// Do something with content
} )
} );
I don't know. I am not good with javascript. And there is bonus: input values on every refresh are different. Can I extract somehow data from 100 refresh or something? Thank you for any help!
i will assume that you need to get the data from the input element and then use it somewhere else in your site
you could easily do so using the jquery .val() function
here is some sample code
<form id="my-form">
name: <input type="text" id='test-input'/>
<input type="submit" />
</form>
<script>
var input;
$('#my-form').on('submit', function() {
input = $('#test-input').val();
});
</script>
you could then use the variable anyway you want, whether it is to cache data or for improving user experience
Get the value and var _value = $('#elementId').val(); and use it anywhere on the page $('#elementID').val(_value); or $('selector').text(_value);

jQuery, get text from neighbouring input within a div

I have a component on my page which looks like this:
<div id="componentList">
<div class="componentPair">
<div class="left">
<input type="text" class="part" placeholder="PART NUMBER">
</div>
<div class="right">
<input type="text" class="serial" placeholder="SERIAL NUMBER">
</div>
</div>
</div>
A component list can have multiple component pairs nested within it. When performing a search a query cannot be made for a serial number if a part number is not present, therefore when performing a keyup event on the .serial field I need to get the text from the part number field. I would store this in a data model, but by referencing the current serial field I should be able to traverse to the part number field.
Here is what I have tried, when my page loads I bind a keyup event on the serial field, I pass this as the selector so I have reference to the (sender) current field in getData():
$(document).on("keyup", '.serial', function() { getData(this, "SERIAL") });
Then in getData I want to be able to traverse up my DOM structure to the current componentPair group and then traverse into the left div and get the value from Part Number input field.
Here is what I tried:
function getData(elem, type) {
var code = ""
var serial = ""
if(type === "SERIAL") {
console.log(elem.closest('input[class^="part"]'))
serial = elem.value
}
... Other erroneous code to perform the search
}
As you can see, here I use console.log(elem.closest('input[class^="part"]')) to find the closest component with the class of part, after reading jQuery documentation I believe this should work, but I get an undefined function error. I then tried to use the parent() selector and parentsUntil() selector but each of them threw an undefined function error.
If I console log, elem I get:
<input type="text" class="serial" placeholder="SERIAL NUMBER">
Which is what I would expect, so I don't see why I can't use elem.parent().parent() to traverse to componentPair and then dive into the tree structure to pull the information out.
I am using jQuery 1.11.3, any help would be greatly appreciated.
The issue is because .part is not a parent of .serial. You need to use closest() to find a common parent, then find() to get the element you require. Try this:
var serial = $(elem).closest('.componentPair').find('.part').val();
The reason you get undefined function error is that elem is not a jQuery object, it's a HTMLElement, so wrap it in $().
Then .closest() won't work the way you think, it will only search through itself and its parents.
Try this:
function getData(elem, type) {
var code = ""
var serial = ""
if(type === "SERIAL") {
console.log($(elem).parent().siblings().find('input[class^="part"]'));
serial = elem.value
}
}
$(document).on("keyup", '.serial', function() {getData(this, "SERIAL") });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="componentList">
<div class="componentPair">
<div class="left">
<input type="text" class="part" placeholder="PART NUMBER">
</div>
<div class="right">
<input type="text" class="serial" placeholder="SERIAL NUMBER">
</div>
</div>
</div>
You have issue with elem.closest('input[class^="part"]'), this should be $(elem).closest('input[class^="part"]') . Because elem is the input's object itself. so you can not directly call closest()
Here is the working code :
$(document).on("keyup", '.serial', function() { getData(this, "SERIAL") });
function getData(elem, type) {
var code = ""
var serial = ""
if(type === "SERIAL") {
console.log($(elem).parent().parent().find('.part'));
serial = $(elem).parent().parent().find('.part').val();
alert(serial);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="componentList">
<div class="componentPair">
<div class="left">
<input type="text" class="part" placeholder="PART NUMBER">
</div>
<div class="right">
<input type="text" class="serial" placeholder="SERIAL NUMBER">
</div>
</div>
</div>

Troubles transferring data from text box to Firebase and displaying that data

I have created two pages, one with a text box to input data that should be stored in Firebase and another that should display that stored data, but i am having issues with some of the data not being stored, and none of the data being displayed on the second page. The HTML for the text box is as follows:
<form>
<div class="post-title">
<input type="text" placeholder="Post Title">
</div>
<div class="post-content">
<textarea type="text" placeholder="Post Content"></textarea>
</div>
<button type="submit" class="submit">Submit</button>
</form>
The HTML for the page that should display the data is:
<div class="result">
<h4 class="postTitle">Paragraph 1</h4>
<p class="postContent">Welcome to my test blog. This is a paragraph.</p>
<div class="postDate">
<p>Date of post: </p>
<p class="postDate2">date</p>
</div>
</div>
The javascript that should transfer data from the text box to my Firebase :
var url = "https://blog-posts.firebaseio.com/";
var firebaseRef = new Firebase(url);
function funct1(event)
{
var title = $("#post-title").text();
var post = $("#post-content").text();
var date = Date();
firebaseRef.push({Title: title, Content: post, Date: date});
event.preventDefault();
}
var submit = document.getElementsByTagName('button')[0];
submit.onclick = funct1;
And the javascript that should retrieve data from my Firebase and display it (Note, both javascript extracts are from the same .js file, i seperated them for readability):
firebaseRef.on('child_added', function(snapshot) {
var message = snapshot.val();
});
$("postTitle").replaceWith(title);
$("postContent").replaceWith(post);
$("postDate2").replaceWith(date);
The Date/Time seems to copy to my Firebase, but if i enter something in either text box and click submit, the data is not stored in my Firebase. Also nothing including the Date/Time is being changed on the page that should display the data.
I think your issue may be fairly straight forward here.
Update your form HTML to this -
<form>
<div class="post-title">
<input id="post-title" type="text" placeholder="Post Title">
</div>
<div class="post-content">
<textarea id="post-content" type="text" placeholder="Post Content"></textarea>
</div>
<button type="submit" class="submit">Submit</button>
</form>
Where you have the following -
var title = $("#post-title").text();
var post = $("#post-content").text();
change to
var title = $("#post-title").val();
var post = $("#post-content").val();
It looks as though you are new to jquery as well, so you may want to also read this to help you understand how to get values, and work with selectors, etc.
Hope this helps!

Delegated event handler for a set of dynamic elements

My JS is as follows:
$(document).ready(function(){
$('#data1').change(function(){
title = $('#title1').val();
url = $('#url1').val();
$.post('library/edit.php',{title:title, url:url},function(res){
alert ("updated !");
});
});
});
and my HMTL-markup:
<div id="data1">
<input name="title1" type="text" id="title1" />
<input name="url1" type="text" id="url1" />
</div>
I wrote that code to call to a PHP file on change of textbox.
that code works as expected.
But now I've added more textboxes as follows:
<div id="div1"><input name="title1" type="text" id="title1" />
<input name="url1" type="text" id="url1" /></div>
<div id="div2"><input name="title2" type="text" id="title2" />
<input name="url2" type="text" id="url2" /></div>
<div id="div3"><input name="title3" type="text" id="title3" />
<input name="url3" type="text" id="url3" /></div>
Now I want the same functionality so that any of these textboxes works like title1 in my earlier code. So if input#title-3 is changed I want the change to be uploaded via POST to my PHP-script.
Important: The number of boxes are dynamic.
$(document).ready(function(){
$('#data1').on('change','[id^=title],[id^=url]',function(){
var index = $(this).attr('id').replace('title',"").replace('url',"");
var title = $("#title" + index).val();
var url = $("#url" + index).val();
var hid = $("#hid" + index).val();
// you can put in here in sequence all the fields you have
$.post('library/edit.php',{title:title, url:url, hid : hid},function(res){
alert ("updated !");
});
});
});
so by this answer if any text box whoes id starts with title changes.
the function passed in will be invoked.
indezx variable will store the index of the group of the elements that are changing. and then is being callculated by removing title from title1 or title2
I think the answer you have it right here:
I wrote that code to call to php file on change of textbox.
That script (jQuery I guess) it must be associatte with the $('#xxx1').onchange() right? (or similar)
If you modify the function, add a class to the input field (also in the php) and each time you call the function, start listening again.. I think you can call any function you may want.
Example (guessing your code)
HTML
<div id="data1" class="dynamicDiv">
<input name="title1" type="text" id="title1" />
<input name="url1" type="text" id="url1" />
</div>
jQuery
// enable the function on document ready
$(document).ready(function(){
startListening('.dynamicDiv');
});
// each time an ajax call is completed,
// run the function again to map new objects
$(document).ajaxComplete(function(){
startListening('.dynamicDiv');
});
// and finally the function
function startListening(obj){
$(obj).onchange(function(){
// ajax call
// function call
// or whatever...
});
}
PHP
// some code....
// some code....
// remember here to add "dynamicDiv" as a class in the object
return object;
Since your elements are dynamically generated you need to use event delegation, then you can use [id^="value"] to select the appropriate elements based on the first part of their id attribute
$(document).ready(function(){
$(document).on('change','[id^="data"]',function(){
var title = $(this).find('[id^="title"]').val();
var url = $(this).find('[id^="url"]').val();
var hidden = $(this).find('[id^="hid"]').val();
$.post('library/edit.php',{title:title, url:url, hid:hidden},function(res){
alert ("updated !");
});
});
});
Note: I suggest you bind to the closest parent of your data divs that is present at page load instead of binding to the document

Categories