JavaScript - Php / Ajax / Js Refresh Two Divs With One Onclick

I'm using meta refresh to refresh my web page. I have a small compose email window that appears via ajax when the user clicks on a name.

Is there a way I can disable the screen refresh in my ajax code while they are composing their message?

hello, can anyone help me with a javascript-php-ajax problem?

I have created a table with checkboxes and whenever an ajax function is called to refresh, the checkboxes that were highlighted and checked get reset, here is my javascript for the check function:

$(document).ready(function()
{
$("#checkall").live('click',function(event){
$('input:checkbox:not(#checkall)').attr('checked',this.checked);

//To Highlight
if ($(this).attr("checked") == true)
{

//$(this).parents('table:eq(0)').find('tr:not(#chkrow)').css("background-color","#FF3700");
$("#policy").find('tr:not(#chkrow)').css("background-color","#FC9A01");
}
else
{

//$(this).parents('table:eq(0)').find('tr:not(#chkrow)').css("background-color","#fff");
$("#policy").find('tr:not(#chkrow)').css("background-color","#FFF");
$("#policy").find('tr.alt:not(#chkrow)').css("background-color","#EAF2D3");
}

});

$('input:checkbox:not(#checkall)').live('click',function(event)
{
if($("#checkall").attr('checked') == true && this.checked == false)
{
$("#checkall").attr('checked',false);
$(this).closest('tr').css("background-color","#ffffff");
}
if(this.checked == true)
{
$(this).closest('tr').css("background-color","#FC9A01");
CheckSelectAll();
}
if(this.checked == false)
{
$(this).closest('tr').css("background-color","#ffffff");
$(this).closest('tr.alt').css("background-color","#EAF2D3");
}
});

function CheckSelectAll()
{
var flag = true;
$('input:checkbox:not(#checkall)').each(function() {
if(this.checked == false)
flag = false;
});
$("#checkall").attr('checked',flag);
}

});

I'm pretty new to Javascript and just started with some OOP concepts, so this might be an obvious one and I apologize if the question is much longer than it should be...

Basically I am trying to create a reusable class object with several internal functions, that is completely abstracted, meaning the class object itself should never have to reference the global declarations or window object. This class should be aware of itself at any point in the execution of it's own functions, and that is what I'm having trouble with at the moment.

What I'm trying to do is create reusable javascript "Apps" for my HTML web application, where multiple instances can be instantiated and used independently from one another.

My main problem is "this" loses context in the Ajax callback and onclick handlers. I'm not sure how to persist the context of "this", or at least keep a reference to prototype instance itself.

Let's set up a simple class called "App" to demonstrate what I mean...

Code:

var myApp = new App("MyFirstApp");

function App(argName) {
    this.name = argName;
    this.GetDirectory("C:\Program Files");
}

App.prototype.GetDirectory = function(argPath) {
    // "this" equals the App object instance (good!), meaning this.name should equal "MyFirstApp"
    Ajax.GetDirectory(argPath, this.GetDirectoryCallback, this.GetDirectoryTimeout, this.GetDirectoryError);
}

App.prototype.GetDirectoryCallback = function(argFilePaths) {
    // "this" equals the "window" object (bad!), meaning this.name should equal a null reference
    // argFilePaths contains a string of file paths (delimited using ;) returned by the server
    var mFilePaths = split(argFilePaths, ";");
    // for each file path, add a div to the document body containing that file path, with an onclick handler
    for (var i in mFilePaths) {
        var mFilePath = mFilePaths[i];
        var mFilePathDiv = document.createElement("div");
        mFilePathDiv.innerHTML = mFilePath;
        mFilePathDiv.setAttribute("onclick", "javascript:this.FilePathDivClickHandler();return false;");
        document.getElementById("body").appendChild(mFilePathDiv);
    }
}

