Replace javascript href content with php link - javascript

I need to replace one link from javascript with php link.
javascript line:
'<a href="' + res.attachment.guid + '" target="_blank">
php :
echo '<a href="' . wp_get_attachment_url($value->ID) . '" target="_blank">
javascript context:
if (res.success) {
$('.no_file_upload').remove();
var template = '<li class="attachment-' + res.attachment.ID + '">' +
'<p>' + res.attachment.post_title + '<span>' +
'<i class="fa fa-cloud-download" aria-hidden="true"></i>' +
'<i class="fa fa-times" aria-hidden="true" data-post-id="' + res.attachment.ID + '" data-project-id="' + res.attachment.project_id + '" data-file-name="' + res.attachment.post_title + '"></i>' +
'</p></span>' +
'<span>' + res.attachment.post_date + '</span>' +
'</li>';
I tried this way but fail:
<?php echo '<a href="' . wp_get_attachment_url($value->ID) . '" target="_blank"> ?>
So my Wordpress site is uploading all the files to Amazon S3 using WP Offload S3 Lite plugin. I had to alter some of the template files to manage to show the proper Amazon S3 link on website, I had change href links with wp_get_attachment_url($value->ID). The only thing left is one javascript file with that content that is still loading wrong download link. I need to make it work.

I think better you use file name instead of attachment url. get_attached_file( $data->ID )
https://developer.wordpress.org/reference/functions/get_attached_file/
also you can use https://wordpress.org/plugins/amazon-s3-and-cloudfront/ for correct url
for 1.
when you have file name you can generate your own link with a custom function.
Please let me know if there is any issue.

javascript line
<a href="' + cloudfront_url + res.attachment.guid + '" target="_blank">
Complete Javascript
var cloudfront_url = 'https://your_unique_id.cloudfront.net/'
if (res.success) {
$('.no_file_upload').remove();
var template = '<li class="attachment-' + res.attachment.ID + '">' +
'<p>' + res.attachment.post_title + '<span>' +
'<i class="fa fa-cloud-download" aria-hidden="true"></i>' +
'<i class="fa fa-times" aria-hidden="true" data-post-id="' + res.attachment.ID + '" data-project-id="' + res.attachment.project_id + '" data-file-name="' + res.attachment.post_title + '"></i>' +
'</p></span>' +
'<span>' + res.attachment.post_date + '</span>' +
'</li>';
}

You're trying to mix Javascript & PHP code. That is possible but let me explain how it works. PHP code is executed on server side & Javascript is executed on client side.
So, if you write down any php code in the javacsript code, it'll be executed at the time the HTML page is sent by the server to the user. Once the page is loaded, you can't call any PHP function inside the javascript code.

The PHP code is executed in the server before executing the JavaScript client side, the only way in your case is by using AJAX call to get the download link from the server.
In the other hand, there is an option to write JavaScript inside PHP, but not the inverse.

Related

POST route in Leaflet map giving errors

Is there any way to use a form in leaflet mapping to open another page?
I'm using a post route for this and have even tried embedding it in an tag but to no avail.
At the moment the form data is in a for loop like so
map_data.forEach(element => {
console.log('program=' + element.program + ', lat=' + element.gps_lat + ', long=' + element.gps_lon);
data[i] = L.marker([element.gps_lon, element.gps_lat], {icon: redIcon}).addTo(map);
var url = '{{ route("opentraining", ":training_id") }}';
var alt_url = '{{ route("opentraining") }}';
url = url.replace(':id', element.id);
data[i].bindPopup(
'<strong>' + element.program + '</strong>'
+ '<br />'
+ '<b>Location:</b> ' + element.location + ', ' + element.district + ', ' + element.province
+ '<br />'
+ '<b>Description:</b> ' + element.description
+ '<br /><br />'
+ '<form onsubmit="' + alt_url + '" method="POST" class="formEditTraining">#csrf<input type="hidden" name="training_id" value='+ element.id + '>'
+ '<button type="submit" value="submit" class="btn btn-primary trigger-submit">View Record</button>'
+'</form>'
).openPopup();
i++;
});
Even when use the route directly within the form it makes no difference all I get is an error saying POST method isn't supported.. What could I be missing ?
You're using the wrong attribute for the URL in your <form> tag. onsubmit is for specifying a JS function to run before the form is submitted. To specify the URL you want to submit the form to, use action. Since you are not specifying action at the moment, it's posting it back to the same URL that the form is on, which evidently is not set up to receive POSTs.

SharePoint ToC script - changing link style to headers

I'm working on online SharePoint site, where I want to have Table of Contents on my pages. It went successful, but I'm not satisfied with links to headers, which are in this style: PageName#heading_[number], where I would like to have PageName#{headingName}.
Is it possible? Here is link to my script: https://pastebin.com/MVsJf0hr . I suppose that it must be written somewhere here:
$(this).attr("id", "heading_" + i);
$("#theTOC").append("<a href='#heading_" + i + "' title='" + theLevel + "'>" + theLevelString + " " + $(this).text() + "</a><br />");

How to get Html code after javascript has modified it?

I want to get the HTML code of a webpage after it has been modified (similar to one that we see in inspect element tab of a browser) and I want to do it programatically (if possible using python or any other programming language). Can someone suggest how I might be able to proceed with this? I know its possible since browsers are able to do it.
As the server has no access to client window after client-side changes, you have to use client side languages.
In jquery:
var fullCode= "<html>" + $("html").html() + "</html>";
if you want also to include the Doctype:
var node = document.doctype;
var fullCode = "<!DOCTYPE "
+ node.name
+ (node.publicId ? ' PUBLIC "' + node.publicId + '"' : '')
+ (!node.publicId && node.systemId ? ' SYSTEM' : '')
+ (node.systemId ? ' "' + node.systemId + '"' : '')
+ '>';
fullcode += "<html>" + $("html").html() + "</html>";
Thanks to this
Using JQuery you can achieve this by the following code
$(document).ready(function(){
var html = "<html>"+$('html').html()+"</html>";
});

How to add Youtube Video Image to Blog?

I want to add a clickable YouTube video's image to my blog. I used the following code:
if (vidid == ""){
var imgvid ="<a href='" + pURL + "#post-title" + "' title='" + pTITLE + "'>"
+ '<img class="no-thumbnail" src="img.youtube.com/vi/undefined/default.jpg"; />'
+ "</a>";
}else{
var imgvid ="<a href='" + pURL + "#post-title" + "' title='" + pTITLE + "'>"
+ '<span class="play-button"></span><img class="'+ vidid
+ '" src="img.youtube.com/vi/'+vidid
+ '/default.jpg"; width="196px" height="147px"/>' + "</a>";
};
div.innerHTML = imgvid + '<div class="truncated-title"><h2>'
+ post_URL+'</h2></div>';
}
But it's not working. How can I resolve this?
Did you try using the YouTube integration API? You can get some more info in the documentation here and here. Using it that way, Youtube will automatically generate and show the preview image, player controls etc.
Additionally, there might already be an extension for showing Youtube Videos on your blog - do you use Wordpress or a different standard Blogging platform?
Edit
Now that I know you are using Blogger - you should be able to add the youtube video to any post by default, please refer to this manual for details.

