Friends I created a drop-down list using the following code using js .
<script>
$('.menu').dropit();
</script>
<ul class="menu">
<li>
Product_name
<ul>
<? foreach($customer_details as $details){?>
<li><?echo $details->name;?></li>
<?}?>
</ul>
</li>
</ul>
The problem is that when the user clicks on the link of the dropdown list I need to send the result ie is the
$details->name
through an ajax request to a function in the controller (using codeignitor framework).Hoe this is done ??
JS SOURCE : http://codepen.io/anon/pen/Eoxhp
try this
$('.menu ul li a').on('click', function(e) {
e.preventDefault(); // prevent the link from triggering a pageload
var productName = $(this).html();
$.ajax({
type: "POST",
url: url, // the url you want to send it to
data: {name: productName },
success: function() {
// do whatever you need to do on success
}
});
});
on the server side you'll be able to access the product name using $_POST['name'];
You can try something like this...
// In your HTML replace the line with this
<li><a onclick="sendInfo(this);" href="#"><?echo $details->name;?></a></li>
// JS
function sendInfo(aEl){
var val = $(aEl).text();
$.ajax({
url : "your url",
data : {"name" : val}
}).done(function(){
// Success. Do something
});
}
This is an ajax request on change of drop down it works fine for me
i hope that it will also solve your problem.
<select name="all_users" id="all_users" onchange="Mehdi_ajax(this.value);">
<option value=""><?=$this->lang->line('global_all')?></option>
<?php if($all_users)
{
foreach($all_users->result() AS $item=>$val)
{
?>
<option value="<?=$val->uid?>"><?=$val->username?></option>
<?php
}
}
?>
</select>
script code:
<script type="text/javascript">
var surl = '<?=secure_xss()?>';
function Mehdi_ajax(id)
{
$.ajax({
type:"POST",
url: surl+"movable/jewelry/get_all",
data: "userid=" + id,
success: function(result){
$("#Mehdi_ajax").html(result);
}
});
}
Related
I have a navbar defined in a html file called slick.html. I am trying to pass the id of a clicked navbar tab to the untitled.php. The untitled.php has other data in it. I am trying to isolate navbar to slick.html. I am trying to use JQuery post to transfer the data and using $_POST to access it, but I am not getting the value. I understand that it is something related to client side and server side using. The following is the code. I tried using ajax post but I didn't get any results.
slick.html(relevant parts)
<body>
<ul class="nav nav-tabs ">
<li class="active">
<a id="soilProfile" href="#tab_default_1" data-toggle="tab">
Soil Profile </a>
</li>
<li>
<a id="productivityIndex" href="#tab_default_2" data-toggle="tab">
Productivity Index </a>
</li>
<li>
<a id="Wetlands" href="#tab_default_3" data-toggle="tab">
Wetlands </a>
</li>
</ul>
//More Code
</div>
<script>
$(function () {
$('[data-toggle="popover"]').popover()
$('#soilProfile').click(function(event) {
console.log("About to post");
var data = {id : event.target.id};
console.log(data);
var request = $.ajax({
url: "untitled.php",
method: "POST",
data: { id : data },
});
console.log("AFTER POST");
});
$('#productivityIndex').click( function(event) {
var data = {id : event.target.id};
$.post( "untitled.php", data );
});
$('#wetlands').click( function(event) {
var data = {id : event.target.id};
$.post( "untitled.php", data );
});
});
</script>
</body>
untitled.php
<?php
$var = $_POST['id'];
echo var_dump($var);
// this fetches your post action
echo "this is my variable: " . $var; // this outputs the variable
?>
<html>
<body>
<object width=100% data="slick.html"></object>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
</body>
</html>
I don't understand why it's not working. Please inform me why or suggest me a better solution to go about this problem.
Noticed the in the ajax request you are using "untitled.php", but the page is titled "Untitled.php". Case makes a difference on Linux.
Are you sure the slick.html isn't just refreshed by the click on the anchor before the javascript is executed? Don't you need to prevent the default event?
if you say u want to pass the id that clicked.
try this and se the console.log
$('#soilProfile').click(function() {
console.log("About to post");
var data = $(this).attr("id");
console.log(data);
$.ajax({
url: "untitled.php",
type: "POST",
data: { id : data }
});
console.log("AFTER POST");
});
i m trying to passe the value of the selected item from a select tag using ajax for that :
here it is the select tag(it is not in a form):
<select class="select" id="select" >
</select>
here it is the code that fill the select from the database using php:
$(document).ready(function(){
<?php foreach ($espace_ids as $row ) {?>
$('#select').append('<option value="<?php echo $row['espace_id']; ?>"><? php echo $row['nom']; ?></option>');
<?php }?> });
for sending data from the actual page to dashbored.php,here it is the code:
$("#select").change(function() {
$.ajax({
type: 'post',
url: "<?php //echo base_url(); ?>index.php?directeur/dashboard ?>",
data: espace_id: $("#select").val(),
success: function( data ) {
alert( data );
}
});
well i retrieve the value sent with :
$espace_id=$_POST['espace_id'];
the probleme that it display : undefined refrence to espace_id in dashboard.php.
well , the pupose is to load the espace info from the database according to the espace selected by the user.each time the user select an option i should load the appropiate info related to the espace selected.
i wish that you gonna help me.
thanks
You can use following example to get espace id in index.php.
$(document).ready(function ()
{
$('#select').on('change', function ()
{
if ($('#select').val() === null) {
alert("Error");
}
else
{
var selectedValue = $('#select').val();
$.ajax
({
url: 'index.php',
type: 'POST',
data: 'espace_id=' + selectedValue,
success: function(response)
{
alert(response);
}
});
}
});
});
on index.php
if(isset($_POST['espace_id']) && !empty($_POST['espace_id']))
{
// do whatever you want to do here!!
}
For those that want to keep it lighter than Jquery you could do something like this:
<select onchange="livesearch(this.value)"><option></option></select>
<script>
function livesearch(id){
xmlhttp = new XMLHttpRequest(); xmlhttp.open("GET","url?id="+id, false); xmlhttp.send(null); document.getElementById("searchresults").value=xmlhttp.responseText; }
</script>
I'm trying to create a series of buttons that update my website's $_GET['year'] variable. I want the buttons to work on these pages:
example.com
example.com/?search=foo
example.com/?search=foo&year=2015.
So for example if I clicked on <a>2016</a> my 'year' tag would be updated to year=2016 and the webpage would show search results or everything from that year. I've tried using a JQuery AJAX like so:
<ul class="dropdown-menu dateDropdown">
<li><a>2016</a></li>
<li><a>2015</a></li>
<li><a>2014</a></li>
</ul>
<script>
$(document).ready(function () {
$(".dateDropdown>li>a").each(function() {
$(this).click(function() {
alert("pressed");
$.get({
url: "index.php",
data: $(this).html(),
callback: alert("sent")
});
;})
;})
;}
</script>
Currently I'm getting the "pressed" and "sent" alert, but the webpage is not updating. I figured I could probably get it to work using window.location and regex to change or add 'year' to the URI, but this way would be much neater.
Any ideas?
Take a look at jQuery.get params.
In your situation, it would be something like:
$(".dateDropdown>li>a").each(function(index,elem){
$(elem).click(function(){
alert('Pressed');
$.get('url', {search:'foo', year: $(this).text() }).done( function(){ alert('Done!')} )
})
})
Change the script to
<script>
$(document).ready(function () {
$(".dateDropdown>li>a").each(function() {
$(this).click(function() {
alert("pressed");
$year=$(this).html();
$.ajax({
method: 'post',
url: "query.php",
data: 'year='+$year,
callback: alert("sent")
success: function(e){
$('html').html(e);
}
});
;})
;})
;}
</script>
copy the contents of index.php to query.php
and make the content of index.php
<html>
<?php include 'query.php'; ?>
</html>
I need help with a script that according to 2 parameters updated me a $ _SESSION variable and then refresh the page. One of these parameters comes from a select and the other according to a select class "active".
Here's my code:
<div class="simple-drop-down">
<select id="select-order">
<option>Price</option>
<option>Category</option>
<option>A - Z</option>
</select>
And my jquery function like this:
function order_visual() {
var type_order = $('#loader-wrapper').val();
var arrow_order = $( "#select-arrow" ).hasClass( "active" );
$.ajax({
url: "visual.php?order="+type_order="&"+arrow_order,
type: "post",
data: {},
success: function(data){
location.reload();
}
});
});
And then the PHP is a simple script that manages the $_SESSION.
You can see my code below. I face a challenge that I don't know how to use one button to correspond different click. On the php, if I put the button inside the foreach loop, it will create a lot of button, that's not what I want. In the js, if I put the on.click button inside the foreach elements loop, it will also create a lot of on.click button, so I click one button, it will run many times depends on the number of label_name. I think about addClass, if I clicked the heart div, I use js to add a class, and then get the attr('id') inside button.on.(click), so I can differentiate them in my server php and mysql can request the correspond data. But the problem is that if a user click every div, then every div add classes, then problem again.
var current_page = 1;
var elements_body = {
"heart": "1",
"eye": "2",
"ear_nose_throat": "3",
"hand_foot_mouth": "4"
};
jQuery.each(elements_body, function (label_name, label_num) {
var disease_label = $('#' + label_name + '_d');
disease_label.on('click', function () {
var data = {
action: 'body_part_keyword', //wordpress loading url
postSearchNonce: MyAjaxSearch.postSearchNonce,
current_page: current_page,
label_name: label_name //this label_name will differentiate data that need to request from mysql in the action.php
};
$.ajax({
url: MyAjaxSearch.ajaxurl,
type: 'POST',
cache: false,
data: data,
success: function (data) {
disease_menu_result.append(data);
current_page++
}
}); //ajax
});
}); //jQuery.each
$('#loadmorebutton_body').on('click', function () {
//I dont know how can I make this button to correspond above code
});
<div id="disease_menu">
<?php
$arr = Array(
'heart'=>'heart',
'eye'=>'eye',
'ear_nose_throat'=>'ear nose throat',
'hand_foot_mouth'=>'hand foot mouth'
);
foreach ($arr as $key=>$value) {
?>
<div class="disease_li" id="disease_li_<?php echo $key;?>">
<span class="disease_span" id="<?php echo $key;?>_d"><label>(<?php echo $value;?>)</label>diseases</span>
</div>
<!--disease_li-->
<?php }?>
</div>
<!--disease_menu-->
<button id="loadmorebutton_body">Load More</button>
Use javascript functions :
function MyFunction() {
jQuery.each( elements_body, function( label_name, label_num) {
var disease_label= $('#'+ label_name + '_d');
disease_label.on('click',function(){
var data={
action: 'body_part_keyword',//wordpress loading url
postSearchNonce : MyAjaxSearch.postSearchNonce,
current_page:current_page,
label_name:label_name//this label_name will differentiate data that need to request from mysql in the action.php
};
$.ajax({
url: MyAjaxSearch.ajaxurl,
type:'POST',
cache: false,
data: data,
success: function(data){
disease_menu_result.append(data);
current_page++
}
});//ajax
});
});
}
$('#loadmorebutton_body').on('click',function(){
MyFunction();
}