App.prototype.FilePathDivClickHandler = function() {
    // I need a reference to the App object instance here, but I'm not sure where to grab it...
    // what I want to do is call GetDirectory again, referencing the div's innerHTML which contains another file path, like this:
    this.GetDirectory(event.target.innerHTML);
}

The onclick handler using "this" is obviously not going to work because "this" is a reference to the "window" object which does not have a function called FilePathDivClickHandler(). So what I can do is nest the GetDirectoryCallback() function inside the GetDirectory() function so that GetDirectoryCallback() can reference the variables in the outer function (GetDirectory).

Code:

App.prototype.GetDirectory = function(argPath) {
    // "this" equals the App object instance (good!), meaning this.name should equal "MyFirstApp"
    // "this" will still lose context inside the callback, so we can set up a variable called "instance" that the callback can reference
    var instance = this;
    Ajax.GetDirectory(argPath, GetDirectoryCallback, GetDirectoryTimeout, GetDirectoryError);
    function GetDirectoryCallback(argFilePaths) {
        // "this" equals the window object (bad!), meaning this.name should equal a null reference
        // "instance" equals the App object instance (good!), meaning instance.name should equal "MyFirstApp"
        // argFilePaths contains a string of file paths (delimited using ;) returned by the server
        var mFilePaths = split(argFilePaths, ";");
        // for each file path, add a div to the document body containing that file path, with an onclick handler
        for (var i in mFilePaths) {
            var mFilePath = mFilePaths[i];
            var mFilePathDiv = document.createElement("div");
            mFilePathDiv.innerHTML = mFilePath;
            mFilePathDiv.setAttribute("onclick", "javascript:instance.FilePathDivClickHandler();return false;");
            document.getElementById("body").appendChild(mFilePathDiv);
        }
    }
}

Even though we have persisted the App object instance through the use of the "instance" variable in the outer function, the onclick event handler still does not work; when it fires, "instance" is an unknown object.

Would placing the FilePathDivClickHandler() function inside the GetDirectory() function, much like what was done with the callback, allow me to use "instance" correctly for the onclick handler?

I would like onclick to only work from div id="telli", but instead it works on all the divs.. I've tried a lot of different things, nothing has worked so maybe somebody can help me. I would like the div telli to open up a popup layer onclick. Please help me.. I am a newbie to Javascript

HTML sheet:
<body>

<div id="main">
<div id="header">
<div id="content">
<div id="sidebar">
<div id="telli</div>
<div id="footer">

</div>
</div>
</div>
</div>
</div>


</body>


CSS sheet:
html {
background: url(back.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position:relative;
}

#main {
background-image:url(ground.png);
position:absolute;
margin-left:auto;
margin-right:auto;
width:1300px;
height:1200px;

}

#header {
background-image:url(header.png);
position:absolute;
width:1300px;
height:1200px;
}

#content {
background-image:url(content.png);
position:absolute;
width:1300px;
height:1200px;
}

#telli {
background-image:url(telli.png);
position:absolute;
width:1300px;
height:1200px;
}

#sidebar {
background-image:url(sidebar.png);
position:absolute;
width:1300px;
height:1200px;
}

#footer {
background-image:url(footer.png);
position:absolute;
width:1300px;
height:1200px;
}

Hi!

I'm no JavaScript expert so wonder if you could help?

I have a page with four divs, and would like to change the content in each div by clicking on a link under each div. Can this be done with JavaScript?

I've searched everywhere for the last three hours and cannot find any 'readymade' code. Can anyone help me or point me in the right direction?

Any help will be really welcome! Thank you!

I have a page where it has anchors going to different parts of the page and i have a list of links at the top to go to each anchor. when you click on the links to each part of the page it shows the "back to top, next, back" buttons. I have 7 different links, so i need to have this happen 7 times, I only want the "back to top, next, and back" buttons to be shown when the user clicks on the link to that specific anchor, or the next/back button to that anchor from another one. I have been doing this with the div hide/show javascript however it makes me have to change sooo much information to do this.. There has got to be an easier way.. It would take me forever to finish doing this to all of them, i need a better way to achieve this. There's too much code that its confusing.

