I have in defi.php a form with the following AJAX call:
$('#def').submit(function (event) {
var data = $(this).serialize();
$.post('defidos.php', data)
.success(function (result) {
$('#dos').html(result);
})
.error(function () {
console.log('Error loading page');
})
return false;
});
defidos.php has the following table row which contains a check box:
<tr>
<td>
<input type="checkbox" name="seleccion[]" value="<?php echo $id_plantilla; ?>" />
</td>
<td>
<?php echo $faquerynm['cve_plaza']; ?>
</td>
<td>
<?php echo $desc_cat; ?>
</td>
<td>
<?php echo $faquerynm['tiempo']; ?>
</td>
<td>
<?php echo $faquerynm['situacion']; ?>
</td>
<td>
<?php echo $div_areal; ?>
</td>
</tr>
After the call the checkbox is not shown.
If I put the checkbox outside the table it shows correctly.
I solved the problem using css , creating the table with divs .
#container {
display: table;
}
#row {
display: table-row;
}
#left, #right, #middle {
display: table-cell;
text-align: center;
}
.titulos {
font-weight: bold;
}
With this the checkbox shows correctly
Related
I have created a page, it has a select box which is used for filtering the results in a table below it. The select box is using ajax to filter results.The table which is loaded after ajax call has a button in one column, on its click a div should be added in the page. The onclick for this button was working fine when the table was static with static button to add div, now the table is being loaded through ajax the button doesn't work, it doesn't add the div that it was adding before. Can someone point out the problem please, I am a beginner in jquery and ajax
here is my code:
(function ( $ ) {
$(document).ready(function(){
var itemsArr = [];
$(".btn-add").on("click",function() {
var $row = $(this).closest("tr"); // Find the row
var $text = $row.find(".this-name").text(); // Find the text
// Let's test it out
$('#col2').append('<div class="item"><p>'+$text+'</p>X</div>');
itemsArr.push($text);
//alert(itemsArr);
console.log("added");
$("#items").val(JSON.stringify(itemsArr));
});
function getAll(){
$.ajax
({
url: 'http://asp4.walnut-labs.com/getproducts.php',
data: 'action=showAll',
contentType :'application/json',
cache: false,
success: function(r)
{
$("#col1").html(r);
}
});
}
getAll();
// function to get all records from table
// code to get all records from table via select box
$("#brands").change(function()
{
var id = $(this).find(":selected").val();
var dataString = 'action='+ id;
$.ajax
({
url: 'http://asp4.walnut-labs.com/getproducts.php',
data: dataString,
contentType :'application/json',
cache: false,
success: function(r)
{
$("#col1").html(r);
}
});
});
});
$(document).on('click','.delete-button', function(e){
e.preventDefault();
//alert('yes');
$(this).closest('.item').remove();
});
}( jQuery ));
HTML is :
<tbody>
<tr bgcolor="#238efb" color="white">
<td style="text-align: center; color: #fff;"><strong>ID</strong></td>
<td style="text-align: left; color: #fff; padding-left: 15px;"><strong>Item Code</strong></td>
<td style="text-align: left; color: #fff; padding-left: 15px;"><strong>Item Name</strong></td>
<td style="text-align: left; color: #fff; padding-left: 15px;"><strong>Brand</strong></td>
<td style="text-align: left; color: #fff; padding-left: 15px;"><strong>Button</strong></td>
</tr>
<?php
while($row = mysql_fetch_array($comments, MYSQL_ASSOC))
{
$id = $row['id'];
$name = $row['code'];
$level = $row['name'];
$number = $row['brand'];
?><tr>
<td class="this-id" style="text-align: center;"><?php echo $id;?></td>
<td class="this-name" style="text-align: left; padding-left: 15px;"><?php echo $name;?></td>
<td style="text-align: left; padding-left: 15px;"><?php echo $level;?></td>
<td style="text-align: left; padding-left: 15px;"><?php echo $number;?></td>
<td style="text-align: left; padding-left: 15px;"><button class="btn-add">Add Item</button></td>
</tr><?php
}
mysql_close($con);
?>
</tbody>
</table>
For selectbox that triggers AJAX:
<div class="searchbar">
<select name="brands" id="brands">
<option value="showAll" selected="selected">Show All Products</option>
<?php $querybrand = "SELECT DISTINCT brand FROM q1h27_data ";
$commentsbrand = mysql_query($querybrand);
while($row = mysql_fetch_array($commentsbrand, MYSQL_ASSOC))
{
//print_r($row['brand']);?>
<option value="<?php echo $row['brand']; ?>"><?php echo $row['brand']; ?></option>
<?php } ?>
</select>
</div>
Use the following:
$(document).ready(function(){
var itemsArr = [];
$(document).on('click','.btn-add',function() {
// code goes here.....
});
}
This is my full error:
Warning: Invalid argument supplied for foreach() in C:\xampp\htdocs\bilzar\components\com_blank\views\default\tmpl\default.php on line 14
My code is:
<?php
// Valid execution check
defined('_JEXEC') or die('Restricted Access');
?>
<h1>Blank Component</h1>
<input type="button" class="measure" value="Get New Measurement" />
<table id="thedata">
<thead>
<tr>
<th>Measurement</th><th>Timestamp</th>
</tr>
</thead>
<tbody class="measurements">
<?php foreach($this -> data as $data) : ?>
<?php
$unixTime = strtotime($data->timestamp);
?>
<tr>
<td><?php echo $data->measurement; ?></td><td><?php echo date("d-m-Y H:i:s", $unixTime); ?></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<div class="pagination"><?php echo $this->pagination->getPagesLinks(); ?></div>
<script>
window.addEvent('domready', function() {
$$(".measure").addEvent('click', function() {
var request = new Request.JSON(
{
url: 'http://localapache.dyndns.org/joomla_arduino/index.php/blank/sense/sense/raw',
onSuccess: function(e) {
var tr = new Element('tr', {html: '<td>'+e.measurement+'</td><td>'+e.timestamp+'</td>'});
var element = $('thedata').getElement('tbody');
tr.inject(element, 'top');
}
}).get();
});
/*
*/
});
</script>
<style>
table td { padding: 5px; }
input[type=button] { margin:10px 0;}
.pagination ul { list-style-type:none; }
.pagination ul li { float:left; }
</style>
Can anyone help me how I can fix this error?
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()
I've been trying to POST data back to a controller from a lightbox using ajax but of course it doesn't work.
I have two select lists, both populated from the default controller. When I select a value and click the submit I have the error box briefly flash up the disappear again.
Using the firebug network tab I can see the POST request however under the post tab there's no data. I must be doing something wrong in the javascript itself but to me it looks ok and all my googling didn't suggest an alternative that worked.
Here's my code...
<body style="background-color: #f0f0f0;">
<div style="margin: 5px;">
<div id="ajax-login-register">
<div id="login-box">
<div style="text-align: center; font-weight: bold; font-size: 20px; margin: 10px 0 20px 0; border-bottom: #ccc 2px dashed; padding-bottom: 12px;"><?=lang('login')?></div>
<form id="login-form">
<select name="currency_sel" id="brand_country" class="form_select_200px">
<option value="0" selected><i>Select your preferred Currancy</i></option>
<?php foreach($currencies as $currency): ?>
<option value="<?php echo $currency['currency_id']; ?>"><?php echo $currency['currency_name']; ?></option>
<?php endforeach; ?>
</select>
</form>
</div>
<div id="register-box">
<div style="text-align: center; font-weight: bold; font-size: 20px; margin: 10px 0 20px 0; border-bottom: #ccc 2px dashed; padding-bottom: 12px;"><?=lang('meta_description')?></div>
<form id="register-form">
<select name="language_sel_1" id="brand_country" class="form_select_200px">
<option value="0" selected>Select your preferred Language</option>
<?php foreach($languages as $language): ?>
<option value="<?php echo $language['language_id']; ?>"><?php echo $language['language_name']; ?></option>
<?php endforeach; ?>
</select>
<select name="language_sel_2" id="brand_country" class="form_select_200px">
<option value="0" selected>Select your preferred Language</option>
<?php foreach($regions as $region): ?>
<option value="<?php echo $region['country_id']; ?>"><?php echo $region['country_name']; ?></option>
<?php endforeach; ?>
</select>
<div class="line"> </div>
</form>
</div>
<div>
<form>
<button id="ajax-submit-button" style="font-size: 14px;"><?//=lang('register')?>Submit</button>
</form>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#ajax-login-button').button({
icons: {
primary: "ui-icon-check"
}
});
$('#ajax-submit-button').click(function(){
var error = false;
if(error){
return false;
} else {
$.ajax({
url: "<?=site_url('locale/set_ui_lang')?>",
type: "POST",
dataType: "json",
data: ({
'currency_sel' : $('#currency_sel :selected').val(),
'language_sel_1' : $('#language_sel_1 :selected').val(),
'language_sel_2' : $('#language_sel_2 :selected').val()
}),
success: function(data){
parent.$.colorbox.close();
parent.location.reload();
},
error: function(xhr, ajaxOptions, thrownError){
alert("ERROR! \n\n readyState: " + xhr.readyState + "\n status: " + xhr.status + "\n thrownError: " + thrownError + "\n ajaxOptions: " + ajaxOptions);
}
});
}
});
});
</script>
</body>
When the error notice flags up the ready state and status both come up 0, thrownerror is just error.
Also the receiving controller is currently only just a print_r(&_POST) to test.
I don't seem to be able to get past this myself, if anyone can help it is much appreciated.
Thanks
The keys of your data object should not be in quotes.
It should work (provided the jQuery calls for the values work) when you change it to:
data: {
currency_sel: $('#currency_sel :selected').val(),
language_sel_1: $('#language_sel_1 :selected').val(),
language_sel_2: $('#language_sel_2 :selected').val()
},
Source: jQuery.ajax() documentation
Is it just me or are you making the click event return false instead of firing off AJAX?
var error = false;
if(error){
return false;
}
Your ajax call is in a click handler for a button inside a separate form.
Here's what's happening..
When you click the button, you trigger an ajax call.
The click handler then returns normally and the form that contains the button is submitted.
When that happens a new page loads, and the browser cancels any pending ajax request, which triggers your error. (after you click ok in the error alert, you should notice a normal page load)
To prevent that you can either return false; after your ajax call, or call preventDefault() on the event object:
$('#ajax-submit-button').click(function(e){
e.preventDefault();
/* Rest of the code */
});
This should fix your problem.
*Edit: * note the e parameter on the function definition
You can't multiple IDs with the same name and you selectors are wrong.
$('#currency_sel :selected').val() should be
$('select[name="currency_sel"] option:selected').val() and same for the others.
EDIT
Remove parenthesis of data, it should be
data: {
currency_sel : $('select[name="currency_sel"] option:selected').val(),
language_sel_1 : $('select[name="language_sel_1"] option:selected').val(),
language_sel_2 : $('select[name="language_sel_2"] option:selected').val()
},
Fixed this in combination of Ben & L105. For anyone else with a similar problem here's the working code. div names etc are a bit sketchy, this is still a prototype build...
<body style="background-color: #f0f0f0;">
<div style="margin: 5px;">
<div id="ajax-login-register">
<div id="login-box">
<div style="text-align: center; font-weight: bold; font-size: 20px; margin: 10px 0 20px 0; border-bottom: #ccc 2px dashed; padding-bottom: 12px;"><?=lang('login')?></div>
<form id="login-form">
<select name="currency_sel" id="currency_sel" class="form_select_200px">
<option value="0" selected><i>Select your preferred Currancy</i></option>
<?php foreach($currencies as $currency): ?>
<option value="<?php echo $currency['currency_id']; ?>"><?php echo $currency['currency_name']; ?></option>
<?php endforeach; ?>
</select>
</form>
</div>
<div id="register-box">
<div style="text-align: center; font-weight: bold; font-size: 20px; margin: 10px 0 20px 0; border-bottom: #ccc 2px dashed; padding-bottom: 12px;"><?=lang('meta_description')?></div>
<form id="register-form">
<select name="language_sel_1" id="language_sel_1" class="form_select_200px">
<option value="0" selected>Select your preferred Language</option>
<?php foreach($languages as $language): ?>
<option value="<?php echo $language['language_id']; ?>"><?php echo $language['language_name']; ?></option>
<?php endforeach; ?>
</select>
<div class="line"> </div>
</form>
</div>
<div>
<form>
<button id="ajax-submit-button" style="font-size: 14px;"><?//=lang('register')?>Submit</button>
</form>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#ajax-login-button').button({
icons: {
primary: "ui-icon-check"
}
});
$('#ajax-submit-button').click(function(e){
e.preventDefault();
$.ajax({
url: "<?=site_url('locale/set_ui_lang')?>",
type: "POST",
dataType: "json",
data: {
currency_sel:$('select[name="currency_sel"] option:selected').val(),
language_sel_1:$('select[name="language_sel_1"] option:selected').val()
},
success: function(data){
parent.$.colorbox.close();
parent.location.reload();
},
error: function(xhr, ajaxOptions, thrownError){
alert("ERROR! \n\n readyState: " + xhr.readyState + "\n status: " + xhr.status + "\n thrownError: " + thrownError + "\n ajaxOptions: " + ajaxOptions);
}
});
});
});
I have an editable grid where I want to edit the CSS such that the textarea to show the maximum width, but somehow I can't increase the width of the text area.
My database has three columns:
ID
Name
Gossip
I'm retrieving everything and displaying it in an editable grid using PHP.
index.php code
<?php
$db = new mysqli('localhost', 'root', '', 'bollywood');
$db->set_charset('utf8');
if ($db->connect_errno) {
die('Check the database connection again!');
}
$userQuery = 'SELECT Id,Name,Gossip FROM bollywood';
$stmt = $db->query($userQuery);
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var textBefore = '';
$('#grid').find('td input').hover(function() {
textBefore = $(this).val();
$(this).focus();
}, function() {
var $field = $(this),
text = $field.val();
$(this).blur();
// Set back previous value if empty
if (text.length <= 0) {
$field.html(textBefore);
} else if (textBefore !== text) {
// Text has been changed make query
var value = {
'row': parseInt(getRowData($field)),
'column': parseInt($field.closest('tr').children().find(':input').index(this)),
'text': text
};
$.post('user.php', value)
.error(function() {
$('#message')
.html('Make sure you inserted correct data')
.fadeOut(3000)
.html(' ');
$field.val(textBefore);
})
.success(function() {
$field.val(text);
});
} else {
$field.val(text);
}
});
// Get the id number from row
function getRowData($td) {
return $td.closest('tr').prop('class').match(/\d+/)[0];
}
});
</script>
<title></title>
</head>
<body>
<?php if ($stmt): ?>
<div id="grid">
<p id="message">Click on the field to Edit Data</p>
<table>
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Gossip</th>
</tr>
</thead>
<tbody>
<?php while ($row = $stmt->fetch_assoc()): ?>
<tr class="<?php echo $row['Id']; ?>">
<td><input type="text" value="<?php echo $row['Id']; ?>" /> </td>
<td><input type="text" value="<?php echo $row['Name']; ?>" /></td>
<td ><input type="textarea" cols="500" rows="100" value="<?php echo $row['Gossip']; ?>" /></td>
</tr>
<?php endwhile; ?>
</tbody>
</table>
</div>
<?php else: ?>
<p>No actors added yet</p>
<?php endif; ?>
</body>
</html>
user.php code
<?php
// Detect if there was XHR request
if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) &&
strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
$fields = array('row', 'column', 'text');
$sqlFields = array('Id', 'Name', 'Gossip');
foreach ($fields as $field) {
if (!isset($_POST[$field]) || strlen($_POST[$field]) <= 0) {
sendError('No correct data');
exit();
}
}
$db = new mysqli('localhost', 'root', '', 'bollywood');
$db->set_charset('utf8');
if ($db->connect_errno) {
sendError('Connect error');
exit();
}
$userQuery = sprintf("UPDATE bollywood SET %s='%s' WHERE Id=%d",
$sqlFields[intval($_POST['column'])],
$db->real_escape_string($_POST['text']),
$db->real_escape_string(intval($_POST['row'])));
$stmt = $db->query($userQuery);
if (!$stmt) {
sendError('Update failed');
exit();
}
}
header('Location: index.php');
function sendError($message) {
header($_SERVER['SERVER_PROTOCOL'] .' 320 '. $message);
}
style.css code
body {
font: normal 14px Comic Sans, Comic Sans MS, cursive;
}
table {
width: 500px;
}
td, th {
border: 1px solid #d8d8bf;
}
th {
padding: 5px;
font: bold 14px Verdana, Arial, sans-serif;
}
td {
padding: 10px;
width: 200px;
}
td input {
margin: 0;
padding: 0;
// width:200px;
font: normal 14px sans-serif;
/** Less flicker when :focus adds the underline **/
border: 1px solid #fff;
}
td input:focus {
outline: 0;
border-bottom: 1px dashed #ddd !important;
}
#grid input {
// width: 200%;
}
You doing it wrong
<td ><input type="textarea" cols="500" rows="100" value="<?php echo $row['Gossip']; ?>" /></td>
Should be:
<td ><textarea cols="500" rows="100"><?php echo $row['Gossip']; ?></textarea>
textarea is html tag name but not input type. so change this.
<td ><input type="textarea" cols="500" rows="100" value="<?php echo $row['Gossip']; ?>" /></td>
to
<td ><textarea cols="500" rows="100"><?php echo $row['Gossip']; ?></textarea>
also add this css.
<style>
textarea {
resize: both;
width:700px;
}
</style>
also are you sure that you can get content using this.
<?php echo $row['Gossip']; ?>