JavaScript - Dynamic Datagrid Using Ajax & Javascript

I'm writing a web app and so far:

- the user enters some information on the web page
- user data is submitted to a PHP script (using AJAX, so w/o a page refresh) which processes the data and generates a list of items that need to be returned to the user

Now, I need to return the data -- preferably in the form of a list, where each returned item has a check box (so the user can choose which items in this list the subsequent operations will affect).

However, can a PHP script effectively add/remove contents from such a checklist, or would this be something done better through Javascript only? For example: this, I think, or something similar.

Luckily the PHP script that processes the data is short at this point, so I'd like to know whether I should rewrite it in Javascript (assuming Javascript can deal with REST well) to avoid a hassle.

I have to display a div before firing a sync ajax in javascript
div is getting displayed in firefox but not in IE and chrome.

I need to basically display a download bar to indicate the user that the request is in progress

All,
I have some code on my page which changes images in a div without reloading the page. This works great, however my problem comes with I go through a couple images and the actual URL is still on the original image. Is there any way to change the URL when I click the image as well??

Thanks in advance.

Someone built this application for me. It contained a web page, the user clicked on the detail button to view a detail page, and then clicked on an update button on the detail page to update the database. This type of navigation was unappealing to me. I prefer a free floating form that contains a list, then by clicking on expand, you get to see detail on the specific item, and then click update all within the same free floating form. Is this possible with javascript and ajax? If so, can anyone provide examples? Thanks.

Hello,

I am using AJAX and got the output from AJAX like the below line

Ajax function

Code:

if (http_request.readyState == 4) {
    if (http_request.status == 200) {
            var_output = http_request.responseText;
            document.getElementById('result').innerHTML = var_output;  //value 100 displayed
}
else
{
           alert('There was a problem with the request.');
}
}

In my javascript function, i need to get the value 100 from that innerHTML.
Is it possible to get this value?

Code:

// I tried this way, but not working
var txt = document.getElementById('result').innerHTML;

or Store it in hidden field and get the value from javascript.

Please suggest any idea to solve this problem

Thanks

Hi, I'm trying to work through a head first book on ajax and javascript. I am also trying to emplement some of the codes in a small application I had built strictly with server side code.

What it does is: two input fields for user defined values. Once the user inputs the two values, they are passed to the action page, some simple math is performed on these 2 values, and then 4 different resluts are displayed back on the action page. What I wanted was of course to make this asynchronous and display the results without a page reload.

So, when I reworked the book code for my own use, and try to run the application, I get an error saying my url variable is undefined. The value of the first input seems to be passed though.

One thing of note to mention is the application was written in coldfusion. The form values are passed using cf. Not sure if that matters. I mean cf works well with js and ajax, but maybe my original procedure doesnt work with my js code as it is now.

Here is the javascript/ajax code:
PHP Code:
<script type="text/javascript" language="javascript">
var request = null;

      try {
          request = new XMLHttpRequest();
      }   catch (trymicrosoft) {
          try {
              request = new ActiveXObject("Msxm12.XMLHTTP");
          } catch (othermicrosoft) {
              try {
                  request = new ActiveXObject("Microsoft.XMLHTTP");
              }   catch (failed) {
                  request = null;
          }
      }

  if(request == null)
  alert("Error creating request object!");
  }
  
  function getLampVolts() 
  {
      var lamp = document.getElementById("lampVoltage").value;
      var url = "calculatorAction.cfm?lamp = " + escape(lampVolts);
      request.open("GET", url, true);
      request.onreadystatechange = updatePage;
      request.send(null);
  }
  function updatePage()
  {
    if(request.readyState == 4)
    {
        if(request.status == 200)
        {
            
        var lumens = request.responseText;
        document.getElementById("lumens").value =
        lumens;
        }
        else
         alert("Error! Request Status is " + request.status);
    }
  }
</script> 


Here is the form:
Code:

<form action="calculatorAction.cfm">
  <table>
    <tr>
      <th>Lamp Voltage</th>
      <td><input name="lampVoltage" id="lampVoltage" type="text" /></td>
    </tr>
    <tr>
      <th>Socket Voltage</th>
      <td><input name="socketVoltage" id="socketVoltage" type="text" /></td>
    </tr>
    <tr>    
      <td><input type="button" value="Submit" onClick="getLampVolts();" /></td>
      <td><input type="reset" value="Reset" /></td>
    </tr>
  </table>