this is my current javascript:

var ie = (document.all) ? true : false;
function hideID(objID){
var element = (ie) ? document.all(objID) : document.getElementById(objID);
element.style.display="none"
}
function showID(objID){
var element = (ie) ? document.all(objID) : document.getElementById(objID);
element.style.display="block"
}

And this is just one of the links:

<li><a onclick="showID('1939top'); showID('1939next');hideID('1940top'); hideID('1941top'); hideID('1942top'); hideID('1943top'); hideID('1944top'); hideID('1945top');" href="#1939">1939</a></li>

And this is one of the back to top/next button codes:

<a href="#1940"><span id="1939next" class="next-back" onclick="hideID('1939next'); hideID('1939top')"><div class="arrow-down"></div></span></span></a>
<a href="#top"><span id="1939top" class="timeline-b2top" onclick="hideID('1939top')">Top</span></a><a name="1939" id="1939"></a>


This code has always been a huge problem for me, not only does it take forever to change the effects and all, but it is VERY messy and I really need some help on how to code it lol. Thanks so much.

Hello Guys,

Seems im moving on from the css forums to java (im scared). I am a keen learner but an absolute beginner to java.

What i need to be able to do is..

When a student clicks on a link in the main menu e.g number I need a something that can load the following two divs.

#contentwindow
#three

I already have jquery running on the page and all css is embeded for now if that is helpful.

http://www.bushcottages.co.uk/new.htm

Thanks your help is supremely appreciated
Peter

The very basic onclick code I threw together:
Code:

function descw()
{
	document.getElementById("desc").style.display="block";

}

function descc()

{
	document.getElementById("desc").style.display="none";
}

The div that needs a description...
Code:

<div class="select"><img src="image.jpg" onclick="descw()"></div>

..and the actual description div.
Code:

<div id="desc">
<img  src="close.jpg" onclick="descc">
<p>Description</p>
</div>

This works, but I have a whole class of divs named select that need their own individual description divs. Id method is okay for one div apparently, but if I click on others it loads the first description div. What do I use instead? I tried getElementsByName and Atrribute and got an error.

I'm working on my portfolio and I want to get content to load into my "middle" div upon clicking on the buttons in the sidebar.

I'm able to get it to load, but I can't figure out how to get the CSS to load. I keep getting errors in the code. Here is the code I'm using: http://www.dynamicdrive.com/dynamici...jaxcontent.htm

Here is what I've got:

Code:

<img src="images/rule.png" id="rule" width="1" height="1" />
  		<a href="javascript:ajaxpage('about.html', 'middle');"><img src="images/about.png" width="195" height="101" alt="about" /></a>
      <img src="images/rule.png" id="sidebar_rule" width="194" height="1" />
  		<a href="javascript:ajaxpage('work.html', 'middle');"><img src="images/work.png" width="195" height="101" alt="work" />
      <img src="images/rule.png" id="sidebar_rule" width="194" height="1" />
		<img src="images/resume.png" width="195" height="101" alt="resume" />
      <img src="images/rule.png" id="sidebar_rule" width="194" height="1" />
		<a href="javascript:ajaxpage('contact.html', 'middle'); loadobjs('contact.css', 'feature.js')"><img src="images/contact.png" width="195" height="101" alt="contact" /></a> 
  <img src="images/rule.png" id="sidebar_rule" width="194" height="1" /></div>

I'm working on the contact page right now, just trying to figure out how to get it to load properly. Here is a screenshot of what it's supposed to look like:

https://skitch.com/jillianadriana/r7...itled-document

I can't get it to load with the custom CSS.

Hi,

I have the below code:
Code:

