I want to pass value to popup windows by using a tag with href when I click a
get values form db into hidden layer how to passing values by js.
A tag code
<a 'href=index.php?id=3'></a>
Hidden layer
<div class='wrap'>
<div class='content'>
<h2>Well Hello!</h2>
<p>
<? if ( isset($_GET['id'])){
$id = $_GET['id'];
echo $id ;} ?>
</p>
</div>
</div>
js code
$('a').on('click', function(){
$('.wrap, a').toggleClass('active');
return false;
});
If you want to do this the javascript way, see this example.
$(document).ready(function() {
$('a.toggle-wrap').on('click', function(e) {
e.preventDefault(); // prevent default behaviour of the link that would reload the page
$('.wrap, a.toggle-wrap').removeClass('active'); // remove class active on every link clicking
var target_id = $(this).attr("data-id"); //get the desired id from link
var wrap_element = $('.wrap[data-target=' + target_id + '] p');
var link_element = $('a[data-id=' + target_id + ']');
link_element.toggleClass('active');
$.ajax({
type: "GET",
url: "someOtherScriptThatOnlyOutputsResults.php",
data: "id="+target_id,
success: function(resultData) {
wrap_element.html(resultData).toggleClass('active'); // only toggle desired ids
}, error: function() {
wrap_element.html('Could not load data').toggleClass('active');
}
});
});
});
.wrap {
display: none;
}
.wrap.active {
display: block;
}
a {
color: green;
}
a.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="toggle-wrap" data-id="3">Link 3</a>
<a class="toggle-wrap" data-id="4">Link 4</a>
<div class="wrap" data-target="3">
<div class="content">
<h2>Well Hello content 3!</h2>
<p>Your db content related to id 3 from database, using php.
</p>
</div>
</div>
<div class="wrap" data-target="4">
<div class="content">
<h2>Well Hello content 4!</h2>
<p>Your db content related to id 4 from database, using php.
</p>
</div>
</div>
Add identifiers to the hidden wrap(s) and the link(s) and work with those. By using queries as seen in the js snippet, you can target certain HTML tags. Use CSS display to hide and show your wrap tag.
Create a new PHP file someOtherScriptThatOnlyOutputsResults.php to get and return data:
<?php
if(isset($_GET['id'])) {
$pdo = new PDO('mysql:host=someHost;dbname=someDatabase', 'someUser', 'somePass');
$statement = $pdo->prepare("SELECT columnWithContent FROM yourContentTable WHERE id = ?");
$statement->execute(array($_GET['id']));
$row = $statement->fetch();
$content = $row['columnWithContent'];
echo $content;
}
?>
Related
So this is my button div inside a PHP function called getDetails().
<div class='detail_cart'>
<a href='detail.php?add_cart=$prod_id'>
<button id='detail_button_add'>Add to cart</button>
</a>
</div>
Based on ip address, it counts how many products you've added in the cart and display them to my shop cart icon.
Every time the button is pressed it adds the product into a database but i need refresh page in order to see the updated count.
echo "<div id ='total_cart'>";
echo $count_cart =mysqli_num_rows($run_cart);
echo "</div>";
I tried to fix but no chance..
<script type= "text/javascript">
$(document).ready(function(){
$("#detail_button_add").bind("click",function(){
$("#total_cart").load("header.php");
});
});
</script>
"header.php" is the header section of my PHP.
You need to add an clear div with an span inside. You will get the data from an API in this case your header.php that returns 1,2 or any number and that will be displayed.
Your header.php
echo mysqli_num_rows($run_cart);
http_response_code(200);
exit;
<div id="total_cart">
<span id="total_cart_num"></span>
</div>
<div>
<a href="detail.php?add_cart=<?=$prod_id ?>">
<button id="detail_button_add">Add to cart</button>
</a>
</div>
<script>
document.querySelector("#detail_button_add").addEventListener("click", function(){
refreshCart();
});
function refreshCart(){
const xhr = new XMLHttpRequest();
// Add link to your Site that returns the count
xhr.open("GET", "header.php"); // Header returns Like 1,2,3 or any Number
xhr.addEventListener("load", function(){
if(this.status == 200){
document.querySelector("#total_cart_num").innerHTML = this.responseText;
} else {
alert("An error as been triggered!");
}
});
xhr.send();
}
</script>
If you mean that this is header.php:
echo "<div id ='total_cart'>";
echo $count_cart =mysqli_num_rows($run_cart);
echo "</div>";
and you do this:
$("#total_cart").load("header.php");
the result would be:
<div id ='total_cart'>
{content from header.php}
</div>
e.g.
<div id ='total_cart'>
<div id ='total_cart'>
{count of cart}
</div>
</div>
The solution is to skip the creation of div in the header.php:
(create that div elsewhere)
//remove echo "<div id ='total_cart'>";
echo $count_cart =mysqli_num_rows($run_cart);
//remove echo "</div>";
If you don't get your click event to work, you might need to use on("click"... instead of bind("click"...
(on also works on dynamically created html elements (with content))
$(document).ready(function(){
$("#detail_button_add").on("click",function(){
//This header.php should NOT include the actual html-element (div) jsut the
//content you want INSIDE the htm-element with id #total_cart
$("#total_cart").load("header.php");
});
});
Another thing with your first code-snippet is that your link won't work:
<a href='detail.php?add_cart=$prod_id'>
It should be (taking for granted you have the code in a php-file)
<a href='detail.php?add_cart=<?php echo $prod_id;?>'>
I have text area where I need to load image to <img> tag. Then, I want to post content of text area to generate_pdf.php to generate pdf. I have encauntered URI Too Largeerror when I post text area content by $.ajax({}).
Method 1-$.ajax({}) in $().on("click",function(){}) of submit button
<?php
//image from sql
$image =$array_image[0]['file'];
$encode_img ='"data:image/jpeg;base64,'.base64_encode($image).'"';
?>
<!DOCTYPE html>
<html>
<head>
<script src="../../library/jquery/jquery-3.4.1.min.js"></script>
<script>
$( document ).ready(function()
{
let hd = document.createElement('div'); // Create new DIV
hd.style.display = "none"; // Hide new DIV
hd.innerHTML = document.querySelector('#ta').value; // set its innerHTML to textarea's
document.body.prepend(hd); // Add to body
document.querySelector('#test').src = <?php echo $encode_img;?>;
document.querySelector('#ta').value = hd.innerHTML;
content =$('#ta').val();
$('#test').src = <?php echo $encode_img;?>;
//submitted uri too large
//-(<form id="text_editor" name="text_editor" >)
$('#pdf').on("click",function()
{
$.ajax({
type:"POST",
url :"generate_pdf.php",
data:{
'pdf ' :content,
}
,
success:function(data)
{
alert('successfully posted!');
$('#content').html(data);
}
});
})
})
</script>
</head>
<body>
<form id="test_img" name="test_img" >
<textarea id="ta" name="ta">
<img alt="test" id="test">
</textarea>
<input type="submit" value="Submit" name="pdf" id="pdf">
</form>
<div id="content" name="content"></div>
</body>
</html>
Then , I tried using $.post in $().submit(function(event){}). This able to submit without this error.
Method 2-$.post in $().submit(function(event){}) of form
<?php
//image from sql
$image =$array_image[0]['file'];
$encode_img ='"data:image/jpeg;base64,'.base64_encode($image).'"';
?>
<!DOCTYPE html>
<html>
<head>
<script src="../../library/jquery/jquery-3.4.1.min.js"></script>
<script>
$( document ).ready(function()
{
let hd = document.createElement('div'); // Create new DIV
hd.style.display = "none"; // Hide new DIV
hd.innerHTML = document.querySelector('#ta').value; // set its innerHTML to textarea's
document.body.prepend(hd); // Add to body
document.querySelector('#test').src = <?php echo $encode_img;?>;
document.querySelector('#ta').value = hd.innerHTML;
content =$('#ta').val();
$("#test_img").submit(function(event)
{
event.preventDefault();
var $form = $( this ),
url = $form.attr( 'action' );
var posting = $.post( url, { pdf:content} );
posting.done(function( data )
{
$('#content').html(data);
});
})
})
</script>
</head>
<body>
<form id="test_img" name="test_img" method="POST" action="generate_pdf.php" >
<textarea id="ta" name="ta">
<img alt="test" id="test">
</textarea>
<input type="submit" value="Submit" name="pdf" id="pdf">
</form>
<div id="content" name="content"></div>
</body>
</html>
$.post is a shorthand for $.ajax.But, why method 2 able to submit successfully and first method could not? In method 1, content of data that we posting included in url. But, in second method, not included. Thanks in advance.
Adding preventDefault() method in $('#pdf').on("click",function() {}) had solve error URI Too Large.
The preventDefault() method stops the default action of a selected element from happening by a user. This method does not accept any parameter and works in two ways:
It prevents a link from following the URL so that the browser can't go another page.
It prevents a submit button from submitting a form.
Code:
$('#pdf').on("click",function(e)
{
e.preventDefault();
$.ajax({
type:"POST",
url :"index_debug_uritoolarge_2.php",
data:{
pdf :$('#ta').val(),
},
success: function(data)
{
alert('successfully posted!');
$('#content').html(data);
}
});
})
Reference: post_textarea_content_in_ajax
Got blocked.
Created a php page with normal html, css, js and php.
Inside of that file, wanted for the user to be able to see events accordingly to the selected date.
In order to do that, once the date was selected, the value associated that date would get posted into a php script.
Inside of that php script, the posted variable was going through some conditions and echoing the results.
Then, the result of this php script, would be displayed in the initial php page.
Ok, so far so good.
Thing is,
Want the text to appear styled, which means, want it to allow styling classes.
Did some research but can't seem to find any problem like that.
When you go to the page and write, for example, the following in input: 12/22/2016, you can see data being displayed. Problem is, it doesn't come anywhere close to styled.
This makes sense, somehow, because the php script doesn't have mentioned anywhere to use those styles.
The styles are being used in the initial php page (html/css/js/php), where the results will be displayed.
Initially I thought the style in the results would be recognized because it is called in the exact same page where those style files are mentioned.
What am I doing wrong?
This it the result of the php script:
<h1 class="hero-header-otro">It works! dfgdfgdfg</h1>
As you can see, it has the class called inside of the h1
This is the javascript code that posts in the php script and displays the results in a specific div of the same page where this js code is, which is the php page mentioned all the way through this message:
jQuery(function($) {
$(".date").datepicker({
onSelect: function(dateText) {
display("Selected date: " + dateText + "; input's current value: " + this.value);
$(this).change();
}
}).on("change", function() {
display("Got change event from field");
$.ajax({
type: "POST",
url: 'events_script.php',
data: ({dates: this.value}),
success: function(data) {
$('.results-ajax').html(data);
alert(data);
}
});
});
function display(msg) {
$("<p>").html(msg).appendTo(document.body);
}
});
The CSS:
.hero-content > h1.hero-header-otro {
font-size: 4rem;
margin-bottom: 20px;
font-weight: bold;
color: #ffffff;
}
Try using datatype html in ajax request:
$.ajax({
type: "POST",
url: 'events_script.php',
data: ({dates: this.value}),
dataType : 'html',
success: function(data) {
$('.results-ajax').html(data);
alert(data);
}
});
Got it fixed. This it the result of the php script:
<div class="tab-pane" role="tabpanel">
<div class="container day-events">
<div class="row event-list">
<div class="event-list-time col-md-3 col-sm-3 center" style="background-image: url(/lascruces_styles/img/events-img/event.jpg);">
<p class="event-list-start-time">2016-12-22 00:00:00</p>
<hr class="event-list-time-divider">
<p class="event-list-end-time">2016-12-22 00:00:00</p>
</div>
<div class="event-list-info col-md-9 col-sm-9">
<h2 class="event-list-name">dfgdfgdfg</h2>
<p>Organized by <span class="event-list-organizer">yyyyyyy</span></p>
<p class="event-list-description"><p>dffghfghgfhf</p></p>
<button type="button" class="btn more-info-list">More Information</button>
</div>
</div>
</div>
This is the javascript code that posts in the php script and displays the results in a specific div of the same page where this js code is, which is the php page mentioned all the way through this message:
jQuery(function($) {
$(".date").datepicker({
onSelect: function(dateText) {
display("Selected date: " + dateText + "; input's current value: " + this.value);
$(this).change();
}
}).on("change", function() {
display("Got change event from field");
$.ajax({
type: "POST",
url: 'events_script.php',
data: ({dates: this.value}),
dataType : 'html',
success: function(data) {
$('.results-ajax').html(data);
alert(data);
}
});
});
function display(msg) {
$("<p>").html(msg).appendTo(document.body);
}
});
The PHP:
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
while ($row = mysqli_fetch_assoc($result)) {
echo '<div class="tab-pane" role="tabpanel">
<div class="container day-events">
<div class="row event-list">
<div class="event-list-time col-md-3 col-sm-3 center" style="background-image: url(/lascruces_styles/img/events-img/event.jpg);">
<p class="event-list-start-time">'.$row['Start_Date'].'</p>
<hr class="event-list-time-divider">
<p class="event-list-end-time">'.$row['End_Date'].'</p>
</div>
<div class="event-list-info col-md-9 col-sm-9">
<h2 class="event-list-name">'.$row['Event_Name'].'</h2>
<p>Organized by <span class="event-list-organizer">'.$row['Company_Name'].'</span></p>
<p class="event-list-description">'.$row['Event_Description'].'</p>
<button type="button" class="btn more-info-list">More Information</button>
</div>
</div>
</div>
</div>';
}} else { echo 'No results found.'; }
Will you please please tell me how to get java variable "data_id" value in PHP Variable "$gal_id" i m not able pass the value of java variable into PHP Variable so please also let me know if you find the solution
JS IN Head
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/jquery.colorbox.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//Examples of how to assign the Colorbox event to elements
$(".inline").colorbox({inline:true, width:"70%", height:"500px;"});
});
</script>
HTML
<li><a class='inline' href="#inline_content" data-id="1">ABC</a></li>
<li><a class='inline' href="#inline_content" data-id="2">DEF</a></li>
<li><a class='inline' href="#inline_content" data-id="3">XYZ</a></li>
POPUP Box
<script type="text/javascript">
$('.inline').click(function(){
var data_id = $(this).data('id');
$('#idvalue').html(""+data_id);
});
</script>
<div style='display:none'>
<div id='inline_content'>
<span id="idvalue"></span><!--we'll get here data_id value of clicked list in output -->
<?php
$gal_id = ""; // Will you please please tell me how to get java variable "data_id" value here from above js
$check = mysql_query("select * from img where id = '$gal_id'");
while ($run = mysql_fetch_array($check)){
.
.
.
}?>
</div>
</div>
try this edit... I have integrated ajax with your code
<script type="text/javascript">
$('.inline').click(function(){
var data_id = $(this).data('id');
$('#idvalue').html(""+data_id);
$.ajax({
type: "GET",
url: "ajax.php?gal_id="+data_id,
success: function(data) {
$('#images').html(data);
}
});
});
</script>
<div style='display:none'>
<div id='inline_content'>
<span id="idvalue"></span>
<span id="images"></span>
</div>
</div>
create a new file ajax.php
and put this code there...
<?php
//whatever content you will echo here will be send to the main page and put to #images span tag...
//put your connection string here.. to connect the database
$gal_id = $_GET['gal_id'];
$check = mysql_query("select * from img where id = '$gal_id'");
while ($run = mysql_fetch_array($check)){
.
.
.
}?>
If I understood your question, you can't do it this way.
You can check this other question that can surely help you:
How to pass JavaScript variables to PHP?
I am using this jquery popup
$(document).ready(function() {
// Here we will write a function when link click under class popup
$('a.popup').click(function() {
// Here we will describe a variable popupid which gets the
// rel attribute from the clicked link
var popupid = $(this).attr('rel');
// Now we need to popup the marked which belongs to the rel attribute
// Suppose the rel attribute of click link is popuprel then here in below code
// #popuprel will fadein
$('#' + popupid).fadeIn();
// append div with id fade into the bottom of body tag
// and we allready styled it in our step 2 : CSS
$('body').append('<div id="fade"></div>');
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
// Now here we need to have our popup box in center of
// webpage when its fadein. so we add 10px to height and width
var popuptopmargin = ($('#' + popupid).height() + 10) / 2;
var popupleftmargin = ($('#' + popupid).width() + 10) / 2;
// Then using .css function style our popup box for center allignment
$('#' + popupid).css({
'margin-top' : -popuptopmargin,
'margin-left' : -popupleftmargin
});
});
// Now define one more function which is used to fadeout the
// fade layer and popup window as soon as we click on fade layer
$('#fade').click(function() {
// Add markup ids of all custom popup box here
$('#fade , #popuprel , #popuprel2 , #popuprel3').fadeOut()
return false;
});
});
and it's my php and html code in my foreach loop:
<?php foreach($items as $item){ ?>
<a rel="popuprel" class="popup">click hier</a>
<div class="popupbox" id="popuprel">
<div id="intabdiv">
<?php echo $item->description; ?>
</div>
</div>
<div id="fade"></div>
<?php } ?>
now when click and show popup only echo one item description for all items but I want echo each item description for each item.
The Javascript:
<script>
function show_description(id)
{
$('desc').fadeOut();
$('#description_' + id).fadeIn();
}
</script>
The PHP/HTML:
<?php foreach($items as $item){ ?>
<a rel="popuprel" onclick="show_description(<?=$this->id; ?>);">click hier</a>
<div class="popupbox" id="popuprel">
<div class="desc" id="description_<?=$this->id;?>">
<?php echo $item->description; ?>
</div>
</div>
<div id="fade"></div>
<?php } ?>
I assume you can fetch the ID of your item with "$this->id", that's why I used it in the code.
I found how can do it
i replace all popuprel with this code:
$item->id
it's now work