I want the user to be able to add a question from a table row into a textarea. The textarea the question goes into depends on the ".plus" button the user selected to choose their question.
E.g. If the user clicked on the plus button on the top of the page, then the question when the user clicks on the "Add" button goes into the textarea on top of the page.
Another E.g. If the user clicked on the plus button in the 5th table row, the question when the user clicks on the "Add" button goes into the textarea within that row (5th row).
The problem I am having though is that when the user clicks on the "Add" button, nothing happens. It is suppose to close the modal window and insert the question into the correct textarea but nothing is happening. It is not closing the modal window and it is not inserting a question into a textarea.
What am I doing wrong?
Below is the code for the application:
<head>
<script type="text/javascript">
function insertQuestion(form) {
var $tbody = $('#qandatbl > tbody');
var $tr = $("<tr class='optionAndAnswer' align='center'></tr>");
var $plusrow = $("<td class='plusrow'></td>");
var $question = $("<td class='question'></td>");
$('.questionTextArea').each(function () {
var $this = $(this);
var $questionText = $("<textarea class='textAreaQuestion'></textarea>").attr('name', $this.attr('name') + "[]").attr('value', $this.val());
$question.append($questionText);
});
$('.plusimage').each(function () {
var $this = $(this);
var $plusimagerow = $("<a onclick='return plusbutton();'><img src='Images/plussign.jpg' width='30' height='30' alt='Look Up Previous Question' class='imageplus'/></a>").attr('name', $this.attr('name') + "[]").attr('value', $this.val());
$plusrow.append($plusimagerow);
});
$tr.append($plusrow);
$tr.append($question);
$tbody.append($tr);
form.questionText.value = "";
$('.questionTextArea').val('');
}
function plusbutton() {
// Display an external page using an iframe
var src = "previousquestions.php";
$.modal('<iframe src="' + src + '" style="border:0;width:100%;height:100%;">');
return false;
}
function closewindow() {
$.modal.close();
return false;
}
$(document).on('click', '.add', function () {
console.log("clicked");
//lets get our Question Text...
var theQuestion = $("td:first-child", $(this).parent()).text();
//the row is present, let's then make sure that the proper cell gets oru data.
if ($('.activePlusRow').length > 0) {
$('.activePlusRow').next('.textAreaQuestion').val(theQuestion);
$('.activePlusRow').removeClass('activePlusRow');
}
$.modal.close();
return true;
});
$(document).on('click', '.plusrow', function () {
//adding a unique class for the purpose of the click.
$(this).addClass('activePlusRow');
});
</script>
</head>
<body>
<form id="QandA" action="<?php echo htmlentities($action); ?>" method="post">
<div id="detailsBlock">
<table id="question">
<tr>
<td rowspan="3">Question:</td>
<td rowspan="3">
<textarea class="questionTextArea" rows="5" cols="40" name="questionText"></textarea>
</td>
</tr>
</table>
<table id="plus" align="center">
<tr>
<th>
<a onclick="return plusbutton();">
<img src="Images/plussign.jpg" width="30" height="30" alt="Look Up Previous Question" class="plusimage" name="plusbuttonrow"/>
</a>
<span id="plussignmsg">(Click Plus Sign to look
<br/>up Previous Questions)</span>
</th>
</tr>
</table>
<table id="questionBtn" align="center">
<tr>
<th>
<input id="addQuestionBtn" name="addQuestion" type="button" value="Add Question"
onClick="insertQuestion(this.form)" />
</th>
</tr>
</table>
</div>
<hr/>
<div id="details">
<table id="qandatbl" align="center">
<thead>
<tr>
<th class="plusrow"></th>
<th class="question">Question</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</form>
</body>
The details stored in the modal window comes from a seperate script known as "previousquestions.php", Below is the code where it shows the result of the "QuestionContent" field only displayed and it's "Add" button after the user has compiled a search:
<?php
$output = "";
$output .= "
<table border='1' id='resulttbl'>
<tr>
<th id='questionth'>Question</th>
</tr>
";
while ($questionrow = mysql_fetch_assoc($questionresult)) {
$output .= "
<tr>
<td id='questiontd'>{$questionrow['QuestionContent']}</td>
<td id='addtd'><button type='button' class='add'>Add</button></td>
</tr>";
}
$output .= " </table>";
echo $output;
}
}
?>
Thank you
var $questionText = $("<textarea class='textAreaQuestion'></textarea>")
.attr('name',$this.attr('name')+"[]")
.val($this.val()); // .val() for set value to textarea
Related
I'm doing Inventory tracking system, and I want there is an alert say "Are you sure?" when the delete button is pressed. It work when you press delete, but the alert not showing up.
This is my code:
<html>
<head>
<title>View Records</title>
</head>
<body>
<p><a href="Search_Vendor.php"><img src="img/SEARCH2.jpg" width="25"
height="27" align='left'></a></p>
<div class="dropdown"><img class="dropbtn" img src="img/dropdown.png"
width="44" height="47"></img>
<div class="dropdown-content">
HOMEPAGE
ADD NEW RECORD
PRINT
</div>
</div>
<center> <h2> VENDOR RECORD </h2> </center>
<?php
// connect to the database
include('connection.php');
// get results from database
$result = mysql_query("SELECT * FROM vendor")
or die(mysql_error());
// display data in table
echo "<table border='1' cellpadding='20' cellspacing='0' align ='center'";
echo "<tr> <th>Vendor ID</th> <th>Vendor Name</th> <th>Contact No </th>
<th>Address</th> <th></th> <th></th></tr>";
// loop through results of database query, displaying them in the table
while($row = mysql_fetch_array( $result )) {
// echo out the contents of each row into a table
echo "<tr>
<td align = center>".$row['Vendor_ID']."</th>
<td align = center>".$row['Vendor_Name']."</th>
<td align = center>".$row['Contact_No']."</th>
<td align = center>".$row['Address']."</th>
<td><a href='Update_Vendor.php?ID=$row[ID]
&Vendor_ID=$row[Vendor_ID]
&Vendor_Name=$row[Vendor_Name]
&Contact_No=$row[Contact_No]
&Address=$row[Address]'>Update</a></td>
<td>
<a onclick="return confirm('Are you sure?')"
href="Delete_Vendor.php?ID=<?= $row[ID] ?>">Delete</a>
</td>
</tr>";
}
//close the table
echo "</table>";
?>
</p>
</body>
</html>
Thanks for your help.
Regards
Since you're using a link for you clicked element, it's likely that it is trying to actually open the link address before your code can run. Use e.preventDefault(); with and event handler like below to avoid that behaviour:
See this jsFiddle
<a class="delete" href="Delete_Vendor.php?ID=123">Delete</a>
$(function() {
$('.delete').click(function(e) {
var $this=$(this);
e.preventDefault();
if (confirm('Are you sure?')) {
// code to delete stuff
window.location=$this.attr('href');
}
});
});
I found this example on the net... http://www.w3schools.com/jsref/met_win_confirm.asp
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var txt;
var r = confirm("Press a button!");
if (r == true) {
txt = "You pressed OK!";
} else {
txt = "You pressed Cancel!";
}
document.getElementById("demo").innerHTML = txt;
}
</script>
In my view the form as
<table width="90%" border="0" cellspacing="2" cellpadding="2" id="table-data" align="center" style="border:1px dashed #CCCCCC" class="table table-vcenter table-striped">
<tr class="tr_clone">
<td> % Completion</td>
<td> <?php echo $form->textField($model_result,'floatPaymentpercentage[]',array('class'=>'form-control','placeholder'=>'%')); ?></td>
<td> <?php echo $form->textField($model_result,'varAmount[]',array('class'=>'form-control','placeholder'=>'Amount')); ?></td>
<td><input type="button" name="add" value="Add" class="tr_clone_add btn btn-xs btn-warning"></td>
</tr>
Here i have two textboxes for payment terms..if i save ones it will be saved.
If i add more the last will not saved in database
In my controller we can use print_r()
echo ("<pre>"); print_r($_POST); echo ("</pre>");exit;
The default text field values only shown here.
Here the text fields are added dynamically.
The dynamic added text field's values are not displayed.
In my model the rules are
public function rules()
{
return array(
array('floatPaymentpercentage','required'),
array('varAmount','required'),
);
}
here is the java script for add more
<script type="text/javascript">
$(document).on('click','.delete',function(){
$(this).closest('tr').remove();
});
$("input.tr_clone_add").live('click', function() {
if($(this).val() == "Add")
{
var $tr = $(this).closest('.tr_clone');
var $clone = $tr.clone();
$clone.find(':text').val('');
$tr.find('.tr_clone_add').val('Delete')// set value to Delet
$tr.find('.tr_clone_add').val('Delete')// set value to Delet
.toggleClass('tr_clone_add delete')// toggle classes
.unbind('click'); // unbind the current events from button
$tr.after($clone);
}
else
{
$(this).closest('tr').remove();
}
});
</script>
Please help me to fix this.
Here i can add js for funuction add more
Thanks
first I want to say that this question is related to jquery replacewith to get data with Ajax after click on a cell and if this against the rule I am sorry and delete this post.
I tried to get the value of a cell in a MySQL-generated table (with fetch_array). I want to click on a cell in the same and receive the value of the first cell in the row in a div-container.
Thanks to several entries here I found an example for "static" tables. Like this:
<table id="choose-address-table" class="ui-widget ui-widget-content">
<thead>
<tr class="ui-widget-header ">
<th>Name/Nr.</th>
<th>Street</th>
<th>Town</th>
<th>Postcode</th>
<th>Country</th>
<th>Options</th>
</tr>
</thead>
<tbody>
<tr>
<td class="nr"><span>50</span>
</td>
<td>Some Street 1</td>
<td>Glasgow</td>
<td>G0 0XX</td>
<td>United Kingdom</td>
<td class="use-address">
Use
</td>
</tr>
<tr>
<td id="chip" class="nr">49</td>
<td>Some Street 2</td>
<td>Glasgow</td>
<td>G0 0XX</td>
<td>United Kingdom</td>
<td>
<button type="button" class="use-address">Use</button>
</td>
</tr>
</tbody>
</table>
<br><br>
<div id="glasgow">Hello</div>
and
$("#chip").click(function () {
var scotland = $(this).closest("tr").find(".nr").text();
$("#glasgow").html(scotland);
});
http://jsfiddle.net/FnDvL/231/
Works fine. I insert this to my file, php, and get table data from mysql.
This is my code:
<html>
<head>
<script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(".information").click(function () {
var rodney = $(this).closest("tr").find(".nr").text();
$(".clicked_info").html(rodney);
});
</script>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<?
$con = mysqli_connect('localhost','root','','boerse');
$sql="SELECT short, name FROM markets";
$result = mysqli_query($con,$sql);
?>
<div class="markets">
<?
echo "<table>
<thead border='0'>
<tr>
<th>Index</th>
<th>Name</th>
</tr>
</thead>
<tbody border='1'>";
while($row = mysqli_fetch_array($result))
{
echo "<tr>";
echo "<td class='nr'>" . $row['short'] . "</td>";
echo "<td>" . $row['name'] . "</td>";
echo "<td class='information'>Use</td>";
echo "</tr>";
}
echo "</tbody></table>";
?>
<div class="clicked_info">Hello</div>
</div>
<br><br>
</body>
</html>
Now my problem is that I can click on the td with class information, but div class 'clicked_info' doesn't change. But I did like in the fiddle. So what went wrong? Or where is the problem? It must have to do with the MySQL-matter. But why?
This way I want to check if I got the content from the cell and I can continue working with it (as seen in my post before).
Maybe anyone can help. And again I am sorry if I break rules here.
Thank you to everyone.
You need to wrap your code in document-ready handler
$(document).ready(function () {
$(".information").click(function () {
var rodney = $(this).closest("tr").find(".nr").text();
$(".clicked_info").html(rodney);
});
});
Currently when your script executes there is no $(".information") thus event is not binded properly.
OR
Move your script at the bottom of your page. like
<script>
$(".information").click(function () {
var rodney = $(this).closest("tr").find(".nr").text();
$(".clicked_info").html(rodney);
});
</script>
</body>
OR
You can use event-delegation
$(document).on("click", ".information",function () {
var rodney = $(this).closest("tr").find(".nr").text();
$(".clicked_info").html(rodney);
});
Am just trying to show all the list in the pagination. am using datatable plugin's pagination on my file, pagination is working fine, in the list i have an image that have a function delete on click. in my pagination 1'st five records is shown . and the other five records shown on click next, delete function working properly on 1'st five record when i click on next than delete function stop it's working .
my code:-
<script>
var conf = jQuery.noConflict();
conf(document).ready(function(){
conf(".delete").on( "click", function() {
alert('adfasdfasd');
//alert(conf(this).attr("id"));
custid = conf(this).attr("id");
var r=confirm("Are you sure");
if (r==true)
{
var url = "<?php echo Mage::getBaseUrl();?>turnkey/index/deleteuser/";
conf.ajax({
type:"POST",
url:url,
data: { 'custid':custid},
success: function(msz){
alert(msz);
if(msz=="deleted") {
conf("#hidepro"+custid).hide("slow");
}
else {
//conf("#hidepro"+proid).hide();
alert("product cant be deleted");
}
//console.log("chal hun");
}
});
}
else
{
return false ;
}
});
});
</script>
and the pagination code is :-
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#example').dataTable();
} );
</script>
<div id="container">
<div id="demo">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example" width="100%">
<thead>
<tr>
<th>Factory</th>
<th></th>
<th>Contact</th>
<th>URL</th>
<th>Remove</th>
</tr>
</thead>
<tbody>
<?php
foreach( $custemail as $custemail1 ) {
$customer = Mage::getModel("customer/customer");
$customer->setWebsiteId(Mage::app()->getWebsite()->getId());
$customer->loadByEmail($custemail1); //load customer by email id ?>
<tr class="odd gradeX" style=" border-bottom: 1px solid #FF0000;" id = "hidepro<?php echo $customer['entity_id'] ?>">
<td class="bodyText style4" ><a style=" color: #CC3300;float: left;margin-top: 42px !important;text-decoration: underline;" href="<?php echo Mage::getBaseUrl();?>turnkey/index/listuser?id=<?php echo $customer->getEntity_id();?>"><?php echo $customer->getFactory();?></a> </td>
<td class="bodyText style4">
<a href="<?php echo Mage::getBaseUrl();?>turnkey/index/listuser?id=<?php echo $customer->getEntity_id();?>">
<img style=" width:100px;height:100px;margin-bottom:5px ;" src = "http://lab.ghrix.com/turn-key-mart/media/<?php echo $customer->getUserImage();?>"></a>
</td>
<td class="bodyText style4" style="padding-top: 10px;">
<?php echo $customer->getFirstname();?><?php //echo $customer->getUser_address();?><br><?php echo $customer->getmobile();?><br><?php echo $customer->getEmail();?></td>
<td class="bodyText style4" style="float: left;margin-top: 42px !important;" >
<a target="_blank" style="color:#005580;" href="<?php echo $customer->getWebsite();?>"><?php echo $customer->getWebsite();?></a></td>
<td class="bodyText style4"><div style= "cursor:pointer;" class = "delete" id = "<?php echo $customer['entity_id'] ?>"><img width="60px" src="<?php echo $this->getSkinUrl('images/trash.jpg'); ?>"</div></td>
</tr>
<?php }?>
</tbody>
</table>
</div>
</div>
please suggest where mistake is happen.
Without a live example, I can't be sure, but try this:
replace
conf(".delete").on("click", function() ...
with:
conf(document).on("click", ".delete", function() ...
The reason is that conf(".delete") only attaches to elements available at the time the function is run. It might be that your dataTable plugin runs first, removes the extra elements, then the delete binder is run and only works on the first 5. The second method binds to the document, and checks each click to see if it matches the .delete selector. This used to be known as jQuery.live()
Follow this if you can...
Basically i have an order form (which begins with one row).
<form id="orderform" name"orderForm" action="/secure/delivery-details.html" method="post">
<a id="add">+</a>
<table id="ordertable" width="533" border="0" cellspacing="0" cellpadding="2">
<tbody>
<tr>
<td width="33%">Product Code (e.g 66203)</td>
<td width="33%">Mtrs Required (e.g 10)</td>
<td width="33%">Preview Image</td>
</tr>
<tr class="item">
<td class="prodcode"><input type="text" name="prodcode[]" id="prodcode" /></td>
<td class="meterage"><input type="text" name="meterage[]" id="meterage" /></td>
<td class="imgsample"></td>
</tr>
</tbody>
</table>
<button>Submit</button>
</form>
Notice the link with an ID of "add". When checked this adds a new row to the table with the same ID. Using the code below.
var counter = 0;
//Order Form
$("#add").click(function() {
counter++;
var cln = $('#ordertable tbody>tr:last').clone(true);
// cln.find("[id^='prodcode']").each(function(i, val) {
// val.id = val.id.match(/^([^0-9]+)[0-9]*$/)[1] + "" + counter;
// });
cln.insertAfter('#ordertable tbody>tr:last');
$('#ordertable tbody>tr:last input').val('');
$('td.imgsample:last a').remove();
return false;
});
//Check for image preview
$("#prodcode").blur(function() {
var $this = $(this);
$this
.closest('tr') // find the parent tr
.find('td.imgsample') // find the imgsample in the row
.html( $(this).attr('id')) // update the contents
//.animate({'opacity':1},200);
var imgsample = $this.closest('tr').find('td.imgsample')
$.post('/public/themes/lbd/js/searchimage.php', //this page reads the image code and gives you the image location
{ action: 'searchimage', imgreference: $(this).val() },
function(data) {imgsample.html(data);}
);
});
My PHP in searchimage...
When i currently enter a product code if it is invalid it only puts the productID in td.imsample and i want it to say INVALID CODE
//Find image based on Product Code
function findimage($imageToFind) {
require '../../../../config.php';
$dbh = new PDO(DB_DSN, DB_USER, DB_PASS);
$sql = "SELECT * FROM isproducts WHERE prodCode = ".strtoupper($imageToFind)."";
$stmt = $dbh->query($sql);
$obj = $stmt->fetch(PDO::FETCH_OBJ);
$count = $stmt->rowCount();
if($count > 0) {
$sql2 = "SELECT * FROM imageindex WHERE filename LIKE '".strtoupper($imageToFind)."-%'";
$stmt2 = $dbh->query($sql2);
$obj2 = $stmt2->fetch(PDO::FETCH_OBJ);
echo ($stmt2->rowCount() == 1 ? '<span>'.$obj2->path.'/'.$obj2->filename.'</span> -' : 'No Image Available');
} else {
echo 'Invalid Code';
}
}
//Call Function
findimage($_POST['imgreference']);
try this, can have code errors since I could not test at all:
jQuery Template
HTML:
<script id="template-item" type="text/x-jquery-tmpl">
<tr class="item" id="${id}">
<td class="prodcode"><input type="text" name="prodcode[]" class="prodcode-input" data="${id}" val="" /></td>
<td class="meterage"><input type="text" name="meterage[]" class="meterage-input" val="" /></td>
</tr>
</script>
<form id="orderform" name"orderForm" action="/secure/delivery-details.html" method="post">
+
<table id="ordertable" width="533" border="0" cellspacing="0" cellpadding="2">
<thead>
<tr>
<th width="33%">Product Code (e.g 66203)</th>
<th width="33%">Mtrs Required (e.g 10)</th>
<th width="33%">Preview Image</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<td class="imgsample"></td>
</tfoot>
</table>
<button>Submit</button>
</form>
JS:
$(function() {
var counter = 0;
//Check for image preview
var blur_event = function(ev) {
var
self = $(this),
imgsample = $("#ordertable tfoot .imgsample");
$(imgsample).html( $(this).class() ); // update the contents
$.post('/public/themes/lbd/js/searchimage.php', //this page reads the image code and gives you the image location
{ action: 'searchimage', imgreference: $(self).val() },
function(data) {
$(imgsample).html(data);
}
);
return false;
};
//Order Form
$("#add").bind("click", function(ev) {
counter++;
var cln = $('#template-item').tmpl({id:"item-"+counter);
// cln.find("[id^='prodcode']").each(function(i, val) {
// val.id = val.id.match(/^([^0-9]+)[0-9]*$/)[1] + "" + counter;
// });
$(cln).find(".prodcode-input").bind("blur", blur_event);
$(cln).appendTo('#ordertable tbody');
return false;
});
});
Your problem is most likely due to the duplicated ID. That makes your HTML document invalid. See my explanation here.