and here is my action page calculatorAction.cfm:
Code:

<cfparam name="bulbCalculator.cfm" type="any" default="0">
<!--- Set User Defined Values of Form --->
<cfset lampVolts = FORM.lampVoltage>
<cfset actualVolts = FORM.socketVoltage>
<!--- Set Constants For Calculations --->
<cfset lumens = 27500>
<cfset life = 500>
<cfset watts = 65>
<cfset colorTemp = 3500>
<!--- Perform Calculations --->
<cfset actualLumens = ((actualVolts/lampVolts)^3.4)*lumens>
<cfset lumenPercent = actualLumens/lumens*100>
<cfset hours = ((lampVolts/actualVolts)^13)*life>
<cfset hourPercent = hours/life*100>
<cfset actualWatts = ((actualVolts/lampVolts)^1.3)*watts>
<cfset wattPercent = actualWatts/watts*100>
<cfset temperature = ((actualVolts/lampVolts)^.42)*colorTemp>
<cfset tempReduction = temperature-colorTemp>

<!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>
<cfsavecontent variable="calculations">
<table>
  <cfoutput>
    <tr>
      <td>Lamp Rated Voltage:</td>
      <td>#lampVolts#</td>
    </tr>
    <tr>
      <td>Socket Application Voltage:</td>
      <td>#actualVolts#</td>
    </tr>
    <tr>
      <td id="lumens">Percent of Lumens Used:</td>
      <td>#round(lumenPercent)#%</td>
    </tr>
    <tr>
      <td>New Rated life in Percentages:</td>
      <td>#round(hourPercent)#%</td>
    </tr>
    <tr>
      <td>Percent of Watts Used:</td>
      <td>#round(wattPercent)#%</td>
    </tr>
    <tr>
      <td>Change in Temperatu </td>
      <td>#round(tempReduction)#&deg;</td>
    </tr>
  </cfoutput>
</table></cfsavecontent>
</body>
</html>

Again, the url variable says it is undefined. But the variable "lamp" contains the form field value.

Thanks for any help and tips in advance!

i have a drop down which triggers a ajax call. The ajax response is a form with various fields depending upon the drop down option selected.

I have a text field in that response form which is to input the date. i have a calender widget and wish to display that as a popup with an onfocus or onclick on that text field. But becoz of the ajax response it does not let me do it.

I know the problem is in the creation and destruction of the element where the calender has to be displayed so i tried putting the callender intiialization function in another function and calling that onclick but id doesnt work. below is my modified javascript code for the initialization of the calendar.
Code:

<script type="text/javascript">
var calendar1, calendar2, calendar3; /*must be declared in global scope*/
/*put the calendar initializations in the window's onload() method*/

function cal_init()
{ alert("hi");
calendar1 = new Epoch('cal1','popup',document.getElementById('calendar1_container'),false);
	calendar2 = new Epoch('cal1','popup',document.getElementById('calendar2_container'),false);
	calendar3 = new Epoch('cal1','popup',document.getElementById('calendar3_container'),false);
};
</script>

Hi everyone,

I would like to know everyone's thought about how I can achieve seamless browsing on my web application.

I developed a website consisting of a collapsible menu, filters that correspond to a form and a search bar. All three components send information to the iframe I implemented inside this website. The question is that how could I enable seamless browsing (without the page refreshing every time a user sends something to the iframe)?

Right now each time the collapsible menu is clicked, the iframe will add to its url depending on what is clicked (?id= or ?pid= or ?mid=). Each time a filter criteria or a search term is being submitted, a form will be submitted to the iframe. Each time any of the above happens the iframe will reload itself.

It works just fine in my localhost server but once I uploaded the web to the server it will take a second or two to load the information. And I am trying to aviod that.

I understand that it has something to do with AJAX but I do not know where to look as I am new to the concept of AJAX. Please let me know your thoughts or if you need more information about the issue.

Thank you so much!

Jeffrey





Reply With Quote




01-28-2015, 10:23 PM #2