Replicating base_url in external JS file in CodeIgniter

I have a button in my external js file that, when clicked, I want to be sent to a controller that I have. When I have the on click function in JQuery with the url set to my localhost, it works fine, but how do I set it so that it would work similar to the way the base_url works in CodeIgniter, so that it would work in any environment? I've tried using window.location.origin, or window.location.host instead of the localhost, but neither work. Any ideas?
My external JS button:
var html = '<div class="alert alert-success" role="alert"><p class="instruction_text text-center">' + completedText + '</p></div><input id="next_task" class="btn btn-lg btn-default text-center" style="margin-top: 150px; font-weight: bold;" type="button" value="' + text[lang]['continue'] + '"data-url="http://localhost:8888/oda/sample/instructions/' + task_id + '/' + lang + '/' + type + '">';
$('#final_message').append(html);
$(document).on('click', '#next_task', function(e) {
e.preventDefault();
location.href = $(this).data('url');
});
Thanks!
You can leave that work to the browser. If the page is within the same domain you don't need to put it verbosely on your code, you can put something like that:
'"data-url="/oda/sample/instructions/' + task_id + '/' + lang + '/' + type + '"'
note that the / on the beginning says that it will always get to the same place, disregard the current url.
But, if you need for some reason to write the full url window.location.origin will not include the port part of your url, you would have to include window.location.port too to make it work with your environment. and it's not a necessary thing to do in production.
window.location.host should work if you put http:// and / on your string:
'"data-url="http://' + window.location.host + '/oda/sample/instructions/' + task_id + '/' + lang + '/' + type + '"'
You can define base_url value to the JS variable in view and include all external JS below that
Here, I am giving section of example head.php which is located at /your_root/application/views
<script>
var base_url = "<?php echo base_url(); ?>";
</script>

Categories

Resources