I am creating a custom sign in experience for a customer using okta Sign in Widget. As part of this 'widget' the function creates an HTML login form. One of the tags this generates I want to modify the contents of after it has been generated on page load by the Okta widget.
I've created a fiddle where I used the following code to modify the contents but it doesn't seem to be working.
$(document).ready(function(){
var headingClass = document.getElementsByClassName("okta-form-title");
headingClass.innerHTML = "<h2>Public Offers</h2>";
}) ;
Please could someone advise on how to get this working.
getElementsByClassName will give you an array of elements with that class name. So you need to iterate over it, or if you are sure there is only one element, use getElementsByClassName[0]
Example:
$(document).ready(function(){
var headingClass = document.getElementsByClassName("okta-form-title");
headingClass[0].innerHTML = "<h2>Public Offers</h2>";
}) ;
More information: https://developer.mozilla.org/en/docs/Web/API/Document/getElementsByClassName
Related
I am trying to reference a HTML tag that is generated by a django's django_jsonforms link JSON Schema link via javascript to dynamically update the form. For example 2 dropdowns in a form, if you make a selection in the 1st dropdown the 2nd dropdown should update. I've done this for HTML selection tags that I manually typed out but I am trying to get this to work for HTML generated by JSON Schemas. Here is what I've tried:
inspect HTML page and try to call the tag by name with
var project_selection = document.getElementsByName("form[project]")[0];
this didn't work, which I was a little surprised by since I see when I inspect the page that the select tag has name="form[project]"
then I thought maybe the JSON Schema renders the tag after the javascript runs so I tried adding defer into my <script defer> and that didn't work
I tried using JSON Schema $id #anchor and $ref but none of those worked to reference the tag by ID
when I try a dummy tag with name I get a NodeList back that I can access with project_section[0], however when I try to do the same thing for this select tag generated by django's json schema i get what it looks like an empty list but the tag is under it (however I cannot access it). See the figures below.
dummy test for h1 tag with name
actual django generated select tag with name (looks empty but it's not when I expand it, however, I cannot index [0] item on it)
I am sure someone has come across this before so I hope this is an easy answer.
At the end of the day, I know I need to use the following with the JSON Schema to do a similar to onchange as shown in link
var element = document.getElementById('editor_holder');
var editor = new JSONEditor(element, options);
editor.on('change',function() {
// Do something
});
thanks for taking a look in advance!
references:
json schema
json schema editor github
json schema python
json schema python for django
Not entirely sure on this one, but you are using
getElementsByClassName, which is relevant to the class name of the element. Not the name. So for example:
<div class="cname"></div>
That is a class name, form elements have a name attribute that you can query via
var project_selection = document.getElementsByName("form[project]");
Finally figured out what was causing the issue. The DOM was not finished rendering the JSON Schema Form before the script was executing to call
var project_selection = document.getElementsByName("form[project]");
therefore wrapping the above script in a jquery ready function fixed the issue.
<script>
$('document').ready(function(){
var project_selection = document.getElementsByName("form[project]");
console.log(project_selection);
console.log(project_selection[0]);
});
</script>
see more at: Javascript HTML collection showing as 0 length
I would need to add a javascript code within a specific page of my wordpress site.
I would like to find a solution via plugin, otherwise maybe I could modify the code I already use specifying the page, but I don't know how to do it
This is my code:
( function( $ ) {
$(document).ready( function() {
$('.title_subtitle_holder_inner > h1:nth-child(1) > span:nth-child(1)').text('EVENTI');
});
})( jQuery );
I would need that text to be edited on a specific page, in my case the page id would be 217
Thank you
Probably no harm in injecting that minimal code into all pages, just make it so that it selects elements only when on your specific target page.
WordPress creates a class page-id-XY on the body element automatically, so just prepend your selector accordingly, so that it will only select elements on that specific page:
$('body.page-id-217 .title_subtitle_holder_inner > h1:nth-child(1) > span:nth-child(1)')
You can try to use this:
https://wordpress.org/plugins/page-specific-scripts/
Or any other method for custom scripts on specific page. From what I recall I think WordPress has this functionality built in.
I have tried to create my first One Note Add In using the JavaScript API. I have tried the example in the MS documentaion (Build your first OneNote task pane add-in). This one works.
Now I want to try to change the formatting of an element in the document. For example I want to change the font colour of a text. However, I have not yet found a way to access the elements in a document.
Can I access elements in a document via a JS Add In to change their "style" property?
How can I do that?
Thanks
Micheal
Finally, I found a way to access the OneNote page content from the JS Add In. You can load the page content using
var page = context.application.getActivePage();
var pageContents = page.contents;
context.load(pageContents);
Now you have access to the page content in the qued commands.
return context.sync().then( function() {
var outline = pageContents.items[0].outline;
outline.appendHtml("<p>new paragraph</p>");
var p = outline.paragraphs;
context.load(p);
...
});
So consequently you can access element by element in document the hirarchy.
I have been given a JSON url which returns some data. I need to create a javascript / html5 / css app that will grub this data and return it in a list.
Up to there I'm ok with doing this.
My issue is that I then need to be able to provide a <script></script> which the user can paste in any other website to display the web app.
The script or iframe need to be able to take parameters so it can filter the returned data.
Can anyone guide me in the right direction on instructions on how to do this?
The simplest way is using global variables.
Edit: added a way to "embed" the generated content. I use jQuery in the example, but it can be easily done with any other DOM manipulation library or plain JS.
The final user add an HTML element with a specific id and a <script> tag containing the parameters. We use a div element in the example.
<div id="generated-list"></div>
<script>
// the user defines parameters
var configParameters = {param1: 'some value', param2: ['is', 'array']};
</script>
The final user should paste your code. I have no idea how is your code, so I made this up:
<script>
// The user pastes your script here
// which may be a function accepting the defined parameters
function createList(configParameters) {
// create the necessary elements and append them to the element
// with the right id
// We create an empty ul element in the example
var newList = $('<ul></ul>');
$('#generated-list').append(newList);
}
</script>
Google analytics uses a similar approach
We are currently working on a java web application, where one of the jsp pages will have dynamically generated rich text areas and we are using CKEditor for that purpose. I'm able to generate the text editors dynamically. There is button on the jsp page, on clicking it a java script method adds a new row, with textarea, to the table. Once the row is added, we are using the CKEDITOR.replace('editorName'); method to replace the textarea to CKEditor. Below is the code:
jsp:
<table id="StepsList" style="float: left" width="100%" ></table>
We are maintaining a variable rowNum to keep a track of number of textarea's created.
script:
var step = 'step'+rowNum;
$("#StepsList").append("<tr><td><div class='richTextareaWrapp bottmsp' style='margin-top:10px;'><textarea cols='40' id="+step+" name="+step+"></textarea></div></td></tr>");
CKEDITOR.replace(step);
To read the content of the generated CKEditors, we are iterating based on rowNum. Below is the code written in java script file:
script:
for(var j=1;j<=rowNum;j++){
obj = new Object();
step = '#step'+j;
$(step).ckeditor(function( textarea ){
obj.value=$(textarea).val();
});
jsonStepsArr.push(obj);
}
This throws an error saying "uncaught exception: The editor instance "step1" is already attached to the provided element."
I have gone through similar posts on stackoverflow and google for solution, most of them suggest to replace or destroy the instance. But it did not serve my purpose. Can anyone point out my mistake or if I have to add any code to make this work?
Thanks in advance.
Be consistent in your creation/accessing techniques.
Looks like if you're going to create an editor with normal CKEDITOR.replace call like:
CKEDITOR.replace( 'editor1' );
And then access it with a jQuery call like:
$( '#editor1' ).ckeditor( function( textarea ) {
// Do whatever...
} );
It won't play nice with each other.
Your solution:
So as a result either change your first call to:
$('#'+step).ckeditor();
Or in second call instead using jQuery, just access instance directly:
CKEDITOR.instances[ 'step'+j ].getData()