Calling jquery dialog from within an ajax generated php file

Question

// 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

Sorry the code generated by ajax is: <a id="itemEdit" href="#">'.$id.'</a> — ClemKY
– ClemKY, Commented Oct 13, 2015 at 6:23
It is still not working... should I place the javascript that ready the dialog scripts inside the ajax generated php file? — ClemKY
– ClemKY, Commented Oct 13, 2015 at 6:38
good if you post browser rendered html or some more detailed code here.. — Guruprasad J Rao
– Guruprasad J Rao, Commented Oct 13, 2015 at 6:43
This has been solved - using the code provided by Sandeep and Rao. Thanks — ClemKY
– ClemKY, Commented Oct 13, 2015 at 9:47

Guruprasad J Rao · Accepted Answer · 2015-10-13 06:26:08Z

1

you should try this

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

edited Oct 13, 2015 at 6:26

Guruprasad J Rao

29.7k16 gold badges113 silver badges212 bronze badges

answered Oct 13, 2015 at 6:25

sandeep_kosta

3461 silver badge15 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

sandeep_kosta Over a year ago

actually your html "<a id="itemEdit" href="#">'.$id.'</a>" is being generated dynamically so you should bind or delegate your html if require to perform any action like click or change

ClemKY Over a year ago

sandeep, sorry I don't understand what you mean by bind or delegate. Could you please explain?

ClemKY Over a year ago

Rao, yes did that and still not working. Should I put out more code snippets?

sandeep_kosta Over a year ago

when you dynamically generate the any html element then we have to bind it with it if need to trigger any event just like you are creating "<a>" dynamically then if you need to perform some click option on it then you need to bind the specific element using some jquery method like bind,on and once you are done you can unbind using unbind,off method see more out here w3schools.com/jquery/event_on.asp

ClemKY Over a year ago

I am not sure how to present the codes to you... there are inserted above.

|

Collectives™ on Stack Overflow

Calling jquery dialog from within an ajax generated php file

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related