I have found a script called iScroll to use on iPad devices as a 1 figure scroll mechanism for a verticle list.
all it needs is:
<script type="text/javascript" src="http://cubiq.org/dropbox/iscroll4/src/iscroll.js"></script>
and the below:
var myScroll;
function loaded() {
myScroll = new iScroll('wrapper');
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);
which works fine when the page loads for the first time, however the list that uses this is within an asp.net upadate panel and the scroll breaks on postback.
I have tried registerstartupscript from my c# when the events that trigger the list refresh occur:
public string ipadScript()
{
StringBuilder sb = new StringBuilder();
sb.Append("var myScroll;" + Environment.NewLine);
sb.Append("function loaded() {" + Environment.NewLine);
sb.Append("alert('h');" + Environment.NewLine);
sb.Append("myScroll = new iScroll('wrapper');" + Environment.NewLine);
sb.Append("}" + Environment.NewLine);
sb.Append("document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);" + Environment.NewLine);
sb.Append("document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);" + Environment.NewLine);
return sb.ToString();
}
ClientScriptManager cs = Page.ClientScript;
cs.RegisterClientScriptBlock(this.GetType(), "ipadKey", ipadScript(), true);
But this does not seem to work either. I don't even get the 'alert' I have added in the script to check the postback. Hopefully someone can help?
SOLVED!!!!
function pageLoad(sender, args) {
if (args.get_isPartialLoad()) {
myScroll = new iScroll('wrapper');
}
}
this will only work with asp.net update panels
The refresh method myScroll.refresh() should be invoked after updating of the update panel.
Client side:
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);
function endRequestHandler(sender, eventArgs)
{
myScroll.refresh();
}
ClientScriptManager will just register the code, but since the <head> element isn't in the update panel, it never gets added, and even if it was wouldn't execute.
You'll need to register a client-side event handler to reinitialize the list:
$(document).ready(function() {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);
});
var endRequestHandler = function() { myScroll.refresh(); };
Related
Why does Error: Unable to get property '_ScriptLoaderTask' of undefined or null referece get thrown when trying to close a RadWindow with ScriptManager and JavaScript in ASP? (Internet Explorer 11)
Our application has 'Save and Close' buttons that have the following C# code for the closing logic that is executed after the save has completed:
public void CloseWindow()
{
ScriptManager.RegisterStartupScript(this, this.GetType(), "close",
"CloseModal()", true);
}
The .aspx page has the following JavaScript:
function CloseModal() {
var oWnd = GetRadWindow();
if (oWnd) {
oWnd.close();
}
}
function GetRadWindow() {
var oWindow = null;
if (window.radWindow) {
oWindow = window.radWindow;
} else if (window.frameElement &&
window.frameElement.radWindow) {
oWindow = window.frameElement.radWindow;
}
return oWindow;
}
Adding setTimeout() for one second before the RadWindow .close() function is called seems to fix the issue. I believe this allows the ScriptManager.RegisterStartupScript just enough time to complete execution.
The following JavaScript is a solution to the problem, and stops the error modal from displaying post 'Save and Close' button click:
function CloseModal() {
var oWnd = GetRadWindow();
if (oWnd) {
setTimeout(function () {
oWnd.close();
}, 1000);
}
}
The following code loads a youtube vidéo in a player.
If I remove the two "alert", it doesn't work anymore...
ytplayer = document.getElementById("ytPlayer");
alert('ok');
if (ytplayer) {
alert('ok');
loadVideo(url, start);
}
Can someone help me?
you are probably invoking the code before the page loads. With the alert, js execution stops, allowing the page to load. If this is correct, you need to look into the window.onload callback or possibly document.ready
window.onload = function(){
// load the vid here
}
Invoke the function after the page has been loaded completely.
window.onload = function() {
loadVideo(url, start);
}
I fixed the problem with the following :
ytplayer = document.getElementById("ytPlayer");
if (ytplayer) {
setTimeout( function() { loadVideo(url, start); }, 1000);
}
Thanks for your answers.
Did you use Ajax Request ?
if YES then
put you code that didnt work at the end of
AjaxObject.onreadystatechange = function () {
if (AjaxObject.readyState == 4) {
.
.
.
.
.
// PUT HERE
}
}
then IF NO
put your code in function and return false or true
like this
ytplayer = document.getElementById("ytPlayer");
alert('ok');
if (ytplayer) {
//alert('ok');
loadVideo(url, start);
return true;
}
hope helps
I am trying to fire a event from script inside aspx page. To fire a event I am using Event.observe() method. In that line I am getting error like "Event is not an object". Please help me in this issue.
My code:
function Submitkeyword() {
obj = document.getElementById("select");//select is button id
Event.observe(obj, 'change', function () {
var e = document.getElementById("lookupvaluesDropdown");//lookupvaluesDropdown is dropdownlist id
var valueddl = e.options[e.selectedIndex].value;
});
fireEvent(obj, 'submit');
window.close(); //To close the popup window
}
function fireEvent(element, event) {
if (document.createEventObject) {
// dispatch for IE
var evt = document.createEventObject();
return element.fireEvent(event, evt);
}
else {
// dispatch for firefox + others
var evt = document.createEvent("HTMLEvents");
evt.initEvent(event, true, true); // event type,bubbling,cancelable
return !element.dispatchEvent(evt);
}
}
Event.observe requires the Prototype JavaScript library loaded. If its not loaded and you try to use it you will get the error "Event is not an object"
You need to include that in your <head> as follows :
<script src="/path/prototype.js" type="text/javascript"></script>
I have the following code and the second onload event is not firing:
<script type="text/javascript">
var startime = (new Date()).getTime();
window.onload = function(){ record_visit('ol'); } //ol - onload
window.onload = function(){ setInterval("upState()", 30000); }
window.onbeforeunload = function(){ record_visit('obul'); } //obul = onbeforeunload
function record_visit(value) {
var x = (window.ActiveXObject) ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest();
x.open("GET", "count_visit.php?t=" + (((new Date()).getTime() - startime) / 1000)+"&type="+value+"&url="+escape(window.location.href), false);
x.send(null);
}
function upState()
{
// create the AJAX variable
var xmlhttp;
if (window.XMLHttpRequest)
xmlhttp = new XMLHttpRequest();
else
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
// make the AJAX call
xmlhttp.open("GET", "count_visit.php?t=" + (((new Date()).getTime() - startime) / 1000)+"&type=update&url="+escape(window.location.href), false);
x.send(null);
}
</script>
All I need here is to send request using count_visit.php and update the table that the visitor is still online.
I tried some code I found in some site but still it's not firing. here's the code:
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(record_visit('ol'));
addLoadEvent(setInterval("upState()", 30000));
Any help please.
With the second window.onload you are overwriting the one that was defined before. As you are not using jQuery (which makes these things easier) use the following function
function myEvent(where,evt,func,op)
{
if (op)
{
if (where.attachEvent) where.attachEvent("on"+evt,func);
else if (where.addEventListener) where.addEventListener(evt,func,false)
}
else
{
if (where.detachEvent) where.detachEvent("on"+evt,func);
else if (where.removeEventListener) where.removeEventListener(evt,func,false);
}
}
where - object where you are adding your event listener to
evt - the name of the event (without 'on' part)
func - function to be called on event
op - if it is set to true the function will add listener and if it is set to false the function will remove listener.
Call it as myEvent(window, 'load', func, true); And does not matter how many functions you add - all of them will be called at the given event.
ps: or you can just combine the content of both functions manually :))
window.onload = function(){
record_visit('ol');
setInterval(upState, 30000);
}
using this method you have to check the existence of the previous event handler, save it in some global variable and call it later when you will be dealing with execution of the final and the only one window.onload function. You were trying to do it in the last portion of the code.
if you want two functions to fire on window.onload, you could do it like this:
function onload1 (){
alert("onload1");
}
function onload2 (){
alert("onload2");
}
window.onload = function() {
onload1();
onload2();
}
<script type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(endRequest);
prm.add_initializeRequest(initializeRequest);
var _postBackElement;
function initializeRequest(sender, e)
{
if (prm.get_isInAsyncPostBack())
{
e.set_cancel(true);
}
_postBackElement = e.get_postBackElement();
document.getElementById('loadingm').style.visibility = 'visible';
}
function endRequest(sender, e)
{
$find('PopCustom_').show();
document.getElementById('loadingm').style.visibility = 'hidden';
}
</script>
This code will work on every AsyncPostback, but I want it to work Update-Panel specific.
Not being too familiar with JS, I don't know where I to do the modification.
Help would be greatly appreciated.
Best solution so far is:
var cmdAuthoriseButton ='<%= cmdAuthorise.ClientID %>';
function beginReq(sender, args){
if (cmdAuthoriseButton == args._postBackElement.id)
{
// shows the Popup
$find(ModalProgress).show();
}
}
To trigger of the start is pretty easy because something has to trigger it so you can always add code to whatever is triggering the refresh.
To trigger off of the completion of an UpdatePanel being refreshed is not as straight forward but the framework has provided some javascript functionality to help with this. The following javascript code will trigger off of an UpdatePanel refresh completing:
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.pageLoaded(YourJavascriptFunctionNameHere);
//or
prm.add_pageLoaded(YourJavascriptFunctionNameHere);
Then implement the function you registered:
function YourJavascriptFunctionNameHere(sender, args)
{
// do something
}
If you want you can use the same method to work off the start of the UpdatePanel refresh as well using
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.beginRequest(YourJavascriptFunctionNameHere);
// or
prm.add_beginRequest(YourJavascriptFunctionNameHere);
I think you can figure out what element is causing the refresh from the sender or args params but you will need to read more about this function on MSDN.
EDIT: (from the MSDN article, an example of figuring out which UpdatePanel is refreshing)
function beginRequest(sender, args) {
postbackElement = args.get_postBackElement();
}
function pageLoaded(sender, args) {
var updatedPanels = args.get_panelsUpdated();
if (typeof(postbackElement) === "undefined") {
return;
}
else if (postbackElement.id.toLowerCase().indexOf('external') > -1) {
for (i=0; i < updatedPanels.length; i++) {
panelUpdatedAnimation.animatePanel(updatedPanels[i]);
}
}
}