We Keep Coding

how to put dialog box inside the page refresh?

i want to put this dialog box inside the page refresh. i mean. when i refresh the page this must be the out put.
<script>
$(function() {
$("#dialog").dialog({
modal: true,
resizable: false,
buttons: {
"I want to Continue the Exam": function() {
$(this).dialog("close");
},
"I Refresh": function() {
$(this).dialog("close");
}
}
});
});
</script>

As far as I know, when you 'refresh' a page then all the JS objects are destroyed (those that are written in script).In other words the script is re-loaded. So you can't persist your script while the page is in transition.
Type I (classical Single Page App)-
So if you simply want to reload a particular part of the Application then use $.ajax() methods like beforeSend() for showing whatever (alert or best a loading spinner/div) you want during the data request or 'page-refresh'. And then you can hide them on done().
Type II (using routers)
JS frameworks like Angular give you options to reload a particular route of your App without reloading/refreshing your entire app - $route.reload(). You can show/hide some div/directive based on manipulation in your controller.
So you have to use some form of asynchronous scripting to deal with this "PROMPT while REFRESH" situation.
Using $.ajax() to simulate (pseudo code)-
$.ajax({
url: "_URL_to_get_or_post_data__",
beforeSend: function( xhr ) {
$popup.show();
}
})
.done(function( data ) {
$popup.hide();
}
});

Browsers have a security feature that will not let a page prevent users from leaving the page. By leaving a page it means closing tab/browser, navigating to a different page or refreshing. The only way to stop the user is to assign a function to onbeforeunload. Like this:
onbeforeunload = function () { return "You have unsaved data. Are you sure you want to exit?"; }
This message is synchronous, it will stop all javascript running on the page. If user presses ok the browser will leave the page (or refresh) else it will stay on the page.
EDIT
Usage: when user have changed something and have unsaved data - you assign a function to onbeforeunload:
onbeforeunload = function () { return "some message"; }
after the data is saved set onbeforeunload to null:
onbeforeunload = null;

AJAX stop working on loading same site different PHP id

So i have a website that I'm doing for a school project. It's supposed to be like PasteBin. So on the right theres a different div (Uued koodid) that shows newest pastes. On click, they are supposed to show what they include using AJAX to refresh the left div. This only works for 4 times and then stops, but URL is still changing. After refresh it changes again and works again for 4 more times.
In main.js i have
...
$.ajaxSetup({ cache: false });
...
$(".uuedKoodid").click(function () {
$(".left-content").load(document.location.hash.substr(1));
});
...
EDIT:
Also other AJAX functions work. If I log in, I can switch between settings and profile perfectly but still cannot watch new codes

When you replace right menu with new code (from ajax call) you don't attach click event again on .uuedKoodid items so they don't do anything. You need to attach event again or attach it like this:
$(document).on('click', '.uuedKoodid', function () {
$(".left-content").load(document.location.hash.substr(1));
});
Edit:
As you noticed this will cause small problem. onclick event run before browser run standard link action. First you load ajax and then browser changes address. This way you are 1 action behind. Better solution than reading with delay (setTimeout) i think would be to read address directly from link:
$(document).on('click', '.uuedKoodid', function () {
var url = $(this).attr('href');
$(".left-content").load(url.substring(url.indexOf("#")+1));
});

Apply Jquery After Page Loads

