i am developing my final year project on codeigniter and facing problem i want to click a drop-down value and then it will return table from db but alas i can't do
this is plain php code that i want to convert into codeigniter please help me
thanks in advance.
<!DOCTYPE html>
<html>
<head>
<script>
function showUser(str) {
if (str=="") {
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Joseph Swanson</option>
<option value="4">Glenn Quagmire</option>
</select>
</form>
<br>
<div id="txtHint"><b>Person info will be listed here.</b></div>
</body>
</html>
You need to separate the code in Controller, View and Model:
Model for DDBB operations.
Controller: control where the data goes and how it can be displayed, and other logic.
View, here is where the form is rendered.
Codeigniter has a great documentation to learn how to do it.
Controllers
Views
Models has the same url, but for models, i've not reputation enough to post 3 links, sorry
You can do like this
$(document).on("change","#select",function(){
$.ajax({
url:""// path to your controller function. here keep all the code which is present in your getuser.php in to a function in controller
data:{"key":value,"key":value}
dataType:"HTML",
success:function(data){
$("#txtHint").html(data)// this you can do 2 things, either manipulate all your data in controller
//and directly change the html of the div, or u can get the required data
}
})
});
Related
I've have created a custom table in mysql. I've entered a bit of test data just to see if I can pull some results. The query was successful when I ran it just in the template, so I know it works. As I have tried to convert it into a Ajax request seems that no data is being passed. I'm not sure what it is I am missing, or possibly an error I have entered somewhere, but it seems when I try to turn it into an Ajax request nothing happens.
Any ideas?
PHP
$q = intval($_GET['q']);
$pull = $wpdb->get_results(
"
SELECT ID, department, contact, forms
FROM referrals
WHERE ID = '$q'
"
);
foreach ( $pull as $requestdata)
{
echo $requestdata->department;
echo '<br />';
echo $requestdata->contact;
echo '<br />';
echo $requestdata->forms;
}
AJAX
<script>
function displayData(str) {
if (str=="") {
document.getElementById("txt").innerHTML="";
return;
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("txt").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","<?php echo content_url(); ?>/themes/child/get-referral.php?q="+str, true);
xmlhttp.send();
}
</script>
HTML
<select name="users" onchange="displayData(this.value)">
<option value="">Select a person:</option>
<option value="1">Test 1</option>
<option value="2"Test 2</option>
</select>
<br>
<div id="txt"></div>
You need to change your ajax request to wp-admin/admin.ajax.php.
If you open that file you will find there is a constant setting named DOING_AJAX. Only the requests to this link can avoid the normal header being sent to browser because of setting DOING_AJAX to ture.
Actually you can debug like this: visit <?php echo content_url(); ?>/themes/child/get-referral.php?q=xx, you will find there are other info sent. thats why that ajax doesnt work.
Switched to this. Hopefully it helps someone else out.
HTML
<select id="mySelect" onchange="pullData()">
<option value="">Select</option>
<option value="options">options</option>
<option value="someother1">someother1</option>
<option value="someother_2">someother_2</option>
</select>
<div id="referral">Test</div>
AJAX / JS
<script>
function pullData() {
var xhttp;
//url variables
var url = "/wp-content/referrals/";
var selectedValueIs = document.getElementById("mySelect").value;
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
}
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("referral").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", url+selectedValueIs+'.txt' , true);
xhttp.send();
}
</script>
Now i've changed "?" to "&" already and also add one more variable to "onChange="showBillbyMonth(this.value,selectedYr)" but it still not work.
I have found this script that suit me . However I need to pass 2 variable at the same time.. I've tried but not work. I"m have so limited knowledge of javascript so please help me .. thank you
the script that work on passing one variable
<script type="text/javascript">
function showBillbyMonth(str)
{
var xmlhttp;
if (str=="")
{
document.getElementById("btxtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("btxtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","billMonth_view.asp?q="+str,true);
xmlhttp.send();
}
</script>
my modified script is below which is not work
<script type="text/javascript">
function showBillbyMonth(str,selectedYr)
{
var xmlhttp;
if (str=="")
{
document.getElementById("btxtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("btxtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","billMonth_view_inYear.asp?q="+str+"&selectedYr="+selectedYr,true)
xmlhttp.send();
}
</script>
I used with this...
<form action="" >
<td align="right" >
<select name="inmonth" id="inmonth" onChange="showBillbyMonth(this.value,selectedYr)">
<option value="">Month</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
</td>
</form>
the script will open below page.. "billMonth_view_inYear.asp"
qbill_month = request.querystring("q")
current_year = request.querystring("selectedYr")
and continue with sql commmand..somthing like this..
sql = "SELECT tbl_bill_total.cust_id, Sum(tbl_bill_total.bill_total) AS sum_bill_total, tbl_customer.cust_name, Month([tbl_bill_total.showndate]) AS bill_month, Year([tbl_bill_total.showndate]) AS bill_year FROM tbl_bill_total INNER JOIN tbl_customer ON tbl_bill_total.cust_id = tbl_customer.cust_id GROUP BY tbl_bill_total.cust_id, tbl_customer.cust_name, Month([tbl_bill_total.showndate]), Year([tbl_bill_total.showndate]) HAVING (((Month([tbl_bill_total.showndate]))="& qbill_month &") AND ((Year([tbl_bill_total.showndate]))="& current_year &"));"
When you have multiple parameters in a URL, you separate them with &, not ?. ? is only used to separate the URL pathname from the parameters. So it should be:
xmlhttp.open("GET","billMonth_view_inYear.asp?q="+str+"&selectedYr="+selectedYr,true);
you need to separate two parameter by &.
change
xmlhttp.open("GET","billMonth_view_inYear.asp?q="+str+"?selectedYr="+selectedYr,true);
by
xmlhttp.open("GET","billMonth_view_inYear.asp?q="+str+"&selectedYr="+selectedYr,true);
You are not passing second parameter for the showBillbyMonth(), then how it will work ?
Thanks
I have the following function in Javascript.
function showInfo(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","information.php?q="+str,true);
xmlhttp.send();
}
I have created a select so that once something is chosen it will display a list.
<ul>
<li><select name="days" id="days" onchange="showInfo(this.value)" data-native-menu="false">
<option value=""> select </option>
<option value="1"> option 1 </option>
<option value="2"> option 2 </option>
</select></li>
</ul>
The information.php takes the value and querys a database to get the infor I want in a list. This all works fine, however when I want to show the list it comes out with the incorrect format.
echo '
<ul data-role="listview">
<li>
<h3>Author:'.$the_author.'</h3>
<p><b>Description:</b>'.$description.'</p>
<p class="ui-li-aside">Last update:'.$date.'</p>
</li>
//Etc.
</ul>
';
Now the list displayed should be simillar to the one from jquery mobile demos (http://demos.jquerymobile.com/1.0.1/docs/lists/lists-formatting.html)
however it comes out looking like a standard html list.
Because you are dynamically creating the <UL> element and not just the listitems, you need to call enhanceWithin() (http://api.jquerymobile.com/enhanceWithin/) on txtHint after setting its HTML
Instead of this:
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
Try
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
$('#txtHint').append(xmlhttp.responseText).enhanceWithin();
}
}
Here is a working DEMO with a mock AJAX call
im having a problem after i select one option
<select name="opcoes" onchange="showInfo(this.value)">
<option value="1">one</option>
<option value="2">two</option>
</select>
I send a option value through this
function showInfo(str)
{
if (str=="")
{
document.getElementById("fields").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("fields").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/php/search/getRow.php?id="+str,true);
xmlhttp.send();
}
That gives my getRow.php the ID to show from the Database a table with inputs so a person can change their values, now i have two fields that need jQuery-UI autocomplete so i have this javascript but its not working.
This is the generated code from the getRow.php
<input type="text" name="editname" id="namesearch" value="one">
<input type="text" name="editname" id="modelsearch" value="wfmq015">
This is my autocomplete...
$(function() {
//autocomplete
$("#namesearch").autocomplete({
source: "/js/namer.php",
minLength: 0
});
$("#modelsearch").autocomplete({
source: "/js/modeler.php",
minLength: 1
});
});
I think my problem is that the javascript is notcatching the id's in time since it was an ajax request... can anyone help me out?
The Javascript's are placed in the main page that calls the ajax to get some more elements into it...
Yikes. Looks like you wrote your own AJAX call. Let's use jQuery for this instead. Save yourself some major headache
function showInfo(str) {
$.get("/php/search/getRow.php?id=" + str, function(html) {
$("#fields").html(html);
});
}
Now, to your second question, the problem is you're using the AJAX to load your fields but are instantiating the autocomplete when the page is loaded. So I would put those into a function and add that to your AJAX callback
function loadAuto() {
$("#namesearch").autocomplete({
source: "/js/namer.php",
minLength: 0
});
$("#modelsearch").autocomplete({
source: "/js/modeler.php",
minLength: 1
});
}
function showInfo(str) {
$.get("/php/search/getRow.php?id=" + str, function(html) {
$("#fields").html(html);
loadAuto();
});
}
I use ajax on my html page to load data from MySql db w.o. reload and send email notification on some event, after selecting on html page - ajax calls script.php that made request to db and return result, it works perfect; and in same time I use function that shows and hides ajax loader image until query is executed, but it calls my php script twice so that each time it sends email twice
<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.js"></script>
<script>
function showUser(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","../getuser.php?q="+str,true);
xmlhttp.send();
}
// ajax loader image
function getuser(str){
$.ajax({
url: "http://site.com/getuser.php?q="+str,
beforeSend: function (XMLHttpRequest)
{
$("#loading").show();
}
})
.done(function ( data ) {
$("#txtHint").html(data);
$("#loading").hide();
});
}
$(document).ready(function(){
$("select[name='users']").change(function () {
getuser($("option:selected", this).val());
});
});
</script>
how to improve this code to call php script just one time?
HTML
<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select a user:</option>
<option value="1">User1</option>
<option value="2">User2</option>
</select>
</form>
<div style="display:none" id="loading">
<p><img src="../loader.gif" /></p>
</div>
<br>
<div id="txtHint"><b>User info will be listed here.</b></div>
remove onchange event from:
<select name="users" onchange="showUser(this.value)">
What are you using showUser for? This seems to be enough;
function getuser(str) {
$.ajax({
url: "/getuser.php?q=" + str, // No need to include the domain here
beforeSend: function (jqXHR) {
$("#loading").show();
}
}).done(function(data) {
$("#txtHint").html(data);
$("#loading").hide();
});
}
$(document).ready(function() {
$("select[name='users']").change(function() {
getuser($(this).val());
});
});