jQuery dialog with load doesnt clean up after itself - javascript

I'm pretty sure this was somewhere discussed, but I cant seem to find it anywhere. I would really appreciate if anyone could point me to the right direction.
I have setup a dialog which opens and closes just fine. I need to load dynamic content in it and so Im using this:
$('#dialog').load("somepage.php?document=1");
This load up correctly and everything works pretty much fine except the fact that once I close the dialog and then open it with some different query string (e.g. with document=2) I can see that there are still contents of document=1 loaded in DOM.
This causes issue when there is javascript function in the Loaded page because than it gets executed twice. (well the number of times I load documents so its pretty much unusable).
I have tried clearing the dialog:
$('#dialog').html("")
But that didnt help much.
Does anyone have any idea what could help?

Instead of just closing the dialog, destroy it:
$('#dialog').dialog("destroy");
That should clear the dialog back to its initial state:
https://api.jqueryui.com/dialog/#method-destroy

If you want to just load part of a page, you can always do the following: Let's say I want a specific div only.
$('#dialog').load("somepage.php?document=1 #myDiv");
Furthermore, I don't know what you're closing your #dialog with, but if it was something with an id of myButton, you'd do:
$(document).on("click", "#myButton", function(e) {
// To keep div within DOM and empty
$("#dialog").empty();
// To get rid of div (you would have to re-append #dialog every time)
$("#dialog").remove();
});
All this being said, .load() doesn't actually execute any scripts from your loaded page. If you were to use $.post() or $.get(), you could strip out the <script> tags yourself.
Best of luck!

Related

PJAX after AJAX template rendering

