adding javascript to wordpress pages - javascript

I got thrown at a project that is using Wordpress for generating websites. Once done, the team takes a copy of the generated static html code and puts it on some webhosting platform as a standalone website.
I am now asked to add some function adding dynamic behavior to a page by calling a webservice and add some of its data to that page.
I tried adding javascript using the custom html widget of the Gutenberg editor but it does not work well. I could make it work for simple things but firing a request did not work and it is hard to debug.
Wondering, is a plugin the right way to go for or are there better ideas?
I assume it needs to be some some php code adding javascript contained in html I guess?

Related

find javascript changing HTML

First off, I'm not a developer, but a site owner running wordpress. my site has some Amazon affiliate URLS. What is happening is some rogue javascript is running and changing the referral ID's of the HTML code only from a google search specifically (If I load a page directly the HTML doesn't change). Basically I'm trying to figure out how to locate it, I figure that by looking at the html section I can trace what javascript is changing the HTML? With that information maybe I can help find it or pass that on to the hosting company to remove the file.
For example:
in the website shows : https://amazon.com/49684095/?tag=properamazontag
the javascript runs and changes to: https://amazon.com/49684095/?tag=douchebagscammercode
I hope it makes sense.
I have disabled javascript in the browser and confirm that the HTML code doesn't change, so I know it's a javascript issue.
For anyone looking at this with the same issue, what I did was follow this thread Find javascript that is changing DOM element. I went through all the JS changes looking for odd code not associated with a plugin file or theme.
once I found the code, I used a plugin called string locator and searched "everything under WP-content" for the first part of the bad code. From the plugin shows the location of the code (a JS file was added to the theme template) and I then used the same technique to search for the names JS file (in this case called theme.js) and found a php line in the functions.php file that had to be deleted along with the file.

Attach PDF to PDF as attachment (not as a page) via Javascript in HTML (not in Acrobat)

I would like to generate a PDF portfolio using JS from an HTML/CSS page on a local machine. I would use a PDF template file which includes a PDF portfolio Navigator in SWF form. I have successfully accomplished this using C# and a command line program, but can not identify the proper Javascipt components to do this browser-side or pseuo-server with Node.js. Basically, I am looking for something which will allow me to append a PDF to a new or existing PDF via configuration choices and an 'assemble' action using a JS or HTML button. iTextSharp provides the required PDF interaction functionality, but I can not figure out to run this inside an HTML to allow configuration via the HTML/CSS DOM (i.e. checkboxes, text field desciptors, etc...). Does a library with this type of functionality exist?
So you want to create a PDF using JavaScript?
On a quick google search, I found what appears to be a javascript library for creating and manipulating PDFs call jsPDF
If you want information on how to upload files with JavaScript alone, here is an article on how to do that. It also shows you how to use the file element.
For style, I recommend using a CSS Framework is you don't know much about CSS. I personally use Twitter Bootstrap for quickly prototyping things. It's quick and easy, and has good documentation. You can also use this to see how to make a form in HTML. I haven't got any good starter tutorials for HTML off the top of my list, sorry.
If you don't know much about JavaScript, when it comes to getting the options from the form, so that you can use them as configuration options, I'd suggest using the jQuery framework. It'll help you get up and running quickly enough
Note, all of this shouldn't replace basic training in JavaScript and HTML/CSS. Frameworks make things simpler, but if you don't know how to do something without a framework, you're going to have a hard time with a lot of the more complicated things. This goes for every language

Django - Load template with jQuery into variable

I'm working with a client that has a view that, after a user logs in, this view loads a template, that dynamically draws a canvas with jQuery, and generates an image copy of the canvas.
They want to protect the jQuery code, hiding the process in the python code.
I tried using PyExecJS, but it doesn't support jQuery, since there is no DOM.
I've also tried urllib2, mechanize and Selenium, but none worked.
Is there an alternative or have I missed something?
Update/Resolution: In case someone stumbles onto this question: I ended up using Selenium for Python to load the JS function, fed it the necessary data and extracted the image from it. It has a bit of an overhead, but since the main goal was to keep the JS code obfuscated, it worked.
If I understand correctly, you are trying to hide jquery code.
You can't hide jquery code from the user, because django processes python code before it serves up the template, there's no way to protect jquery code with python. Really the best thing you can do is to minimize and obfuscate the code, but that only makes it difficult for human reading.

Joomla menu item type iframe-wrapper doesn't load javascript

I am building a new template from the ground up for an existing site that uses the menu item type iframe-wrapper to display external content.
My template uses a bit of jQuery which works fine on all pages I have checked so far, except for those using the iframe-wrapper. On those pages joomla does not seem to include any of the js it usually does (jQuery, mootools, joomla stuff). Since I need jQuery my scripts break.
I could probably work around that by hardcoding jQuery into the template. Even ignoring all the problems that would most likely cause it solves only part of my problem. I use a module to include a bit of inline js to initialize a countdown so the end-date can be configured from the backend. That script is not included either, infact the whole module is missing in the frontend (or at least its container).
I am quite the novice with regards to joomla so this might be an obvious mistake on my end but how do I get joomla to include the js it usually does when not displaying an iframe-wrapper?
Got it to work finally:
JHtml::_('jquery.framework');
This line added to the template ensures that jQuery version shiped with Joomla is included and only loaded once.
I still don't know why jQuery was only missing from one specific pagetype rather than all of them or none, but it's working now.
If the iFrame is not part of the Joomla website and not part of the Joomla environment (which is the case 99.99% of the times), you will need to re-add the JS files there manually. There's no other way for doing this.

organise javascript code based on page

Hi I am relatively new to javascript development. At the moment I have a single javascript file with lots of little misc bits of code that get called in different part of the website. For example I have an event handler for some google maps stuff that is only called on 1 single page, I have some validation stuff for my contact page etc etc. My question, is how best to organise this code - given that each page only requires very little code but its different and specific per page?
Oh, I am using jquery if that makes a difference.
If there is nothing shared by each page from your js file and only a part of it is used by each page, the good way will be to separate each of those js code snippets for each page. This will simply improve page loading a little depending on the size of your javascript file.

Categories

Resources