Hi,

I am creating a webpage to display menu items in a div tag.
The premis of my page is to use 4 div tags.
1st div tag = company logo (top left)
2nd div tag = img of restaurant and address (top right).
3rd div tag = horizontal menu with text or buttons to call up menu items, for example: Lunch: Dinner: Beverages: Driving Directions, etc
4th div to display content pages. For example, if the user clicks the Lunch button, it would call the lunch page and place it into the 4th div tag.

I am able to do this with frames in HTML or content pages in ASP.net, but how would I do it using CSS and div tags.

The best response I got was with AJAX, but I am not familiar with this language yet.

Can I use JavaScript to do this?

Any suggestions?

Thank you,
Paul

never mind

I have a website that is using ajax to keep the page up to date with the database information. I call this page through a file called start.php. Once index.php is loaded it has a menu with selections. I then want it to call a page called query.php in an iframe to update the information, but not open a new window. In the iframe the query.php will run and then redirect itself to blank.php. The code is as follows and any help would be much appreciated. I have tried several methods of doing this and they have been commented out because they didn't work or didn't do what I wanted them to do. I do not want to use window.open since IE doesn't work well with it.

window.open does work by pop up windows but I want to stay away from them.
The main code I am looking to get help on is in red under start.php.

In start.php I will include the entire file. In index.php I'm only going to include the main sections I use for this snippit. In query.php I'm not going to include query.php since I beleive this file isn't important for this snippit.

start.php
Code:

<html>
	<head>
		<title>Countries At War!</title>
      <body style="background-color:#B0C4DE;">
      
		<script language="JavaScript" type="text/javascript">
			//Gets the browser specific XmlHttpRequest Object
			function getXmlHttpRequestObject() {
				if (window.XMLHttpRequest) {
					return new XMLHttpRequest(); //Not IE
				} else if(window.ActiveXObject) {
					return new ActiveXObject("Microsoft.XMLHTTP"); //IE
				} else {
					//Display your error message here. 
					//and inform the user they might want to upgrade
					//their browser.
					alert("Your browser doesn't support the XmlHttpRequest object.  Better upgrade to Firefox.");
				}
			}			
			//Get our browser specific XmlHttpRequest object.
			var receiveReq = getXmlHttpRequestObject();
			//Initiate the asyncronous request
			
function sayHello() {
				//If our XmlHttpRequest object is not in the middle of a request, start the new asyncronous call.
				if (receiveReq.readyState == 4 || receiveReq.readyState == 0) {
					//Setup the connection as a GET call to SayHello.html.
					//True explicity sets the request to asyncronous (default).
				    receiveReq.open("GET", 'index.php', true);
					//Set the function that will be called when the XmlHttpRequest objects state changes.
					receiveReq.onreadystatechange = handleSayHello; 
					//Make the actual request.
					receiveReq.send(null);
				 
				}
}
 
			//Called every time our XmlHttpRequest objects state changes.
			function handleSayHello() {
				//Check to see if the XmlHttpRequests state is finished.
				if (receiveReq.readyState == 4) {
					//Set the contents of our span element to the result of the asyncronous call.
					document.getElementById('span_result').innerHTML = receiveReq.responseText;
				}
}

 function openMenu(query) {
  
    var myString = 'query.php?' + query;
   // window.open(myString, 'linkname', 'title=no, height=465, width=400, left=550, top=150,  location=yes, resizable=no, menubar=no, scrollbars=no')
    //document.getElementById('engine').src = myString;
	//document.getElementById('engine').setAttribute('src',myString;);
	//top.frames['engine'].location.href = myString;
	pausecomp(1000);
    sayHello();
} 
 

function pausecomp(millis)
{
var date = new Date();
var curDate = null;
do { curDate = new Date(); }
while(curDate-date < millis);
} 
			</script>
	</head>
	<body>
<a href="javascript:sayHello();">Say Hello</a><br />
         <iframe src="blank.php" MarginWidth="0" transparent="yes" width="30" height="25"
			frameborder="0" scrolling="no" name="engine">
          UPGRADE YOUR BROWSER</iframe>
		<span id="span_result"></span>
        <body onLoad="sayHello();">
	</body>
</html>