I have an application that uses jQuery and pjax (standalone). We're trying to experiment to see if we can use the possibly more flexible and smaller npm pjax over jquery-pjax.
One of my functions sets the html of a div after loading data, and this html includes links that we want as pjax links, for example $('#link-container').html('<a href="/account_detail.html?='+account.id+'" data-pjax >'). However clicking on this link causes a full page reload rather than a pjax request.
Is there a way to reimplement pjax? When I try new PJAX({elements:[a[data-pjax]]}) inside the pjax:success call (whenDOMReady from the project page - https://www.npmjs.org/package/pjax) it uses pjax... but then loads resources twice.
Perhaps the best solution is going with jquery-pjax ($(document).pjax(a[data-pjax] etc.) but I wanted to see if anyone has come across this type of issue before. Perhaps it is rare to include jQuery and non-jQuery pjax, but it seems like this can happen for any asynchronous data query and DOM modification, and I just want to re-PJAX.
I'm using jquery-pjax, and when you use it or configure it wrong - it also refresh the page, so you're experiencing one of the issues I've encountered.
In any way, I'm not sure if it will help your problem or not, but I suggest everyone to use Firefox with Firebug and in the "Console" tab to click on "Persist" you usually find some errors there that might be helpful, and since errors somewhere might cause the page to refresh - sometime you miss it as the console is being refreshed too.
What I learned is that you need to make sure that when you write:
<a href="/account_detail.html?=2" data-pjax>bla</a>
You need to have a container - that PJAX drops the content into, like:
<div id="pjax-container"></div>
And initially you configure PJAX to bind these objects:
<script>
// this is how I define it in jquery-pjax, so adjust it as you use it.
$(document).pjax('a[data-pjax]', '#pjax-container');
</script>
so the key points that I learned that causes refresh with PJAX:
I'm sending a header twice ( back-end code )
The container was suddenly removed from the HTML body ( the div id="pjax-container" ) and when the DOM is missing it doesn't have a
place to drop the HTML - so it just refresh the page.
When I initially bind the a[data-pjax] with jQuery, new DOM object are not automatically re-bind by jQuery ( unless using "live/on"), therefor they act as a regular <a> tag and reload the page with the new URL.
some JS/PJAX syntax error
In your case, if the pjax-container is "#link-container" I'm not sure if it's a good idea to place the tags inside it.

Apart from AJAX and iframe, is there any other way to refresh part of a page?

I'm using a third-party commenting plugin right now, All it provides is a piece of script as follows:
<div id="uyan_frame"></div>
<script type="text/javascript"
id="UYScript"
src="http://v1.uyan.cc/js/iframe.js?UYUserId=1674366" async="">
</script>
As it is not a live commenting plugin, I want to add a refresh button next to it to reload it manually to see the latest comments instead of reloading the whole page.(I know Disqus is a good commenting plugin, but as we target Chinese users, I have to use the current one).
As it's a third party plugin, I don't have too much control over it. And I also think iframe is a ugly way to achieve this partly refreshing thing. So, is there any other way to achieve this? Like every time I click on the refresh button, it will erase out all the HTML element this script generated, recreate this script tag, append it to the appropriate place, and run it again?
you do not have to use iframe as it is slow. What you can do is create a div or section and give it an id or class, then create a button that when is clicked will fetch a script and append the right html contents in the div or section you've created. To make it easier to understand the code would look something like this.
<section id="content"></section>
<button id="refresher"></button>
<script>
$('#refresher').click(function(){
//Load your script like so
$.getScript('url of the script you are trying to get', function(){...})
//Load your content here
$('#content').html('Current contents will be erased and will be replaced by whatever you placed here')
//...or if you need ajax fetching
$.ajax({
url: url,
success: function(){
$('#content').html('place your content here and this will erase old content')
}
});
})
</script>
I would ask 3rd party company how to refresh comments without refreshing the whole page. They did developed this, and they must have a way to refresh it easily.
For example, UYComment.refresh(document.getElementById('comment'))
You may also find this kind of solution by looking at their javascript code if you don't want to ask them.
You can go around by not using 3rd-party provided code, i.e. ajax to replace div, refreshing iframe, etc., but, based on my experience, it always make your code little messier.
Since you tagged jQuery, I'm assuming you're using it.
Try adding a click handler to your refresh button and then use .html()
example:
$('#uyan_frame').html('');
When you call .html, it should replace the element you called it on and it should recall any scripts in the string you pass in. Just as a disclaimer, this is not tested.

Is there any jquery to detect if the html tag was not closed? or page has not completely loaded?

I'm experiencing an issue (which I still need to fix) where my entire page does not load. It gets cut off in the middle of an element.
Is there a way using jquery or javscript to do something like:
if (some element has not loaded yet) {refresh the page}
I was thinking of just putting <div id="end_of_page"></div> at the bottom of the page, and checking if that was rendered, if not, i'll know something went wrong and can reload to try again.
thanks!!
Is there a way using jquery or javscript to do something like:
if (some element has not loaded yet) {refresh the page}
You can do that, yes. Put this in the head after including jQuery:
<script>
jQuery(function($) {
if (!$("#end_of_page")[0]) {
// Something went wrong, load again
location.reload();
}
});
</script>
You'll enter the body of the loop (and so, force a reload) if the end_of_page element doesn't exist as of when the jQuery ready event fires (which is meant to be when the page is done loading).
But: Better by far to figure out why your page is getting cut off half-way through and solve that. This sort of workaround is not a solution.
You can use
$(document).ready(function(){
// code here
});
that code will only run when the page has loaded. A convenient shorthand is:
$(function(){
// code here
});
assuming your jQuery object is $. To finish your requirement, you can have a variable that is set within the load function, then use a timer set at the start of the page to check for it. If it's not there, reload.
Personally, I think you should invest some time into figuring out why your pages only half-way (Firebug or the Chrome Inspector may help you do this, it might be a resource in your page that is causing it to hang, and since most HTTP requests are only made 2 at a time per hostname, it might be waiting for that to return before fetching the rest).
Might be a server-side issue OR some script or library is stealing your fish $ (AKA: 'Dollar').
I'll rather suggest you to debug your code instead of refreshing the page trying to fix issues.
Make sure your scripts are in the head of your document, and jQuery + your jQ functions right before the closing </body> tag wrapped in:
(function($){ /*your functions*/ })(jQuery);

Javascript event after the dom is ready but not rendered

Is it possible to do something after the dom is ready but it is not rendered(White screen)
I would like to hide the contents from user and after some operations i would like to show the final picture.
I could use "display:none" on my body tag but i am working on a huge project so i dont want to change every page.
Thanks
Here is how?
document.onload = function() {
//your codes
}
Unlike, window.onload this function runs after the DOM is loaded, so the manipulation is possible, but it does not require all the elements to be rendered.
Is it possible to do something after the dom is ready but it is not rendered
Browsers render the DOM incrementally as they parse the HTML into it. The state you describe will not happen naturally.
You can fake it such…
I could use "display:none" on my body tag but i am working on a huge project so i dont want to change every page.
If you don't want to change every page because it is too much work, then too bad. Go and set up an external stylesheet that every page uses.
If you don't want to change every page because you only want the changes to appear on certain pages, then use a more specific selector.
That said, preventing content from displaying and giving users a white screen (or even a loading screen) is just going to turn people off and drive lots of them to another site. I wouldn't recommend doing this.
if you could use JQuery this one is called when the dom is ready but the page not loaded
$(document).ready(function(){
)};
I'll contribute my own 2 cents here.
With jquery, the $("document").ready() event fires after the DOM has been fully loaded(without images, that is) to your browser, but not displayed. So I think to achieve what you want, you'll have to input some handler function inside the ".ready()" method to handle whatsoever you desire to achieve.
Is that what you were looking for?

Minor problem while loading page with jquery

I'm using the slidedeck jquery plugin which basically puts slides on my page. Everything works fine, but the problem is with the css loading part. Below these slides i have an import statement for another page. This page which i'm importing fetches quite a bit of data from the database before being completely displayed.
So whenever i open my page for a second or two the display for my page goes hay wire. The probable cause of this may be that i'm putting most of my jquery including the one for these slides in the document.onready function. So since the document is not loaded completely for that period of time slides are also not displayed. (as in they are displayed but in a weird manner......they are all over the page!!!!)
Is there some way i can make sure that my css and jquery get loaded first and then a call is made to this page which i'm importing or something like that. i just want that my display comes fine right in the beginning.
this is the slidedeck jquery plugin i'm using
slidedeck : http://www.slidedeck.com/
ahh i actually found a solution for my problem. Now what i'm doing is that i'm keeping the div (say id="slideDeckContainer") containing this slidedeck initially as hidden (using css style=display:none). Only after the page is done loading inside the $(document).ready(function(){....}); i call $('#slideDeckContainer).show(); on the div. (since the $(document).ready(function(){...}) is callled only after the page is loaded)
Definitely not the best solution but for now it works :).
instead of $(document).ready(function() { //code here }); you can use $(document).load(function() { //code here}); The load function fires after everything in the selector has loaded. In this case, we are selecting the document, so this function will run only after the CSS, javascript, and DOM have finished loading. Another suggestion is to give the DOM elements that you are loading content into a defined width and a height. This way, before the loading finishes, there will be space reserved for the loading content and it won't mess up your page layout.

Categories