JavaScript: Custom Pop-Up Window - javascript

I'm trying to create a custom pop-up window using JavaScript which can hold a form, and then use the contents of this form on the original page.
What I have is a large table split into several sections which hold text. Each section has a title and a body (Which are both table cells which unique IDs). I then use JavaScript to pull content from a form and paste the information into this table (Using the getElementById...innerHTML method). The problem is that the page becomes way too big to fit the table and the form on... Any ideas???

If you are willing to use jQuery then you have some options:
For a dialog box / pop-up scenario, simple-modal dialog is quite nice. You can integrate it via div elements on your main page and this way you can avoid having to manage additional windows in javascript.
If you wish to add paging, filtering and search to your large table DataTables is top notch. It can be applied to a standard html table and is very versatile. It will allow you to hide columns as well, so I would think you could store your identity keys in those columns and use the dialog box easily.

JD-Daz -
I wouldn't use a pop-up. Nobody likes pop-ups, because they are not connected to the original window, and they are reliant on the windowing system of the host operating system. Also, this is useless in tabbed browsers. Instead, you should use a free-floating DIV element as the container of the table. You can allow the table to be scrolled inside the DIV element as appropriate.
--
Mark

Related

Bluebeam Scripting - Custom Columns, Markups, & Forms

BLUEBEAM AND ADOBE ARE BOTH PDF VIEWERS THAT HAVE A LOT OF SIMILARITIES
Hello, I am trying to figure out how to link a form answer to some markups (tools).
Custom Columns that are created In Bluebeam:
When I create a new tool I can manually fill out all of these custom columns under the "Custom" section within the settings of a tool:
Then I can save that tool and all of the data will be repeated for every copy of that tool. However, the circled columns in the first picture would be changing on every page. Which means I would have to make a new tool for every page. (FYI I would be making ~20 tools for this, so I would have to update 20 tools every single page ;_;) Therefore, I want to create a dropdown/textbox on each page with those columns. When a user fills out the dropdown/textbox, the markups are automatically updated with that info, which means the custom columns are also updated.
Does anyone have an idea of how to link these?
As of now I have been able to create a code that creates a popup if a user selects a certain drop down. This shows me that you can grab the data from a user. I just don't know how to connect that data to all the markups (tools). I know each markup has a special ID, but I'm curious if you can somehow link to the tools "subject" property to do this.
Bluebeam provided me with their JavaScript API if that is any help.
https://i.stack.imgur.com/yEdU1.jpg (I got this image from this post JavaScript Library with Bluebeam)
UPDATE
I found another document with potential accepted scripts for Bluebeam. Please note this one will require people to have Bluebeam Revu eXtreme
https://support.bluebeam.com/wp-content/uploads/2019/08/Bluebeam-Script-Reference-2018.pdf
This version actually has a markup section (which are the things I am more or less wanting to have the custom columns be updated for with the user input)
This document seems to be relevant only for the Bluebeam Script Editor. You can open it by looking in the folder for Bluebeam from your start window.
There are 2 issues I have with this though. I haven't figured out how to run the codes I have in the script inside of Bluebeam yet and I am curious if there is a way to not need the markupID's and/or a way to get them without having to download the markups
I've been lurking on stack for so long, I finally have something to contribute...
I work with custom columns and toolsets all the time. I think you're missing a basic understanding of what the markup list is. Or maybe I am. The markup list is the table of data at the bottom of Bluebeam, where you're trying to change column headings.
The markup list is basically a table of data, what you're trying to do will change the column headers per page, which would change it for all entries. From what I know about Bluebeam, these are static, just like any database or table in any application like Excel. If you need to have different column headings, you need to just stack them all and use what you need on each page or from tool to tool. Or create different profiles with different custom columns, but this gets messy having multiple profiles accessing a single document. Maybe java can help show and hide these per what's relevant on the page within the custom field. But... I think the java is limited to be used within PDF form fields and some basic PDF actions such as print, save, etc. I don't think the level of coding you're looking for exists within Bluebeam.
I use profiles to manage custom columns per process, not the actual tool. It's kind of unclear exactly why the custom columns can follow the tools without the actual profile though.
What I do to accomplish complex tasks is export the markup list and build something within Excel VBA to tabulate data and export reports with relevant information. I'm sure you could use basically any coding language to accomplish this after the table is exported from Bluebeam.

How to manipulate the content of js jqgrid 1.7 row view window

I have somewhat large text fields in my DB, which I would like to include in my jqGrid.
Instead of making the grid messy and huge, I would like to place some kind of a placeholder instead of this text field, let's say V or X, that would represent whether or not there is additional content available to view.
Then, after the user choices to view a certain row, a popup(standard jqGrid row view) in revealed before him, there he can read the entire textual content, and also view the information from the other columns beside it.
Now, my problems is as described below:
How can I dynamically refresh the content of this row from the DB upon request and place it in the right row in this popup except using direct manipulation the the HTML, which I suppose is somewhat dirty:
$('#v_recommendation_count').html('Oleg<br/>Is recommended<br/>Oleg<br/>Is recommended<br/>Oleg<br/>Is recommended');
Also how can I control the measures of this window?, not only the external ones, but also the row and col size, as it seems not fully responsive and part of the label row texts are overlay-ed into the content row.
Thanks in advance,
Oleg.
Probably you should just use max-height property in some places of jqGrid. Look at the answer, another one and this one for more examples.

