jquery/JavaScript - Delay until upload complete - javascript

My jQuery script looks something like (the form is submitting files to upload):
$("#addMore").click(function() {
$("#progForm").submit();
$("#upTar").css("display","block");
$("#title").val("");$("#obj").val("");$("#theory").val(""); $("#code").val("");$("#output").val("");$("#conc").val("");
});
I want to delay the execution of the code beginning from $("#upTar") until the form submission is completed (that is the files are uploaded and PHP script has responded).
Edit
#upTar is an iframe and the target of the form submission. I want #upTar to be displayed only after its content has been generated from the form action script.
Thanks!
Code after solution
$("#addMore").click(function() {
$("#progForm").submit();
$('#upTar').load(function() {
$("#upTar").css("display","block");
$("#title, #obj, #theory, #code, #output, #conc").val("");
});
});

There's no way to make JavaScript in a browser "wait" for anything. In this case, there are a couple things you could do:
You could put the CSS changes etc. in a "load" event handler for the target <iframe>
$('#upTar').load(function() {
$("#upTar").css("display","block");
$("#title, #obj, #theory, #code, #output, #conc").val("");
}
You could put code in the response to the form POST that executes from the <iframe> itself.
$(function() {
(function($) {
$("#upTar").css("display","block");
$("#title, #obj, #theory, #code, #output, #conc").val("");
})(window.parent.$);
});

What you are doing right now is submitting the HTML form and loading whatever page you have listed in the "action" attribute of the form. The lower part of the javascript function will never actually execute since the browser will be directed to the new page. Here's what you want, a form that submits via ajax and then clears the form:
$("#addMore").click(function() {
var formData = $("#progForm").serialize();
var url = $("#progForm").attr("action");
$.get(url, formData, function(){
$("#upTar").css("display","block");
$("#title").val("");
$("#obj").val("");
$("#theory").val("");
$("#code").val("");
$("#output").val("");
$("#conc").val("");
});
});
Were you looking for something like that?

If you load jQuery inside the iframe you could use the following function to control parent elements with this selector:
$("#myparentid", top.document);
In essence, you could run a function inside the iFrame that waits for a refresh at which point you can run any function you wish with the top.document selector.

Related

Refresh razor page without reload using javascript/ jquery in asp.net core

I have one input and script to reload table in my page. In the input if I insert 1000 I want to reload page every second, without clicking any buttons.
This is what I tried :
<input id="txtRefresh" />
<script>
document.redy(function () {
$('tblRefresh').load();
setInterval(function () {
$('#tblRefresh').load();
}, 'txtRefresh');
});
</script>
Its cshtml razor page.
What I want to do is to insert the value of seconds in the input andrefresh the page based of the of the inserted value, without submiting any data.
Is it possible to do this? Any suggestions?
Thanks in advance!
UPDATE
I inserted this script:
<script>
document.ready(function () {
$('#refreshDIV').load('url/url/url');
setInterval(function () {
$('#refreshDIV').load('url/url/url');
}, $('#txtRefresh').val());
});
</script>
But it gaves me error!
refreshDIV is a div that I want to refresh
txtRefresh is the input from I insert the seconds
you can try this:
$(document).ready(function(){
var timeout = $("#txtRefresh").val();
setTimeout(timeout, function() { location.href=""; });
});
but each time you will reload the page you will lose, the input.
You could send it through querystring like this:
location.href="?timeout="+timeout
and populate the input server side
This is just a string:
'txtRefresh'
If you want to get the value of that element, it would be more like this:
$('#txtRefresh').val()
You also have a typo in document.ready and in your first #tblRefresh selector (missing the #), and you aren't supplying .load() with the URL you want to load. All together you appear to be trying to do this:
$(document).ready(function () {
$('#tblRefresh').load('/some/url');
setInterval(function () {
$('#tblRefresh').load('/some/url');
}, $('#txtRefresh').val());
});
A couple things to note:
The value /some/url is of course a placeholder in this sample code. Whatever URL you want to use in your application is up to you.
Calling .load() will place the entire response of that URL into the target element. If you want only a subset of that response, you can add selectors to .load(). For example:
$('#tblRefresh').load('/some/url #someElement');
This would tell .load() to grab all the content from /some/url and then only select from it the content of #someElement to place in #tblRefresh. The performance could still potentially be slow as all of the content from the URL is still downloaded. To address performance or for finer control over data, consider returning JSON data from the server and using .ajax() to fetch that data instead of using .load() to reload all of the HTML (when only the data has changed).

Reloading a page include every 30 seconds or when user submits form

I have a PHP page with a lot of includes which make up various parts of the page for a video website.
I have a comments section which submits information into a database (Which works fine). But I need to make it so when this is done only the included page/div refreshes.
This is the PHP:
<form id="song-comment-form">
<input type="hidden" value="<?=$rSong->id?>" class="song-id">
<textarea class="editor" id="song-comment-textarea"></textarea><br>
<input type="submit" value="Submit"><input type="button" value="Cancel" id="hide-song-comment-form">
<hr>
</form>
<div id="player-song-comments">
<?php $showComments?>
</div>
Here is my attempt at doing it with Javascript:
<script>
var $comments = $("#player-song-comments");
setInterval(function () {
$comments.load("/template/sections/player_comments.php #player-song-comments");
}, 30000);
</script>
This should reload just the comments section but instead, everything from this point onwards goes blank.
How it looks now when I press submit:
When I reload that page manually:
I don't want the whole page to refresh because it contains a video.
How can I make just that Refresh after submit is pressed OR every 30 seconds?
UPDATE:
I have tried using JQuery to execute this. I'm getting an error:
Fatal error: Call to a member function query() on a non-object in /home/content/58/12052758/html/template/sections/header.php on line 42
<script>
/*wait for the DOM to be loaded
$(document).ready(function() {
// bind 'myForm' and provide a simple callback function
$('#song-comment-form').ajaxForm(function() {
alert("Thank you for your comment!");
});
}); */ //THIS IS LINE 42
$(document).ready(function() {
var options = {
url: 'template/sections/player_comments',
target: '#player-song-comments', // target element(s) to be updated with server response
type: 'post' // 'get' or 'post', override for form's 'method' attribute
};
// bind form using 'ajaxForm'
$('#song-comment-form').ajaxForm(options);
$(document).ready(function() {
// bind 'myForm' and provide a simple callback function
$('#song-comment-form').ajaxForm(function() {
$("#player-song-comments").load('template/sections/player_comments.php');
alert("Thank you for your comment! The site is currently in maintenance and the comment won't show until you revisit this video");
});
});
});
</script>
For those interested. Here is the whole page: http://pastebin.com/c0kQ3tGp
You seems to load comments in PHP and as far as I know, PHP is only parsed once.
The simplest workaround I know is to use an iframe that you would refresh, but I'm not sure this is a good practice tho.
So there are two parts to your question:
How can I make just that Refresh after submit is pressed
You can use jquery-form for that. In your case, you can initialize your form to something like this:
$(document).ready(function() {
var options = {
url: 'your_form_action',
target: '#player-song-comments', // target element(s) to be updated with server response
type: 'post' // 'get' or 'post', override for form's 'method' attribute
};
// bind form using 'ajaxForm'
$('#song-comment-form').ajaxForm(options);
});
There are many other options you can play with.
OR every 30 seconds?
Try change your
$comments.load("/template/sections/player_comments.php #player-song-comments");
to
$comments.load("/template/sections/player_comments.php"); // remove the selector
According to the docs, the selector is used to insert fragments of the remote document. In other words, when load was executed, jQuery parses the returned document to find the element #player-song-comments. This element, along with its contents, is inserted into the element with an ID of result, and the rest of the retrieved document is discarded.... I assume #player-song-comments is not part of your response?

Preventing __doPostBack going to the server before the whole page is fully loaded

Is there a way to make __doPostBack wait for the page to be loaded before it goes to the server?
Sometimes our users click controls at the top of the page before the page is fully loaded/rendered, which results in an incomplete form being sent to the server.
I am wondering if there is something I can do with Sys.WebForms.PageRequestManager (add an event handler?, configure it?) that would check if the page is loaded and if it is not it would wait for it?
This is an ASP.NET 3.5 app.
Note: A possible solution is make the controls call some "__doPostBack_WhenLoaded" method that would do the check and add the __doPostBack call to the onLoad event if needed. I think thought there would be a better way :).
I wasn't able to do what I wanted by extending the PageRequestManager, so here comes a quick and dirty solution I ended up with. I created my own __doPostBack function, which does the checking and then call the actual function directly or adds it to the queue to be processed on load:
var WebPageFullyLoaded = false;
$(function() {
WebPageFullyLoaded = true;
});
var oldDoPostBack = __doPostBack;
__doPostBack = function (eventTarget, eventArgument) {
if (!WebPageFullyLoaded) {
$(function () {
oldDoPostBack(eventTarget, eventArgument);
});
}
else {
oldDoPostBack(eventTarget, eventArgument);
}
}
Can you use jQuery? If so, you could enable the page controls once the document is ready (finished loading). jsfiddle.net/qtg94
Page Control
<input type="submit" name="name" id="controlID" disabled="true">
Javascript
$(document).ready(function(){
$('#controlID').prop('disabled', false);
});