<script type="text/javascript">
function loadQuickMessageCheck(File,ID){

var xmlhttp; 

if (window.XMLHttpRequest)  {
  xmlhttp=new XMLHttpRequest();
  }
else {
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

xmlhttp.onreadystatechange=function(){
  if (xmlhttp.readyState==4 && xmlhttp.status==200){
    document.getElementById(ID).innerHTML=xmlhttp.responseText;
	 eucalyptus = setInterval(function(){loadQuickMessageCheck(File,ID)},20000);
    }
  }

xmlhttp.open("POST",File,true);
xmlhttp.send();
}
</script>

But I am overloading the server and crashing it. I've googled the issue and have found people with similar problems who talk about the need to cancel the last refresh request before they send the next refresh.

I even found this nice piece of code which worked for someone else.
Quote:

try{window.clearTimeout(tRefresh)} catch(err) {}
tRefresh = setInterval(setContext, varInterval*60*1000);
}
I am not sure if this is the solution that I am looking for but if it is all my attempts at applying this code has been a bit of a disaster.

I'm currently working on a project and I am doing a bunch of image switching.

I'm having a problem with the following...

I have seven medium image objects and one small one. One is at the top and the other 7 are below. When one of the 7 is clicked, it then becomes the one up top and the one up top then takes the place of the image clicked. This needs to be able to happen no matter which of the seven i click.

Also when you click one of the seven it runs a script to change 9 other images in the center of the page. this isnt too important because i have it working already.

What i have is, each of the seven images run their function that changes the 9 center images and then it runs another function.

What i need is for that function to determine which company for example(shaws, lowes, target) the top image belongs to and replace the image that was clicked with the top one. But i also need to replace the NAME="" and ONCLICK="function()" with the proper ones for the original company up top.

Please if you can understand what im trying to do let me know, if you need further clarification i can do so. i can draw a picture of what im trying to do or the layout if needed but i cant necessarily show anyone the project due to a non-disclosure.

Hi,

I am hoping I just need to be pointed in the right direction with this.

I have Page1.

When Page1 body onloads it uses Ajax to call PartA

Within PartA I have a message board so members can write messages which will be sent to my database in PartA[1] and immediately posted for view on to PartA[2]. As I want to have my request to the server updating regularly I want to have PartA[2] on a timed loop to refresh - I do not need the content of PartA[1] to refresh.

So the order of events would look like this:
Page1
|
onload call
|
v
PartA
/ \
V V
PartA[1] PartA[2]
(loads once) (constantly refreshes)

