jQuery .html('') on div moves entire page - javascript

I'm replacing the html in a div tag on my page on the keyup event of a textbox when the user enters a search. When the html is set via jQuery's .html() method on the div tag the entire page shifts to the left and then back to the right. For some reason this is only happening when I deploy the website to an IIS site when I run locally in Visual Studio the page no longer shifts to the left and back to the right. When I replace the div tags content I am first clearing it by calling .html('') and then am setting it to the search results that is a ul tag. This issue is also only happening with Chrome it works fine on Edge.

Posting code helps, so we do not have to make an assumption on what you are doing.
If you are in fact doing something like:
$("#id").html("");
$("#id").html("html-here");
Then that makes sense, the first .html() call sets the div to be empty, causing the shift you mentioned, then you fill up the div again on the next call to .html().
Using a single call instead will not cause the page to be re-rendered twice, but it will still overwrite the contents like you want (you may have been thinking of $.append(), where you do have to clear first:
$("#id").html("html-here");

Related

Hash refresh in Javascript

I'm almost done with my previous issue, but now I'm dealing with something more subtle and annoying.
I've got a page with some links like these ones:
First content
Second content
In the page page.html there is some javascript, something like this:
document.write (window.location.href);
So, I click on the first link, and I see (in a different frame) the page "page.html", correctly starting at anchor #1. At the end the javascript writes "page.html#1", and this is correct.
Then I click on the second link, and I see the page "page.html" changing its starting point, now correctly set at anchor #2. But at the end of the page I still see "page.html#1", not "page.html#2" as I expected. I think this happens because the page is exactly the same as before, only the starting point changed, so the "location.href" was not changed, despite a difference in the hash.
Is there a way to solve the problem, and get the original location.href, the one with the correct hash?
use onclick event attribute:
First content
Second content

Reliably jumping to named anchor on dynamically generated page?

I have a web page which is dynamically built by the client. It generates dozens of list items each with its own named anchor. The side of the page has a fixed table of contents (TOC) with hyperlinks that point to the named anchors. This allows the user to click a TOC entry a jump to the item.
The trouble I am encountering is that on the initial page load the page is dynamically generated and so it cannot scroll to the item in the initial hash of the URL using the default behavior of a browser. Additionally, when the user switches to a different book the page is completely regenerated with new content and a new starting hash. Same problem: since the hash preexists the content, it doesn't situate itself with the item already in view.
I nearly solved this with JavaScript by awaiting the rendering and then jumping to the hash using scrollIntoView method on the appropriate element.
The next problem is that the stylesheet is not fully applied by the time scrollIntoView is called and so the final position of the item is unknown. I see the unstyled item scroll into view, but once styling is applied the positioning is lost. I put a 1 second setTimeout in place to delay the scrollIntoView call. This works but feels fragile.
Are there reliable techniques for jumping to a named anchor when the content comes after the hash is in place? If I knew when the CSS was done styling content that might help. Alternately, it might be useful to trigger an event once the height of the page stabilizes (thus signaling the finalization of CSS styling).
I had a similar problem, although in my case only the table of contents and named anchors were autogenerated in the onload handler - not the rest of the page content. I solved the initial hash problem by adding the following code to my onload handler after generating the anchors:
if (location.hash)
{
var requested_hash = location.hash.slice(1);
location.hash = '';
location.hash = requested_hash;
}
I had to set the hash to '' before setting it back to the requested name to make the browser respond. This seemed to work in all the browsers I tried (Opera, Chrome, Edge, IE, FF).
You can use jQuery if you will always know the name of the element you want to set focus to. You can run this after your page has loaded:
$( "#targetElementGoesHere" ).focus();
Edit: To scroll to that, check out https://github.com/flesler/jquery.scrollTo
I think the answer you require was answered by this guy...
How to wait until a web page is loaded with javascript?
So, something like this...
document.onload = function(){
scrollIntoView...
}

How to make $.get() data available to js?

I am using $.get() to load new content into a div. The content includes a list, each row having a title and a hidden description.
I have a separate jquery call that is meant to toggle the hidden div for each row when clicking on the title, which works fine when the data already exists (default content loaded with the page), but when it's dynamically replaced with a $.get() call, the divs then seem to become invisible to the command..
Any ideas? Do I need to somehow get javascript to refresh it's version of the DOM?
TY
Try this instead. This will bind elements that are inserted after the page loads:
$(".show_link").live('click', function (e) {});
The way you are binding the command it only happens when the page loads, so it will only bind those elements that match the selector at the time the page loads. Since you are inserting the markup after the page loads, jquery does not know those elements exist and therefore not wired to your function. Like I said above, try using .live() instead.
The DOM should update automatically. Are you sure the content you're loading has the appropriate Ids?
Try manually browsing to the URL used in the AJAX call and compare what you get with what's originally in the page. It's also possible you're retrieving spurious tags (html, body, etc) which may interfere with your JQuery selector

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.

Problem getting Javascript variable to hidden input value

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.

Categories

Resources