How to set href value inside $.each ajax - javascript

I am working with downloading file inside a thread. My problem is that I cannot assign the file name inside the href and download attribute so when I try to download it it display no file. I tried replacing the href with specific data and it works.
Please help me assign the name of the file I get inside href and download attrib.
Here is my javascript:
$.each(data, function(key, value)
{
var message = value.message;
var cnt = value.count;
var n = message.includes('.jpg') || message.includes('.png') ||
message.includes('.jpeg')|| message.includes('.pdf') || message.includes('.csv') ||
message.includes('.docx') || message.includes('.xlsx');
message = value.message;
$('#divv').append('<a href="uploads/{{"'+value.message+'"}}"
download="{{"'+value.message+'"}}" style="font-weight: bold;"
class="bsi">' +
'<span class="glyphicon glyphicon-download"></span>'+
" "+value.message+'</a>'+
'<i class="bsi_date">'+value.dateReplied+" "+ value.username+'</i>');
getUserFullName(cnt);
}); //each

hi you can use this function
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#?").attr("href", "https://whatyouwant/jquery/");
});
});
</script>
</head>
<body>
<p>whatyouwant.com</p>
<button>Change href Value</button>
<p>Mouse over the link (or click on it) to see that the value of the href attribute has changed.</p>
</body>
</html>
Thanks

Related

How to insert a javascript variable inside an <a href> html tag?

I want to insert a javascript variable inside an html link such that each time the value of the variable is changed, it changes immediately in the html link.
I have tried already many possiblities but unsuccesfull.My code is as follows:
<head>
<title>Hello World</title>
</head>
<body>
CATEGORIE NAME: <input id="first_name">
DEVICE NAME: <input id="last_name">
<button id="say">Send!</button>
<hr>
<div id="result"></div>
<script>
function say_hi() {
var fname = document.getElementById('first_name').value;
var lname = document.getElementById('last_name').value;
var html = 'CODE: <b>' + fname + lname;
document.getElementById('result').innerHTML = html;
}
document.getElementById('say').addEventListener('click', say_hi);
</script>
Click this link
</body>
</html>
Please what should i so so that the link takes directly each time the value of the variable "html" and adds in as part of the link
The DOM API is fairly simple. It follows almost exactly the same convention as the HTML. For example, the href attribute of the a tag is the href property of the a object.
What you need to do is make your a tag easier to find:
<a id="this_link" href="">Click this link</a>
Now in your script you can simply do:
var link = document.getElementById('this_link');
link.href = "http://barcodes4.me/barcode/c39/" + html + ".png"

Scrape html with js

I'm trying to get the html of www.soccerway.com. In particular this:
that have the label-wrapper class I also tried with: select.nav-select but I can't get any content. What I did is:
1) Created a php filed called grabber.php, this file have this code:
<?php echo file_get_contents($_GET['url']); ?>
2) Created a index.html file with this content:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>test</title>
</head>
<body>
<div id="response"></div>
</body>
<script>
$(function(){
var contentURI= 'http://soccerway.com';
$('#response').load('grabber.php?url='+ encodeURIComponent(contentURI) + ' #label-wrapper');
});
var LI = document.querySelectorAll(".list li");
var result = {};
for(var i=0; i<LI.length; i++){
var el = LI[i];
var elData = el.dataset.value;
if(elData) result[el.innerHTML] = elData; // Only if element has data-value attr
}
console.log( result );
</script>
</html>
in the div there is no content grabbed, I tested my js code for get all the link and working but I've inserted the html page manually.
I see a couple issues here.
var contentURI= 'http:/soccerway.com #label-wrapper';
You're missing the second slash in http://, and you're passing a URL with a space and an ID to file_get_contents. You'll want this instead:
var contentURI = 'http://soccerway.com/';
and then you'll need to parse out the item you're interested in from the resulting HTML.
The #label-wrapper needs to be in the jQuery load() call, not the file_get_contents, and the contentURI variable needs to be properly escaped with encodeURIComponent:
$('#response').load('grabber.php?url='+ encodeURIComponent(contentURI) + ' #label-wrapper');
Your code also contains a massive vulnerability that's potentially very dangerous, as it allows anyone to access grabber.php with a url value that's a file location on your server. This could compromise your database password or other sensitive data on the server.

Replace src of an image with jquery