Preserve content within iframe after drag and drop - TinyMCE

I am trying to work TinyMCE into a large professional project I am working on. In one spot we need to have multiple instances in table rows that are draggable. However, when you begin dragging one of the rows the content that is in the TinyMCE iFrame (whether it was loaded with the page or altered by the user) disappears. Once you drop the row the content is still gone but re-appears upon page refresh/reload. Is there a way to get the TinyMCE iFrame to preserve its content without needing to do a page reload? I have an example here:
http://cmzmedia.com/tinymce/examples/simple.html
I can't do it in something like jsfiddle because if you do it there and refresh the page it starts everything back from the beginning again.
Or perhaps there is a way to do it where only the dragged-and-dropped iframe is reloaded?
Since the editor is being re-rendered on a drag and drop, I think you should set the content manually yourself.
You should first grab the contents of the editor being dragged and then restore it after the drop.
To get access to a specific editor you can use TinyMCE.get('myiframe'), and then there should be a getContent and setContent function on that returning editor object to gain access to the editors content.

Javascript best practices - Hide element in DOM or Generate DOM element

I've a question about best practices in javascript.
I've a dropdown menu with some statuts. If the statut is : external, I want to display a form. I don't know the best way to do this. Do i need to hide a DIV from the DOM and display him when i need it or do i need to generate my form dynamically in jquery and make a call ajax to populate some data.
It really depends on your application. If you already have a lot of elements in the DOM, and the likelyhood of actually needing to show this form is low, you may want to add it later (using ajax) because in most cases you don't need it anyway. However, if your DOM load is light, and in most cases the form will be shown, you make want to have it ready and hidden so that is can be quickly shown.
There is also a middle ground where you can "lazy load" it (using javascript on page load), and keep it in a json object until it is ready to be used. This will keep your DOM responsive, and give the added benefit of a quicker load of the form.
it depends on the probability of user clicking on that element and number of elements already present in the DOM. I suggest to create form runtime whenever user performs action instead of hiding it. There are some browser plugins which shows all hidden elements in a page.
Unless your page is unusually large already or there are a lot of different forms like this that could be used from the same page, putting the HTML into the page and just starting out with it hidden gives you the advantage that all your markup is in one place (in the HTML file that represents your page) and can more easily be centrally maintained that way.
When you start putting markup into your javascript, you split up the maintenance of the markup between both the HTML of the page and the HTML that is embedded into your page.
If, on the other hand, you had a lot of these forms that were all slightly different that could all be used from the same page, then it gets messy to pre-specify all possible combinations of the form in the original HTML and you would probably be better off dynamically generating it via javascript or perhaps generating it from a template with slight modifications.

javascript mvc framework design practice for edit-in-place interface

I am programming a CMS that allows creating and editing elements (content blocks) on the site in a WYSIWYG manner. basically, when logged in, you see visually the same website, but hovering and clicking on elements brings up either editors (like Aloha) or additional controls.
For instance:
hovering a paragraph would display a
small menu on its side which allows
selecting between left, center and
right alignment
clicking on a paragraph would make it editable
hovering over an image would display a dot on the right side of the image, which can be dragged thus changing the width of the image (height would update proportionally)
hovering any of the blocks in the website would bring up a "+" button that allows to create another block before the hovered block.
etc.
My current strategy is to use a similar technique that i saw used on Nike Better World and have been using ever since: there's an instantiating javascript that invokes jquery plugin on each html element that has a data-controller attribute, the name of the plugin being specified by the data-controller attribute.
Slightly extending this concept i would use it to attach all kinds of controls to the content blocks.
But, being a noob, only recently i came across javascript mvc frameworks like backbone.js. I've been working with MVC on the server side (in Kohana), but never yet in javascript. It seems that i can use it, but it's unclear to me, what would be the strategy. The CMS i'm working on is a kind of a hybrid between a proper javascript application, and an old-school html website. I don't understand, how can i use, e.g., backbone.js's collection object for content blocks, if they are already loaded in the page html (that doesn't make sense to me to load them with javascript).
does anybody have any suggestions?
Quick answer:
ContentModel: It's the data item you want to edit. The actual content. e.g.: $(#mydiv).text();
DisplayView: The view that will display this data (This is where ContentModel is first instantiated and initialized with $('#mydiv).text()
EditView: The view of "editing" this data (a text area perhaps) - When created, initialized with the ContentModel (same model object)
EditTemplate: The corresponding html of "how" the edit box should look like (can populate and create using _.template(...) i.e, a textarea/box etc.,
Now DisplayView holds the current value of the text (in it's model) at initialization itself. If you have an 'edit' button/link on this view (a div block for example), clicking it creates a new EditView and just "hides" the current div (#mydiv) that is showing the text and shows the EditView loaded with the model data in it's place ($.append() is your best friend here).
You click cancel, just hide/remove EditView and show the underlying div back. If you update, on success (from server) just hide the EditView and show the data on DisplayView! DisplayView can subscribe to the "change" event of the model! So once the model changes, the view knows what to do!!
Hope this helps!

Categories