I'm implementing multi select through bootstrap. When i wrote it directly on page it works fine. I call ajax on select of drop down that is already existed in my page.
here is the tutorial for multi select which i'm following.
here is my code
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
<script type="text/javascript">
$(function(){
$('#c_company').change(function() {
c_company = $('#c_company').val();
$.ajax({
type: "POST",
url: 'get_company_data.php',
data: {
'c_company' : $('#c_company').val()
},
success: function(result)
{
//alert(result);
$(".col-lg-8").html(result);
}
});
});
});
</script>
</head>
<body>
<select id='c_company' name='company'>
<option value='Bunnny'>Bunny</option>
<option value='Nestle'>Nestle</option>
<option value='Coke cola'>Coke cola</option>
<select>
<div class='col-lg-8'>
</div>
</body>
</html>
here is get_company_data.php file code.
<?php
echo "<select class='selectpicker' multiple >
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>";
?>
ajax call is working fine and it returns right data because i'd shown it by putting response on alert function. I don't know where i'm doing wrong because if html is directly visible on page then it must get visible by ajax call too. Any help would be much appreciated. Thank you :)
Related
Goodday, recently ive tried to learn AJAX. Ive made up an example that captures the data selected from the 1st dropdown box and filter into the 2nd dropdown box. However, the AJAX request doesnt seem to run.
HTML
<?php include 'conn.php' ?>
<!DOCTYPE html>
<html>
<head>
<title>
AJAX for extensions!
</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
function fetch_select(val)
{
$.ajax({
type: 'post',
url: 'fetch_data.php',
data: {
get_option:val
},
success: function (response) {
document.getElementByID("owner_id").innerHTML=response;
}
});
}
</script>
</head>
<body>
<p id="heading">Dynamic Select Option Menu Using Ajax and PHP for Extensions</p>
<center>
<div id="select_box">
<select name="department" id="department" onchange="fetch_select(this.value);">
<option value="">Select Option</option>
<?php
$sql="SELECT Department1 FROM PIC_Approval";
$result=odbc_exec($conn,$sql);
while($row=odbc_fetch_array($result)){
$department=$row['Department1']; ?>
<option value="<?php echo $department;?>"><?php echo $department;?></option>
<?php }
?>
</select>
<select name="ownerid" id="owner_id">
</select>
</div>
</center>
</body>
</html>
fetch_data.php
<?php
include 'conn.php';
if(isset($_POST['get_option']))
{
echo $_POST['get_option'];
$department = $_POST['get_option'];
$sql1="SELECT Owner_I_Employee_ID FROM masterlist1 WHERE Department1='$department'";
$result1=odbc_exec($conn,$sql1);
while($row=odbc_fetch_array($result1))
{
$id=$row['Owner_I_Employee_ID']; ?>
<option value="<?php echo $id;?>"><?php echo $id;?></option>
<?php
}
exit;
}
?>
I am not sure what is wrong with the Request. I followed as in the tutorials i found online. I am using odbc.
Turns out it's because
document.getElementByID("owner_id")
should be
document.getElementById("owner_id")
because JavaScript is case-sensitive. The code works fine after the error is fixed.
I am beginner to ajax world and trying to call contents from php page using $.ajax() function and the code couldn't executed. the html page i used:
<!DOCTYPE html>
<html>
<head>
<title>AJAX</title>
</head>
<body>
<div >
<input type="text" name="search" id="search">
<br>
<br>
<h2 id="result"></h2>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="js/script.js"></script>
</body>
</html>
the JQuery code i used in the script.js:
$(document).ready(function() {
$('#search').keyup(function () {
var search = $('#search').val();
$.ajax({
url:'search.php',
//the page to which the request will go to
data:{search: search},
type: 'POST',
success:function(data) {
if(!data.error){
$('#result').html(data);//the h2 we want to echo it uing the ajax
}
}
});
});
});
the search.php page contain:
$search = $_POST['search'];
echo $search;
the code not executed. What should I do.
I see some issue in your response from PHP code and in ajax side success code.
You are not sending in response JSON format so data.error is meaningless.
so in your success callback code should be like this.
success:function(data) {
$('#result').html(data);//the h2 we want to echo it uing the ajax
}
Follow jQuery Ajax Document :
An alias for method. You should use type if you're using versions of jQuery prior to 1.9.0
type: 'POST'
But you are using 2.0 so i think this will work :
method: 'POST'
jQuery Documents
I am using ajax for the first time and passing data to another file using ajax request. The request goes through if I pass it using get which is by default but the moment I change it to post it does not work.
$.ajax({
type:'POST',
url:'pageAjax2.php',
data:'name='+name,
success: function(data){
$('#content').html(data);
}
})
If I remove the type:'POST'; everything works but if have it in the code nothing works . Can someone please help me with this.
All good here. What version of jQuery are you using ?
I'll post my code :
File jq.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
$(function(){
var name = 'Telmo Dias';
$.ajax({
type:'POST',
url:'pageAjax2.php',
data:'name='+name,
success: function(data){
$('#content').html(data);
}
});
});
</script>
</head>
<body>
<div id="content"></div>
</body>
</html>
File pageAjax2.php :
<?php echo "Hello ".$_POST['name'];?>
Result:
thank you guys i just checked and pageAjax2.php had been set to get instead of using post so i just changed it to post and everything works now
thank you
I have a strange problem where I cannot get a php webpage to refresh that is triggered by a pulldown. Here is the main file (SelectForceRefresh.php):
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1" /><!-- Optimistically rendering in Chrome Frame in IE. -->
<title>My form</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<script>
function ConfigFileSelection(id)
{
$.ajax({
type: "GET",
url: "RefreshConfig.php",
data: "confFile = " + id,
success: function GotHere()
{
alert("Got here!");
}
});
}
</script>
<select name="userconfigoption" onchange="ConfigFileSelection(this.value);" >
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</body>
</html>
And here is the 'link' file (RefreshConfig.php):
<?php
if(isset($_GET['confFile'])){
CopyUserConfig($_GET['confFile']);
}
function CopyUserConfig($id)
{
header("Location: SelectForceRefresh.php");
exit;
}
?>
The problem is that the javascript function is fired when I make a selection from the pulldown because I see the alert "Got here!", but the other php file is never triggered for the refresh. I have been on this for three days not knowing what I'm missing. I have reviewed the other solutions here on Stack Overflow like this one:
on Change of dropdown list showld call the php function
Where I tried to learn this technique from, but they simply do not work.
What am I missing here? Both files are in the same directory. Thanks in advance.
You can not let the PHP file that you target with your AJAX function refresh your webpage.
The best way is do if in the success function of AJAX (so with JavaScript).
Something like:
$.ajax({
type: "GET",
url: "RefreshConfig.php",
data: "confFile = " + id,
success: function GotHere() {
window.location.reload();
}
});
So, I have a search form in a php page (top.php) which is an include for the site I'm working on, one php page where all the mySQL stuff happens and the results are stored in a variable and echoed (dosearch.php) and lastly a php page where the results are displayed in a div through jQuery (search.php). This is the javascript code:
$(document).ready(function(){
$('#search_button').click(function(e) {
e.preventDefault();
var searchVal = $('#search_term').attr('value');
var categoryVal = $('#category').attr('value');
$.ajax({
type: 'POST',
url: 'dosearch.php',
data: "search_term=" + searchVal + "&category=" + categoryVal,
beforeSend: function() {
$('#results_cont').html('');
$('#loader').html('<img src="layout/ajax-loader.gif" alt="Searching..." />');
if(!searchVal[0]) {
$('#loader').html('');
$('#results_cont').html('No input...');
return false;
}
},
success: function(response) {
$('#loader').html('');
$('#results_cont').html(response);
}
});
});
});
The #search_term and #category fields are in top.php, the other divs (#loader and #results_cont) are in search.php. How would I go by in order to make the form submit and display the results in search.php from the top.php without problems? It works perfectly if the form and javascript are in search.php but I can't seem to separate those and make it work. What am I doing wrong?
PS. Sorry if I'm not clear enough, am at work, really tired. :(
SPLITTING:
<? include('functions-or-classes.php'); ?>
<!DOCTYPE html>
<html>
<head>
<title></title>
<? include('js-script.php'); ?>
</head>
<body>
<? include('results-div.php'); ?>
<? include('search-form.php'); ?>
</body>
</html>
You should just respect this order then you can split the code in different pieces and include it into your main php file;
PS: peraphs your code should look like this:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
$(function() {
$('#search-form').submit(function(e) {
e.preventDefault();
var searchVal = $('#search_term').val();
var query = $(this).serialize(); // search_term=lorem&category=foo
if (!searchVal) {
$('#results_cont').html('No input...');
} else {
$('#results_cont').html('<div id="loader">'+
'<img src="layout/ajax-loader.gif" alt="" /><div>');
$.ajax({
type: 'POST',
url: 'dosearch.php',
data: query,
success: function(response) {
$('#results_cont').html(response);
}
});
}
});
});
</script>
</head>
<body>
<form id="search-form">
<input type="text" id="search_term" name="search_term" />
<select id="category" name="category">
<option value="foo">foo</option>
<option value="bar">bar</option>
</select>
<input type="submit" name="search_button" />
</form>
<div id="results_cont"></div>
</body>
</html>
you can make your search_button redirect to your search.php an do the work when the pages is loaded instead of doing it on the click event.
and use $_GET['Search'] on the search page
and your url should look like this
/search.php?Search=1337