Below is my PHP code. I am displaying 3 images, if I Click over any image or product I need to add that product in the popup modal. I am trying to get the product name but I can't. How to solve this issue.
<?php
$i = 0;
while ($row = mysql_fetch_assoc($result))
{
echo"<td style='background-color:#FFFFFF;' height='383'>
<a href='#myModal?productname={$row["productname"]} 'id='burl' role='button' data-productname='{$row["productname"]}' data-toggle='modal' data-target='#myModal'>
<img src='images/{$row["productname"]}.jpg' width='255'/>
</a>
</td>";
}
mysql_free_result($result);
?>
JQuery Codings:
$(document).ready(function () {
$('#myModal').on('shown.bs.modal', function () {
console.log($(this).data('productname'));
})
})
$(this) inside modal event is not your clicked element instance, but the modal itself. You should use relatedTarget like so :
$(document).ready(function () {
$('#myModal').on('shown.bs.modal', function (e) {
// ^--- Add here
var
relatedData = $( e.relatedTarget ),
productname = relatedData.data( 'productname' );
console.log( productname );
})
})
$(document).ready(function ()
{
$('#myPopup').on('show.bs.modal', function (e)
{
var rowid = $(e.relatedTarget).data('productname');
alert(rowid);
$.ajax(
{
type: 'GET',
url: 'fetch_data.php', //Here you will fetch records
data: 'productname=' + rowid, //Pass $id
success: function (data)
{
$('.fetched-data').html(data);//Show fetched data from database
}
});
});
});
This coding solved my problem.
Thanks for all your reply.
Related
I'm trying to call php file with ajax, but it seems there's a bug to fix, but I can't find it.....
here's my button in html (p.s $row["id"] is a variable represented article id)
<button type='button' class='btn btn-danger delete' data-info-id='<?php echo $row["id"];?>'>Delete</button>
and here's my ajax code
<script>
$(document).ready(function(){
$(document).on('click', '.delete', function() {
var info_id = $(this).data("info-id");
var deleteUrl = "/delete.php";
$.ajax({
type: "POST",
url: deleteUrl,
data: { 'info-id': info_id },
dataType: 'json',
success: function (results) {
console.log(results);
}
});
});
});
</script>
And here's delete.php, just test if it receives the variables from ajax or not
<?php
$id = $_POST['info-id'];
$result = json_encode($id);
return $result;
?>
But I there's nothing showed in console.log
Hope someone can give me some advises to fix this!
Thanks
Change
return $result;
to
echo $result;
return is for returning, echo is for echoing (printing).
My PHP is returning this data to Ajax...
echo $data6['favorite_properties_id'];
I am updating it in one function and trying to send it to another using following html and jquery .
<img class="<?php if($favorite == 1){ echo 'alreadyfavorite';} else { echo 'addtofavorite';} ?>" pid="<?php echo $propertyid; ?>" fpid="<?php while($data5=$select5->fetch()){echo $data5['favorite_properties_id'];} ?>" src="../images/system/addtofavorite.png">
This is my jquery...
$('.alreadyfavorite1').click(function() {
event.preventDefault();
var del_id = $(this).attr('fpid');
var $ele = $(this).parent().parent().parent();
var reference = this;
$.ajax(
{
type: 'POST',
url: '../controllers/favoritesaddremove.php',
data:
{
del_id: del_id
},
success: function(data)
{
$ele.fadeOut(1000).delay(1000).remove(1000);
}
});
});
// On Search Property Results Page - Add to Favorite Button (Heart)
$('.addtofavorite').click(function() {
event.preventDefault();
var ins_id = $(this).attr('pid');
var del_id = $(this).attr('fpid');
var reference = this;
/* alert(del_id);
alert(ins_id); */
$.ajax(
{
type: 'POST',
url: '../controllers/favoritesaddremove.php',
data:
{
ins_id: ins_id
},
success: function(data)
{
$(reference).toggleClass("addtofavorite alreadyfavorite");
$('.alreadyfavorite').attr('fpid', data);
}
});
});
The second function is not working, but if i refresh the page then the second function is working...
First assign some id to the image and change fpid to data-fpid(data-attribute):
<img class="asdasd" id="aid" data-fpid="something">
In your success try:
success: function(data)
{
$('#aid').data('fpid', data); //this should update the value in data-fpid
}
Is there a way to update a database using 1 click?
i.e
echo "<a href='".$wpdb->query(" UPDATE partners SET active='no' WHERE partner_id='$active_partner->partner_id' ")."'>Disable</a>";
You need to react on a click with an ajax function.
i.e.
$('#your_button_id').bind('click', function () {
function_with_ajax();
})
function function_with_ajax() {
$.ajax({
here you could call the update.php script and transmit dynamic data
});
}
<button id="btn-save" type="button">
save
</button>
<script type="text/javascript">
jQuery(document.ready(function ($) {
$("#btn-save").click(
function () {
$.ajax({
type:"POST",
url:"/wp-admin/wp-ajax.php",
data:{
action:"save_data",
data:"data-update",
condition:"data-condition"
},
success:function (response) {
console.log(response);
},
error:function (error) {
console.log(error);
}
})
}
);
}))
</script>
and add to file function:
add_action("wp_ajax_save_data",function ()
{
global $wpdb;
$wpdb->update("your-table",
["your_field" => $_POST['data']]
,["condition-filed"=>$_POST['condition']]);
});
what is the problem of this code?
it is menu and page change by ajax with out refreshing the page, but its not working
it is my ajax code
<script>
$(document).ready(function() {
$('.news').click(function give(id){
$('#main-unit').text('Please Wait...');
var place= id;
$.ajax({
url:'pages/news.php',
type:'POST',
data:'where='+place,
statusCode:{
success: function(data){
$('#main-unit').html(data);
}
}
});
});
});
</script>
this is my html tags
<ul>
<li><a class="news" onclick=\"give('news')\" href="#">news</a></li>
</ul>
and php code
mysql_connect("localhost", "root", "")
or die(mysql_error());
mysql_select_db("basi")
or die(mysql_error());
if($_POST['where']=='news'){
$result = mysql_query("SELECT * FROM contents WHERE type = 0");
while ($row = mysql_fetch_array($result)){
$title = $row['title'];
$text = $row['text'];
echo"
<div class='title'><span>$title</span></div>
<div class='content'>
$text
</div>
";
}
}
the information read from DB but dont return to html file.
The problem is with your JavaScript. You're waiting for document ready and (incorrectly) binding a click event listener that isn't being used! Try:
<a class="news" onclick="give('news')" href="#">news</a>
with the JavaScript:
<script>
function give(id) {
$('#main-unit').text('Please Wait...');
var place = id;
$.ajax({
url:'pages/news.php',
type:'POST',
data:'where='+place,
statusCode:{
success: function(data){
$('#main-unit').html(data);
}
}
});
}
</script>
A better solution would be to separate HTML from JavaScript - remove the onclick attribute from your menu link, and use pure jQuery to select it and bind an event that calls give() when it is clicked:
$(document).ready(function() {
$('.news').click(function(e) {
give('news');
});
});
FTFY
<script>
$(document).ready(function() {
$('.news').click(function give(id){
$('#main-unit').text('Please Wait...');
var place= id;
$.ajax({
url:'pages/news.php',
type:'POST',
data:'where='+place,
//I believe your mistake was here
success: function(data){
$('#main-unit').html(data);
}
});
});
});
</script>
I want create some pages like facebook to load data without changing page/header or chat-bar in footer. I know I can use this code:
$(function() {
$("a.load").click(function (e) {
e.preventDefault();
$("#content").load($(this).attr("href"));
});
});
But I have one problem. I want to give jQuery add-on data like.
go to this profile
so I can do more things with this like:
if (send-more-data=="its-profile-link") {
$id = even-more-data="ID:12235663" //posted on link with jquery
mysql_Query("select * from users where id = $id")
}
elseif {
//////
}
so its possible i send more data with ID in or class or somethings else? Please give me an example. And tell me is it better using .load() or $.ajax()?
Well you can pass get params into link:
$(function(){
$("a.load").click(function (e) {
e.preventDefault();
$("#content").load($(this).attr("href")+"?data1="+$(this).attr("some-data")+"&data2="+$(this).attr("some-more-data"));
});
});
OR
You can use even better - the mighty AJAX:
$(function(){
$("a.load").click(function (e) {
e.preventDefault();
var link = $(this).attr("href");
var param1 = $(this).attr("some-data");
var param2 = $(this).attr("some-more-data");
/* //$.post example
$.post(link, { data1: param1, data2: param2 },function(data) {
$("#content").html(data);
}); */
//or $.ajax - basically the same thing
$.ajax({
url: link,
data: { data1: param1, data2: param2 },
success: function(result) {
$("#content").html(result);
}
});
});
});
Then in php:
if (#$_REQUEST['data1']=="its-profile-link"){
$id = #$_REQUEST['data2'];
$id = mysql_real_escape_string($id); //or $id = (int)$id; if id is always integer.
mysql_Query("select * from users where id = $id")
}
elseif{
//////
}
<a id="my_a" some-data="asd">
console.log($('#my_a').attr('some-data')); // asd
http://api.jquery.com/attr/