Sorry if the title is a bit tricky to understand. Allow me to elaborate.
On my Wordpress website, I recently started using the extension Custom Field Suite, in order to be able to create custom fields. It allows me to retrieve those afterwards in html, so that if I ever need to change a text I can do it directly on Wordpress instead of having to pull up the html files and re-upload them every time.
Today I was doing some Javascript and I needed to retrieve a text that comes from one of those custom fields. Basically retrieve something like this :
<h1 class="title"><?= CFS()->get('title'); ?></h1>
So, what I thought of doing was using a QuerySelector and retrieve the class .title into a variable, like so :
let sentence = document.querySelector(".title");
The only problem is that it returns undefined, and I think I know why. When I load the page up and then go into the console and type exactly that, it works, which leads me to believe my Javascript retrieves the title faster than it has time to be returned by the CFS()->get.
My problem now is that I don't know how I could make it so that my title loads in time for the Javascript to proceed it, so I was wondering if anyone out there had an idea.
Thanks in advance
You can use the window.onload function of Javascript:
window.onload = function() {
alert('Page is loaded');
};
Or you can use an event listener:
window.addEventListener("load", function() {
alert('Page is loaded');
});
Be sure to put your js inside the functions. Be aware that this is one of many possibilities, so you can surely research for more options.
Related
This is a silly question but I can't seem to find an example that works. Basically I want to add a section on my website for the customer to check their USPS Tracking Number Status; USPS only provides an XML API while I need HTML / JS for this to work.
I need to create a text box that takes a 22 character (or less) alphanumeric variable so that when you click a "Submit" button, it will put the variable into this link.
Sadly, I need the entire script code from the and tags. I have tried every example I found and none of them worked in the sandbox, likely because I am missing some basic tags. I have come to the conclusion that I have no clue what I'm doing so please do not get frustrated by the simplicity of my question.
https://tools.usps.com/go/TrackConfirmAction_input?strOrigTrackNum={xxx} where xxx is must be the variable. Every example of code I have found will append to a link, but not put the variable inside the {}. I have been looking and tried a ton of different examples, but being far from a codemonkey I could really use some help. I apologize in advance because I know this is simple but I don't know what I am doing wrong except for trying to do something I have no business trying to do as I'm not a developer. Thanks in advance!
To provide the answer to my own question here us the correct code,
<script type="text/javascript">
function goToPage() {
var page = document.getElementById('USPS_Tracking_Number').value;
window.location = "https://tools.usps.com/go/TrackConfirmAction_input?>strOrigTrackNum=" + page;
}
</script>
I've spent an extremely long time trying to figure out why .load in jQuery works really weirdly for me. I have no idea what causes it not to work correctly sometimes.
I am building an UI where the user doesn't have to reload, but instead, whenever they click an <a> link, it calls a JS function that loads the url's contents into a "contentLoad" div.
I'm learning coding myself and jQuery & JS is pretty confusing to me, so I try to keep it as simple as possible.
Situation: I am using a simple JS function that takes an URL (from local FTP server), checks whether the URL has any parameters (example.php?abc=...), inserts "?included=1" behind the URL (to prevent it to be opened unless called by this function) and puts the file's contents into an empty DIV using .load (and also uses .load to display a loading page).
Problem is, it works perfectly, but every two minutes or so, it gets stuck on my loading screen and I have to either run the function again or reload the whole thing. I have no idea what's wrong.
Function:
var loadPage = function(url) {
$("#contentLoad").load("loading.php");
if(url.indexOf("?")>=0){
$("#contentLoad").load(url + "&included=1");
}
else {
$("#contentLoad").load(url + "?included=1");
}
window.history.replaceState('Object', 'Title', url);
}
Then, when I want to have an <a> that opens the page "explore.php", for example, I use
<li>Explore</li>.
What can I be doing wrong?
Alright so, I don't really know how this worked but I suppose the two .loads sort of "blocked each other out", because now that I removed the .load of the loading page, it works... Wow, haha.
So my solution was just replacing the
$("#contentLoad").load("loading.php");
with
document.getElementById("contentLoad").innerHTML = 'loading...';
Thanks to you guys for the help, though! :)
I am writing a chrome plugin that makes use of a website (which I am also writing myself) to interact with the user.
A content script in the plugin changes certain field values in the website using jQueries .val() method.
The website needs to be able to detect such a change via its own javascript in order to update other stuff accordingly.
However, the value change does not fire a onchange event and since the website js and the content script are independent, the element.change() function in the websites jQuery does not react when the event is fired from code in the content script.
What is the best way to make the website js detect a change in the value of the field?
PS: In case you consider this a design problem (communication between extension and website is mixed with display functionality) I would also be interested in your suggestion.
This is how I finally solved it:
inputChanged = function(inputElement,callback){
oldInput = inputElement.val();
setInterval(function(){
if (oldInput!=inputElement.val()){
oldInput = inputElement.val();
callback();
}
},200);
}
It's not elegant, but it works.
I have been making a javascript program thing and now I am at the stage where I need to make it visual. I have an idea of what It should look like but Dont know the best way to go about it. I could just put images and change them when needed, but I am wondering do I have to refresh the page everytime I want to change something?
Here is what I want it to look like, whats the best way to go about this. Just javascript no jquery etc.
http://postimg.org/image/p4nnnmqap/
You may use SetInterval() to refresh, if you want to...
Your program is running in what plataform and what language?
Long time ago i made one HTML WYSIWYG editor in Delphi7, and using the TWebBrowser as a viewer, and with the save button, had a function to also refresh the TWebBrowser, worked fine.
But if your workspace runs directly to a HTML page you can just set an interval of 60000ms to refresh the viewr every 1 minute.t
The simplest way is to build the structure in HTML and let Javascript fill in the dynamic parts on the fly.
It could be as simple as having simple <span> placeholders.
<span id="count">0</span> <!-- initial value = 0 -->
And update it with
document.getElementById('count').innHTML = '987';
P.s. Always make sure the DOM element exists before the code executes.
I've been trying to figure out how to let a Greasemonkey user script open up a search engine page in the background and fetch search results. I've tried to look up examples to open up HTML pages, but afaik all examples of requests handle ajax calls instead of html calls.
Any hints would be grateful.
The standard Greasmonkey GM_xmlhttpRequest function (link to API) can handle any type of request, not just JSON. Under examples, check out the GET request code snippet.
Watch out though. Search engines like Google will not appreciate the screen scrapping (and will probably block you if you grab too many results too quickly).
Haven't done this in GreaseMonkey (don't know really in fact if you can do it);
though if you really want to do it by opening a new tab, and if you're not using any GM-specific stuff in your code (and don't want to run the code automatically, well, this can be an obstacle), you can take a look at Custom Buttons extension.
With it, you can create buttons that have access to Firefox internals and invoke stuff like gBrowser.addTab().
But working with CB is a bit more tricky than in GM.
These posts may help if you're interested:
JavaScript alert not working in Firefox 6
Mozilla: Tabbed browser / Manipulating content of a new tab
Code sample copied from Mozilla:
var newTabBrowser = gBrowser.getBrowserForTab(gBrowser.addTab("http://www.google.com/"));
newTabBrowser.addEventListener("load", function () {
newTabBrowser.contentDocument.body.innerHTML = "<div>hello world</div>";
}, true);
I've done something similar.
All you have to do is save the GM_xmlhttpRequest response in a DIV.
With this DIV you can do whatever you want (show, hide, display only some of the content, etc)
Just take a look at my script source code.
I'm positive it will help you.
I know you don't need, Mr. 14k rep, but i'll break it down for you anyway :)
function conectar() calls GM_xmlhttpRequest [GET] and stores only the part of the content that i want to use in #divtempora, which is a dummy div that the user never sees (hidden).
Then function resp_dxlegacy() walks through the dummy div, save the info i want in a variable and calls conectar() again passing this parameter and storing the content in another div, which is, finally, displayed to the user.