JavaScript - Javascript Calender In Ajax Response

Hey guys,

I am doing a website and the way it is suppose to work is when you click on a link there is a little triangle beside it, so when you click on it the triangle is suppose to face down but more links appear when you click on it. Anyways here is the code if someone could please tell me what im doing wrong?

HTML
Code:

<ul class="menu" id="subnavmenu">
					<li><a href="#" onClick="showHide('sublist1');return false;" id="subheading">About Us</a>
					<ul id="sublist1" style="display:none;">
					<li><a href="#">Visit Us</a></li>
					<li><a href="#">Contact Us</a></li>
					<li><a href="#">Archives Unboxed and Revealed</a></li>
					</li>
					</ul>

CSS
Code:

#subnavmenu ul.menu { display: block; overflow:hidden; }

JAVASCRIPT
Code:

function showHide(element_id) {
	if (document.getElementById && document.getElementById(element_id) && document.getElementById(element_id).style) {
		var menu  = document.getElementById(element_id);
		var arrow = document.getElementById(element_id + '_arrow');
		if (menu.style.display == "block") {
			menu.style.display = "none";
			if (arrow.src) { arrow.src = arrow.src.replace("down","right"); }
		}
		else {
			menu.style.display = "block";
			if (arrow.src) { arrow.src = arrow.src.replace("right","down"); }
		}
	}
}

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

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

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.

I currently have basic text fields for the dates to be entered in to.

Now wish to allow users to click calender thumbnail for a pop up calender to select the date, but the script i got only allows one popup.

Does anyone know of a script that i can reuse more than once in the same page?

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!

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

hi friends,

I am looking for a solution to display the records of a dynamically selected mysql table using ajax,jsp & js combinations.

any sites showing some example

thnx in advance.

hi to all

i need an event based calender using open source how can i create is there any free open source event based calender is there

user need to boook and block his dates and edit and book the dates for his requirements

please suggest me

regards

kiran

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"));
      }
    });
  });

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