index.php
Code:

<table width="100%" border="2" bordercolor="Black">
<tr><center>
<td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=1');">Home</a></td>
<td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=2');">Jobs</td>
<td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=3');">Travel</td>
<td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=4');">Fight</td>
<td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=5');">Inventory</td>
<td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=6');">Properties</td>
<td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=7');">Rewards<?php if($db_field['rewardpoints'] >= "1") print "(". $db_field['rewardpoints'] . ")";?></td>
<td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=8');">Profile<?php if($db_field['profilepoints'] >= "1") print "(". $db_field['profilepoints'] . ")";?></td>
<td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=9');">Alliances</td>
<td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=10');">Options</td>
</tr></center>
</table>

Thanks in advance for all the help.

Could somebody help me please to explain what I'm doing wrong....
a have this html file with references to some javascripts (datagrid from http://www.datatables.net) and this html file work ok..I mean javascripts a css styling works with table...
but when I call this page by ajax and callback (this html page) is forward back into another div , table doesn't work ....just data from page but now functionality from javascript and css styling...
how should I force callback result to use javascript and css?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
		<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
		
		
		<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/media/images/favicon.ico">
		<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://www.datatables.net/rss.xml">
		
		<style type="text/css" media="screen">
			@import "media/css/demo_page.css";
			@import "media/css/demo_table.css";
			@import "http://www.datatables.net/media/css/site_jui.ccss";
			@import "media/css/demo_table_jui.css";
			@import "media/css/themes/base/jquery-ui.css";
			@import "media/css/themes/smoothness/jquery-ui-1.7.2.custom.css";
			/*
			 * Override styles needed due to the mix of three different CSS sources! For proper examples
			 * please see the themes example in the 'Examples' section of this site
			 */
			.dataTables_info { padding-top: 0; }
			.dataTables_paginate { padding-top: 0; }
			.css_right { float: right; }
			#example_wrapper .fg-toolbar { font-size: 0.8em }
			#theme_links span { float: left; padding: 2px 10px; }
		</style>

		
		<script type="text/javascript" src="media/js/complete.js"></script>
		<script src="media/js/jquery-1.4.4.min.js" type="text/javascript"></script>
        <script src="media/js/jquery.dataTables.min.js" type="text/javascript"></script>
		<script type="text/javascript" src="media/js/jquery.dataTables.editable.js"></script>
		<script src="media/js/jquery.jeditable.js" type="text/javascript"></script>
        <script src="media/js/jquery-ui.js" type="text/javascript"></script>
        <script src="media/js/jquery.validate.js" type="text/javascript"></script>

		<script type="text/javascript" charset="utf-8">
			$(document).ready( function () {
				$('#example').dataTable().makeEditable({
                    							sUpdateURL: "update.php",
												sDeleteURL: "delete.php"

                    							
										});
				
			} );
		</script>

        
	</head>
   <body id="index" class="grid_2_3">

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
        
        <thead>
        <tr>
        <th>
        ID</th>
        <th>
        user</th>
        <th>
        password</th>
        <th>
        first</th>
        <th>
        last</th>
        <th>
        company</th>
        </tr>
        
            </thead>
        
            <tbody>
        <tr class="even_gradeA" id="1">
        <td>
        1
        </td>
        <td>
        XY
        </td>
        <td>
        passwoed
        </td>
        <td>
        Ja
        </td>
        <td>
        jajovic
        </td>
        <td>
        2
        </td>
        </tr>
        <tr class="even_gradeA" id="2">
        <td>
        2
        </td>
        <td>
        jojo
        </td>
        <td>
        fa25af5301e2dda1fddea740200aa10ab6c70d86
        </td>
        <td>
        jojo
        </td>
        <td>
        jojovicko
        </td>
        <td>
        2
        </td>
        </tr>
        <tr class="even_gradeA" id="3">
        <td>
        3
        </td>
        <td>
        kuk
        </td>
        <td>
        d588aebb93e3adf70eac1fb479d6d53f9dc21816
        </td>
        <td>
        kuk
        </td>
        <td>
        kukovic
        </td>
        <td>
        3
        </td>
        </tr>
        <tr class="even_gradeA" id="10">
        <td>
        10
        </td>
        <td>
        admin
        </td>
        <td>
        f865b53623b121fd34ee5426c792e5c33af8c227
        </td>
        <td>
        admin
        </td>
        <td>
        adminovic
        </td>
        <td>
        3
        </td>
        </tr>
        </tbody>
</table><button id="btnDeleteRow">Delete</button>



</body>
</html>

I have these buttons that I need to have switch accounts on and off. They work, but for some reason the words on the buttons are not changing from Activate to Deactivate...

It seems as though the button is not updating itself after success of the function. First post on here so I apologize if I am doing this wrong.
Problem code in jsbin--> http://jsbin.com/okifa3/

Code:

    $(function() {
    var activateOwner = function(u) {
      var dataString = 'oid=' + u + "&a=1";
      $.ajax({
        type: "GET",
        url: "{/literal}{$site_root_path}{literal}account/toggle-owneractive.php",
        data: dataString,
        success: function() {
          $('#spanowneractivation' + u).css('display', 'none');
          $('#message1' + u).html("Activated!").hide().fadeIn(1500, function() {
            $('#message1' + u);
          });
          $('#spanownernamelink' + u).css('display', 'inline');
          $('#' + u).val('Deactivate');
          $('#spanownernametext' + u).css('display', 'none');
          $('#' + u).removeClass('btnActivate');
          $('#' + u).addClass('btnDectivate');
          setTimeout(function() {
              $('#message1' + u).css('display', 'none');
              $('#spanowneractivation' + u).hide().fadeIn(1500);
            },
            2000
          );
        }
      });
      return false;
    };

    var deactivateOwner = function(u) {
      var dataString = 'oid=' + u + "&a=0";
      $.ajax({
        type: "GET",
        url: "{/literal}{$site_root_path}{literal}account/toggle-owneractive.php",
        data: dataString,
        success: function() {
          $('#spanowneractivation' + u).css('display', 'none');
          $('#message1' + u).html("Deactivated!").hide().fadeIn(1500, function() {
            $('#message1' + u);
          });
         $('#spanownernamelink' + u).css('display', 'none');
         $('#spanownernametext' + u).css('display', 'inline');
          $('#' + u).val = 'Activate';
          $('#' + u).removeClass('btnDeactivate');
          $('#' + u).addClass('btnActivate');
          setTimeout(function() {
              $('#message1' + u).css('display', 'none');
              $('#spanowneractivation' + u).hide().fadeIn(1500);
            },
            2000
          );
        }
      });
      return false;
    };

    $(".toggleOwnerButton").click(function() {
      if($(this).val() == 'Activate') {
        activateOwner($(this).attr("id"));
      } else {
        deactivateOwner($(this).attr("id"));
      }
    });
  });

I have something that's called with AJAX when the user enters some text (http://askvoke.com). What I want is to execute some javascript within this "frame". If the frame calls something, with say Code:

<script type=\"text/javascript\">
document.write('h');
</script>

in it, then "h" doesn't appear, and neither does anything besides what would normally be shown if I didn't add that.

Anyone have a solution?

Hello

I am using PlainAjax. http://coolpenguin.net/plainajax/?p=examplespostdata

Here is my code and it is not working if i called from Javascript function.

Code:

<script type="JavaScript" src="plainajax.js"></script>
<script language="JavaScript" >

function openWin()
{
	.......		
	.......
	.......
	var selval = selectedValue.toString();	 	// Dynamic value variable
	document.formlist.myval.value = selval; 	// stored to hidden variable

	
	 var cn = document.getElementById( "itsme" ).childNodes;	// Get all the nodes
	
	 var myresult = new Array();					// declare result array
    	 plainajax.request('respurl: req_php.php; resultloc: myresult; paramloc: cn;');
  
	 Window.open("req_php.php");
	
}

</script>

<html>

 <div id="itsme">

	<input type="hidden" name="myval" id="myval" value=""> 
</div>

</html>

req_php.php
=========
Code:

<?php

		echo "value from html = ".$_REQUEST['myval']."<br>";
	
?>

But i am not able to get any value in my php program. What i did wrong in this?

or is anyother way to pass the variable from Javascript (except pass thru url query string, this is not secure)

Thanks