What I am not sure about is that I have <body> and <head> attributes in Page1 only. I have already used my body onload to call PartA (and can't use it to call PartA[2] before PartA has loaded anyway).

I do not want the user to have to click a button or do anything to call up PartA[2].

So my question is how would I get PartA[2] to automatically load within PartA?

I hope I have made this clear, but if I haven't let me know and I will try again.

Is it possible disable an onclick after clicking it and then enable it from another onclick by id

Code:

<img id="one" href="images/homepage/sliders/bonus_button.jpg" style="position:relative; top:30px; left:50px; height:30px; width:70px; float:left;">

This code runs when it is clicked:

Code:

$("#one").click(function() {
			
				runEffectB();
			
			
			
			return false;
		});

What I would like to happen is for either runEffectB() to not run if it was just run or to disable the #one.click once it has run.
I am assuming I will be able to re-enable it from another onclick running a similar function.
This is jquery and jquery ui if that helps.
Any ideas much appreciated.

Hi

I need some help. I have a link that opens in a new window which allows the user to perform an update to a record. On submit I want it to obviously update (which it does), then close the page and update the main page (where we opened the link from initially).

I seem to have this working using an function which is called off the submit button using onclick........the function is:

<script type="text/javascript">
function windowclose() {
window.opener.location.href = window.opener.location.href;
window.close()
}
</script>


Now, the update happens as I say, and the page closes, and the main page looks like it refreshes but the update is not reflected....if I hit f5 the update appears. Is it to do with the speed of writing to the database and updating the screen? I have also been playing around with trying to add a settimeout to add a delay between update and close/refresh but couldnt get it to work.

Any help would be appreciated.

Cheers!

Here is my calander script

PHP Code:
<script src="http://www.runningprofiles.com/jquery.js" type="text/javascript"></script>
<link href="http://www.runningprofiles.com/members/diary/facebox/facebox.css" media="screen" rel="stylesheet" type="text/css">
<script src="http://www.runningprofiles.com/members/diary/facebox/facebox.js" type="text/javascript"></script>   
<script>
jQuery(document).ready(function($) {
  $('a[rel*=facebox]').facebox()
}) </script>




<?php


// there is NO NEED to edit ANY of this code

$ev_dat = array();
for ($i=0;$i<32;$i++) {
    $ev_dat[$i]=0;
}

$now = date("Y-m-d", time());
list($ty, $tm, $td) = explode('-',$now); // ty=thisyear, etc. used for highlighting 'today'

include("cal_parms.php"); // assorted configuration variables
include($dat_names); // retrieved from cal_parms.php as a 'language' file

if (!isset($_GET['m'])) { 
    $m = date("m",mktime()); 
} else {
    $m = $_GET['m'];
}
if (!isset($_GET['y'])) {
    $y = date("Y",mktime());
} else {
    $y = $_GET['y'];
}
   
/*== get what weekday the first is on ==*/ 
$tmpd = getdate(mktime(0,0,0,$m,1,$y)); 
$month = $tmpd["month"]; 
$firstwday= $tmpd["wday"]; 
if ($firstDayIsMonday == 1) {
    if ($firstwday == 0) {
        $firstwday = 6;
    } else {
        $firstwday--;
    }
}
$lastday = mk_getLastDayofMonth($m,$y); 

/*== get the last day of the month ==*/ 
function mk_getLastDayofMonth($mon,$year) 
{
    for ($tday=28; $tday <= 31; $tday++) 
    {
        $tdate = getdate(mktime(0,0,0,$mon,$tday,$year)); 
        if ($tdate["mon"] != $mon) 
        { 
            break;
        }
    }
    $tday--; 
    return $tday; 
}
  
// compute range of dates for this month to match dates in database in the format yyyy-mm-dd
if (strlen($m)<2) {
    $q="0";
    $q.=$m;
}
else {
    $q = $m;
}    
$dats_beg = $y. "-". $q. "-01";
$dats_en = $y. "-". $q. "-". $lastday;
  
// open db conn and select all records where date is between $dats_beg and $dats_en
include("cal_db_conn.php");
mysql_connect($db_host, $db_login, $db_pass) or die ("Can't connect!"); 
mysql_select_db($db_name) or die ("Can't open database!"); 
$query = "SELECT * FROM $db_table WHERE (ev_dat>='$dats_beg') AND (ev_dat<='$dats_en') "; 
  
$result = mysql_db_query($db_name, $query); 
// any matches?
if ($result)
{
   
   
    // handle the matches and pass relevant info to arrays
    while ($myrow = mysql_fetch_array($result)) 
    { 
        $found = $myrow['ev_dat'];
        $pieces = explode("-", $found);
        $dd = intval($pieces[2]);
        $ev_dat[$dd] = $myrow['id'];
    }
}
?>
<table cellpadding="1" cellspacing="1" border="0" bgcolor="#<? echo $bg_edge; ?>">
<tr><td colspan="7" bgcolor="#<? echo $bg_top; ?>">
<table cellpadding="1" cellspacing="1" border="0" width="100%">
<tr bgcolor="#<? echo $bg_top; ?>"><th width="20" style="<?php echo $hcell; ?>"><a href="<? echo  $username; ?>&m=<?=(($m-1)<1) ? 12 : $m-1 ?>&amp;y=<?=(($m-1)<1) ? $y-1 : $y ?>"><img src='http://www.runningprofiles.com/calendar/images/prev.gif' height='18' width='18' alt='' border='0' /></a></th>
<th style="<?php echo $hcell; ?>">
<?php
echo  "<a href='../members/diary/show-month.php?mon=". $m. "&amp;yr=". $y. "'rel=\"facebox\">";
echo "<span style='text-decoration:none'>". $mo[intval($m)]. " ". $y. "</span></a>";
?>
</th>
<th width="20" style="<? echo $hcell; ?>"><a href="<? echo  $username; ?>&m=<?=(($m+1)>12) ? 1 : $m+1 ?>&amp;y=<?=(($m+1)>12) ? $y+1 : $y ?>"><img src='http://www.runningprofiles.com/calendar/images/next.gif' height='18' width='18' border='0' alt='' /></a></th>
</tr>
</table>
</td></tr>
<tr bgcolor="#<? echo $bg_top; ?>">
<th width="20" style="<?php echo $hcell; ?>"><? echo $da[1]; ?></th>
<th width="20" style="<?php echo $hcell; ?>"><? echo $da[2]; ?></th>
<th width="20" style="<?php echo $hcell; ?>"><? echo $da[3]; ?></th>
<th width="20" style="<?php echo $hcell; ?>"><? echo $da[4]; ?></th>
<th width="20" style="<?php echo $hcell; ?>"><? echo $da[5]; ?></th>
<th width="20" style="<?php echo $hcell; ?>"><? echo $da[6]; ?></th>
<th width="20" style="<?php echo $hcell; ?>"><? echo $da[7]; ?></th>
</tr>
   
<? 
$d = 1;
$wday = $firstwday;
$firstweek = true;
/*== loop through all the days of the month ==*/
while ( $d <= $lastday)
{
    /*== set up blank days for first week ==*/
    if ($firstweek)
    {
        if ($wday!=0) {     
            echo "<tr bgcolor='#". $bg_tabl. "'>\n";
            for ($i=1; $i<=$firstwday; $i++) {
                 echo "<td style='". $tcell. "' bgcolor='#". $bg_fill. "'>&nbsp;</td>\n";
            }
        }
        /*== Sunday start week with <tr> ==*/
        else {
            echo "<tr bgcolor='#". $bg_tabl. "'>\n";
        }
        $firstweek = false;
    }
    /*== check for event ==*/   
    echo "<td style='". $tcell. "' ";
    // is this day 'today' AND there's no event today
    if (($ty==$y) && ($tm==$m) && ($td == $d) && (!$ev_dat[$d])) {
        echo "bgcolor='#". $bg_now. "'>". $d;
    }
    elseif ($ev_dat[$d]) {
        // get what's happening that day and use as 'mouseOver' for the link
        $query = "SELECT * FROM $db_table WHERE id=$ev_dat[$d] ";
        $result = mysql_query($query);
        $ev = mysql_fetch_array($result);
        $titl = $ev['ev_title'];
        echo "bgcolor='#". $bg_act. "'>";
        $url = "../members/diary/show.php?event=". $ev_dat[$d]. "&amp;sho=". $win_sho;
     
             echo "<a href=' $url' rel=\"facebox\" title=\"". $titl. "\">". $d. "</a>";
       
    }
    else {
        echo "bgcolor='#". $bg_days. "'>". $d;
    }
    echo "</td>\n";

    /*== Saturday end week with </tr> ==*/
    if ($wday==6) {
        echo "</tr>\n";
    }
    $wday++;
    $wday = $wday % 7;
    if (($wday==0) AND ($d!=$lastday)){ echo "<tr bgcolor='#". $bg_tabl. "'>\n"; }
        $d++;
    }
    // and close off the table
    if (($wday!=7) AND ($wday!=0)) {
        for ($i=$wday; $i<=6; $i++) {
            echo "<td style='". $tcell. "' bgcolor='#". $bg_fill. "'>&nbsp;</td>\n";
        }
        echo "</tr>";
    }
echo "\n</table>";
include("win_open.php");


?>

what would be the best way to make it so that if you wish to chnage the month it changed the month on page rather than refresh the whole page its on?