I'm making a table, using the jQuery library (DataTables), and wanted to add buttons to export the results of the table to an Excel file, then lead me by the example that this page, and get them exported, but I now send an alert when the page loads, I've been reading on the internet and say it manages modifying some lines and states within the scripts, but I could not fix it,when i open the page, it showme the next error:
DataTables warning (table id = 'example'): Cannot reinitialise DataTable.
To retrieve the DataTables object for this table, pass no arguments or
see the docs for bRetrieve and bDestroy
I call my scripts by the next form:
index.php
<meta charset="utf-8">
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/funciones.js" type="text/javascript"></script>
<script src="js/jquery.dataTables.js" type="text/javascript"></script>
<link href="css/cuerpo.css" rel="stylesheet" type="text/css" />
<!--Prueba-->
<style type="text/css" title="currentStyle">
#import "css/demo_page.css";
#import "css/TableTools.css";
</style>
<script src="js/TableTools.js" type="text/javascript"></script>
<script src="js/ZeroClipboard.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready( function () {
$('#example').dataTable( {
"sDom": 'T<"clear">lfrtip'
} );
} );
</script>
<!--Prueba-->
</head>
<body id="dt_example">
<div id="container">
<div id="header">
</div>
<div id="intro">
<header id="titulo">
</header>
<div id="demo">
<article id="contenido"></article>
<br><br>
</div>
</div>
</body>
and it call a JS page:
$(document).ready(function(){
verlistado()
//se carga la lista de la consulta
})
function verlistado(){ //funcion para mostrar el listado en el index por jquery
var randomnumber=Math.random()*11;
$.post("Registro/lista_base.php", {
randomnumber:randomnumber
}, function(data){
$("#contenido").html(data);
});
}
after it use the jQuery library and print on a php data table:
$(document).ready(function(){
$('#example').dataTable( { //convertimos nuestro listado de la forma del jquery.datatables- pasamos el id de la tabla
"sPaginationType": "full_numbers" //damos formato a la paginacion(numeros)
} );
})
<!--Prueba-->
<style type="text/css" title="currentStyle">
#import "css/TableTools.css";
</style>
<script src="js/TableTools.js" type="text/javascript"></script>
<script src="js/ZeroClipboard.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready( function () {
$('#example').dataTable( {
"sDom": 'T<"clear">lfrtip'
} );
} );
</script>
<!--Prueba-->
<script language="JavaScript" type="text/javascript">
function PopWindow(idUsuario)
{
window.open('Registro/detalle.php?id='+idUsuario,'Registo del alumno','width=420, height=350');
}
</script>
<script type="text/javascript" language="javascript" src="js/listado.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script>
$(document).ready(function()
{
$('[rel=tooltip]').bind('mouseover', function()
{
if ($(this).hasClass('ajax'))
{
var ajax = $(this).attr('ajax');
$.get(ajax,
function(theMessage)
{
$('<div class="tooltip">' + theMessage + '</div>').appendTo('body').fadeIn('fast');});
}
else{
var theMessage = $(this).attr('content');
$('<div class="tooltip">' + theMessage + '</div>').appendTo('body').fadeIn('fast');
}
$(this).bind('mousemove', function(e)
{
$('div.tooltip').css
({
'top': e.pageY - ($('div.tooltip').height() / 2) - 5,
'left': e.pageX + 15
});
});
}).bind('mouseout', function(){
$('div.tooltip').fadeOut('fast', function(){
$(this).remove();
});
});
});
</script>
<style>
.tooltip
{
position:absolute;
width:250px;
background-image:url(images/tip-bg.png);
background-position:left center;
background-repeat:no-repeat;
color:#FFF;
padding:5px 5px 5px 18px;
font: Verdana, Geneva, sans-serif;
font-size:12px;
}
li
{
margin-bottom:30px;
}
#wrapper
{
margin:0 auto;
width:500px;
margin-top: 99px;
}
</style>
<div id="demo">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th>Instituto</th>
<th>Categoria</th>
<th>Version</th>
<th width="20%">Nombre</th>
<th>Nacionalidad</th>
<th>email</th>
<th>Puntaje</th>
<th>Comprobante</th>
<th width='1%'>Detalles</th>
</tr>
</thead>
<tfoot>
<tr>
</tr>
</tfoot>
<tbody>
<?php
while($reg= mysql_fetch_array($listado))
{
echo '<tr>';
echo '<td><center>'.mb_convert_encoding($reg['razon_comercial'], "UTF-8").'</center></td>';
echo '<td><center>'.mb_convert_encoding($reg['categoria'], "UTF-8").'</center></td>';
echo '<td><center>'.mb_convert_encoding($reg['version'], "UTF-8").'</center></td>';
echo '<td>'.mb_convert_encoding($reg['Nombre'], "UTF-8").'</td>';
echo '<td><center>'.mb_convert_encoding($reg['nacionalidad'], "UTF-8").'</center></td>';
echo '<td>'.mb_convert_encoding($reg['email'], "UTF-8").'</td>';
echo '<td><center>'.mb_convert_encoding($reg['calificacion'], "UTF-8").'</center></td>';
echo "<td><center><a href='".mb_convert_encoding($reg['comprobante'], 'UTF-8')."'</a>descargar</center></td>";
echo "<td><a href=javascript:PopWindow(".mb_convert_encoding($reg['idAlumno'], 'UTF-8').") alt=Image Tooltip rel=tooltip content='
<div id=con><b>Nombre: </b>".mb_convert_encoding($reg['Nombre'], "UTF-8")."<br>
<b>Nacionalidad: </b>".mb_convert_encoding($reg['nacionalidad'], "UTF-8")."<br>
<b>Correo: </b>".mb_convert_encoding($reg['email'], "UTF-8")."<br>
<b>Instituto: </b>".mb_convert_encoding($reg['razon_comercial'], "UTF-8")."<br>
<b>Puntaje: </b>".mb_convert_encoding($reg['calificacion'], "UTF-8")."<br>
<b>Categoria: </b>".mb_convert_encoding($reg['categoria'], "UTF-8")."<br>
<b>Versión: </b>".mb_convert_encoding($reg['version'], "UTF-8")."</div>'><center><img src='images/detail.png' width='20%'></center></a><br></td>";
echo '</tr>';
}
?>
</tbody>
</table>
I hope you can help me.
I think the problem you're having is that the javascript is firing before the data is loaded. To get around this make sure the script is located BELOW the table that is being populated.
You are calling a dataTable against #example twice on the same page which will throw the "DataTables warning (table id = 'example'): Cannot reinitialise DataTable" error
Previous answer is correct, but, if you want to add the export buttons, you also need the flash path.
sSwfPath: "/swf/copy_csv_xls_pdf.swf",
Related
I've been trying to do this for several days, but hope someone could just have a better idea than me, I'm trying include an edit button to my Datatable but since I'm calling the data using the method in my Controller, I am not able to find a way to make this button work
Here is my Datatable method:
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/1.10.21/css/dataTables.jqueryui.min.css" rel="stylesheet" type="text/css">
<link href="https://cdn.datatables.net/scroller/2.0.2/css/scroller.jqueryui.min.css" rel="stylesheet" type="text/css">
<link href="https://cdn.datatables.net/buttons/1.6.2/css/buttons.dataTables.min.css" rel="stylesheet" type="text/css">
<script src="//code.jquery.com/jquery-1.12.3.js"></script>
<script
src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet"
href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet"
href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
<script src="/js/jquery.min.js" ></script>
<script src="/js/jquery-ui.js" ></script>
<script src="https:////cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.21/js/dataTables.jqueryui.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/scroller/2.0.2/js/dataTables.scroller.min.js"></script>
<meta name="csrf-token" content="{{ csrf_token() }}">
<style type="text/css">
.loader {
position:fixed;
opacity: 0.5;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('/images/double_ring.gif') 50% 50% no-repeat rgb(249, 249, 249, 249);
}
.table tr:hover { background-color: #eeeeee;}
.content { background-color:white; }
</style>
<div id="loader" class="loader" style="display:none;"></div>
<h3 id='dashboard_title_header'>Pending Proposals</h3>
<br/>
</br>
<table id="table_roster" class="display nowrap">
<thead>
<tr>
<th>Proposal Number</th>
<th>Proposal Type</th>
<th>Sponsor Code</th>
<th>Prime Sponsor Code</th>
<th>Sponsor Assigned Proposal Number</th>
<th>Department Code</th>
<th>Status</th>
<th>Submission Deadline Date</th>
<th>Project Start Date</th>
<th>Proposal Specialist</th>
<th>PI</th>
</tr>
</thead>
</table>
<script type="text/javascript">
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
function format ( d ) {
return '<table id="table_child" cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
'<tr>'+
'<td>IRG:</td>'+
'<td>'+d[11]+'</td>'+
'<td>IRG Date:</td>'+
'<td>'+d[12]+'</td>'+
'<td>Council Cycle:</td>'+
'<td>'+d[13]+'</td>'+
'<td>Score:</td>'+
'<td>'+d[14]+'</td>'+
'<td>Percentile:</td>'+
'<td>'+d[15]+'</td>'+
'<td>Assessment:</td>'+
'<td>'+d[16]+'</td>'+
'<td>'+
'<button class="edit-model btn btn-info">'+
'<span class="glyphicon glyphicon-edit"></span>'+
'Edit'+
'</button>'+
'</td>'+
'</tr>'+
'</table>';
}
$(document).ready(function() {
var table = $('#table_roster').DataTable({
"processing": true,
ajax: "/getproposals",
//paging: true,
//pageLenght: '10',
deferRender: true,
scrollX: true,
scrollY: 400,
scrollCollapse: true,
scroller: true,
dom: 'Bfrtip',
"columnDefs": [
{
className: "dt-body-center",
targets: -1,
defaultContent: ["<i class='glyphicon glyphicon-edit text-info editButton' aria-hidden='true'></i>"]
}
]
});
$('#table_roster tbody').on('click', 'tr', function () {
var datas = table.row( this ).data();
var tr = $(this).closest('tr');
var row = table.row( tr );
if ( row.child.isShown() ) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
row.child( format(row.data()) ).show();
tr.addClass('shown');
}
//EditProposal(data[0]);
});
$(document).on('click', '.edit-model', function() {
$('#footer_action_button').text(" Update");
$('#footer_action_button').addClass('glyphicon-check');
$('#footer_action_button').removeClass('glyphicon-trash');
$('.actionBtn').addClass('btn-success');
$('.actionBtn').removeClass('btn-danger');
$('.actionBtn').removeClass('delete');
$('.actionBtn').addClass('edit');
$('.modal-title').text('Edit');
$('.deleteContent').hide();
$('.form-horizontal').show();
var stuff = $(this).data('info').split(',');
fillmodalData(stuff)
$('#myModal').modal('show');
});
});
function EditProposal(id) {
window.open("/proposals/" + id);
}
</script>
And this is my method in the Controller
public function getProposals()
{
$sql = "SELECT proposal_number, proposal_type, sponsor_code, prime_sponsor_code, sponsor_assigned_proposal_number, award_admin_dept_code, status, submission_deadline_date, project_start_date, proposal_specialist, lname, IRG, IRGDate, CouncilCycleNumber, ScoreNumber, PercentageNumber, AssessmentEntry FROM proposal LEFT JOIN pendingproposals USING(proposal_id) LEFT JOIN proposal_research_team USING(proposal_id) WHERE proposal.status in ('Unsubmitted','Dept Approval In Process', 'Admin Office In Process', 'JIT Request Received', 'JIT Submitted', 'Submitted to Sponsor', 'Sub 1/4: Awaiting Agreement', 'Sub 2/4: Under Negotiation', 'Sub 3/4: Partially Executed') AND role = 'Lead Principal Investigator';";
$results = \DB::connection('mysql2')->select( \DB::raw($sql) );
$data = array();
$i = 0;
foreach ($results as $r) {
$data[$i] = array($r->proposal_number, $r->proposal_type, $r->sponsor_code, $r->prime_sponsor_code, $r->sponsor_assigned_proposal_number, $r->award_admin_dept_code, $r->status, $r->submission_deadline_date, $r->project_start_date, $r->proposal_specialist, $r->lname, $r->IRG, $r->IRGDate, $r->CouncilCycleNumber, $r->ScoreNumber, $r->PercentageNumber, $r->AssessmentEntry);
$i++;
}
$results2 = ["sEcho" => 1,
"iTotalRecords" => count($data),
"iTotalDisplayRecords" => count($data),
"aaData" => $data];
return json_encode($results2);
}
I appreciate your help :)
I am currently working on a project that shows data from an SQL table using bootstrap editable for live editing.
It works fine - changes are transferred to the SQL table. What is already working?:
Showing current value from SQL table
Providing a drop-down for selection
Transferring changed values to SQL table
-> BUT Part 3 (transferring changed value) is only working for free-text input (class xedit).
What I am looking for is the code for: transferring chosen value of drop-down-list to SQL-Table
Here is the HTML-code:
<?php
include("connect.php");
?>
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta charset="utf-8">
<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="assets/css/custom.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div style="text-align:center;width:100%;font-size:24px;margin-bottom:20px;color: #2875BB;">EDIT YOUR CHARACTERS</div>
<div class="row">
<table class= "table table-striped table-bordered table-hover">
<thead>
<tr>
<th colspan="1" rowspan="1" style="width: 180px;" tabindex="0">NAME</th>
<th colspan="1" rowspan="1" style="width: 220px;" tabindex="0">ROLE</th>
<th colspan="1" rowspan="1" style="width: 288px;" tabindex="0">SECOND ROLE</th>
</tr>
</thead>
<tbody>
<?php
$query = mysql_query("SELECT * FROM characters");
$i=0;
while($fetch = mysql_fetch_array($query))
{
if($i%2==0) $class = 'even'; else $class = 'odd';
echo'<tr class="'.$class.'">
<td class="xedit" id="'.$fetch['id'].'" key="name">'.$fetch['name'].'</td>
<td class="xedit" id="'.$fetch['id'].'" key="role">'.$fetch['role'].'</td>
<td class="xedit2" id="'.$fetch['id'].'" key="secondrole">'.$fetch['secondrole'].' </td>
</td>
</tr>';
}
?>
</tbody>
</table>
</div>
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/bootstrap-editable.js" type="text/javascript"></script>
<script>
$(function(){
$('.rolestatus').editable({
source: [
{value: 1, text: 'DD'},
{value: 2, text: 'HEAL'},
{value: 3, text: 'TANK'}
]
});
});
</script>
<script type="text/javascript">
jQuery(document).ready(function() {
$.fn.editable.defaults.mode = 'popup';
$('.xedit').editable();
$(document).on('click','.editable-submit',function(){
var key = $(this).closest('.editable-container').prev().attr('key');
var x = $(this).closest('.editable-container').prev().attr('id');
var y = $('.input-sm').val();
var z = $(this).closest('.editable-container').prev().text(y);
$.ajax({
url: "process.php?id="+x+"&data="+y+'&key='+key,
type: 'GET',
success: function(s){
if(s == 'status'){
$(z).html(y);}
if(s == 'error') {
alert('Error Processing your Request!');}
},
error: function(e){
alert('Error Processing your Request!!');
}
});
});
});
</script>
</div>
</body>
</html>
Here is the process.php code
<?php
include("connect.php");
if($_GET['id'] and $_GET['data'])
{
$id = $_GET['id'];
$data = $_GET['data'];
$key = $_GET['key'];
if(mysql_query("update characters set $key='$data' where id='$id'"))
echo 'success';
}
?>
So does anybody know how I can transfer the chosen dropdown-value (class -> xedit2) to SQL table?
Hope you can help!
Not sure exacly how x-editable works
But in first look i think that the type of your ajax should be "POST" if you want to update some data. And in my opinion you have syntax error in your sql query near "$key"
I was wondering if it is possible for me to add a dropdown into the Associated Floor Plans section of the table. In this dropdown I'd like to add other URL's that are stored in the database. Would I be creating a new column in the database to call the additional URL's that are stored in Google Drive and how would I go about creating a dropdown showing all the files associated with that floor.
It's an extremely particular question seeing as it would be calling additional items from the database into what in essence is the same column.
Thank you for your instance. Also, feel free to critique the methods I've used in my code.
<?php
$con = mysql_connect("localhost", "root", "root");
if(!$con){
die("Error: ".mysql_error());
}
mysql_select_db("Test_Data", $con);
$result = mysql_query("SELECT * FROM Test_DataSet");
?>
<html>
<head>
<title>TEST TABLE</title>
<meta http-equiv="Content-Type" content="text/hmtl; charset=UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="DataTables-1.10.1/media/js/jquery.js" type="text/javascript"></script>
<script src="DataTables-1.10.1/media/js/jquery.DataTables.js" type="text/javascript"></script>
<script type="text/javascript" src="fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<link rel="stylesheet" href="fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js"></script>
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-buttons.css" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js"></script>
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-media.js"></script>
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js"></script>
<style type="text/css">
#import "DataTables-1.10.1/media/css/jquery.dataTables.css";
</style>
<style type="text/css">
#import "DataTables-1.10.1/examples/resources/bootstrap/3/dataTables.bootstrap.css";
</style>
<script type="text/javascript" charset="UTF-8">
$(document).ready(function(){
$('#datatables').dataTable();
})
</script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
<script>
$(document).ready(function() {
$(".various").fancybox({
maxWidth : 1600,
maxHeight : 1200,
fitToView : true,
width : '100%',
height : '100%',
autoSize : true,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
});
</script>
<script>
jQuery(document).ready(function () {
$('a.modalGeneric').fancybox({
type: 'iframe',
fitToView: true,
autoSize: true,
openEffect: 'fade',
openSpeed: 'slow'
});
});
</script>
<style> iframe{border: none; width: 20}</style>
</head>
<body>
<div>
<table id="datatables" class="hover" cellspacing="0" width="100%">
<thead>
<tr>
<th>Building</th>
<th>Floor</th>
<th>Number of AP</th>
<th>Associated Floor Plans</th>
<th>View on WebPage</th>
</tr>
</thead>
<tbody>
<?php
while($row = mysql_fetch_assoc($result)){
?>
<tr class ="odd gradeX">
<td><?php echo $row['Building']; ?></td>
<td><?php echo $row['Floor']; ?></td>
<td><?php echo $row['Number_Of_AP']; ?></td>
<td><?php echo '<a class="various fancybox.iframe” href="'.$row['Associated_Floor_Plans'].'" target="_blank">'.$row['Associated_Floor_Plans'].'</a>';?></td>
<td><?php echo '<a class="various fancybox.iframe” href="'.$row['View_On_Webpage'].'" target="_blank">View in AMP<'.$row['View_On_Webpage'].'</a>';?></td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
</body>
</html>
I was redirecting to new page start.php and passing variable in this way:
window.location.href = 'start.php?&userid=+ userid;`
Can I do it in this way:
$.post('start.php',{userid: userid});
window.location.href = 'start.php';
I dont want to use GET and Form submit.
Because on same page there are other processes which already post data to other page.
I tested above but on start.php it says var is not defined
UPDATE
start.php
<?php
$user_id=$_GET['userid']; //When I use GET
?>
<?php
$user_id=$_POST['userid']; //When I use POST
?>
login.php
<html>
<head>
<title>ThenWat</title>
<link href="css/button.css" rel="stylesheet" type="text/css">
<link href="css/rateit.css" rel="stylesheet" type="text/css">
<script src="//connect.facebook.net/en_US/all.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="js/jquery.rateit.js" type="text/javascript"></script>
<style>
.header{
background-color:#0B6121;
border:2px solid #0B6121;
padding:10px 40px;
border-radius:5px;
}
.middle{
background-color:Yellow;
}
.left{
background-color:Green;
}
.url{
box-sizing: border-box;
display: block;
}
.url:hover {
box-shadow: 2px 2px 5px rgba(0,0,0,.2);
}
html, body { margin: 0; padding: 0; border: 0 }
</style>
</head>
<body>
<div class="header" style="">
<table style="">
<tr>
<td><img src= "3.png" height="50" width="310"/></td>
</tr>
</table>
</div>
<table border="0" width="100%">
<tr>
<div class="middle">
<td style="width:40%">
<input type="button" id="loginButton" class="button" onclick="authUser();" value="Login | ThanWat" style="display:none; left:500px; position:relative"/>
<lable id="lable1" style="display:none;" ><i> Please wait .. </i> </lable>
<div class="rateit bigstars" id="rateit99" data-rateit-starwidth="32" data-rateit-starheight="32" style=" position:relative; top:-30px; display:none; left:300px" >
</div>
</td>
</div>
</tr>
</table>
<div id="fb-root"></div>
<script type="text/javascript">
var userid;
FB.init({
appId: '1412066',
xfbml: true,
status: true,
cookie: true,
});
FB.getLoginStatus(checkLoginStatus);
function authUser()
{
FB.login(checkLoginStatus, {scope:'email'});
}
function checkLoginStatus(response)
{
document.getElementById('lable1').style.display = 'block';
if(response && response.status == 'connected')
{
FB.api('/me?fields=movies,email,name', function(mydata)
{
console.log(mydata.email);
console.log(mydata.id);
userid=mydata.id;
var name=mydata.name;
//alert(name);
var email=mydata.email;
var json = JSON.stringify(mydata.movies.data);
var a = JSON.parse(json);
var picture="https://graph.facebook.com/"+userid+"/picture?type=small";
// alert(picture);
$.post('user_record.php',{'myd':a, name: name, email: email, userid:userid, picture:picture}, function(data)
{
window.location.href = 'start.php?userid='+userid;
});
});
console.log('Access Token: ' + response.authResponse.accessToken);
}
else
{
document.getElementById('lable1').style.display = 'none';
document.getElementById('loginButton').style.display = 'block';
}
}
</script>
</body>
</html>
UPDATE2
$.post('user_record.php',{'myd':a, name: name, email: email, userid:userid, picture:picture}, function(data)
{
var $form = $("<form id='form1' method='post' action='start.php'></form>");
form.append('<input type="hidden" name="userid" value="'+userid+'" />');
$('body').append($form);
window.form1.submit();
});
start.php
<?php
$user_id=$_POST['userid'];
echo $user_id;
?>
Here is a solution that worked for me. You need to add a new form using jquery after your first ajax response and then submit this form using javascript.
<script>
$.post('user_record.php',{'myd':a, name: name, email: email, userid:userid, picture:picture}, function(data){
var $form = $("<form id='form1' method='post' action='start.php'></form>");
$form.append('<input type="hidden" name="userid" value="'+data+'" />');
$('body').append($form);
window.form1.submit();
});
</script>
Please modify it according to your requirement. Hope this helps
I want to see tab No. 2 when "IF Condition" will meet the requirements. Here is my code. Please advice me how can I do this.
Thanks
Shahid
<?php
//Authorization / Security
session_start();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link type="text/css" href="../javascript/jquery/themes/ui-lightness/jquery.ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../javascript/jquery/jquery-1.4.2.js"></script>
<script type="text/javascript" src="../javascript/jquery/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../javascript/jquery/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../javascript/jquery/ui/jquery.ui.tabs.js"></script>
<script type="text/javascript">
$(function() {
alert('main');
$("#container").tabs({
ajaxOptions: {
error: function(xhr, status, index, anchor) {
$(anchor.hash).html("Couldn't load this tab. We'll try to fix this as soon as possible. If this wouldn't be a demo.");
}
}
});
});
</script>
<?php
if($_GET['action'] == "add")
{
////////////////// Trigger Tab No. 2 ////////////////
///////////////// and ///////////////
//////////////// change url of Tab 3 ///////////////
}
?>
</head>
<body leftmargin="0" topmargin="0">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2"><?php include("../includes/headerone.php");?></td>
</tr>
<tr>
<td width="15%"><?php include("../includes/leftbar.php");?></td>
<td width="83%" ><div id="container">
<ul class="tabs-nav">
<li><span>Add</span></li>
<li><span>Edit</span></li>
<li><span>View</span></li>
</ul>
</div></td>
</tr>
<tr>
<td colspan="2"><?php include("../includes/footer.php");?></td>
</tr>
</table>
</body>
</html>
Try your script tag like this, it adds javascript to do what you want by echoing it into the self calling anonymous function if the php condition is met
<script type="text/javascript">
$(function() {
alert('main');
$("#container").tabs({
ajaxOptions: {
error: function(xhr, status, index, anchor) {
$(anchor.hash).html("Couldn't load this tab. We'll try to fix this as soon as possible. If this wouldn't be a demo.");
}
}
});
<?php
if($_GET['action'] == "add"){
echo "$('.tabs-nav li a:eq(1)').trigger('click');";
echo "$('.tabs-nav li a:eq(2)').attr('href', 'newurl');";
}
?>
});
</script>