ClemKY
ClemKY

Reputation: 15

Calling jquery dialog from within an ajax generated php file

// functions for dialog form....
$(function() {
  var dialog, form, allFields

  // add new dialog
  dialog = $("#frm_Add").dialog({
    autoOpen: false,
    height: 600,
    width: 800,
    modal: true,
    buttons: {
      "Save": addNewIMTE,
      Cancel: function() {
        dialog.dialog("close");
      }

    },
    close: function() {
      //form[ 0 ].reset();
      //	allFields.removeClass( "ui-state-error" );
    }
  });

  form = dialog.find("form").on("submit", function(event) {
    event.preventDefault();
  });

  $("#AddNewItem").button().on("click", function() {
    dialog.dialog("open");
  });
});

// end add new dialog

$(function() {

  // add edit dialog
  var dialogEdit, formEdit, allFieldsEdit
  dialogEdit = $("#dialog-EditForm").dialog({
    autoOpen: false,
    height: 400,
    width: 600,
    modal: true,
    buttons: {
      "Save": addNewIMTE,
      Cancel: function() {
        dialogEdit.dialog("close");
      }
    },
    close: function() {
      //formEdit[ 0 ].reset();
      //allFieldsEdit.removeClass( "ui-state-error" );
    }
  });

  formEdit = dialogEdit.find("form").on("submit", function(event) {
    event.preventDefault();
  });

  //	$(document).on("click","a#editME",function(){
  //	$("a#editME").click(function(){ 
  //      dialogEdit.dialog( "open" );
  //	}); 

  $(document).on("click", "#editME", function() {
    dialogEdit.dialog("open");
  });




});


function addNewIMTE() {
  var valid = true;
  allFields.removeClass("ui-state-error");
  //valid = valid && checkLength( name, "username", 3, 16 );
  //valid = valid && checkLength( email, "email", 6, 80 );
  //valid = valid && checkLength( password, "password", 5, 16 );
  //valid = valid && checkRegexp( name, /^[a-z]([0-9a-z_\s])+$/i, "Username may consist of a-z, //0-9, underscores, spaces and must begin with a letter." );
  //valid = valid && checkRegexp( email, emailRegex, "eg. [email protected]" );
  if (valid) {
    //call save function - saveIMTE()
    //alert('you pressed me');
    saveNewIMTEData();
    dialog.dialog("close");
  }
  return valid;
}
<?php session_start();?>

<!DOCTYPE>

<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <title>DJ Inspection</title>

  <!--<link rel="stylesheet" type="text/css" href="css/pos.css">
		<link rel="stylesheet" type="text/css" href="./css/print.css" media="print" />
		-->
  <link rel="stylesheet" href="./scripts/jquery-ui-themes-1.11.2/themes/smoothness/jquery-ui.css">


  <link rel="stylesheet" href="./css/css01.css" type="text/css" />

  <script src=./scripts/jquery/jquery-1.11.1.js></script>
  <script src=./scripts/jquery/1.11.2/jquery-ui.js></script>
  <script src=./scripts/dialogFrms.js></script>

  <script src="./scripts/rpt001.js"></script>
  <script src="./scripts/jquery.printPage.js"></script>

  <script src="./scripts/jquery.printPage.js" type="text/javascript"></script>

  <script>
    $(document).ready(function() {
      getStockList("1", "");

    });


    $(function() {
      $("#calDate").datepicker();
    });

    $(function() {
      $("#calDue").datepicker();
    });
  </script>


</head>