I have following HTML code to add new div:
<a class="add-link" id="buttonAdd" href="#Url.Action("Foo", "Foo1", new {actiontype = "Add" })">Add New Openings</a>
When i click on Add , new div is added. I want to show that div in editable mode by default, but as there is link in html for <a> I am not able to accomplish it. I want to show first div that is added as editable .
$(document).ready(function () {
$('.container').on('click', '.add-link', function () {
$("#accordion").first().find('.panel-title, .panel-collapse').attr('contenteditable', true).css('border', '2px solid');
$('#accordion').first().find('.edit-link').css('display', 'none');
$('#accordion').first().find('.done-link').css('display', 'inline');
});
Can someone guide me please.

You need to prevent the default click behaviour:
$(document).ready(function () {
$('.container').on('click', '.add-link', function (e) {
e.preventDefault();
$("#accordion").first().find('.panel-title, .panel-collapse').attr('contenteditable', true).css('border', '2px solid');
$('#accordion').first().find('.edit-link').css('display', 'none');
$('#accordion').first().find('.done-link').css('display', 'inline');
});
Apparently this is only the first issue. They also want the code to run after the link page has been loaded!!! :)
How web pages work.
Because the web was designed to be stateless, to a web browser, each page load is separate to the last. Even if they are the same URL. The practical upshot of this is that your code gets reloaded and restarted on each page.
Based on your comments you want to add a div then apply jQuery to the accordion. You have two options.
a)
Detect the change of divs on page load and apply the change then.
b)
Run the link via an Ajax call and update just the required part of the page using informtion in the new page returned from the server.
Of these two options only the Ajax solution will allow you to retain code-control on the originating page. I would suggest the URL be changed to a method which returns a PartialPage containing just the new DIV.
In order to answer this definitively, we need more information about how you prefer to solve the problem.
If you go Ajax:
If you go with an Ajax update, I suggest you change the link to an action that just returns the new DIV in a PartialView. Then you can do something like this:
$('.container').on('click', '.add-link', function (e) {
// Stop default processing of the link
e.preventDefault();
// Load the new page (specified by the clicked link's href)
var $link = $(this);
var url = $link.attr('href');
alert(url); // for testing - remove this
// Execute a HTML GET command on the URL
$.get(url, function (html) {
// Add the new DIV "somewhere" to be determined
$('.container').append(html);
// Then do your other processing
$("#accordion").first().find('.panel-title, .panel-collapse').attr('contenteditable', true).css('border', '2px solid');
$('#accordion').first().find('.edit-link').css('display', 'none');
$('#accordion').first().find('.done-link').css('display', 'inline');
});
});

jQuery mobile - force pagebeforeshow without knowing the page name

I have a small jQuery Mobile site with NavBar at the bottom of every page. The bar has some buttons, which should work across the site.
How to force pagebeforeshow event (on current viewed page) without knowing the page name/id?
Is there a general function to do this, or do I need to get name/id of the page first and them use this to call pagebeforeshow?
UPDATE
The following gets me a current page ID, but the trigger("refresh") does not seams to trigger any action (pagebeforeshow does not execute).
var CurrentPageID = $.mobile.activePage[0].id;
$("#" + CurrentPageID).trigger("refresh");
Any suggestions?

Here's a working example.
This will start page reload while clicking on navbar:
$('div[data-role="navbar"] ul li').bind('click',function(event, ui){
$.mobile.changePage(
'#'+$.mobile.activePage[0].id,
{
allowSamePageTransition : true,
transition : 'none',
showLoadMsg : false,
reloadPage : false
}
);
});
This code will catch pagebeforeshow:
$('#pageID').live('pagebeforeshow',function(e,data){
alert('Reload');
//Execute AJAX here
});

I assume all the page you are navigating is divs with data-role attr. So you should able to bind event as below;
$('div[data-role="page"]').live( 'pagebeforeshow', showLoadDiv);
function showLoadDiv() {
//Your code here
}
//when you want to call it manually
showLoadDiv();

jQuery Mobile pageinit not working on first load pages (replicable)

Reloading a page or navigating directly to the jQuery Mobile hash URL does not fire the pageinit even once. For example, I have tried this on my secondary page:
$(function () {
$(page).bind('pageinit', function () {
console.log('bind pageinit');
});
$(document).on('pagecreate', page, function () {
console.log('pagecreate');
});
$(document).on('pageshow', page, function () {
console.log('pageshow');
});
$(document).on('pageinit', page, function () {
console.log('pageinit');
});
});
While on page one, I click to go to the page two and the above life cycles gets written to the console. The URL also appended #two. This is great, but when going to the link on another machine, the page init does not fire. It seems only a button click can trigger the page init.
I have a live example here: http://dl.dropbox.com/u/5986646/jqm-pageinit.html. Paste this in the URL and events do not trigger: http://dl.dropbox.com/u/5986646/jqm-pageinit.html#two (notice the hash URL).

Yes I had the same problem.
For execute some javascript code on page init a use this structure:
$(document).bind("mobileinit", function(){
$('#mainPage').live('pageshow', function(){
// Some Javascript code
});
});
Now I can execute code all the time that the page was called.