I created a dojo widget for displaying a form data. I want to enable inline editing in this widget. First I started experimenting by writing html as strings in JavaScript. I don't want to do this. dojo provides an interface dojo.cache() to load html files as templates. Used this method to load the template data for form view.
For form edit. An ajax call will be sent and I will recieve the field type data. Based on this I have to parse the html to an inline editor.
My question is, How to use dojo.cache() and acquire the html based on the input type. The template might contain data like
<input type="text" />
or
<select></select>
or
<textarea></textarea>
or
<div class="autocomplete"></div>
or something more ... Can I define all these templates in one file and get the file using dojo.cache() ? In this case I'm stuck at how to select the required field.
I'm not sure how complex the templates that you would be bringing in via dojo.cache are, but have you considered using dojo.create() as an alternative? This will allow to programmatically create the DOM elements as well.
In regards to your solution, I was confused at first at what you are trying to do but I think I get it now. Within the page that you are displaying the data, you want the user to be able to choose some data to edit and when they do that action, an appropriate editable container will show up in its place for them to change the data?
If this is the case, I definitely dojo.create() is a better alternative to this than the HTML templates pulled in from dojo.cache.
dojo.create could easily be used with variables that come back from your service XHR call so that the type of element that is created will be dependent on the response you get from the server.
var editEle = dojo.create(data.elementType); (assuming data is the name of the variable you have your response and elementType is a property on that containing the type of element that needs to be created.
You can also pass an object literal to the second argument of dojo.create to specify parameters on the node:
dojo.create('input', {type: 'text'});
Related
I have an interactive PDF form created in Acrobat that employs a multidimensional object to collect, store, and populate form fields used to view the data. The form serves as a password manager to view individual password records whereby I have recently completed the lookup record page view that works like a charm. The only issue I've run into thus far is my inability to delete a record selected in the lookup view in which event I initially thought I'd be able to use the JS array.splice() method to simply delete a line item in the object array that stores the data for the particular record I want to delete. Come to learn that the script used to create the object that stores the data still remains inside the form whereby literally nothing has changed. Upon further study, I am inclined to believe that the form is essentially serving as a window to view the information stored in the object and for whatever reason invoking a script using the JS slice() method has no effect whatsoever on the script that created the object to begin with. Hence, in order to make this work, it appears I need to be able to rewrite/replace the script minus the object property/s that hold the data for the record to be deleted. Sorry for the novel. Any comments or suggestions regarding this subject matter are most appreciated. Thank you ahead of time.
Created a script using the JS splice() method in a futile attempt to remove data from an object used to collect and store data inside an interactive PDF form.
From Adobe's Docs:
You can use the Document JavaScript dialog box to add, edit, or delete scripts in your current document.
To open the dialog box, choose Tools > JavaScript > Document JavaScript.
Here https://helpx.adobe.com/uk/acrobat/using/add-debug-javascript.html
I've never used Adobe Acrobat, but if you need to edit a script in a PDF, that's probably where to get at it.
If you post the script's code, someone might be able to help you. It's almost impossible to get an answer to any question without posting code.
I apologize regarding my initial post as I knew little to nothing at the time regarding how to create and use an object literal in which event I have since learned how to use an object literal along with its methods to add, delete, and edit key-value pairs of an object literal. I was then able to resolve all my issues in using an Acrobat PDF form as a front end along with a hidden text field using JSON to convert a JS data object for organizing and storing my form data as a string. The script to accomplish this task is as follows:
dsFld =getField("dataSrc");// call getField method used to obtain the
stored JS object as a JSON string
oVendors = JSON.parse(dsFld.value);//Parse the JSON string to manipulate
the JS data object
btnDel=getField("btn.del");
var oFld;// create var oFld for later use
var oPassData = oVendors[event.value];
if(oPassData){// script to populate PDF form fields
//walk members to fill fields
for(var nNm in oPassData){
// skip fields that don't exist on form
oFld = this.getField("inf." + nNm);
if(oFld)
oFld.value = oPassData[nNm];// script to populate associated form
fields
}
In looking back, I am sorry for any inconvenience posed by my initial post.
I am doing some development in moodle 3.7 for a new admin tool plugin. In this plugin I am generating a page from a custom made .mustache template. This template contains a number of values that are defined and managed within it, that I want to access within my .php file once a submit button is pressed.
Currently however I am unable to access these submitted values that are defined within the template. I can see their values in debugging under $form->_form->_submitValues but I cannot get to them due to _form being a protected variable of $form. I called $form->get_data(), but that only gave me access to the elements that I defined in php as non html elements (hidden for example), not in the template. I'm not sure if this is the right place to ask this question, but if anyone has any help they could give me on a path forward it would be much appreciated.
I am adding the template to the page using the function:
$mform->addElement(
'html',
$OUTPUT->render_from_template(PLUGIN_TOOL_NAME/members', $rendercontext)
);
Please let me know any other information you may need.
Any variables that you want to have access to must be defined in the mform using these functions:
$mform->addElement('hidden', 'VARIABLE_NAME');
$mform->setType('VARIABLE_NAME', PARAM_INT);
Any JavaScript that needs to update these values must be in a separate .js file, not in your template. If the JavaScript works in your mustache file, it will still do exactly the same thing if you put it in a different .js file, as long as that .js file is included on the page.
One thing to note: if you use the functions I defined above, the variable will not have an ID. instead it will have a name equal to whatever you put as VARIABLE_NAME. This means however that you cannot use document.getElementByID() to get the instance of your variable. instead you will have to use document.getElementsByName("VARIABLE_NAME")[0] to get access to your element.
If both of these things are done than you should see the value update and be sent to your mform on submit within the $data variable.
I'm programming a web app using Spring MVC where I need to create some elements that I cannot create directly through jsp. Specifically all of those that list values that I get from my database, since I cannot create a structure in jsp before knowing its size. Here's how I'm doing it right now:
#RequestMapping(method = RequestMethod.GET)
public ModelAndView getAllEjercicios (...)
...
Table table = new Table("table_ejercicios", "table_ejercicios", new ArrayList<TableHead>(Arrays.asList(tH1, tH2, tH3)), getEjercicioTableContent(ejercicioList));
...
model.put("table", table.getCode());
return new ModelAndView("ejercicio/ejercicio-list", MODEL_NAME, model);
This is my controller method, where Table is a custom class that I created that will return the html code of the table when calling getCode(), using the parameters it was given. The problem with this is that I'm starting to see my Controller is not decoupled enough, since it's passing the view the HTML code of the entire object instead of just the parameters I need in order to build it in my jsp file. Btw, this is not just an issue with this particular table, I have other dropdown lists and things as such in my code.
The problem is that if I use a javascript function which receives the same parameters as my table inside the jsp, I'll have to replicate a lot of code in other views that use similar tables, since I'll have to copy the entire javascript function in each jsp file.
My code works perfectly, it's not a problem of it not working, it's a problem of structure.
What should I do, should I keep my code as it is, or is there a solution I'm not thinking of?
Thanks
The html pages, contains lots of elements, such as tables, forms, dropdown,... . If you generate all UI elements in the backend, your server side code will full of client side coding! This is not a good practice as you already know.
I think the best practice is rendering html pages without any extra UI elements, just html code with data. You can even exclude data from page and fill html elements with data from ajax request. However, your controller will completely free from UI codes. With this approach, your concern is duplication of codes in the client side. This can be solved with generating javascript utilities. For example, you have same html table structure in multiple pages. For doing this, you can write a javascript function for generating table. This function can take some parameters and add dynamic table to every page you need. You can do similar works for other elements such as forms and dropdown.
I am attempting to convert a Drupal site which creates a dynamic JSON file from a custom content type that is used by javascript to create a map (which uses D3 code). Is this possible in WordPress?
I'm not sure I understand the question. I believe you have REST API available by default in WP. Can you specify the question?
EDIT:
You can see available endpoints by going to yousite.com/wp-json.
By adding custom post type it is automatically available in REST, name of the endpoint is by default same as name of the custom post type you are adding, you can change it by adding rest_base property in custom post type definition.
You can find more on this here https://developer.wordpress.org/rest-api/extending-the-rest-api/adding-rest-api-support-for-custom-content-types/
Can anyone explain the functionality of data-render="true" attribute works in javascript and how to use it in javascript?
I believe what that would be is a data attribute. I am not sure if this is the main use, but I know it makes sending data from html to javascript very easy. Data Attributes
I used it in a project when ids for a table were created at runtime, and depending on the row clicked on, grabbed the data attribute.
To go to your question, I believe that is what is happening with the data-render. It is just a "variable" to store a boolean in a sense.
In HTML5 specification, you are allowed to create attributes into your tags.
The specification recommends that you use some naming guidelines to create your own tags, thus as using something like "data-[some namespace to define your project]-[attribute_name]"
You can access those attributes in js, and load them with data when your server returns the page to the client. These type of attributes allow you to communicate data between server and client codes in a quite simple and clean way.