<?php date_default_timezone_set( 'Asia/Kuala_Lumpur'); 
require_once( "common.php"); 
$connection=o penMaintData(); 
$sqlCat="select ID,Description from imtecat" ; 
$rsCat=$ connection->query($sqlCat); 
$rowsCat = $rsCat->num_rows; 
$sqlLocation = "select id,description from location"; 
$rsLocation = $connection->query($sqlLocation); 
$rowsLocation = $rsLocation->num_rows; 
$sqlPIC = "select ID,Name from personnel"; 
$rsPIC = $connection->query($sqlPIC);
$rowsPIC = $rsPIC->num_rows; 
$sqlVendor = "select id,CalVendor from calvendor"; $rsVendor = $connection->query($sqlVendor); $rowsVendor = $rsVendor->num_rows; $sqlPeriod = "select ID,Period from inspperiod"; $rsPeriod = $connection->query($sqlPeriod);
$rowsPeriod = $rsPeriod->num_rows; mysqli_close($connection); ?>

<body>


  <img src="/djapps/img/dj logo red.png" alt="djlogo">

  <div id='breadcrumb'>
  </div>

  <div id=stklistheader>

    <table border=0 class='hello' width=0%>
      <tr>

        <td>
          <a href="javascript:" onclick=" getStockList('','');">
            <div id="filterButton"></div>
          </a>
        </td>
        <td>

          <!--<a class="btnPrint" href='/DJApps/print01.html'>Print!</a>
						-->
        </td>

        <td>
          <button id="AddNewItem">Create New Item</button>

          <a href="#" id="editME">Edit</a">
            <div id="FilterType"></div>
              </td></tr>
            </table>
		
          <table>
            <tr>	  
              <td>
                Search
              </td>
              <td>
                <input name="cSearchThis" id='cSearchThis' type="text" size="50" maxlength="80"/>
                  </td>
                </tr>
             </table>
		</div>	 
		
		<div id=stklistheader1>
		
		</div>	 
		
		<div id="placeStkList"></div>
			
	</div>
	
</table>

</div>

<div id="placeRightChildInfo">
	fdfdd
</div>

<?php include 'dialogAddNew.php'?>
<?php include 'dialogEdit.php'?>
		
	
</body>

<script>
	
	$(document).ready(function() {
		$(".btnPrint").printPage();
	});
	
	document.getElementById("filterButton").innerHTML = "Alarm Scan"; 
	
	$( "#cSearchThis" ).keyup(function( event ) {
		getStockList("1","");
	});
	
	

     $(".myclass tr").click(function(){
       window.location = "example.html";
     });
	
</script>



</html>


  
    
