This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 9 years ago.
Hi I click on one of the links given in the save column. Once it is clicked the code between the script tags should be run and give an alert ('BBBBBBBBBBBBBBBBBBBB'). But I can't figure out why it doesn't give the expected result. Please someone help me to correct this
<html>
<title></title>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script></head>
<script>
$(".QuestionEdit").click(function(){
alert('BBBBBBBBBBBBBBBBBBBB');
var B=$(this).attr('id');
var Data=B.replace("QuestionEdit","");
alert(Data);
return false;
});
</script>
</head>
<body>
<?php
echo "<form>";
echo "<div id='QuestionDetails' style=' position:relative; top=50px;'>";
$Query="SELECT * FROM Questions WHERE Form_ID='0'";
echo "<table border='1' id='DisplayFormDetailss'>
<tr style='background-color:#D0A9F5;' height='40px;'>
<th width='100px;'>Question_ID</th>
<th width='420px;'>Question Name</th>
<th width='100px;'>Inactivate</th>
<th width='70px;'>Edit</th>
</tr>";
$i=0;
while($i<5){
echo "<tr height='25px;'>";
echo "<td><input name='QuestionID[]' id='QuestionID ".$i."' align=center value='8'></input></td>";
echo "<td><input name='QuestionName[]' style='width:420px;' id='QuestionName".$i."' align=left value='7'></input></td>";
echo "<td name='QuestionInactive[]' id='QuestionInactive".$i."' align=center><input type='checkbox'></input></td>";
echo "<td class='QuestionEdit' id='QuestionEdit".$i."' align=center><a href='' align=left>Edit</a></td>";
echo "</tr>";
$i++;
}
echo "</table>";
echo "</div>";
echo "<div id='Sub' style='position:relative; top:50px;'>";
echo "<input type='submit' value='Save The Table'></input>";
echo "</div>";
echo "</form>";
?>
</body>
</html>
The div.QuestionEdit is not loaded when the script executes. Wrap the script in $(document).ready() to execute when the DOM is available.
$(document).ready(function(){
$(".QuestionEdit").click(function(){
alert('BBBBBBBBBBBBBBBBBBBB');
var B=$(this).attr('id');
var Data=B.replace("QuestionEdit","");
alert(Data);
return false;
});
});
Solution:
$(document).ready(function() {
$(".QuestionEdit").click(function(){
alert('BBBBBBBBBBBBBBBBBBBB');
var B=$(this).attr('id');
var Data=B.replace("QuestionEdit","");
alert(Data);
return false;
});
});
Your script is running before the document has loaded.
Use the document ready callback to run any jQuery code that needs to access the DOM so it runs when the DOM is loaded.
$( document ).ready(function() {
// Handler for .ready() called.
});
Related
I have radio button in a PHP while-loop.
I am storing the first row value in the value of radio button.
I need to pass the value of radio button in HTML a href.
How to pass that value with both PHP and HTML in same page??
My code:
index.php
<html>
<body>
<img src="images/print_label.png" name="Image3" width="152" height="110" border="0" align="top" style="margin-top:10px">
<?php
include "db.php";
require_once "purna_insert_orders_to_ship.php";
if(isset($_POST['submit']))
{
if($_POST['value'] == 'readytoship') {
// query to get all Fitzgerald records
$query = "SELECT * FROM orders WHERE status='readytoship'";
}
elseif($_POST['value'] == 'readytodispatch') {
// query to get all Herring records
$query = "SELECT * FROM orders WHERE status='readytodispatch'";
} else {
// query to get all records
$query = "SELECT * FROM orders";
}
$sql = mysql_query($query);
$num_rows = mysql_num_rows($sql);
if($num_rows >= 1)
{
echo "<div id='showmenu' class='scroll'>";
echo "<table id='table_struct' cellspacing='0' cellpadding='1' border='1' width='400' height='30'>
<tr class='tr_class' bgcolor='white'>
<td align='center' style='font-weight:bold'> Select </td>
<td align='center' style='font-weight:bold'> Po Id </td>
<td align='center' style='font-weight:bold'> Customer Name </td>
<td align='center' style='font-weight:bold'> quantity </td>
<td align='center' style='font-weight:bold'> price </td>
<td align='center' style='font-weight:bold'> status </td>
</tr>";
while($row = mysql_fetch_array($sql))
{
echo "<tr height='20' data-order_id='".$row['po_id']."'>
<td align='center'><input type='radio' class='case' name='radio' value='".$row['po_id']."'></td>
<td align='center'>".$row['po_id']."</td>
<td align='center'>".$row['customer_name']."</td>
<td align='center'>".$row['quantity']."</td>
<td align='center'>".$row['price']."</td>
<td align='center'>".$row['status']."</td>
";
echo "</tr>";
}
echo "</table>";
echo "</div>";
}
}
?>
</body>
</html>
Can anyone please help me out??
To use the value in an anchor tag, you would need to invoke the GET method as follows:
Click here
But, since it is in a radio button, you might want to consider using an HTML form with submit button rather than an anchor tag.
If you want to call that value in html ahref then you should need some jquery too
First you should echo some value in your radio button
<input type="radio" name="buttonval" id="smallBtn" value="yourvalue"/>
Then in the change even of the radio button, You shall fire the event
<script type="text/javascript">
$(document).ready(function()
{
$("input[name=buttonval]").on('change', function(){
var $postID = $('input:radio[name=buttonval]:checked').val();
$postID = "="+$postID;
});
$.ajax ({
type: "GET",
url: "localhost/ajax/buttonvaluereceiver.php",
data: {"postID" : $postID }
});
});
</script>
and in the success event of the ajax call you will get the result of what buttonvaluereceiver.php file does
Update :
As you need to do instantly in radio button change I am updating my answer for you
Here is the html and script
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form name='frm' id='frm'>
<input type='radio' id='test' value='rad' name='rad'>
</form>
Your link :
<div id='link'></div>
<script>
$("input").change(function(){
var data = $("#frm").serialize();
Call();
});
function Call()
{
$.ajax({
type: "POST",
url : "result.php",
data : $("#frm").serialize(),
success : function(data)
{
console.log(data);
$("#link").html(data);
}
},"json");
}
</script>
Here is the php that creates your link
<?php
echo "<a href='url.php?id".$_POST['rad']."'>Click here</a>";
?>
You can change the url and values according to your need.
I have a link that sends a query string to a PHP file that returns data from a Mysql server as JSON. I want to put this JSON data into a DIV that has an ID which matches the query string sent to the PHP file.
Here is my PHP generated Link and DIV
<html>
<head>
<title>BadNoise</title>
</head>
<body>
<form action="Artisttest.php" method="post">
<fieldset>
<p> <input type="submit" value=" Search Our Artists" /> </p>
</fieldset>
</form>
<?php
$con=mysqli_connect("localhost","ee2800","secret","ee2800");
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
if($_SERVER["REQUEST_METHOD"] == "POST")
$result = mysqli_query($con,"SELECT * FROM artist LIMIT 10");
if($_SERVER["REQUEST_METHOD"] == "POST")
echo " <h2>List of BadNoise Artists</h2>
<table border='0'>
<tr>
<th>Artist Number</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Search Songs</th>
</tr>";
while($row = mysqli_fetch_array($result)) {
echo "<tr>";
echo "<td>" . $row['ArtistNumber'] . "</td>";
echo "<td>" . $row['FirstName'] . "</td>";
echo "<td>" . $row['LastName'] . "</td>";
echo '<td> <a class="dynamic" href="test4.php?name='. urlencode($row['ArtistNumber']).'">Search Songs</a></td>';
echo "<td><div id=" . $row['ArtistNumber'] . "></div></td>";
echo "</tr>";
}
echo "</table>";
$results->close();
mysqli_close($con);
?>
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="general.js"></script>
</body>
Here is the PHP file that returns the JSON data
<?php
$row = $_GET['name'];
echo $_GET['name'];
$dbs = new mysqli("localhost", "ee2800", "secret", "ee2800");
$results = $dbs->query("SELECT * FROM songs WHERE ArtistNumber = {$_GET['name']};");
$rows = array();
while ($r = mysqli_fetch_array($results))
{
$rows[] = $r;
}
echo json_encode($rows);
?>
And here is my attempt at doing this asynchronously with JS.
$(function() {
$("a.dynamic").click(function(e) {
e.preventDefault();
var destDiv = $(this).closest('tr').find('td').last().find('div[id]');
$.getJSON( this.href, function(obj){
$.each(obj, function(key, value) {
destDiv.append("<p>"+value.Title+"</p>");
});
});
});
});
I think I am on the right path but am having trouble targeting the DIV.
Is this what you meant?
</tr><tr><td>1</td><td>Steve</td><td>Perry</td><td> <a id="dynamic" href="test4.php?name=1">Search Songs</a></td></tr><td><div id=1></div></td>
Since you're adding the content on the same row where the click originated, you may not need the id of the div in order to add the content there. Using the link that was clicked determine the parent tr using .closest() the drill down to the div using .find() and .last().
And since you're likely to have multiple links I would recommend using a class .dynamic instead of an id. <td> <a class="dynamic" href="test4 ....
This should do it:
$(function() {
$("a.dynamic").click(function(e) {
e.preventDefault();
var destDiv = $(this).closest('tr').find('td').last().find('div[id]');
$.getJSON( this.href, function(obj){
$.each(obj, function(key, value) {
destDiv.append("<p>"+value.Title+"</p>");
});
});
});
});
UPDATE
The above code has been edited to include DOM ready.
Concept verification --> with DOM ready clicking a a.dynamic link does not navigate to the link.
I am very new to JavaScript what is related to it.
I have a set of dynamic rows and corresponding columns to those rows. In one column I have a button. When I click on it, it displays the results of a select query in another page based on the Posted Competence_ID.
The query works fine and I get correct results when I click on the button. However, what I would like to do now, is to display that message in an alert when the button is clicked and stay on the same page rather than opening a new tab..
Here is the relevant HTML code that shows the table I use:
echo "<table border='1' id='mycompstable' class='sortablee' cellpadding='0' cellspacing='0'>";
echo "<tr><th>ID</th><th>Competence Group</th><th>Competence Class</th><th>Competence Description</th><th>Own Evaluation</th><th>Manager's evaluation from last year</th><th>Target levels</th><th>Gap</th><th>Action</th><th class='unsortable'>Action ready target </th></tr>";
foreach($descs as $compi){
echo "<tr>";
echo "<td>".$compi['Competence_ID']."</td>";
echo "<td><p style='text-align: center;'>".$compi['Competence_Group']."</p></td>";
if(isset($compi['Competence_class'])){echo "<td>".$compi['Competence_class']."</td>";}else echo "<td><p style='text-align: center;'>-</p></td>";
echo "<td>".$compi['Competence_Description']."</td>";
echo "<td class='evaluation'>";
echo "<select class='ownlevelselect' id='ownlevelselect-.".$compi['Competence_ID']."' name='level-".$compi['Competence_ID']."' >";
if (isset($compi['ownlevel']) && $compi['ownlevel']!= '' && !empty($compi['ownlevel']) && $compi['ownlevel']!= 0) {
echo "<option selected value='".$compi['ownlevel']."' selected='selected'>".$compi['ownlevel']."</option>";
}
echo "<option value='' >--</option>";
echo "<option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option>";
echo "</select>";
echo $compi['ownlevel'];
echo '<a test="'.$compi['Competence_ID'].'" onClick="showLevels('.$compi['Competence_ID'].');" target="_blank" href="'.INDEX.'?categ='.$_GET['categ'].'&action='.$_GET['action'].'&subaction=viewlevels'.'&levels='.$compi['Competence_ID'].'">';
echo '<img class="linkki" src="'.KUVAT.'paivita.gif" alt="'._("tiedot").'" title="'._("Click to view the description of each level?").'"/></a>';
echo "</td>";
Here is the code to retrieve the data:
function fetchlevels($Competence_id){
$this->query="SELECT * FROM levels WHERE comp_id=".$_REQUEST['levels'];
$tulos=$this->suoritaKysely();
return $tulos;
}
And here is the page that I want to show in the message:
$levels=$this->levels;
$comp=$this->compdesc;
echo "Levels explanation for the competence:".$comp['Competence_Description']."<br>";
echo "Level 1 = ".$levels[0]['lvl1'];
echo "<br>"."level 2 = ".$levels[0]['lvl2'];
echo "<br>"."level 3 = ".$levels[0]['lvl3'];
echo "<br>"."level 4 = ".$levels[0]['lvl4'];
echo "<br>"."level 5 = ".$levels[0]['lvl5'];
echo "<br><br>";
echo '<input type="button" value="close" window onclick="window.close();">';
?>
Any kind of help would be very much appreciated
Here is a Ajax simulation in jsfiddle
http://jsfiddle.net/ncubica/Umxjb/
HTML
<i style='display:none' id="loadingPopup">Loading</i>
<table>
<tr>
<td data-id="td1"> row 1</td>
</tr>
<tr>
<td data-id="td2"> row 2</td>
</tr>
<tr>
<td data-id="td3"> row 3</td>
</tr>
</table>
javascript
$("table").on("click", function(event){
var $target = $(event.target);
if($target.is("td")){
var id = $target.attr("data-id");
makeAjax(id);
}
});
//simulating ajax
function makeAjax(id){
//you will have to use ajax an retrieve you json format
//i will simulate ajax only
$("#loadingPopup").show();
var _json = { id : id, value : "some value", description : "some description"};
setTimeout(function(){response(_json)}, 1000);
}
function response(_json){
$("#loadingPopup").hide();
alert(_json.id + " - " + _json.value);
}
CSS
table{font-family:arial; font-size:12px; width:100%}
table tr td{border-bottom:1px solid #CCC; padding:10px;}
Just an example based on the given info!
echo '<a onClick="showLevels('.$compi['Competence_ID'].');">';
echo '<img class="linkki" src="'.KUVAT.'paivita.gif" alt="'._("tiedot").'" title="'._("Click to view the description of each level?").'"/></a>';
Javascript/jQuery/Ajax
function showLevels(comp_id)
{
$.ajax({
type: "GET",
url: "process_file.php?comp_id="+comp_id,
success: function (result) {
alert(result);
}
});
}
process_file.php
<?php
//Your database Config.
$comp_id=$_REQUEST['comp_id'];
$this->query="SELECT * FROM levels WHERE comp_id=".$comp_id;
$tulos=$this->suoritaKysely();
//Proper Output Actions
$levels=$this->levels;
$comp=$this->compdesc;
echo "Levels explanation for the competence:".$comp['Competence_Description']."<br>";
echo "Level 1 = ".$levels[0]['lvl1'];
echo "<br>"."level 2 = ".$levels[0]['lvl2'];
echo "<br>"."level 3 = ".$levels[0]['lvl3'];
echo "<br>"."level 4 = ".$levels[0]['lvl4'];
echo "<br>"."level 5 = ".$levels[0]['lvl5'];
echo "<br><br>";
?>
It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 9 years ago.
I am using 2 div elements as tabber
1) search candidate
2) my list.In search candidate when i select some candidate ,than that candidate is added to selected_candidate table and displayed in my list div ,but to display it in my list i have to reload whole page ,how can i display it without reloading whole page
<div class="tabber" style="width: auto;">
<div <?php if(isset($_POST['submita'])){ echo "class=\"tabbertab tabbertabhide\"";}else{echo "class=\"tabbertab\"";} ?>>
<h3>SEARCH CANDIDATE</h3>
//.....select candidate code.....//
</div>
<div <?php if(isset($_POST['searchsel_list'])){ echo "class=\"tabbertab tabbertabdefault\"";}else{echo "class=\"tabbertab\"";} ?>>
<h3>MY LIST</h3>
<div id="tabr">
<script>
$("td").removeAttr("style");
</script>
<form method="post" action="csearch.php?epage=csearch" name="mylist">
<div class="CSSTableGenerator">
<table id="mylist_remark">
<caption>SELECTED CANDIDATE LIST</caption>
<!-- headings -->
<tr>
<th>REMARK</th>
<th> <input name="delete_sel" id="delete_sel" value="DELETE" type="submit" class="button"/></th>
<th>NAME</th>
<th>CELL NO</th>
<th>STATUS</th>
<th>EMAIL ID</th>
<th>LOCATION</th>
<th>QAULIFICATION INFORMATION</th>
<th>KIND OF WORK</th>
<th>DETAILED CV</th>
</tr>
<!-- /headings -->
<?php
if($mresult_set)
{
if (mysql_num_rows($mresult_set) == 0)
{
echo "<tr>";
echo "<td colspan=\"9\" ><p align=\"center\" class=\"message\"> <blink><span style=\"color:red;\" > NO CANDIDATE SELECTED</span></blink></p></td>";
echo "</tr>";
}
$j=0;
while($data_set1 = mysql_fetch_array($mresult_set))
{
// $i=0;
if($data_set1['ca']=='')
{
$qua="";
}
else
{
$qua=$data_set1['ca'];
}
if($data_set1['cs']=='')
{
$qua="";
}
else
{
$qua.=",".$data_set1['cs'];
}
if($data_set1['cwa']=='')
{
$qua.="";
}
else
{
$qua.=",".$data_set1['cwa'];
}
if($data_set1['completed']=='')
{
$qua.="";
}
else
{
$qua.=", Completed(".$data_set1['completed'].")";
}
if($data_set1['persuing']=='')
{
$qua.="";
}
else
{
$qua.=", Persuing(".$data_set1['persuing'].")";
}
echo "<tr >";
echo "<td><input id={remark{$j}} type=\"text\" class=\"fancyText\" onkeyup=\"writeremark(this.id,{$data_set1['eid']},{$emprid});\" value=\"{$data_set1['remark']}\" maxlength=\"15\" placeholder=\"Write Remark\" /></td>";
echo "<td style=\"text-align:center;\"><input id=\"listrow_sel{$j}\" type=\"checkbox\" name=\"list_sel[]\" value=\"{$data_set1['eid']}|{$emprid}\" /></td>";
echo "<td>{$data_set1['ename']} {$data_set1['lname']}</td>";
echo "<td>{$data_set1['ecell']}</td>";
echo "<td>{$data_set1['eposition']}</td>";
echo "<td>{$data_set1['eemail']}</td>";
if($data_set1['ecity']=='')
{
echo "<td>{$data_set1['ecountry']}</td>";
}
else
{
echo "<td class=\"showmsg\" title=\"Country ={$data_set1['ecountry']}, State = {$data_set1['estate']} \" >{$data_set1['ecity']}</td>";
}
// echo "<td>{$data_set['ecountry']},{$data_set['estate']},{$data_set['ecity']}</td>";
echo "<td>{$qua}</td>";
echo "<td>{$data_set1['other_work1']} {$data_set1['other_work2']}{$data_set1['other_work3']}{$data_set1['other_work4']} {$data_set1['other_work5']} {$data_set1['other_work6']} {$data_set1['other_work7']} {$data_set1['other_work8']} {$data_set1['other_work9']} {$data_set1['other_work10']}{$data_set1['other_work1e']} {$data_set1['other_work2e']} {$data_set1['other_work3e']} {$data_set1['other_work4e']} {$data_set1['other_work5e']} {$data_set1['other_work6e']} {$data_set1['other_work7e']} {$data_set1['other_work8e']} {$data_set1['other_work9e']} {$data_set1['other_work10e']}</td>";
echo "<td><a style=\"cursor:hand;\" href=\"detailcv.php?id={$data_set1['eid']}&flag=0\" target=\"_blank\" ><input style=\"cursor:auto;width:40px;\" class=\"button\" name=\"cv\" type=\"button\" value=\"C V\" /></a></td>";
//echo "<td class=\"edit\" contenteditable=\"true\">Write Remark</td>";
echo "</tr>";
$j++;
}
}
?>
<tr><td colspan="10">
<img src="images/pdfdown.jpg" alt="Adobe Doc" width="42" height="42" title="Download List In PDF"/>   
<a id="showcand" href="<?php echo $listurl1;?>"><img src="images/excel.gif" alt="Excel Doc" width="42" height="42" title="Download List In Excel "/></a>
<?php ?>
</td></tr>
</table></div>
</form>
</div>
In this Image i am showing tabber,when i click on MY list ,hoe can i load its form without loading whole page so that selected candidate will be visible,i came to know that it can be done using Ajax ,but i dont know how i can do it in my code
you can do with the help of ajax. for that you have to call ajax function on select candidate whom you want to add to your list.
ajax function demo are as follows:
function getList(){
$.ajax({
type: "POST",
url: "List.php", // file where you process the list.
data: {name:name1,sda:name2}, // post data you want to pass to the file for processing
success:function(data){
//change the content of your mylist div here
}
});
}
you can try it.
I have been developing a simple page, and there is the problem - my page contains a table with 2 columns; if user moves his cursor to the second column it transforms in editable field and user can edit it and do some actions. Also the page contains links for pagination; if user clicks by link, for example, "2", then table change its content dynamically using Ajax/Jquery. So, my code works good for initial screen, but if I change a page then I can't edit any field in the second column, i.e. code for editing doesn't work now. So, please, tell me, how can I fix it? JS code:
<script type="text/javascript" charset="utf-8">
function hide_info_block(block_id) {
$('#info_block').hide();
}
$(function()
{
var old_value='No translate';
var item_id='';
var item;
$('.field').hover(
function()
{
old_value=$(this).text();
item_id=$(this).attr('id');
item=$(this).parent('td');
new_value=(old_value=='Not translated') ? '' : old_value;
$(this).empty();
var field="<div id='save_button' class='btn btn-primary' style='float: right' href='#'>Save</div><form>"+
"<div style='overflow: hidden; padding-right: .5em;'>"+
"<input id='new_value' type='textarea' name='term' style='width: 100%;' value='"+new_value+"'/></div></form>";
$(this).html(field);
},
function()
{
$(this).empty();
$(this).html(old_value);
});
$('#save_button').live('click', function() {
if ($.trim($('#new_value').val()).length==0)
{
alert ('The string is empty');
return;
}
var loader="<td><img id='small_loader' style='position:absolute' src='/small_loader.gif' /></td>";
item.after(loader);
var old_val=old_value;
var new_val=$.trim($('#new_value').val());
$.post("http://"+document.location.host+"/index.php/welcome/update_record", { old_value: old_val,
value: new_val, id: item_id} ,
function(data) {
var message="Message";
var json = jQuery.parseJSON(data);
var item_id=json.id.replace(/([!"#$%&'()*+,./:;<=>?#\[\\\]^`{|}~])/g, "\\$1");
if (json.result=='LOGIN') {
message="You need to enter before making any actions";
$('#'+item_id).html(json.old_value);
}
else {
if (json.result=='OK') {
$('#'+item_id).css('color', '#000000');
message="Your correction has been added successfully";
$("#"+item_id).html(json.language_value);
}
else {
message="Your correction has been updated successfully";
$('#'+item_id).html(json.language_value);
}
}
$('#small_loader').remove();
alert(message);
});
});
$('.page_button').live('click',function() {
$('#ajaxBusy').show();
$('.selected_page_button').attr('class','page_button');
$(this).attr('class','selected_page_button');
$.post("http://"+document.location.host+"/index.php/welcome/update_records_set/"+this.id,
function(data)
{
if (data != "")
{
$(".records_content:last").empty();
$(".records_content").html(data);
}
$('#ajaxBusy').hide();
});
});
});
</script>
Table code:
<div class="records_content">
<table>
<tbody>
<?php
$i=0;
foreach ($records as $record) {
//echo "<tr class = 'output' style='border-bottom: 1px dotted silver;'>";
echo "<tr class = 'output' style='border-bottom: 1px dotted silver;'>";
echo "<td width='400'>" . strip_tags($record['translate']['language_value']) . "</td>";
if ($record['translate']['coalesce(loc.language_value)'])
{
echo "<td width='200' height='30'><div class='field' id='".$record['translate']['label_value']."/".$record['language_id']."'>".
strip_tags($record['translate']['coalesce(loc.language_value)'])."</div>";
if (count($record['alternatives']))
{
echo "<br/><b>Alternatives:</b>";
echo "<ul>";
foreach ($record['alternatives'] as $alternative)
{
echo "<li>".strip_tags($alternative['coalesce(loc.language_value)'])."</li>";
}
echo "</ul>";
}
}
else
{
echo "<td width='200'>"."<div class='field' style='font-style: italic; color: #FF0000' id='".$record['translate']['label_value']."/".$record['language_id']."'>Not translated</div>";
if (count($record['alternatives']))
{
echo "<br/><b>Alternatives:</b>";
echo "<ul>";
foreach ($record['alternatives'] as $alternative)
{
echo "<li>".strip_tags($alternative['coalesce(loc.language_value)'])."</li>";
}
echo "</ul>";
}
}
echo "</td>";
$i++;
}
?>
</tbody>
</table>
</div>
UPDATE 2:
$('body').on({
mouseenter: function(event)
{
old_value=$(this).text();
item_id=$(this).attr('id');
item=$(this).parent('td');
new_value=(old_value=='Not translated') ? '' : old_value;
$(this).empty();
var field="<div id='save_button' class='btn btn-primary' style='float: right' href='#'>Save</div><form>"+
"<div style='overflow: hidden; padding-right: .5em;'>"+
"<input id='new_value' type='textarea' name='term' style='width: 100%;' value='"+new_value+"'/></div></form>";
$(this).html(field);
},
mouseleave: function(event)
{
$(this).empty();
$(this).html(old_value);
}}, '.field');
You're adding a hover handler to your .field only once. When you change your .field by loading it through AJAX, it becomes a different element without any event handlers.
attach the hover event handler after loading the new .field.
OR
use delegated event handlers.
$('body').on({
mouseenter: function() {
//code when mouse enters .field
},
mouseleave: function() {
//code when mouse leaves .field
}
}, '.field');
Try running it in Google Chrome and press F12 so you have the JavaScript debugger available. Use the [Console] tab so see whether any errors are occurring. Its surprising what you can learn from this and what JavaScript is doing behind the scenes!