so when it comes to Javascript, I have no idea what I am doing.
I have a main page, with two iFrames. The main "content" iFrame holds the main content, in this case, the results from a MySQL database SELECT. The bottom iFrame is used to add rows to the same table.
When the 'add row' form is submitted from the bottom iFrame, I want the 'content' iFrame to load the list of results, and scroll to the newly added result.
I use
Currently, the only way to make this work that I have found is echo-ing the following code once upon successful row entry:
parent.document.getElementById('content').contentWindow.location.reload();
parent.document.getElementById('content').src = '../pages/results.php#".$id."';
The $id variable is set with $mysqli->insert_id;
The above code works, but it's obviously bad coding, on slower connections, for example, I can imagine the browser will fail to change the src as the reload action is still performing.
So, what can I add to my code, or what can I change my code to, to make the javascript either:
Reload the 'content' iFrame to show the new row and then navigate to the anchor to scroll the user to the newly created row. or
Do all of that in one simple action (I've found just using the bottom line of the two lines on it's own doesn't work, so the reload seems necessary to me at the moment.)
Related
I am programming something like a tinder picture which you vote on ( but not for dating but the same concept). I want this Voting window, or rather said div, to refresh after you clicked the for example like button. But not the whole page because of the cashed images in the browser and the ugly static look when you post data via php post method and have to refresh the whole page. I did structure it like this now:
$('#indexMiddleLayout').load('rateableWindow.php');
The above line comes before in the script tag so the content gets loaded to begin with and the next code line comes after to make it possible to reload again when a sertain button is clicked.
$('#iML-VotingButtonRight').click(function () {
$('#indexMiddleLayout').load('rateableWindow.php');
});
This refreshes my div now but only once :/
I was putting the whole div and it's containing stuff into a seperate php file which i, after you clicked the like button, want to refresh with a ajax request which adds data to the sql database telling it has been liked and after that success i'd like the div or rather the included page to reload so only that div refreshes.
I have created a PHP/HTML document which uses jQuery to create a sliding page effect. I would like to have what the user selected on the first page correspond to what they see on the second page. I know how to do this if I was to use two separate pages however I would like to keep the sliding page effect.
The problem is that PHP is loaded first so for the second page nothing is displayed because on initially loading the page nothing is selected on the first page.
The only solution I have is to have the second page only load when the first is completed, but I have no idea how to do this. Does anyone know if its possible to have the document load at separate times?
UPDATE
On second thoughts could I use a XMLHttpRequest to achieve this? And if so how can I do this
Is it possible to make changes to the page source content through Ajax loaded by a jsp include in the main jsp ?
If not is it possible to reload that portion of the page alone (the jsp that loads some of the content) and to have a portion of the content in the page source changed ?
Details:
I've a variable called page this var gets its content from a java controller as a map of <String key,map<String key,String value>then it performs multiple actions and adds different params to the map, convert it to JSON and sends it to a jsp.
Recently I wanted to do something different,I want to add a param to the 'page' variable called contentOfThePage this variable gets its content dynamically when the document is fully loaded, after that I perform an Ajax request to the controller to add the new param, but the problem is that the new changes never makes it to the page source unless i reload the page or i navigate to another page and this is causing a lot of trouble as the page source may contain the page content of the previous page!
Any idea on how to avoid this and make changes to the page source (NOT DOM) directly ?
keep in mind that the contents are added dynamically but i need a way to change the page source without impacting the performance by requesting a reload after the ajax request succeeded
First You want to update some data that is already there after page load
you already have a json so a rest call i assume
you call it using ajax
now you added something else that you want to change
Yes it can be done actually
but not with the present set
i assume you have a single jsp and trying to change that jsp
well fit whatever you want to change in a panel like a graph or anything else
Add a button to top of the panel and on click the button url must be to the rest call so then data will be updated
I too have faced a similar problem with graphs,
i needed the graph to give updated data without refreshing the whole page,
so i put it inside a panel and wrote a rest controller that gives data for the graph and put a refresh button that calls this rest controller. This let me then update the graph without refreshing the rest of page
What I'm trying to do is make my website show 10 posts, then ask the user if he/she wants to load the "next page." What I want this "next page" button to do is load the content when the user clicks it.
The reason I want the div to just not load completely at all is for website speed. If my website hits let's say 100 posts, even if I just use a simple .hide(); function or something, then the website's still going to take it's time trying to load the 90 posts the website is hiding.
And yes I do realize if I'm worried about page performance I could just make new pages every time I reach 10 posts but that seems like it'd take a lot of time and be very confusing because it wouldn't work in order or something would be wrong with it.
You can't. If it is in the HTML document then it will be sent to the browser. It will be too late to stop it from loading at that point.
The only way to stop the div content from loading is to not have the div in the document in the first place, and then fetch more data from the server (which you would typically do with a link to the next page optionally with JavaScript progressively enhancing things to load the extra data with Ajax instead).
What you need to use is an XHR or Ajax request to get the next 10 posts, it is much better to do it this way rather than hiding them and activating them as needed, because even if you hide it the browser still had to download the content.
You should start by displaying just a few posts, and then load more as needed using XHR/Ajax.
jQuery provides some simple .ajax functions that should help you with retrieving the data as needed.
AJAX is your best bet.
For your needs you could do this two ways:
Make AJAX load more posts as soon as the user clicks the button.
As soon as your page loads (JQ ready function) you could fire an AJAX call to get 10 more posts and either print them in a DOM hidden element OR save them in some variable for later use. After you recover the posts succesfully (AJAX .success()) you could call the AJAX function again and run it again and make it repeat this process until it caches say... 100 posts in a variable or prints it in your DOM element.
You can do an ajax call every time the user clicks the button and append the result to the last div on your page using jquery
$( ".container" ).append( $( "div" ) );
If you want to create a page which will not load all the content at once and not have the user click a button, you can use lazyloading.
It was developed for loading of images, but it can be used for loading of div's too. See Layz Loading for Div
This works both when the user scrolls down and if they navigate to another page and then go back, it will only load part of the page that is visible. Meaning, if they are at the bottom, and they scroll up, it will reload the div's above.
I have written a greasemonkey script which will do GM_xmlhttpRequest
to the next 2 pages of the google results page.. i.e. if my current
page is 1 then my script will do GM_xmlhttpRequest to page no 2 and
3..
Now my script will extract out all the urls from these 3 pages and
will reorder them
For that I have done:
unsafeWindow.addEventListener('load',Reorder,true);
function Reorder()
{
alert("onload fired")
..........
..........
// some code overhere to collect all the urls into an array
// and to reorder the urls in the array
Now I inject these urls into my reference pages i.e. I keep a
reference to the nodes where I am supposed to append these urls as
childNodes.. and along with that I modify the links to page no. 2 and
3(at the bottom of results page) so that now they'll point to my these newly dynamically generated
pages. For that I modify the onclick attribute of these links that'll
open a new window in the current window itself and will write the
modified responseXML object to the newly created window.
Now everything is working awesome i.e. url
extraction, reordering, creating new window, writing the responseXML
object ..
But the problem is that when my these modified links are clicked and
my newly generated window replaces the parent window it doesn't give the alert of "onload fired"
...infact it doesn't stop loading i.e. it displays the desired
content but is never fully loaded since status bar doesn't shows
"done" in fact it shows "waiting for clients1.google.com"...
So does anyone knows what exactly is going wrong over here.. is it due
to some script running on google search page that is somehow
synchronised with the contents of the page...
Basically for those who do not know how greasemonkey will work.....my code is just removing all the anchor tags that contain url and inserting similar anchor tags with different urls...the question in nutshell is that i am just making a new window and doing document.write(this newly created html page)...and other than the urls I am not changing anything....
so basically are the scripts somehow synchronized with the urls present on the page or does it really matter to the scripts what data is contained within as long as the body contains the same DOM tree.
Please people whatever you know or have idea about it.. please tell me...
i need to finish this thing quickly..
When you use document.write to write content into a new page, you need to use document.close() to tell the browser that you're done - until then, the browser thinks there is more content to come and continues to display the loading icon.