load widgets after loading conten

What am doing is writing wizards using existing forms and list views. we want to combine these forms in single page. here is a script we have used to get form from url then called function to bind widgets. first line is loading content of form but bindWidgets is not working. While bindWidgets is working on preloaded content which is default loaded with page.
<script>
$(document).ready(function() {
$("#template_form").load("/push_templates/pushtemplate/create/ #zform");
bindWidgets();
});
</script>
Do we need to wait for load, as it seems that 2nd line is executed prior to content loaded. How can we go to wait stat or better way to call bind function after load complete.
Use this;
<script>
$(document).ready(function() {
$("#template_form").load("/push_templates/pushtemplate/create/ #zform", function() {
bindWidgets();
});
});
</script>
You can see demo here: jsfiddle

Execute $(document).ready() after $.load(), is that possible or is there an Alternative

I have page with a form and a table (to show results of the saved data using the form).
The form uses ajax to submit the data, data saved and the table should be reloaded afterwards.
The problem is that the table (which is loaded using AJAX($.load)) is loaded after the execution of $(document).ready(). which implies that the table does not have the required functionality.
Is there any approach where i can postpone the execution of $(document).ready() until the AJAX finish its loading, or shall i use a complete different approach like using iframe?
below is an example of my problem:
$(document).ready(function(){
//some code here that needed for the html in table.html e.g. datepicker, chosen, jqueryui, etc
});
<form>
//Inputs with a button to submit using ajax, where the result is displayed using table.php
</form>
<div id="tableOfContent"></div>
<script>
$('#tableOfContent').load("table.php");
</script>
You can do
$('#tableOfContent').load("table.php",function(){
//completed load actions here
});
But you should note that if you load images, they will not be loaded yet. If that is the case, you can make the contents of table.php initially hidden and do the same again inside for $('#tableOfContent img').load(). This would work for 1 image; multiple images is a bit more complicated, but feel free to ask if that is what you are looking for :)
You can delay the ready event using jQuery.holdReady():
$.holdReady(true);
// Do your custom stuff... the document may already be loaded.
$.holdReady(false); // Now the ready event will fire as soon as the DOM is loaded.
See http://api.jquery.com/jQuery.holdReady/
document.ready is called when the HTML of the page has finished loading, there's no two ways about it.
What you can do, however, is use live binding, which will attach handlers to elements that are not yet on the page.
Example:
$(".datepicker").live("click", function() {
$(this).datepicker();
})
Updated for jQuery >1.7 (this is also faster)
$("#tableOfContent").on("click", ".datepicker", function() {
$(this).datepicker();
})
Load the table data from within the ready function and use the complete event of the load() function to call the remainder
$(document).ready(function() {
// click bindings etc ..
$('#tableOfContent').load("table.php",function() {
// things to do once the table is loaded
});
});
load() documentation
$(document).ready() should be used for scripts that should execute, well, when document is ready.
If you need to execute something after an ajax call, you may write everything within a function and call it with the ajax callback.
function what_i_need() {
// bla bla
}
<script>
$('#tableOfContent').load("table.php", {}, what_i_need);//code had syntax error; '{)'
</script>
I'm not sure. Plus, you can call the function when document is ready too.
$(document).ready(function(){
what_i_need();
});

Categories