|
JavaScript - Execute Js Code After Ajax Loads Into A Div
Hello:
I have an ajax file to loads the content of another file into a div, here is the js code: PHP Code: <script type="text/javascript"> function showUser(str) { if (str=="") { document.getElementById("txtHint").innerHTML=""; return; } if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("txtHint").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","getcar.php?q="+str,true); xmlhttp.send(); } </script> the file within xmlhttp (getcar.php) has other js codes that are to be executed once the file is loaded into the div. here is one of those files: PHP Code: <!-- loading, please wait message script begins--> <div id="loading\" class=\"loading-invisible\" z-index: 999> <p><font color=\"black\" size='4'>one moment, please!</font> <font color=#218868> Auto Tech Pro « Initiating... » </font><br /><img border='0' src='images/spinnnnnn.gif' width='215px' height='206px'> </div> <script type=\"text/javascript\"> document.getElementById(\"loading\").className = \"loading-visible\"; var hideDiv = function(){document.getElementById(\"loading\").className = \"loading-invisible\";}; var oldLoad = window.onload; var newLoad = oldLoad ? function(){hideDiv.call(this);oldLoad.call(this);} : hideDiv; window.onload = newLoad; </script> <!-- loading, please wait message script ends--> <script type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js\"></script> <script src=\"/AJAX/popBox1.2.0.js\" type=\"text/javascript\"></script> <link href=\"/AJAX/popBox1.2.0.css\" rel=\"stylesheet\" type=\"text/css\" /> <script type=\"text/javascript\"> $(document).ready(function () { $('#inputbox').popBox({width:550, newlineString: '<br/>' }); }); </script> this however is not working. If I open getcar.php independently of the ajax, the preceeding js codes work fine, but not once the ajax loads the file into div. Any thoughts on how this is doable? Mossa Similar Tutorialsi have a javascript bookmark to log me onto my schools site javascript: window.location.href="http://www.MySchool";login=document.getElementById('Login'); void(login.value='user'); pass=document.getElementById('pass');void(pass.value='pass'); LoginbuttonSubmit(); without window.location.href="http://www.MySchool" it works fine if the page is already open, but with using the link to open the page, it runs the remaning script before the page loads and it doesn't work. is there any way to fix this withou using setTimeout() I want to - after the page has loaded - detect a text string in the code.. something similar to Code: function afterPageLoadsDetect() {
Quote:
Simply put -- I want javascript to detect a text string in the source code and return it to me -- AFTER the page is fully loaded. THANKS. Hey all, so im working on a piece of jquery/JS which executes (drops down a new div) when you click a link. I have the links setup as <a href="#" id="d0">Execute 1</a> <a href="#" id="d1">Execute 2</a> <a href="#" id="d2">Execute 3</a> And the jscript detects when d0, d1 or d2 is clicked and executes my script. It all works perfectly, however when you click on a link it will jump to the top of the page as a side effect of the a href="#" I assume? Is there anyway to have my same effect work inline (without jumping the page to the top) ? Thank you very much! Code: function addEvent(elem,type,func) {
var obj = document.getElementById(elem);
if(window.addEventListener) {
obj.addEventListener(type,func,false);
}
if(window.attachEvent) {
obj.attachEvent('on'+type,func);
}
}
function $e(obj) {
if(obj) obj = document.getElementById(obj);
if(!obj) return;
return obj;
}
function homeFunc() {
$e('home-wrapper').innerHTML = "<div id=\"choose-container\"><span class=\"choose-buttons\" onclick=\"loginFunc()\">Login Exisiting Account</span><span class=\"choose-buttons\" id=\"createAcct\">Create An New Account</span><span class=\"choose-buttons-highscores\" id=\"createAcct\">Highscores Table</span>";
}
function loginFunc() {
$e('home-wrapper').innerHTML = "<div id=\"login-container\"><div id=\"error-field\"></div><form method=\"post\" onsubmit=\"return validate_login()\" action=\"./index.php\"><label for=\"username\">Username</label><input name=\"username\" id=\"username\" class=\"input\" type=\"text\" /> <label for=\"password\">Password</label><input name=\"password\" id=\"password\" class=\"input\" type=\"password\" /><input name=\"login\" type=\"submit\" value=\"Login\" class=\"loginButtonClass\" /><div id=\"loginQuickLinks\"><span class=\"loginQuickLinks\" onclick=\"homeFunc()\">Register</span> - <span class=\"loginQuickLinks\">Forgot password?</span></form></div></div>";
}
function createAcct() {
alert("Create An Account");
}
function validate_usr() {
var usr = $e('username');
var pwd = $e('password');
if(usr.value.length <= 0 && pwd.value.length <= 0) {
loginErrorMsg('Please supply a username and password.');
return false;
}
if(usr.value.length >= 1 && pwd.value.length <= 0) {
loginErrorMsg('Please supply a password.');
return false;
}
if(pwd.value.length >= 5 && usr.value.length <= 0) {
loginErrorMsg('Please supply a username.');
return false;
}
if(pwd.value.length < 5) {
loginErrorMsg('Invalid username or password.');
return false;
}
if(usr.value.length >= 1 && pwd.value.length >= 5) {
$e('error-field').style.cssText='display:block;';
$e('error-field').innerHTML = "<img src=\"/images/ajax-loader.gif\" /> <span style=\"color:#ffffff\">Loading...</span>";
var req;
var params = 'user='+encodeURIComponent(usr.value.toLowerCase())+'&pass='+encodeURIComponent(pwd.value.toLowerCase());
if(window.XMLHttpRequest) {
req = new XMLHttpRequest();
}
if(window.ActiveXObject) {
req = new ActiveXObject("Msxml2.XMLHTTP" || "Microsoft.XMLHTTP");
}
req.open('POST','server/userChck.php',true);
req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
req.send(params);
req.onreadystatechange = req;
if(req.readyState == 4 && req.status == 200) {
if(req.responseText == 0) {
window.scrollTo(0,1);
setTimeout(function(){loginErrorMsg('Invalid username or password');},1000);
return false;
}
}
}
return true;
}
function loginErrorMsg(msg) {
window.scrollTo(0,1);
$e('error-field').innerHTML = msg;
$e('error-field').style.cssText='display:block';
}
function validate_login() {
var isTurn = (!validate_usr()) ? false : true;
return isTurn;
}
window.onload = function() {
setTimeout(function(){window.scrollTo(0,1);},100);
addEvent('loginButton','click',loginFunc);
addEvent('createAcct','click',homeFunc);
}
This code works fine when I set this line to false Code: req.open('POST','server/userChck.php',false);
but as soon as I set this to true. I doesn't work.... What am I doing wrong here? Hi all, I am new with AJAX, and when trying to hack the core file of Open Cart I met a problem with one javascript block of code. Thise code deal with checkout process in Open Cart 1.5.1.3. I have read through all of them but don't understand much. So can you tell me how it work just before the REGISTER field (line 1-147). Thank so much! Code: function dimensions(){
$('.resource-container').css("width",($(window).width() - 306) + 'px');
$('.resource-title').css("width",($(window).width() - 366) + 'px');
$('.resource-container').css("height",($(window).height() - 250) + 'px');
$('.resource-content ul').css("height",($(window).height() - 292) + 'px');
$('.resource-iframe').css("width",($(window).width() - 306) + 'px');
$('.resource-iframe').css("height",($(window).height() - 275) + 'px');
}
function resourcego(id){
$.ajax({
url: "http://glynit.co.cc/resource.php?id=" + id + "&item=list&part=name",
cache: false,
success: function(data){
name = data;
$.ajax({
url: "http://glynit.co.cc/resource.php?id=" + id + "&item=list&part=list",
cache: false,
success: function(data){
list = data;
$('.resource-toolbar').html('<div id="resource-title" class="resource-title">' + name + '</div>');
$('.resource-content').html('<div class="resource-list"><ul>' + list + '</ul></div>');
dimensions();
}
});
}
});
}
function viewresource(id,ref){
$.ajax({
url: "http://glynit.co.cc/resource.php?id=" + id + "&content=name",
cache: false,
success: function(data){
name = data;
$('.resource-toolbar').html('<div id="resource-back" class="resource-back" onclick="resourcego(' + ref + ');">Back</div><div id="resource-title" class="resource-title">' + name + '</div><div id="resource-print" class="resource-print">Print</div>');
$('.resource-content').html('<iframe id="resource-iframe" class="resource-iframe" src="http://glynit.co.cc/resource.php?id=' + id + '&content=content"></iframe>');
dimensions();
}
});
}
$(window).load(function() {dimensions();});
$(window).resize(function() {dimensions();});
The webiste is http://www.glynit.co.cc/ and the login is guest:guest And the page is the resources page and it is the links on the left of that page that do not work. How come the below code is not woring for me? when someone comments on my facebook comments plugin I want to get an email. This is what i have Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div id="fb-root"></div>
<script> window.fbAsyncInit = function() {
FB.init({
appId : '220041184732123', // App ID
channelUrl : '//http://www.corkdiscos.com/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.subscribe('comment.create', function(response){
// Here you need to do a call to some service/script/application
// to notify your administrator about new comment.
// I'll use jQuery ajax to call server-side script to illustrate the flow
$.post('mail.php', {
"action": "comment created",
"url_of_page_comment_leaved_on": response.href,
"id_of_comment_object": response.commentID
});
});
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
<div class="fb-comments" notify="true" data-href="http://www.corkdiscos.com/testimonials.html" data-num-posts="30" data-width="544"></div>
</body>
</html>
I then have this php code to send me a mail in a mail.php file PHP Code: <?php $admin_email = 'corkdjs@gmail.com'; $commentID = $_REQUEST['id_of_comment_object']; $page_href = $_REQUEST['url_of_page_comment_leaved_on']; $message = "hello"; mail($admin_email, You have a new comment", $message); ?> what could be wrong and is there anyone that knows how to fix this to make it work? Whenever I update my website, sometimes I notice my browser shows the old version or a modification in the browser after I upload to the ftp. Whats the best way to prevent this from happening? Preferably without noticing it happening. Thanks. Resolved
Hey guys, hope this is in the right place... Basically I was wondering if anyone could point me in the right direction or to an example of where a div slides onto the screen as soon as a page loads. My client wants something like this: http://www.nytimes.com/packages/html...ion/index.html (without parallax or the fade-in) but I refuse to do it in Flash, obviously. I have this gallery he http://juicenothing.com/freelance/gallery.php The div id is wrap. Is this possible? I can't find a good example anywhere!! Thanks (i'm a bit of a n00b, so pls go easy on me ) I have an issue with my javascript files loading (i.e. checking the source code of the page after having loaded yields working links to my external files and the JQuery loading for sure after running some test), but calling a function from my javascript file works in no way shape or form. For example, one test I was running was: From my .js file Code: $("p").click( function() { $(this).hide(); } )
This will work on a standalone page when I test it (not loading from external .js file), but not in the page I need to get my scripts running on. Hi Currently my website waits till all images are loaded up first: Code:
$(document).ready(function(){
* LOAD UP ALL THEM IMAGES FIRST... *
$(window).load(function() {
letsLoad();
fadingEffects();
});
However my website now has over 200 images on the website and now its taking way too long to load the images. My question's a 1. Is it possible to either load the site when its around 20% or even 50% loaded? OR 2. If its possible to give certain images a tag?? and when these images are loaded then the site loads? Heres a link to the site - must warn you need broadband and a high speed connection takes way to long to load. Takes me around 1minute 30seconds http://www.arcvizio.co.uk/ovoma/2/index.html Thanks I am working with using Javascript to create a page that scales and keeps its aspect ratio (much like a Flash page would). After a lot of trial and error, I have a prototype up with a couple of problems. It loads correctly once in I.E. Reloading, or opening a new browser, will also load the page correctly. But visiting a different page and coming back causes the width attributes to break. This happens with the non-aspect-ratio version in pure HTML also, but I was hoping that this problem would be solved by establishing values based on javascript variables. As for Firefox, the problem is more or less exactly the opposite. The page loads up all wonky the first time, and a reload or resize will fix it for every time afterward. To see what I'm talking about, you can take a look at http://www.jonesmfgmusic.com/testpag...lem_width.html For the HTML only version, see http://www.jonesmfgmusic.com/testpag...blem_html.html I'm guessing this is something to do with the order in which the data is loaded, so that once the information is all cached, it stops functioning in IE, and starts functioning in FF... can anyone confirm whether I'm on the right track with that, or how to fix it if I am? I'm most concerned by the fact that the width attribute is behaving as it does in IE. That looks like some kind of Microsoft bug to me, and I need a way around it. As for Firefox, I am guessing if I can just get it to load all of the correct information ahead of time, the page should come up correctly, but I just can't think how to do that. I have up to 3 dropdown lists that I can select using javascript functions. Depending on what I select in the first dropdown loads what is in the 2nd drop down and so on. i want to be able to select the first drop down and it skips the 2nd one and displays the 3rd one. How do I do that with the current functions I am using. Code: function cboSourceChange(){
var iSource = document.frmHarvestForm.cboSource.options[document.frmHarvestForm.cboSource.selectedIndex].value;
var iSub1 = document.frmHarvestForm.cboSub1.options[document.frmHarvestForm.cboSub1.selectedIndex].value;
var iSub2 = document.frmHarvestForm.cboSub2.options[document.frmHarvestForm.cboSub2.selectedIndex].value;
var dtBeginDate = document.frmHarvestForm.txtBeginDate.value;
var dtEndDate = document.frmHarvestForm.txtEndDate.value;
var iIndCert = document.frmHarvestForm.cboIndCert.value;
location.replace("HarvestBoard.asp?cboSource="+iSource+"&cboSub1=0&cboSub2=0&cboSub3=0&txtBeginDate="+dtBeginDate+"&txtEndDate="+dtEndDate+"&cboIndCert="+iIndCert);
}
function cboSub1Change(){
var iSource = document.frmHarvestForm.cboSource.options[document.frmHarvestForm.cboSource.selectedIndex].value;
var iSub1 = document.frmHarvestForm.cboSub1.options[document.frmHarvestForm.cboSub1.selectedIndex].value;
var dtBeginDate = document.frmHarvestForm.txtBeginDate.value;
var dtEndDate = document.frmHarvestForm.txtEndDate.value;
var iIndCert = document.frmHarvestForm.cboIndCert.value;
location.replace("HarvestBoard.asp?cboSource="+iSource+"&cboSub1="+iSub1+"&cboSub2=0&cboSub3=0&txtBeginDate="+dtBeginDate+"&txtEndDate="+dtEndDate+"&cboIndCert="+iIndCert);
}
function cboSub2Change(){
var iSource = document.frmHarvestForm.cboSource.options[document.frmHarvestForm.cboSource.selectedIndex].value;
var iSub1 = document.frmHarvestForm.cboSub1.options[document.frmHarvestForm.cboSub1.selectedIndex].value;
var iSub2 = document.frmHarvestForm.cboSub2.options[document.frmHarvestForm.cboSub2.selectedIndex].value;
var dtBeginDate = document.frmHarvestForm.txtBeginDate.value;
var dtEndDate = document.frmHarvestForm.txtEndDate.value;
var iIndCert = document.frmHarvestForm.cboIndCert.value;
location.replace("HarvestBoard.asp?cboSource="+iSource+"&cboSub1="+iSub1+"&cboSub2="+iSub2+"&cboSub3=0&txtBeginDate="+dtBeginDate+"&txtEndDate="+dtEndDate+"&cboIndCert="+iIndCert);
}
function cboSub3Change(){
var iSource = document.frmHarvestForm.cboSource.options[document.frmHarvestForm.cboSource.selectedIndex].value;
var iSub1 = document.frmHarvestForm.cboSub1.options[document.frmHarvestForm.cboSub1.selectedIndex].value;
var iSub2 = document.frmHarvestForm.cboSub2.options[document.frmHarvestForm.cboSub2.selectedIndex].value;
var iSub3 = document.frmHarvestForm.cboSub3.options[document.frmHarvestForm.cboSub3.selectedIndex].value;
var dtBeginDate = document.frmHarvestForm.txtBeginDate.value;
var dtEndDate = document.frmHarvestForm.txtEndDate.value;
var iIndCert = document.frmHarvestForm.cboIndCert.value;
location.replace("HarvestBoard.asp?cboSource="+iSource+"&cboSub1="+iSub1+"&cboSub2="+iSub2+"&cboSub3="+iSub3+"&txtBeginDate="+dtBeginDate+"&txtEndDate="+dtEndDate+"&cboIndCert="+iIndCert);
}
I am working on a demo for a movie site, and 90% of everything seems cool. Here I am doing php.flushes, .htaccess caching and using PNGs to help with performance. I might start using another sub site to grab all the scripting from to increase performance, but it seems a tad bit slow at the moment. - There are a few issues one being when you click on X-Men and look at the gallery the images seem to flicker sometimes going from image to image. I am using a fade script I found and then using setTimeout() to give the fade script time to do its thing then call for a new image. Code: FadeOpacity(main_img_id, 100, 0, 600, 12);
setTimeout("updateGallery('"+target_arr+"','"+main_img_id+"')", 600);
- Also in the same area I am checking clientHeight after each image modifying the marginTop. The thing with that is the clientHeight only seems to update after the second function call. I tried using a setTimeout() but that didn't nothing. Code: document.getElementById(main_img_id).src = "assets/movie_images/"+arr[i]; img_height = document.getElementById(main_img_id).clientHeight; Any suggestions with improving image load performance, the clientHeight issue or the image flickering issue would be appreciated. Does anyone know what's wrong with this code because when the page loads, the link is not being hidden Code: window.onload = setTarget;
function setTarget()
{
var theLinks = document.getElementsByTagName('a');
for(var i = 0; i < theLinks.length; i++)
{
if(theLinks[i].getAttribute('href') == '/subjects/new')
{
theLinks[i].style.display = "none";
}
}
}
So I am having a bit of a weird issue. I am trying to make a webpage compatible with IE8 and it's quite painful. The page works great in firefox and chrome, but in IE8 it only loads some of the time. About 60% of the time the page loads and executes properly, but the other 40% of the time it looks like it hits an error somewhere and doesn't finish loading. I have tried using the IE error console / debugger (by pressing F12), but I can't seem to find any information about why the page isn't loading properly. The page that I am working on is located he http://tinyurl.com/89anxbd The page uses an SVG based UI, and in order to make this compatible with <= IE8 I am using SVGWeb to render the SVG code as flash for IE8 users. For Firefox, and other browser-compliant users the SVG code is rendered natively in the browser. Here is an image of what the page should look like (when it does load correctly in IE8): Here is an image of what the page looks like when it fails to load: It is like the page defines the circle elements for the various cities, but has not yet rendered the provinces (which are defined above the cities in the HTML body), but I'm not 100% sure on this. Any help is much appreciated! I want to place a Logo/ad in front of content, there are ways to do it but the problem with them is that they use JS show/hide method. What happens is that the content doesn't load while user is watching the logo/ad, which results as double waiting for the user first for the logo/ad and then the actual flash content loading. So I was thinking if there is a way that a logo/ad could be displayed and at the same time flash content continues to load at the back end. *I didn't ask for a loader that continues to appear until at the back end flash content is done loading, because I found only one script that was able to do so using Jquery but it was designed to work with fixed pixels while my flash content is based on %ages* Live Demo: http://bloghutsbeta.blogspot.com/201...ent-issue.html Note: Sorry for providing blogspot link but JsFiddle is not an option for a person living in Afghanistan with 5KBps but still if you feel that I am missing something please let me know I will edit it and try my best to provide as relevant question as possible ^^ Relevant Markup: Button for lightbox or Modal Window Code: <a class="poplight" href="#?w=100%" rel="popup_name"><img alt="play game" class="happybutton" onmouseout="this.style.opacity=0.8;this.filters.alpha.opacity=80" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" src="http://farm5.static.flickr.com/4084/4998558471_27e3985c16_m.jpg" style="opacity: 0.8;" /></a> Code: <div class="popup_block" id="popup_name">
<script type="text/javascript">
$(document).ready(function(){
$('a.poplight[href^=#]').click(function() {
$('<iframe/>')
.attr('frameborder', 0)
.attr('allowTransparency', false)
.attr('scrolling', 'no')
.attr('width', '100%')
.attr('height', '98%')
.attr('src', 'http://files.cryoffalcon.com/bhgames/dressup/Celebrities/Wizard%20Fashion.html')
.appendTo('#popup_name');
});
});
</script>
</div>
CSS: Code: #fade {
display: none;
background: #000;
position: fixed; left: 0; top: 0;
width: 100%; height: 100%;
opacity: .80;
z-index: 9999999;
}
.popup_block{
width: 98.95%; height: 98.2%;
display: none;
padding: 0px;
line-height:1em;
font-size: 1em;
position: fixed;
top: 0px; left: 0px;
z-index: 999999999;
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.close {
height:20px;
float: right;
margin: 0 2px 0 0;
}
JS (actually Jquery) Code: <script type="text/javascript">
$(document).ready(function(){
//When you click on a link with class of poplight and the href starts with a #
$('a.poplight[href^=#]').click(function() {
var popID = $(this).attr('rel'); //Get Popup Name
var popURL = $(this).attr('href'); //Get Popup href to define size
//Pull Query & Variables from href URL
var query= popURL.split('?');
var dim= query[1].split('&');
var popWidth = dim[0].split('=')[1]; //Gets the first query string value
//Fade in the Popup and add close button
$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" title="Close It" class="close"><img src="http://files.cryoffalcon.com/bloghuts/images/close%20button.png" alt="Close" width="20" height="20" /></a>');
//Define margin for center alignment (vertical + horizontal) - we add 80 to the height/width to accomodate for the padding + border width defined in the css
var popMargTop = ($('#' + popID).height() + 0) / 0;
var popMargLeft = ($('#' + popID).width() + 0) / 0;
//Apply Margin to Popup
$('#' + popID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
//Fade in Background
$('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer
return false;
});
//Close Popups and Fade Layer
$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove();
}); //fade them both out
return false;
});
});
</script>
Alright, so I'm working on a script, and I'm simply using the following code: document.getElementById("element").onclick = alert("hello"); When I load the page, the alert fires instantaneously. I'm completely stumped. I've checked everything in my not too extensive Javascript file, and it looks fine. What common errors could cause this? Hello I am using PC as my tv, I watch tv on media player live channels I want some codes that would automatically double click on click where ever I want like may be 10 seconds after page loads so it would full screen the channel so I don't have to please help thank you so much. may be something like this PHP Code: <script language="javascript> window.setTimeout("autoClick()", 150); function autoClick() { // do whatever } </script> |
|||||||