Hey i am new at laravel and i am making an autocomplete search bar. But i am having problem that is when i write any word it gives error in my console panel that is
Failed to load resource: the server responded with a status of 404 (Not Found).
Controller of my code is given below
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Disease;
use Input;
class DiseaseController extends Controller
{
public function index()
{
return view('disease.disease');
}
public function autocomplete(Request $request)
{
$term = $request->term;
$data = Disease::where('symtomps','Like','%'.$term.'%')
->take(2)
->get();
$result=array();
foreach($data as $key => $v)
{
$results[]=['id' =>$v->id,'value'=>$v->symtomps];
}
return response()->json($results);
}
}
View of my code is
<html>
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-
beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<div class="row">
<div class="col-md-4"></div>
<div class="col col-md-4">
<section class="card">
<header class="card-heading">
<input type="text" name="searchname" class="form-control" id="searchname" placeholder="Search" >
</header>
<div class="card-block">
<table>
<tr>
<td>ID</td>
<td><input type="text" name="id" class="form-control"></td>
</tr>
<tr>
<td>Symtomps</td>
<td><input type="text" name="symtomps" class="form-control" ></td>
</tr>
</table>
</div>
</section>
</div>
</div>
</body>
<script type="text/javascript">
$('#searchname').autocomplete({
source: '{!!URL::route('autocomplete')!!}',
minlength:1,
autoFocus:true,
select:function(e,ui){
$('#id').val(ui.item.id);
}
});
</script>
And route is
Route::get('/',array('as'=>'disease','uses'=>'DiseaseController#index'));
Route::get('/autocomplete',array('as'=>'autocomplete',
'uses'=>'DiseaseController#autocomplete'));
Please help me where i am doing wrong as its not showing me any data when i type any word it just show the error in the console.
Related
Hey I am new at laravel and I am making an autocomplete search bar. But I am having problem that is when I write any word it gives error in my console panel that is
Failed to load resource: the server responded with a status of 404 (Not Found). jquery-1.10.2.js:8706
the line on which this error is coming in jquery is
xhr.send( ( s.hasContent && s.data ) || null );
Please help me. I have already tried alot but failed to get the required result.
View of my code where I included jquery is
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<div class="row">
<div class="col-md-4"></div>
<div class="col col-md-4">
<section class="card">
<header class="card-heading">
<input type="text" name="searchname" class="form-control" id="searchname" placeholder="Search" >
</header>
<div class="card-block">
<table>
<tr>
<td>ID</td>
<td><input type="text" name="id" class="form-control"></td>
</tr>
<tr>
<td>Symtomps</td>
<td><input type="text" name="symtomps" class="form-control" ></td>
</tr>
</table>
</div>
</section>
</div>
</div>
</body>
<script type="text/javascript">
$('#searchname').autocomplete({
source: '{!!URL::route('autocomplete')!!}',
//source: '{{ asset('search') }}',
//source: '{{URL::route('autocomplete')}',
minlength:1,
autoFocus:true,
select:function(e,ui){
//$('#id').val($data->symtomps);
}
});
</script>
Controller of my code is
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Disease;
use Input;
class DiseaseController extends Controller
{
public function index()
{
return view('disease.disease');
}
public function autocomplete(Request $request)
{
$term = $request->term;
$data = Disease::where('symtomps','Like','%'.$term.'%')
->take(2)
->get();
$result=array();
foreach($data as $key => $v)
{
$results[]=['id' =>$v->id,'value'=>$v->symtomps];
}
return response()->json($results);
}
}
You have not resource (means not any store file like json) either use ajax or do like this.
source: function (request, response) {
$.get("{!! URL::route('autocomplete') !!}", {
query: request.term
}, function (data) {
response(data);
});
},
If you are using jQuery from CDN, then you have to specify complete link in correct format.
Try changing your lines:
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
to
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
I have a form that I need to act in specific ways. Example: User brings equipment back: I don't want that to show up in my form. User takes equipment out: I want it to generate to my form, they enters some information, form sends information to database. User takes equipment out: it too generates said form, he doesn't enter any information, form submits information after 20 sec, information is in database.
I was doing a simple page refresh to get the information into my form but that was pulling all the equipment that had been brought into the warehouse that day. So I commented that out and then I would get stuck on my ajax page.
I then tried creating a new php page that had a 301 page refresh and that worked to get the page back to my index page, however, my form wasn't working properly and so I commented out the auto submit and now my form works great... except I can't fulfill this last requirement where the page will submit the data if the user forgets to put his equipment information in.
I'm looking to do an if/then/else type of page submission. However, I can't figure out how to do one purely in either php or html. This is what I have figured out so far but it doesn't work and I know I'm way off somewhere.
<!DOCTYPE html>
<html>
<body>
<!--This is the one that is currently commented out in my code
<script type="text/javascript">
window.setTimeout(function() {
window.location = 'index.php'},1000*2);
</script>
</body>
</html> -->
//This is my pipe dream
<?php
if (isset($_POST['action'])) {
switch ($_POST['action']) {
case ‘DONE’:
document.getElement('formSubmit').submit();
break;
}
} else {
<script type="text/javascript">
window.setTimeout(function(){
document.getElement('formSubmit').submit();
},1000*30);
</script>
}
?>
I don't know that much about jQuery other than going through a codecademy, and I know even less javascript. I'm a database person that got "conned" into building an advanced form/webpage. So I'm learning PHP, CSS, jQuery and HTML as I code.
Index.php:
<!DOCTYPE html>
<html>
<head>
<meta name=“Warehouse 3962” content="width=device-width, initial-scale=1.0">
<link href="style.css" type="text/css" rel="stylesheet">
<script type="text/javascript">
<!—window.setTimeout(function(){
document.getElement(‘formSubmit').submit();
},1000*30); —>
</script>
</head>
<body>
<section class="w">
<div class="row">
<div class="small columns">
<img src="logo.png" />
<h3 class="green">Users</h3>
</div>
<h6>Warehouse 3962</h6>
</div>
<div class="row">
<div class="small columns">
<form action="ajax.php" method="post" id="formSubmit">
<table id="equipment-table">
<thead>
<tr>
<th>Equipment</th>
<th>Amount</th>
<th>Val1</th>
<th>Val2</th>
</tr>
</thead>
<tbody>
<?php foreach
($results['tags'] as $equipment) {
if ($equipment['category'] == "Part") { ?>
<tr>
<td><?= $equipment['Amount']; ?></td>
<td class="text-center"><?= $equipment[‘quantity']; ?></td>
<td><input type="text" name="val1" /></td>
<td><input type="text" name="val2" /></td>
</tr>
<?php } // end if
} // end foreach ?>
<tr>
<td colspan="4" style="text-align: right;"><input type="submit" class="button" name="DONE" value="DONE" /></td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
</section>
</body>
</html>
Please try this new solution. This will send a post every 30 seconds containing only the input boxes containing text on them.
<!DOCTYPE html>
<html>
<head>
<meta name="Warehouse 3962" content="width=device-width, initial-scale=1.0">
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<section class="w">
<div class="row">
<div class="small columns">
<img src="logo.png" />
<h3 class="green">Users</h3>
</div>
<h6>Warehouse 3962</h6>
</div>
<div class="row">
<div class="small columns">
<form action="ajax.php" method="post" id="formSubmit">
<table id="equipment-table">
<thead>
<tr>
<th>Equipment</th>
<th>Amount</th>
<th>Val1</th>
<th>Val2</th>
</tr>
</thead>
<tbody>
<?php
foreach ($results['tags'] as $equipment) :
if ($equipment['category'] === "Part") :
?>
<tr>
<td>
<?php echo $equipment['Amount']; ?>
</td>
<td class="text-center">
<?php echo $equipment['quantity']; ?>
</td>
<td>
<input id="<?php echo $equipment['number'];?>-val1" type="text" name="<?php echo $equipment['number'];?>-val1"/>
</td>
<td>
<input id="<?php echo $equipment['number'];?>-val2" type="text" name="<?php echo $equipment['number'];?>-val2"/>
</td>
</tr>
<?php
endif;
endforeach;
?>
<tr>
<td colspan="4" style="text-align: right;">
<input type="submit" class="button" name="DONE" value="DONE" />
</td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
</section>
<script type="text/javascript">
function sendData() {
var inputs = document.getElementById('equipment-table').getElementsByTagName('input'),
data = [],
name, val1, val2;
for (var i = 0; i < inputs.length; i++) {
if ( inputs[i].type === 'submit') {
continue;
}
if ( inputs[i].value ) {
name = inputs[i].name.split('-val');
val1 = inputs[i].name.split('val1');
if (val1.length > 1) {
data.push({name: name[0], val1: inputs[i].value});
}
else {
data.push({name: name[0], val2: inputs[i].value});
}
}
}
window.setTimeout(function() {
sendData();
},30000);
}
sendData();
</script>
</body>
</html>
You cannot mix PHP with JavaScript and why you set a timeout to 1000*30, that is equal to set a timeout to 30000 which means 30 seconds.
Then, you can use the 'require' attribute in the input filed to force the user to fill the required information.
<!DOCTYPE html>
<html>
<head>
<meta name="Warehouse 3962” content="width=device-width, initial-scale=1.0">
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<section class="w">
<div class="row">
<div class="small columns">
<img src="logo.png" />
<h3 class="green">Users</h3>
</div>
<h6>Warehouse 3962</h6>
</div>
<div class="row">
<div class="small columns">
<form action="ajax.php" method="post" id="formSubmit">
<table id="equipment-table">
<thead>
<tr>
<th>Equipment</th>
<th>Amount</th>
<th>Val1</th>
<th>Val2</th>
</tr>
</thead>
<tbody>
<?php
foreach ($results['tags'] as $equipment) :
if ($equipment['category'] == "Part") : ?>
<tr>
<td><?= $equipment['Amount']; ?></td>
<td class="text-center">
<?php echo $equipment[‘quantity']; ?>
</td>
<td>
<input id="val1" type="text" name="val1”/>
</td>
<td>
<input id="val2" type="text" name="val2"/>
</td>
</tr>
<?php
endif;
endforeach;
?>
<tr>
<td colspan="4" style="text-align: right;">
<input type="submit" class="button" name="DONE" value="DONE" />
</td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
</section>
<script type="text/javascript">
window.setTimeout(function(){
var val1 = document.getElementById("val1").value,
val2 = document.getElementById("val1").value;
if ( ! val1 && ! val2 ) document.getElement('formSubmit').submit();
},30000);
</script>
</body>
</html>
I am running a code that's supposed to pull a questionnaire from a database for evaluation by a user with a valid session.
However, the page returns a blank incomplete page while running this php code.
Am I missing something here?
<?php
session_start();
try
{
if(!isset($_SESSION['logged-in']))
{
header("Location: ../index.php");
}
}
catch(Exception $e)
{
}
// php classes
require_once("../classes/database.php");
require_once("../classes/questionnaire.php");
require_once("../classes/competency.php");
require_once("../classes/candidate.php");
require_once("../classes/participant.php");
require_once("../classes/progress.php");
require_once("../classes/user.php");
require_once("../classes/page.php");
// candidate details
if($_SESSION['usertype'] == 'candidate') // if user is doing a self evaluation
{
$candidatename = User::getName($_SESSION['id']);
$candidateusername = $_SESSION['username'];
// questionnaire object
$q = new Questionnaire(Questionnaire::getQuestionnaireName($_SESSION['id']));
}
else if($_SESSION['usertype'] == 'participant') // if user is evaluating their candidate
{
$candidatename = User::getName(Participant::getCandidateID(NULL, $_SESSION['id']));
$candidateusername = Participant::getCandidate($_SESSION['id']);
// questionnaire object
$q = new Questionnaire(Questionnaire::getQuestionnaireName(Participant::getCandidateID(NULL, $_SESSION['id'])));
}
$candidateID = User::getUID($candidateusername);
// objects
$page = new Page('evaluation');
$user = new User($_SESSION['username']);
// page height
$pagename = $page->name;
$page->setHeight(0, true, $q->numCompetencies());
?>
This is the HTML has to be output
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="../css/screen.css" media="screen" />
<link rel="stylesheet" type="text/css" href="../css/ie.css" />
<link rel="stylesheet" type="text/css" href="../css/custom.css" />
<link rel="stylesheet" type="text/css" href="../css/evaluation.css" />
<link rel="stylesheet" type="text/css" href="../css/progress-bar.css" />
<link rel="stylesheet" type="text/css" href="../css/error.css" />
<!-- JAVASCRIPT -->
<script type="text/javascript" language="javascript" src="../js/slide/help.js"></script>
<script type="text/javascript" language="javascript" src="../js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" language="javascript" src="../js/slide/evaluation.js"></script>
<script type="text/javascript" language="javascript" src="../js/slide/questionnaire.js"></script>
<script type="text/javascript" language="javascript" src="../js/validation/validateevaluation.js"></script>
<script type="text/javascript" language="javascript" src="../js/instructions.js"></script>
</head>
<body onload="viewCompetency('#st1')">
<!-- WEBSITE -->
<!-- BANNER -->
<div class="banner">
<div class="container">
<!-- logo div -->
<div class="span-5 logo"></div>
<!-- menu div -->
<!-- main menu -->
</div>
</div>
<div class="topseparator"></div>
<!-- PAGE CONTENT -->
<div class="container indexdesktop">
<?php include("../common/minidashboard.php"); ?>
<!-- desktop content -->
<div class="span-24" style="height: <?php print $page->height.'px'; ?>">
<!-- CONTENT MODULEBOX -->
<div class="modulebox-classy">
<div class="pageheading"><h3><span class="blue">REDMA 360 </span><span class="grey">EVALUATION</span></h3></div>
<div class="contentwide">
<div class="iconswide" id="addcand"></div>
<p>Kindly give very candid feedback to the person whose name appears below (candidate)</p>
<!-- INSTRUCTIONS -->
<p> </p>
<div class="instructions" id="instructionswidth-evaluation">
<div class="instructions-heading" onclick="showInstructions()"><div class="instructions-icon"></div>INSTRUCTIONS</div>
<div class="instructions-content" id="instructions-content">
<p>Click the <span class="italic">Accordian Menu</span> to show the competency you want to evaluate. Give a rating on the drop-down select box according to the <span class="italic">Scoring Key</span> below. When you have completed scoring <span class="italic">ALL</span> competencies in the <span class="italic">Questionnaire</span>, a <span class="strong italic">Done</span> button will show. Click <span class="strong italic">Done</span> to complete your evaluation.</p>
<p><h5 class="strong white">SCORING KEY:</h5><ol><li>Demonstrates <span class="strong italic">almost none</span> of the behaviour</li><li>Demonstrates <span class="strong italic">some</span> of the behaviour</li><li>Demonstrates <span class="strong italic">about half</span> of the behaviour</li><li>Demonstrates <span class="strong italic">majority</span> of the behaviour</li><li>Demonstrates the behaviour <span class="strong italic">fully</span></li></ol></p> </div>
</div>
</div>
<div class="contentwide" id="evaluationwidth">
<!-- Display Questionnaire -->
<h3>Welcome to Redma360 Evaluation</h3>
<h4 class="grey"><span class="blue">QUESTIONNAIRE:</span> <?php print Questionnaire::getQuestionnaireName($user->username);?><br />
<?php
print '<span class="blue">CANDIDATE:</span> '.strtoupper($candidatename);
if($user->usertype == 'participant') // if user is evaluating their candidate
{
print '<br /><span class="blue">PARTICIPANT ('.Participant::getPartType($user->username).'):</span> '.strtoupper($user->name);
}
?>
</h4>
<!-- Evaluation Accordian -->
<div class="evaluation-container">
<form action="evaluationaction.php" name="saveForm" id="saveForm" method="post" >
<?php $competenciesEvaluatedArr = Questionnaire::displayEvaluationCompetencies($q->getName(), User::getUID($candidateusername), $user->id); ?>
<input type="hidden" name="saveButton" id="saveButton" />
</form>
</div>
<?php
if($user->competenciesdone == $q->numCompetencies())
{
?>
<div class="evaluationthankyou" id="evaluationthankyou">Thank you!</div>
<div class="evaluationsubmitbutton" id="evaluationsubmitbutton">
<form action="evaluationdone.php" name="doneForm" method="post" >
<input type="image" name="doneButton" src="../images/button-done-large.png" />
</form>
</div>
<?php
}
?>
</div>
<!-- progress bar -->
<div class="sidebar-progress" id="sideprogress-evaluation">
<div class="content" id="progress">
<!-- sidebar heading -->
<div class="sidebar-subheading-color-blue" id="evaluation-sidebar-heading">See the progress and number of competencies answered so far below. </div>
<!-- progress bar -->
<div class="content">
<?php Progress::getProgressBar(User::getNumGraded(User::getUID($_SESSION['username'])), Questionnaire::getNumCompetencies($q->getID())); ?>
<p> </p>
</div>
<div class="modulebox-display">
<h4>Competencies Answered So Far</h4>
<table class="competenciesevaluated">
<thead>
<tr>
<th>Competency</th>
</tr>
</thead>
<tbody>
<?php
foreach($competenciesEvaluatedArr as $arr)
{
print '<tr>
<td>'.$arr.'</td>
</tr>';
}
?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- FOOTER -->
<?php include("../common/footer.php"); ?>
</body>
Add exit(0), after the header(....), it may solve your problem.
try
{
if(!isset($_SESSION['logged-in']))
{
header("Location: ../index.php");
exit(0);//Add this line
}
}
catch(Exception $e)
{
}
Turns out that I was missing a class in the included questionnaire.php file.
Putting error reporting to to my PHP file was very helpful.
Thanks
I have a master page that uses ajax to load contents in a div named 'Wrapper'.
Now I have a problem loading jquery UI tabs this way. I can load and show them if I ignore using AJAX. But when Using ajax just the tabs are being shown and not the panes! I have read all the topics regarding this issue but they didn't solve my problem.
JQuery code is :
$(function(){
$('#link').live('click',function(){
$.ajax({
url: "tabs.php",
success: function(response)
{
$("#Wrapper").html(response);
console.log(response);
}
});
});
});
The tabs.php :
<!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" xml:lang="fa-ir" lang="fa-ir">
<head>
<script type="text/javascript" src="Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="Scripts/menu.js"></script>
<script type="text/javascript" src="Scripts/jquery.cycle.all.js"></script>
<script type="text/javascript" src="Scripts/jquery.easing.1.3.js"></script>
<link rel="stylesheet" href="css/jquery-ui-1.10.3.custom.css" />
<script type="text/javascript" src="Scripts/jquery-ui-1.10.3.custom.js"></script>
<style>
div.panes div h2
{
margin:5px 0 15px 0;
}
</style>
<link rel="stylesheet" type="text/css" href="css/tabs.css"/>
<link rel="stylesheet" type="text/css" href="css/tabs-panes.css"/>
<style type="text/css">
div.panes div
{
-background:#fff;
height:auto;
}
div.panes label
{
margin-bottom:15px;
display:block;
}
label.error
{
color:red;
}
body
{
background-color:#d4d6da;
}
</style>
<link rel="stylesheet" type="text/css" href="css/mystyle.css">
<link rel="stylesheet" type="text/css" href="css/syntax.css"/>
<link rel="stylesheet" type="text/css" href="css/demos.css"/>
</head>
<body>
<table style="width:100%;height:auto;border:1px dashed blue;" >
<tr>
<td align="center">
<div id="wizard_tabs">
<!-- tabs -->
<ul class="tabs">
<li>1- File upload</li>
<li>2- Proj explanation</li>
</ul>
<!-- form and panes -->
<form action="projects-regEN.php" method="post" enctype="multipart/form-data">
<div class="panes" style="font-family:tahoma">
<div style="border:1px solid #1c94c4;" id="tabs-1">
<table id="projINFO" style="width:100%">
<tr>
<td>
<span class="innerStyle">Title</span>
</td>
<td>
<input type="text" style="width:150px" maxlength="50" id="projectTitle" name="projectTitle"/>
</td>
</tr>
<tr>
<td style="width:31%" >
<span class="innerStyle">Proj Upload</span>
</td>
<td style="width:30%">
<input type="file" id="projectUpload" name="projectUpload"/>
</td>
</tr>
</table>
<br/>
<input type="button" class="next" id="next" name="continue"/>
</div>
<div style="border:1px solid #1c94c4;" id="tabs-2">
<table style="width:100%;border:1px solid black;font-family:tahoma;font-size:11px">
<tr>
<th>
title
</th>
</tr>
<tr>
<td id="firstCol"></td>
</tr>
</table>
<br/>
<span class="innerStyle">explanation</span>
<textarea rows="4" maxlength="150" class="formItems" id="ProjInfo" name="ProjInfo" placeholder="پیام خود را اینجا وارد کنید"></textarea>
<input type="submit" id="submitproj" name="done"/>
</div>
</div>
</form>
</div>
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<script>
$(function(){
var wizard = $("#wizard_tabs");
$("ul.tabs", wizard).tabs("div.panes > div", function(event, index)
{
projUp=$("#projectUpload").val();
projTi=$("#projectTitle").val();
if (index > 0 && (projUp==''|| projTi=='' ))
{
$("#projectUpload").parent().addClass("error");
return false;
}
$("#projectUpload").parent().removeClass("error");
});
// get handle to the tabs API
var api = $("ul.tabs", wizard).data("tabs");
$(".next", wizard).click(function()
{
projUp=$("#projectUpload").val();
projTi=$("#projectTitle").val();
if(projUp!='' && projTi!='')
api.next();
});
});
</script>
</td>
</tr>
</table>
</body>
</html>
Using the papers I have read I tried initializing :
$("ul.tabs").tabs("div.panes <> div");
I put it in the success function of ajax but it didn't help. I also put it in the tabs.php but neither it helped. I don't know what else to do?!
Based on where I put the initial statement, it gives me different errors like:
"Uncaught Error:cannot call methods on tabs prior to initialization; attempted to call method 'div.panes > div'"
or
"Uncaught TypeError: Object [object Object] has no method 'tabs' "
Thanks
It looks like there is a small error (though maybe a typo for the question) in your code: <> should simply be >. Also, are you including every js file you need for tabs to work? The second error indicates that a required JS file/class may be missing.
For example, you may have included the jquery base, but did you include tools?
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
I'm using Agile Toolkit version 4.2.4 trying to implement the Exchanging rows between grids example found here: https://agiletoolkit.org/doc/grid/interaction
I have created the TSGrid class with the following code:
class TSGrid extends Grid {
function setReloadThis($view){
if($id=$_GET[$this->name.'_chsex']){
// do note, usually we supply 2 arguments for set() function. Second
// argument is being properly quoted (or parametrized), however in this
// case no quoting is required. Hence all the statement goes into first
// argument.
$this->dq->set('gender=if(gender="M","F","M")')
->where('id',$id)
->do_update();
// univ()->page() method updates page content through AJAX. In this case each
// grid is unaware of other objects on the page. So to keep it safe, we will refresh
// page completely.
$view->js()->reload()->execute();
}
return $this;
}
function init(){
parent::init();
$g=$this;
// When you are making your own classes, you must always keep in mind
// that those objects must be just as re-usable as original grids. In our case
// we do set the table and fields, however we leave it up to parent to set the
// additional conditions on our query. This is a major reason for the philosophy
// of Agile Toolkit saying to keep properties public.
$g->addColumn('text','name');
$g->addColumn('text','surname');
$g->addColumn('text','gender');
$g->addColumn('button','chsex','Change Sex');
$g->setSource('test');
}
function defaultTemplate(){
return array('grid_striped');
}
}
and inserted it in the lib folder of the agile toolkit installation.
I have created a test page with the following code:
class page_test extends Page {
function init(){
parent::init();
$p=$this;
$c=$p->add('View_Columns');
$col=$c->addColumn();
$col->add('H3')->set('Male list');
$col->add('TSGrid')
->setReloadThis($c)
->dq
->where('gender','M');
$col=$c->addColumn();
$col->add('H3')->set('Female list');
$col->add('TSGrid')
->setReloadThis($c)
->dq
->where('gender','F');
}
}
In my database, I have made the "test" table with id, name, surname and gender fields.
When I click the "Change sex" button, I get this:
"Error in AJAXec response: SyntaxError: Unexpected token <"
The AJAX response from the server is:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Agile Toolkit</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="./atk4/templates/shared/images/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="./atk4/templates/shared/css/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="./atk4/templates/shared/css/atk-main.css" />
<link rel="stylesheet" type="text/css" href="./atk4/templates/default/css/atk-custom.css" />
<script type="text/javascript" src="./atk4/templates/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="./atk4/templates/js/start-atk4.js"></script>
<script type="text/javascript" src="./atk4/templates/js/jquery-ui-1.9.2.min.js"></script>
<script type="text/javascript" src="./atk4/templates/js/ui.atk4_loader.js"></script>
<script type="text/javascript" src="./atk4/templates/js/ui.atk4_notify.js"></script>
<script type="text/javascript" src="./atk4/templates/js/atk4_univ.js"></script>
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="./atk4/templates/shared/css/ie8.css"/>
<script type="text/javascript" src="./atk4/templates/shared/css/ie8.js"></script>
<![endif]-->
<script type="text/javascript">
$(function(){
$.atk4.includeJS("./atk4/templates/js/atk4_univ.js");
$.atk4.includeJS("./atk4/templates/js/ui.atk4_notify.js");
$.atk4.includeJS("./atk4/templates/js/ui.atk4_grid.js");
$.atk4.includeJS("./atk4/templates/js/ui.atk4_grid.js");
$.atk4(function(){ $('#agiletoolkit_test_view_columns_view_columns_column_tsgrid').find('.button_chsex').button();
$('#agiletoolkit_test_view_columns_view_columns_column_tsgrid').atk4_grid([]);
$('#agiletoolkit_test_view_columns_view_columns_column_2_tsgrid').find('.button_chsex').button();
$('#agiletoolkit_test_view_columns_view_columns_column_2_tsgrid').atk4_grid([]);
; });
});
</script>
</head>
<body>
<div id="atk-layout" class="atk-wrapper">
<div id="header">
<div id="atk-logo" class="ui-widget-header float-left"><img src="./atk4/templates/shared/images/logo.png" /></div>
<div id="header-right">
<script>
$(document).ready(function(){
$('.atk-menu-horizontal>ul>li:first-child').addClass("ui-corner-left");
$('.atk-menu-horizontal>ul>li:last-child').addClass("ui-corner-right");
$('.atk-menu-vertical>ul>li:first-child').addClass("ui-corner-top");
$('.atk-menu-vertical>ul>li:last-child').addClass("ui-corner-bottom");
$('.atk-menu .ui-state-default').hover(function() {
$(this).addClass("ui-state-hover");
}, function() {
$(this).removeClass("ui-state-hover");
});
});
</script>
<div id="agiletoolkit_menu" class="atk-menu atk-menu-horizontal ui-widget">
<ul>
<li class="ui-state-default">Welcome</li>
<li class="ui-state-default">Test1</li>
<li class="ui-state-default">Test2</li>
<li class="ui-state-active">Test3</li>
<li class="ui-state-default">Logout</li>
</ul>
</div>
<div id="atk-version"><b>Agile Toolkit™</b><br/><i><div id="agiletoolkit_licensor_upgradechecker" class="" style="">4.2.4 unlicensed</div>
</i></div>
</div>
</div>
<div id="agiletoolkit_test" class="page_test">
<div id="agiletoolkit_test_view_columns" class="atk-flexy">
<div id="agiletoolkit_test_view_columns_view_columns_column" class="" style=";width:50%"><H3 id="agiletoolkit_test_view_columns_view_columns_column_h3" class="" style="">Male list</H3>
<div id="agiletoolkit_test_view_columns_view_columns_column_tsgrid" class="atk-grid ">
<div class="atk-grid-panel"></div>
<table width="100%">
<thead class="ui-widget-header"><tr>
<th id="" class="ui-widget-header" nowrap >Name</th>
<th id="" class="ui-widget-header" nowrap >Surname</th>
<th id="" class="ui-widget-header" nowrap >Gender</th>
<th id="" class="ui-widget-header" nowrap style="width: 40px; text-align: center">Change Sex</th>
</tr></thead>
<tbody class="grid_body">
<tr class="" data-id="0" rel="0">
<td style="white-space: nowrap">stef</td>
<td style="white-space: nowrap">stefanel</td>
<td style="white-space: nowrap">M</td>
<td style="white-space: nowrap"><button type="button" class="button_chsex" onclick="$(this).univ().ajaxec('/agiletoolkit/?page=test&chsex=0&agiletoolkit_test_view_columns_view_columns_column_tsgrid_chsex=0')">Change Sex</button></td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="agiletoolkit_test_view_columns_view_columns_column_2" class="" style=";width:50%"><H3 id="agiletoolkit_test_view_columns_view_columns_column_2_h3" class="" style="">Female list</H3>
<div id="agiletoolkit_test_view_columns_view_columns_column_2_tsgrid" class="atk-grid ">
<div class="atk-grid-panel"></div>
<table width="100%">
<thead class="ui-widget-header"><tr>
<th id="" class="ui-widget-header" nowrap >Name</th>
<th id="" class="ui-widget-header" nowrap >Surname</th>
<th id="" class="ui-widget-header" nowrap >Gender</th>
<th id="" class="ui-widget-header" nowrap style="width: 40px; text-align: center">Change Sex</th>
</tr></thead>
<tbody class="grid_body">
<tr class="" data-id="0" rel="0">
<td style="white-space: nowrap">eu</td>
<td style="white-space: nowrap">eueu</td>
<td style="white-space: nowrap">F</td>
<td style="white-space: nowrap"><button type="button" class="button_chsex" onclick="$(this).univ().ajaxec('/agiletoolkit/?page=test&chsex=0&agiletoolkit_test_view_columns_view_columns_column_2_tsgrid_chsex=0')">Change Sex</button></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div id="atk-footer-guard"></div>
</div>
<div id="footer" class="atk-wrapper">
This system is implemented using Agile Toolkit. © 1999–2012. See License
</div>
<div id="atk-growl-holder" class="atk-growl"></div>
</body>
</html>
Demo page is using older toolkit version, than in master branch. If you use example with master branch, you need following change:
$this->dq
->set('gender', $this->api->db->dsql()->expr('if(gender="M","F","M")'))
->where('id',$id)
->do_update();
this is due to change in dsql object.
here is working example with latest toolkit version