<!-- this is ajaxListStk01- called by ajax-->
  
    <?php
	date_default_timezone_set('Asia/Kuala_Lumpur');
	require_once "/JSON.php";
	
		
	$param0    = trim(strip_tags((isset($_GET['str1']) && $_GET['str1'] != '') ? $_GET['str1'] : ''));
	$param1    = trim(strip_tags((isset($_GET['sid']) && $_GET['sid'] != '') ? $_GET['sid'] : ''));
	
	$jsonArray = json_decode($param0,'true');
	$noItems   = sizeof($jsonArray["sStkList"])-1;    
	$QtyItem   = $noItems+1;
	
	switch(json_last_error())
	{
		case JSON_ERROR_DEPTH:
		//	echo ' - Maximum stack depth exceeded';
		break;
		case JSON_ERROR_CTRL_CHAR:
		//	echo ' - Unexpected control character found';
		break;
		case JSON_ERROR_SYNTAX:
		//	echo ' - Syntax error, malformed JSON';
		break;
		case JSON_ERROR_NONE:
		//    echo ' - No errors';
		break;
	}
	
	require_once("common.php");
	
	$whatElse = $jsonArray["sStkList"][0]["flag"];
	$SearchThis = $jsonArray["sStkList"][0]["descrip"];
	$SortBy = $jsonArray["sStkList"][0]["sortBy"];
	
	//$orderStr = $SortBy;
	
	echo "Sorted By: ".$SortBy;
	
	$connection = openMaintData();
	
	//$now = date("Y-m-d");
	$now = time(); // or your date as well
	
	$certPath = "/certRep/";
	$imgPath = "/images/";
	$iconPath = "/icons/";
	
	if($whatElse == "A"){
		$activeStr  = " DATEDIFF(imtemaster.CalDue, NOW()) <= 30 and ";
		$orderStr = " imtemaster.CalDue ASC";
		$whatElse = "FILTERED ";
	}else{
		$activeStr  = "";
		$orderStr = "imtemaster.Description ASC";
		$whatElse = "ALL";
	}
	
	if($SortBy <> ""){
		$activeStr  = "";
		$orderStr = $SortBy;
		$whatElse = "SORTED";
	}
	
	echo "** ".$SearchThis.' - '.$whatElse.' - '.$activeStr;
	
	
	
	$sqlStr = "SELECT
	imtemaster.id,
	imtemaster.catID,
	imtemaster.description,
	imtemaster.serialno,
	imtemaster.Brand,
	imtemaster.Model,
	imtemaster.Specs,
	imtemaster.CalDate,
	imtemaster.CalDue,
	imtemaster.CalPeriod,
	imtemaster.CalBy,
	imtemaster.CertRef,
	imtemaster.Location,
	imtemaster.PIC,
	imtemaster.Status,
	imtemaster.Remarks,
	imtecat.Description,
	inspperiod.Period,
	calvendor.CalVendor,
	personnel.Name,
	status.description,
	Location.description,
	imtemaster.image
	FROM imtemaster 
	INNER JOIN imtecat ON imtecat.ID = imtemaster.catID 
	LEFT JOIN inspperiod ON inspperiod.ID = imtemaster.CalPeriod
	LEFT JOIN calvendor ON calvendor.id = imtemaster.CalBy
	LEFT JOIN status ON status.id = imtemaster.Status
	LEFT JOIN Location ON Location.id = imtemaster.Location
	LEFT JOIN personnel ON personnel.ID = imtemaster.PIC 
	where ".$activeStr."
	(imtemaster.description LIKE '%".$SearchThis."%' || imtemaster.Brand LIKE '%".$SearchThis."%'
	|| imtemaster.serialno LIKE '%".$SearchThis."%'
	|| imtemaster.ID LIKE '%".$SearchThis."%'
	|| imtemaster.Specs LIKE '%".$SearchThis."%'
	|| imtemaster.Model LIKE '%".$SearchThis."%'
	|| imtemaster.Brand LIKE '%".$SearchThis."%'
	|| imtemaster.CertRef LIKE '%".$SearchThis."%'
	|| personnel.Name LIKE '%".$SearchThis."%'
	|| imtecat.Description LIKE '%".$SearchThis."%'
	|| Location.Description LIKE '%".$SearchThis."%'
	|| calvendor.CalVendor LIKE '%".$SearchThis."%'
	|| status.description LIKE '%".$SearchThis."%'
	|| imtemaster.Remarks LIKE '%".$SearchThis."%'
	|| imtemaster.Remarks LIKE '%".$SearchThis."%')
	order by ".$orderStr;	
	
	// and
	//(imtemaster.Status != 2)
	//	echo $sqlStr;
	
	$rsInv = $connection->query($sqlStr);	
	
	$rowsInv = $rsInv->num_rows;
	
	echo "No of IMTE found: ".$rowsInv;
	
	echo '<a href="#" id="itemEdit">Edit</a">';
	
	
	if ($rowsInv > 0) {
		
		echo '<div class="scrollableContainer">
		<div class="scrollingArea">
		
		<table class="imte fixHeader">
		<thead>
		
		<tr id="myclass" bgcolor="#CC99FF">
		
		<th><div class="ID">
		<a href="#" onClick="getStockList(\'1\',\' imtemaster.id ASC\');">ID</a></div></th>
		
		
		<th><div class="Status">
		<a href="#" onClick="getStockList(\'1\',\' status.description ASC\');">Status</a></div></th>
		<th><div class="Cat">
		<a href="#" onClick="getStockList(\'1\',\' imtecat.Description ASC\');">Type</a></div></th>
		
		<th><div class="Descrip">
		<a href="#" onClick="getStockList(\'1\',\' imtemaster.Description ASC\');">Description</a></div></th>
		
		<th><div class="SNo">
		<a href="#" onClick="getStockList(\'1\',\' imtemaster.serialno\');">Serial No</a></div></th>
		
		<th><div class="Per">
		<a href="#" onClick="getStockList(\'1\',\' inspperiod.Period ASC\');">Period</a></div></th>
		
		<th><div class="CalOn">
	    <a href="#" onClick="getStockList(\'1\',\' imtemaster.CalDate ASC\');">Cal On</a></div></th>
	
		<th><div class="CalDue">
		<a href="#" onClick="getStockList(\'1\',\' imtemaster.CalDue ASC\');">Due</a></div></th>
		
		<th><div class="Days2Exp">Exp (Days)</div></th>
		
		<th><div class="Loc">
		<a href="#" onClick="getStockList(\'1\',\' Location.description ASC\');">Loc</a></div></th>
	
		<th><div class="CalBy">
		<a href="#" onClick="getStockList(\'1\',\' calvendor.CalVendor ASC\');">Cal By</a></div></th>
			
		<th><div class="Remarks">Remarks</div></th>
		<th><div class="Edit">Action</div></th>
		<th><div class="Image">Img</div></th>
		<th><div class="PDF">Cert</div></th>
		<th><div class="Excel">Excel</div></th>
		</tr>
		</thead>
		
		<tbody>';
		
		$i = 0;

		while ($rowsInv=mysqli_fetch_row($rsInv))
		{
			$id               = $rowsInv[0];
			$catID            = $rowsInv[1];
			$description      = $rowsInv[2];
			$serialno         = $rowsInv[3];
			$Brand            = $rowsInv[4];
			$Model            = $rowsInv[5];
			$Specs            = $rowsInv[6];
			$CalDate          = $rowsInv[7];
			$CalDue           = $rowsInv[8];
			$CalPeriod        = $rowsInv[9];
			$CalByID           = $rowsInv[10];
			$CertRef          = $rowsInv[11];
			$Location         = $rowsInv[12];
			$PIC              = $rowsInv[13];
			$Remarks          = $rowsInv[15];
			$CatDescp         = $rowsInv[16];
			$Period           = $rowsInv[17];
			$CalBy            = $rowsInv[18];
			$PIC              = $rowsInv[19];
			$Status           = $rowsInv[20];
			$WhereIsIt        = $rowsInv[21];
			$StatusID        = $rowsInv[14];
			$image        = $rowsInv[22];
			
			$i = $i + 1;
			
			if($i % 2 ==0)
			
			{
				$bgcolor='#FFFFFF';
				}else{
				$bgcolor='#E9E9E9';
			}
			
			//	$offset = $Period;	
			//	$now = time();
			//	$days2expiry = floor((strtotime(date('Y-m-d', 
			//	strtotime("+$offset months-1 day", //strtotime($CalDate))))-$now)/(60*60*24));

			$datediff =strtotime($CalDue)-$now;
			$days2expiry = floor($datediff/(60*60*24));
			
			if ($days2expiry <= 30 ){
				$bgcolor='FFAA7F';
			};
			
			if ($days2expiry > 0 and $days2expiry <= 30  ) {
				$bgcolor='FFCC99';
			};
						
			if ($days2expiry <= 0 ){
				$bgcolor= 'red';
			};
			
			if ($Status == 7 ){
				$bgcolor='FFAA7F';
			}
			
			//echo '<td ><div>'.$i.'</div></td>';			
			//	echo '<td ><div>'.$CatDescp.'-'.trim($description).'-'.trim($Brand).'-'.trim($Model).'-'.trim($Specs).'</div></td>';
			//echo '<td><div>'.$CalDate.'</div></td>';
			//echo '<td><div>'.$CalDue.'</div></td>';
			//echo '<td><div>'.$Period.'</div></td>';
			//echo '<td><div>'.$CalBy.'</div></td>';
			//echo '<td><div>'.$CertRef.'</div></td>';
			//echo '<td><div>'.$PIC.'</div></td>';
			//echo '<td><div>'.$WhereIsIt.'</div></td>';
			
			//echo '<td><div><a id="create-newIMTE">Edit</a></div></td>';
			
			echo '<tr color='.$bgcolor.'>';
			
			echo '<td ><div class="ID">
			<a id="itemEdit" href="#">'.$id.'</a>
			</div></td>';
			
			echo '<td ><div class="Status">'.$Status.'('.trim($StatusID).')'.'</div></td>';
			echo '<td ><div  class="Cat">'.$CatDescp.'('.trim($catID).')'.'</div></td>';
			echo '<td ><div  class="Descrip">'.trim($description).'-'.trim($Brand).'-'.trim($Model).'-'.trim($Specs).'</div></td>';
			echo '<td><div class="SNo">'.$serialno.'</div></td>';
			echo '<td><div class="Per">'.$Period.'</div></td>';
			echo '<td><div class="CalOn">'.$CalDate.'</div></td>';
			echo '<td><div class="CalDue">'.$CalDue.'</div></td>';
			echo '<td ><div class="Days2Exp">'.(float)$days2expiry.'</div></td>';
			echo '<td><div   class="Loc">'.$WhereIsIt.'('.trim($Location).')'.'</div></td>';
			echo '<td><div   class="CalBy">'.$CalBy.'-('.$CalByID.')'.'</div></td>';
			echo '<td><div  class="Remarks">'.$Remarks.'</div></td>';
			echo '<td><div  class="Edit"><a onClick="yourFunction(); return false;" href="fallback.html">One Way</a>';
			
			
			//echo '<td><div class="Image"><a href="'.$imgPath.'/'.$id.'.png" target="_blank">Pic</a></div></td>';
			/*
			echo '
			<td>
			<div class="Image">
			<img src="data:image/png;base64,'.base64_encode($image) .'" />
			</div>
			</td>';
			*/

			if ( !empty( $image ) ) {
			echo '<td><div  class="Img"><a href="'.$imgPath.'/'.$id.'.png" target="_blank"><img src="'.$imgPath.'/'.$id.'.png" alt="Pic" title="Click to view" border="0" width="20px" height="20px" hspace="10px" /></a></div></td></a>';
			
			}else{
			
			echo '<td><div  class="Img"><a href="'.$imgPath.'/na.png" target="_blank"><img src="'.$imgPath.'/na.png" alt="Pic" title="Click to view" border="0" width="20px" height="20px" hspace="10px" /></a></div></td></a>';
			
			}
			
			echo '<td><div  class="PDF"><a href="'.$certPath.'/'.$id.'.pdf" target="_blank">
			<img src="'.$iconPath.'pdf.png" alt="PDF" title="Click to view" border="0" width="20px" height="20px" hspace="10px" />cert</a></div></td>';
			echo '<td><div  class="Excel"><a href="'.$certPath.'/'.$id.'.xlsx">IHCert</a></div></td>';
			
			//<a href="#" id="create-newIMTE">Edit</a></div></td>';
			//<a href='javascript:myFunction()'> Click Me! <a/>
		};
		
	}
	
	echo '<div id="register"></div>';
	
	echo '</tbody></table>';
	
		
	
	echo '</div>';
	echo '</div>';
	
	
	
	
?> 

      

I have search similar questions but am not able to find the solution to my problem.

I am trying to use jquery dialog from a hyper link generated through ajax. The javascripts are all ran from the first page that called the ajax. When I click on the hyper link, there is no response but when I put the same hyperlink on the first page, it works.

This is generated by ajax: '.$id.'

The javascript is ran when the program initialized:

$("a#editME").click(function(){ 
dialogEdit.dialog( "open" );

Could someone help?

Thanks

ajax generated table

Upvotes: 1

Views: 147

Answers (1)

sandeep_kosta
sandeep_kosta

Reputation: 346

you should try this

$(document).on("click","a#editME",function(){
    dialogEdit.dialog( "open" );
})

Upvotes: 1

Related Questions