We decided to go to another provider and rebuild the website. Accidently, we moved the old domain as well and we can't access the wordpress backend nor the frontend anymor. Now for the new page, I need a Custom javascript code I entered on a specific page with Elementor. Where can I find my old code now without accessing the homepage? I have FTP and Database access.
Where do you put the code? Depending on the answer you need to look at different locations.
Afaik elementor doesn't support custom js nativly. You can bypass that with a html widget or custom plugin. If you used elementors gui for that it's probably stored like all other elementor related content inside wp_post_meta of your database.
If you don't know the page where it was used I would suggest to export the database as sql and use an editor to search for a text string related to the code (for example the url of the ajax request).
If you know the page you can do the same but faster. Look for the id of the post with the code, search for it in wp_post_meta and go on like mentioned before.
If you havn't used elementors gui the script could lie inside a directory on the server probably inside your theme.
Related
Sorry for the basic question, but I've been reading lots on this and haven't been able to piece together a solution (as a rookie developer) so thought maybe asking would be helpful to me and others in the same boat.
I'm attempting to install GA (gtag) on a PHP site. The initialisation code works fine, Google Tag Assistant is happy, but the site functions similar to a single page application whereby the content is all loaded in dynamically via js into a DIV (little floating overlays).
I've read that creating a separate analyticstracking.php file is a best practice for the inclusion of your tracking code on pages (using include_once), but doing this on the dynamically loaded php files seems to throw up an error within tag manager – "Same web property ID is tracked twice."
My assumption was that this was happening because the page name didn't change, which would be logical, but if true, how and where does one change the page name?
Is it best to do this as an event when the nav item loading content is clicked, or is it best to somehow include tracking data in the PHP files for loaded content (and how)? If the latter, is is possible to pass the page name to the included analyticstracking.php call on load?
Or perhaps I doing this all wrong and should I be using Google Tag Manager?
Thanks in advance,
Joel
Best solution for your situation i guess will be something called "virtual pageview". Google Analytics documentation describes it here: https://developers.google.com/analytics/devguides/collection/gtagjs/single-page-applications
In shortcut:
Include Google Analytics (or GTag) code only once, for example in head.
Every additional content loading (which is key for you and want to treat as a new pageview) should send JS code with new "virtual" pageview to GA with datas seted by you (like new pageview title, new pageview url etc.).
Forget about sending events in this case as a "core". Of course you can also track events with nav clicks but first implement virtual pageviews.
Essentially, I want to create a personal website that functions like this one:
https://sublime.wbond.net/packages/Jade
Whereby it's contained within one HTML page and clicking on a nav item will only load the required information.
Looking at the javascript code I believe the developer is using Backbone.js and Handlebars.js. I think they used PHP for the backend.
There is a key functionality that I'm after that is within this site. Essentially, when you are at the aforementioned directory, and then you change to https://sublime.wbond.net/docs, there will be an AJAX request for only the HTML that's needed and then it is appended to the current page.
Having written a simple backbone app by following a tutorial, it seems it's done differently. Hosting the app using node, it will load all of the content. When you go to another directory, it still loads all the content and then backbone will append the right piece based on the URL. I can see this being useful for certain kinds of apps, but I don't want that functionality. I looked into it more and I thought about using the fetch() functionality in backbone, but I'm not too sure he's using that either.
It appears like he's doing something like Rendr by Airbnb. I can't really use that because there the documentation is not sufficient right now.
It looks like when you call a page it just gives you the HTML all ready without the need to compile it locally. Is there something I'm missing here in terms of utilizing backbone or is this just some tool he's made to handle this?
If you are not afraid spending hours in front of videos, those excellent screencasts could get you started : the guy explains how to build a Single-Page app using Backbone and Marionette, from scratch.
This web site is not using Backbone, and the solution he uses is a mixte of full html page load and JSon call, look at this links :
https://sublime.wbond.net/browse.json
https://sublime.wbond.net/search.json
https://sublime.wbond.net/docs.html
https://sublime.wbond.net/news.html
https://sublime.wbond.net/stats.json
The simplest way to have the same behavior as wbond.net will be to change the way you render the page on the backend. You need to check if request is XHR and render only content, without layout. On the frontend you need to bind click event to each links which will send AJAX request on binded URL and put whole response in the page content area (jQuery's $.get() method).
Is its possible to have a javascript file that is aware of two different HTML files? And how would I do this?
I would like to be able to have two pages. index.html and pictures.html. I have an index.js that changes the display properties of index.html (it puts data based on people into tables and makes it look nice). I would like this current index.js file also to be able to edit the pictures.html file and change information there. index.html would link to pictures.html to display pictures of a person (based on the persons name I have them saved smith1.jpg, smith2.jpg, reagan2.jpg, ect). Is there anyway that this javascript file could get DOM elements based on their id or class of the second file (pictures.html) even though it "lives in" index.html? When i say lives in it is called at the top of the index.html page.
thanks
A script can access elements on another page if it was loaded in some way of connection.
For example, if you make a popup using var popup = window.open(), the return value will contain a reference to the opened popup and this allows access to elements within the popup. E.g. popup.document.getElementById('something'). Pages loaded within frames, iframes and such have similar ways of access.
So yes, if your page loads the second page its script can work there as well. I suggest avoiding this beyond opening and closing popups from a script though; a script should stay inside the box of its page and if it needs to do larger operations on another page, that usually means that you need to change your code architecture a bit.
You'll need to explore server-side programming to accomplish your goal.
http://en.wikipedia.org/wiki/Server-side_scripting
...Or you could write a client-side application in which "pages" are separate views of one actual page or are generated from backing data structures. If you want persistance of what is created/edited, you'll still need server-side programming.
You can use the html5 (group of technologies) postmessage api as well.. This allows you to send messages to another page, and in that page you define an event handler that knows how to handle the message.
This also works across domains.
Here is a blog with an example I just randomly found via google:
http://robertnyman.com/2010/03/18/postmessage-in-html5-to-send-messages-between-windows-and-iframes/
Not possible on the client side if editing the actual HTML file is your goal. If getting pictures to show up depending on stuff a user does on another page is all you care about then there are lots of options.
You can pass small sets of data like stuff the user entered into tables via cookies for accessing the right sets of image files in a pre-established scheme. This would actually persist until a user cleared out cookies.
You could wrap both pages in same-domain iframe elements with the parent element containing just the JS. This would allow you to persist data between pages and react to iframe load events but like everything in client-side JS, it's all gone when you reload the page.
Newer browsers have working file access objects that aren't total security nightmares. These are new and non-standard enough that it would take some doing to make it work for multiple browsers. This could be used to save files containing info that the user would probably have to be prompted to upload when they return to the site.
If the data's not sensitive you could get creative and use another service to stash collections of data. Use a twitter API to tweet data to some publicly visible page of a twitter account (check the Terms of Service if you're doing anything more than an isolated class project here). Then do an Ajax get request on whatever URL it's publicly visible at and parse the HTML for your twitter data.
Other stuff I'd look into: dataURIs, html5 local storage.
Note: None of these are approaches I would seriously consider for a professional site where the data was expected to be persistent or in any way secure regardless of where a user accesses it from.
I want to create javascript widget similar to linkedin Member profile. https://developer.linkedin.com/plugins/member-profile-plugin?button-type-inline=true
On my site the user can manage some data.
I want to allow for user to copy some HTML code and insert in his site HTML to display the data.
I want HTML code looks like:
<script src="http://mysite.com/code.js?userid=123"></script>
And if user inserts this code in his site then javascript code is loaded and data are displayed (widget displayed)
How to do this? I know about crossdomain restrictions. But in case of linkedin this is not the problem. Their widget works fine.
Thanks.
UPDATE.
As i understand from comments, it is not the problem to display any data in page that includes my javascript file. I am going to do tests.
Either the data is embedded inside the script, or it is loaded via JSON-P
I'm developing a modal/popup system for my users to embed in their sites, along the lines of what KissInsights and Hello Bar (example here and here) do.
What is the best practice for architecting services like this? It looks like users embed a bit of JS but that code then inserts additional script tag.
I'm wondering how it communicates with the web service to get the user's content, etc.
TIA
You're right that usually it's simply a script that the customer embeds on their website. However, what comes after that is a bit more complicated matter.
1. Embed a script
The first step as said is to have a script on the target page.
Essentially this script is just a piece of JavaScript code. It's pretty similar to what you'd have on your own page.
This script should generate the content on the customer's page that you wish to display.
However, there are some things you need to take into account:
You can't use any libraries (or if you do, be very careful what you use): These may conflict with what is already on the page, and break the customer's site. You don't want to do that.
Never override anything, as overriding may break the customer's site: This includes event listeners, native object properties, whatever. For example, always use addEventListener or addEvent with events, because these allow you to have multiple listeners
You can't trust any styles: All styles of HTML elements you create must be inlined, because the customer's website may have its own CSS styling for them.
You can't add any CSS rules of your own: These may again break the customer's site.
These rules apply to any script or content you run directly on the customer site. If you create an iframe and display your content there, you can ignore these rules in any content that is inside the frame.
2. Process script on your server
Your embeddable script should usually be generated by a script on your server. This allows you to include logic such as choosing what to display based on parameters, or data from your application's database.
This can be written in any language you like.
Typically your script URL should include some kind of an identifier so that you know what to display. For example, you can use the ID to tell which customer's site it is or other things like that.
If your application requires users to log in, you can process this just like normal. The fact the server-side script is being called by the other website makes no difference.
Communication between the embedded script and your server or frames
There are a few tricks to this as well.
As you may know, XMLHttpRequest does not work across different domains, so you can't use that.
The simplest way to send data over from the other site would be to use an iframe and have the user submit a form inside the iframe (or run an XMLHttpRequest inside the frame, since the iframe's content resides on your own server so there is no cross domain communication)
If your embedded script displays content in an iframe dialog, you may need to be able to tell the script embedded on the customer site when to close the iframe. This can be achieved for example by using window.postMessage
For postMessage, see http://ejohn.org/blog/cross-window-messaging/
For cross-domain communication, see http://softwareas.com/cross-domain-communication-with-iframes
You could take a look here - it's an example of an API created using my JsApiToolkit, a framework for allowing service providers to easily create and distribute Facebook Connect-like tools to third-party sites.
The library is built on top of easyXDM for Cross Domain Messaging, and facilitates interaction via modal dialogs or via popups.
The code and the readme should be sufficient to explain how things fit together (it's really not too complicated once you abstract away things like the XDM).
About the embedding itself; you can do this directly, but most services use a 'bootstrapping' script that can easily be updated to point to the real files - this small file could be served with a cache pragma that would ensure that it was not cached for too long, while the injected files could be served as long living files.
This way you only incur the overhead of re-downloading the bootstrapper instead of the entire set of scripts.
Best practice is to put as little code as possible into your code snippet, so you don't ever have to ask the users to update their code. For instance:
<script type="text/javascript" src="http://your.site.com/somecode.js"></script>
Works fine if the author will embed it inside their page. Otherwise, if you need a bookmarklet, you can use this code to load your script on any page:
javascript:(function(){
var e=document.createElement('script');
e.setAttribute('language','javascript');
e.setAttribute('src','http://your.site.com/somecode.js');
document.head.appendChild(e);
})();
Now all your code will live at the above referenced URI, and whenever their page is loaded, a fresh copy of your code will be downloaded and executed. (not taking caching settings into account)
From that script, just make sure that you don't clobber namespaces, and check if a library exists before loading another. Use the safe jQuery object instead of $ if you are using that. And if you want to load more external content (like jQuery, UI stuff, etc.) use the onload handler to detect when they are fully loaded. For example:
function jsLoad(loc, callback){
var e=document.createElement('script');
e.setAttribute('language','javascript');
e.setAttribute('src',loc);
if (callback) e.onload = callback;
document.head.appendChild(e);
}
Then you can simply call this function to load any js file, and execute a callback function.
jsLoad('http://link.to/some.js', function(){
// do some stuff
});
Now, a tricky way to communicate with your domain to retrieve data is to use javascript as the transport. For instance:
jsLoad('http://link.to/someother.js?data=xy&callback=getSome', function(){
var yourData = getSome();
});
Your server will have to dynamically process that route, and return some javascript that has a "getSome" function that does what you want it to. For instance:
function getSome(){
return {'some':'data','more':'data'};
}
That will pretty effectively allow you to communicate with your server and process data from anywhere your server can get it.
You can serve a dynamically generated (use for example PHP or Ruby on Rails) to generate this file on each request) JS file from your server that is imported from the customers web site like this:
<script type="text/javascript" src="//www.yourserver.com/dynamic.js"></script>
Then you need to provide a way for your customer to decide what they want the modal/popup to contain (e.g. text, graphics, links etc.). Either you create a simple CMS or you do it manually for each customer.
Your server can see where each request for the JS file is coming from and provide different JS code based on that. The JS code can for example insert HTML code into your customers web site that creates a bar at the top with some text and a link.
If you want to access your customers visitors info you probably need to either read it from the HTML code, make your customers provide the information you want in a specific way or figure out a different way to access it from each customers web server.