Problem getting Javascript variable to hidden input value - javascript

I'm trying to create a system where you can drag and resize divs (jquery ui) and then save the positions and sizes to a css file.
I already got the system working with one div, but now that I tried to update the system to support multiple divs, I ran into a problem.
The source: http://ezmundorf.110mb.com/problem.txt (It's ugly, but I'm pretty much just trying out how stuff works).
When I click the #update div the page goes blank and source for the page is only the form starting tag. The page is trying to do something since firefox is displaying the loading graphic.
If I remove the line the that writes the hidden input fields, I get to see the save button, yet still there's something wrong with the javascript since browser just keeps doing something.
I'm sorry for posting such a "fix this code for me" question here, but I don't know how to explain it without whole code and I couldn't find answer anywhere.

You can't use document.write after the page has finished loading without it overwriting the whole page, as you're seeing.
You should use .innerHTML on some container, for example:
$('myDiv').innerHTML = '<form>...</form>';
or use DOM methods:
var form = document.createElement('form');
var body = document.getElementsByTagName('body')[0];
body.appendChild('form');

You can't use document.write after the page has finished loading (e.g. in an event handler, including $(document).ready). Instead, you can use the jQuery method .html(val) to change the contents of an existing element, or insert new elements into the DOM with the other jQuery manipulation methods.

Related

Executing external JS using innerHTML and appendChild

I've been playing around with the Material Design Lite library that Google just launched a few days ago, but have some questions, specifically on how to initiate (or execute?) external JS when the HTML changes using innerHTML and appendChild.
See the first example here. As you can see, the HTML for the menu is already within the HTML file when it is first loaded so the menu works fine.
But in this example, the HTML of the document is modified using JS. However, the menu does not work anymore because the script is not executing, I think.
How can I resolve this issue? What's a better way to achieve this result? I'm a newbie when it comes to JavaScript.
You will need to attach the proper event listener from the library. With this change (adding componentHandler.upgradeAllRegistered(); after appending the item) it should work:
document.body.appendChild(menu);
componentHandler.upgradeAllRegistered();
When the menu button is inserted dynamically (when the user clicks), it doesn't get assigned the event listeners to show the menu. I'm guessing that the material design library parses the HTML when it (the library) gets loaded (since you're loading it at the bottom of your HTML document). Since it's already loaded by the time the user clicks, it doesn't check the new element that has been inserted and can't assign it the event listeners.
If this is the case, you'll need to find a way to get the library to recognize your new button.

Deleting completely a html element

I am aware of .remove() , I am using it and its working fine, I mean its removing the element which I want. But I think it doesn't removes it permanently. On right clicking in browser window selecting View page source I am still able to see those removed elements.
I want to remove them completely or say permanently.
Please help.
.remove() removes them completely. The reason you still seem then in the view page source is because the page source does not change based on javascript. The page source shows how the page originally looked when it was first loaded, not how it currently is.
If you look in the developers console, you will see that they are no longer there.
Likewise, if you dynamically add a new element with javascript/jquery, it will not show that element in the page source.
Page Source and DOM are two different different things, whenever you edit the elements or remove them it get removes from DOM and not from page source. That means The javascript manipulate the DOM not the source which come from the server.
DOM: The Document Object Model (DOM) is an application programming interface (API) for valid HTML and well-formed XML documents.
The view source always shows the content came from the server initially without any modification. Use DEVELOPER CONSOLE in browsers to see the live DOM manipulation.
Note: Press F12 to enable console on major browser
view source render the code within the page that you have written(static)
for dynamic changes/view inspect the elements tab in developer tools.
View page source shows the content of the original HTML file, as returned by the HTTP server. The DOM can be altered with javascript, but the source will not change.
You Cannot permenantly remove the dom elements using jquery or javascript. .remove() is totally different from your logic. just it removes temporary hide from the dom elements suppose you refresh the page it comes again it is jquery magic.

Cloning a node duplicates events

I have a DOM fragment on page that I need to display in an overlay.
Using YUI I replace the node and then placing a clone in the overlay with the following line of YUI code:
var overlayContent = content.replace(content.cloneNode(true));
The issue I am experiencing is that now the content seems to send multiple AJAX calls to the server. So when a user clicks a button to increment an item then multiple sets are added instead of singular items and seems to work in multiples of two.
Being new to YUI I am not sure how to prevent this from happening and would appreciate any steer as to prevent this.
It is not good idea to clone a node while setting the body content of a YUI overlay. You should pass plain markup (which you can get using getHTML() method) as the body content of the overlay.
We decided to re-engineer the existing implementation and not using cloning at all.
Instead we pulled the existing fragment from the DOM into the overlay and then on overlay close put it back from where it came.

jquery statement to focus on live generated input

Okay, so I need for an input element to be automatically focused when it shows up in the DOM. This is what I am currently trying to do:
modal.fadeIn('fast', function(){
$('input.cm_modal_input_elem').focus();
});
This isn't working. What is the official way to do this?
That is the official way of doing it, and if it's not working something else besides the posted code must be causing the problem. Like say you are inserting the element dynamically and expecting a function you called on page load to execute later on when the element is inserted or that there are other elements that receive focus later in your script etc.
Here's a fiddle to show it working !

Manipulate DOM before it is shown to the user?

I'm not too familiar with javascript, is there a way to manipulate the DOM before the page is displayed to the user?
I'm using GWT which makes you create the page elements via javascript. This is kind of convenient, but it appears that all the javascript code is executed after the page is first shown to the user. This has the effect of showing the page as a blank white screen, then all the UI elements popping onto screen. The effect is really apparent when switching between pages.
If I were using php or jsp, it looks like the page ui elements are already prerendered and the browser won't show a blank white screen before display.
So is there any hook in javascript where we can manipulate the DOM before the browser clears out the contents of the last page shown?
-------------------------------- Edit ----------------------------------------
#Cipi: I'm not sure if this will work, but I can try. I think it will be the same problem though? I still see it happening like this:
User is already on one of my pages.
User clicks a link.
Browser starts fetching contents of new url, but the contents are simply an empty html file with just a javascript link in it.
After page is done downloading, browser renders the html (this is just a white screen).
Now the javascript starts executing in response to the onLoad() event(?), building the UI.
A few ms later, the DOM is done being manipulated, and is finally presented to the user.
so I am thinking that your solution would take place on #5, but by then the browser has already rendered the contents of the initial page on step #4?
#Crozin: I'm looking into DOMContentLoaded now, seems specific to gecko based browsers but there are solutions for ie etc. Yeah I basically want to manipulate the dom before the browser renders anything for the new page to screen, hopefully that can do it.
Thanks
Yes there are two methods:
Use DOMContentLoaded event
In the following code:
....
<p id="abc">abc</p>
<script type="text/javascript"> CODE HERE </script>
<p id="def">def</p>
Element with id abc is avaiable, but the one with id def ain't.

Categories

Resources