I have a website and based on language en, sq or el, I want to change image source. So I have a folder named screenshots then there are three folders: en , sq and el.
For example the URL for a picture named 'slide-phone.png' is:
img/screenshots/en/slide-phone.png
img/screenshots/sq/slide-phone.png
img/screenshots/el/slide-phone.png
On the html text I have a prameter : {{ _('en') }} that can have one of those value: en , sq and el. In this case is en.
<html lang="{{ _('en') }}">
<head>
<script type="text/javascript">
img_url = 'img/screenshots/'+"{{ _('en') }}"+'/slide-phone.png';
console.log("img is:" , img_url);
$('#slide-phone-img').attr('src',img_url);
</script>
The HTML div is like this:
<img id="slide-phone-img" src="" >
The console gives the right link: img is: img/screenshots/en/slide-phone.png but the src attribute is empty!
Why is happening this, I don't get it, can someone help me?
As per my comment, you need to wrap the code in $(document).ready(); closure.
Working example:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.1.min.js"></script>
<script type="text/javascript">
// When document is loaded
$(document).ready(function()
{
img_url = 'https://www.google.co.uk/logos/doodles/2016/st-davids-day-2016-5676738174517248-hp.jpg';
$('#slide-phone-img').prop('src', img_url);
});
</script>
</head>
<body>
<img id="slide-phone-img" src="" >
</body>
</html>
Note: .prop() vs .attr() (why im using prop)
Just get html attribute "lang" value and change image src according to that value.
$(document).ready(function(e){
var language = $('html').attr('lang');
if(language == "en"){
var img_src = "img/screenshots/en/slide-phone.png";
$('#slide-phone-img').attr('src',img_src);
}
else if(language == "sq"){
var img_src = "img/screenshots/sq/slide-phone.png";
$('#slide-phone-img').attr('src',img_src);
}
else{
var img_src = "img/screenshots/el/slide-phone.png";
$('#slide-phone-img').attr('src',img_src);
}
});
You need to execute your script once the document is ready. For example by wrapping it in a $(document).ready handler:
$(document).ready(function()
{
img_url = 'https://www.google.co.uk/logos/doodles/2016/st-davids-day-2016-5676738174517248-hp.jpg';
$('#slide-phone-img').attr('src', img_url);
});

Javascript/JSON error: not well formed

I am testing putting a text editor on my page and storing it as part of a JSON object.
HTML
<!DOCTYPE html>
<html>
<head>
<script src="http://tinymce.cachefly.net/4.0/tinymce.min.js" type="text/javascript"> </script>
<script type="text/javascript">
tinymce.init({
selector: "textarea"
});
</script>
<link rel="stylesheet" href="/jquery.mobile-1.3.2.min.css"/>
<script src="/jquery-1.9.1.min.js"></script>
<script src="/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<form method="post" action="formSubmit.js">
<textarea name ="editor"></textarea>
<p><input type="submit" value="Submit"></p>
</form>
</body>
</html>
JS
$(document).ready(function () {
var text = $("editor").val();
var name = "project name";
var id = 5;
var item = new item(name, text, id);
var itemArray = localStorage.items;
if (itemArray == undefined) {
itemArray = [];
} else {
itemArray = JSON.parse(itemArray);
}
itemArray.push(item);
localStorage.items = JSON.stringify(itemArray);
});
I want to be able to store item in a JSON object. When I run this I receive a "not-well formed" error at line 1 of the Javascript. It's a very simple program I'm running and can't seem to pinpoint what is causing the error. Is the JSON done incorrectly or are scripts in my HTML header causing issues?
$("editor") is looking for an html tag called 'editor'. you probably want to attach an id attribute to your and do $('#editor')

How to document.write image hyperlink inside getjson?

Hi all i want to document.write a hyperlink image inside getjson i tried the following but it doesnt work. could you guys tell me what is wrong with my document write?
<script>
$.getJSON('http://anyorigin.com/get?url=http://www.somesite.com/handelit.ashx&callback=?', function(data){
var siteContents = data.contents;
//writes to textarea
document.myform.outputtext.value = siteContents ;
document.write("<a id="ok" href="http://www.mysite.com/master.m3u8?+siteContents+"><img src="./playicon.jpg"></a>");
});
</script>
Hi all i want to document.write a hyperlink image inside getjson
You can't (not reasonably*). document.write only works during the initial parsing of the page. If you use it after the page finishes loading, it completely replaces the page.
Instead, interact with the DOM. Several ways to do that, but the most obvious based on your code is to have the anchor initially-hidden and then show it after filling in the text area like this:
$("#ok").show();
Full Example: Live Copy | Live Source
(I've changed the playicon.jpg to your gravatar, since otherwise it shows as a broken image on JSBin)
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<form name="myform">
<textarea name="outputtext"></textarea>
</form>
<a id="ok" style="display: none" href="http://www.mysite.com/master.m3u8?+siteContents+"><img src="http://www.gravatar.com/avatar/f69cfb4677f123381231f97ea1138f8a?s=32&d=identicon&r=PG"></a>
<script>
(function($) {
$.getJSON('http://anyorigin.com/get?url=http://www.somesite.com/handelit.ashx&callback=?', function(data){
var siteContents = data.contents;
//writes to textarea
document.myform.outputtext.value = siteContents;
// shows the link
$("#ok").show();
});
})(jQuery);
</script>
</body>
</html>
* "not reasonably": IF your content were coming from the same origin as the document (it doesn't look like it is), you could do this with a synchronous ajax call. But that would be very bad design.
Please, use createElement instead of document.write
$.getJSON('http://anyorigin.com/get?url=http://www.somesite.com/handelit.ashx&callback=?', function(data){
var siteContents = data.contents;
//writes to textarea
document.myform.outputtext.value = siteContents ;
//Create A-Element
var link = document.createElement('a');
link.setAttribute('href', 'http://www.mysite.com/master.m3u8?' + encodeURIComponent(siteContents) );
link.id = 'ok';
//Append A-Element to your FORM-Element
var myForm = document.getElementsByTagName('form')[0];
myForm.appendChild(link);
//Create IMG-Element
var img = document.createElement('img');
img.setAttribute('src', './playicon.jpg');
//Append IMG-Element to A-Element (id='ok')
link.appendChild(img);
});

Categories