my question is related to boostarap and javascript more than PHP
i am using codeIginter following code to generate table of currencies with exchange rate as following
<div class='table-responsive'>
<?PHP
$template = array(
'table_open' => '<table class="table table-bordered">'
);
$this->table->set_template($template);
$this->table->set_heading("العملة","سعر الصرف","تاريخ تعديل سعر
الصرف","أفتراضي","تعديل",'حذف');
foreach($currencies->result() as $currency){
$edit_link = anchor('#', '<img src='.base_url()."/assets/extras/icons/edit.png".'>', array('class'=>' img-responsive','data-toggle'=>'modal','data-target'=>'#login-modal','onClick'=>'alert("hi");'))." ";
$delete_link = anchor('#','<img src='.base_url()."/assets/extras/icons/delete.png".'>', array('class'=>'img-responsive'));
$this->table->add_row($currency->cur_name,$currency->cur_ex_rate,$currency->cur_ex_modified_date,$currency->cur_default,$edit_link,$delete_link);
}
echo $this->table->generate();
?>
</div>
the edit image open bootsrap modal for editing
my question is how to pass values of td to form of modal
Related
The images are fetched from the PHP PDO database from the directory "Images" where there are multiple images in it using SQL queries. When I try to click on the source link of the image and try to open the modal image, only the first image is been viewed by all other images too. I tried to change the ID names, but still it is showing the same first page. I have attached my code and the output below. Requesting anyone to help me in this and also the procedure to change the ID values.
if($data=$stmt->fetchAll(PDO::FETCH_ASSOC)) // to display all the images from the given condition
{
$link_id=0;
foreach($data as $row)
{
//$img=$row['images'];
$id=$row['id'];
$link_id=$link_id+1;
$query="SELECT images FROM pictures WHERE id=$id";
$stmt2=$conn->query($query);
$pictures=$stmt2->fetchAll(PDO::FETCH_ASSOC);
foreach($pictures as $rowimg)
{
$img=$rowimg['images'];
?>
<b><a id='<?php echo $link_id;?>' class='link_class' onclick='myfunc();'> <?php echo $img;?> </a></b>
<br><br>
<div id='modal_id' class='modal_class'>
<div class='modal_content_class'>
<img id='<?php echo $id;?>' class='img_class' src="images/<?php echo $img;?>" width='300' height='260'>
<span id='close_id' class='close_class' onclick="modal.style.display='none'">×</span>
</div>
</div>
<script>
var modal = document.getElementById("modal_id");
var closebtn =modal.getElementsByClassName("close_class");
function myfunc()
{
modal.style.display='block';
document.getElementById('<?php echo $id; ?>'). src="images/<?php echo $img;?>";
console.log(123);
};
</script>
}
}
}
Output
Output
Im new to PHP and have set up a connection to my server with Queries that retrieve data from my database.
One of the Columns im getting is 'NoteID', this also has a 'NoteName' column and a 'Note' column.
I currently have it so for every row of data that is in the Notes table it pulls through as a separate DIV. If you would like to see this please see this page
<!-- Main Body Area -->
<div class="main-container-notes">
<div id="left-box">
<?php
echo "<div style='width: 100%;'>";
while( $noteName = sqlsrv_fetch_array( $resultNotes, SQLSRV_FETCH_ASSOC))
{
echo "<div class='hvr-bounce-to-right1 hover-cursor' style='width: 100%; border-right: 5px solid #00AA88; height: 50px;'>" . $noteName['NoteName'] . "</div>";
}
echo "</div>";
?>
</div>
<div id="right-box">
<!-- This will display the Note Text in the 'Note' column -->
</div>
</div>
<!-- End Main Body Area -->
Above is the HTML/PHP
$getNotes = "SELECT NoteID, NoteName, Note FROM Notes";
Above being my Query
Say on the Notes table i have the following:
NoteID | NoteName | Note
1 | Test Note | This is some text associated with that name
How do i make it so when a user clicks on 'Test Note' it displays 'This is some text associated with that name' in the DIV to the right of it
So i essentially need to give the DIV a 'NoteID' of '1' so it can pull through the Note associated to that ID.
I hope i have explained this correctly. Any help is much appreciated.
Thanks,
I am making my first steps learning to code. I made some courses on Internet and now I decided to continue learning from the experience while I build a Wordpress child theme.
The thing is that I want to make an slideshow and I found this cool and simple one in w3schools http://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_self.
It's nice! But there are some problems if I want to implement it in Wordpress.
I made 10 image fields. Each one is one is a space to put one picture of my Slideshow. The code would be something like this:
<?php get_header(); ?>
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
</script>
<div class="mySlides"><?php the_field("image"); ?></div>
<div class="mySlides"><?php the_field("image_2"); ?></div>
<div class="mySlides"><?php the_field("image_3"); ?></div>
<div class="mySlides"><?php the_field("image_4"); ?></div>
<div class="mySlides"><?php the_field("image_5"); ?></div>
<div class="mySlides"><?php the_field("image_6"); ?></div>
<div class="mySlides"><?php the_field("image_7"); ?></div>
<div class="mySlides"><?php the_field("image_8"); ?></div>
<div class="mySlides"><?php the_field("image_9"); ?></div>
<div class="mySlides"><?php the_field("image_10"); ?></div>
<a class="home-btn-left" onclick="plusDivs(-1)">❮</a>
<a class="home-btn-right" onclick="plusDivs(1)">❯</a>
</div><!-- .content-area -->
<?php get_footer(); ?>
This has a problem: I have always to upload 10 images because if I upload less than 10 images I would have empty custom fields that would be showed as blank spaces.
Because of this problem I decided to make a repeater field. So I can create how many image subfields as I want without having this empty fields problem.
So the code would be something like this:
<?php
// check if the repeater field has rows of data
if( have_rows('image') ):
// loop through the rows of data
while ( have_rows('image') ) : the_row();
// display a sub field value
the_sub_field('subimage');
endwhile;
else :
// no rows found
endif;
?>
But now the question is: How can I do to apply an html class to my subfield? like this I can make the slideshow.
I tryied this but it doesn't work:
<?php
// check if the repeater field has rows of data
if( have_rows('image') ):
// loop through the rows of data
while ( have_rows('image') ) : the_row();
// display a sub field value
<div class="mySlides"> the_sub_field('subimage');</div>
endwhile;
else :
// no rows found
endif;
?>
Do you have some suggestion?
First of all, don't use the_sub_field() here. the_sub_field() echoes the field. Instead of this, use get_sub_field. It retrieves the value without outputting it. your code should look like this:
// check if the repeater field has rows of data
if( have_rows('image') ):
// loop through the rows of data
while ( have_rows('image') ) : the_row();
if( get_sub_field('subimage') ) :
// display a sub field value
echo '<div class="mySlides">' . get_sub_field('subimage') . '</div>';
endif;
endwhile;
endif;
Note the if( get_sub_field('subimage') ) : statement to check if there is really a value within the repeater field. If yes, it echoes strings chained with your get_sub_field('subimage') function.
Take a look here to advanced examples.
Replace the line
<div class="mySlides"> the_sub_field('subimage');</div>
with:
?><div class="mySlides"><?php the_sub_field('subimage'); ?></div> <?php
When mixing html and php you have to jump in and out of php-mode for the code to work.
An alternative would be using echo to print the html while in php-mode:
echo '<div class="mySlides">';
the_sub_field('subimage');
echo '</div>';
I've currently got a form which i use from Gravity forms, here is my html code
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">SPECIFY PRODUCT</button>
<div id="myDropdown_<?php echo get_the_ID(); ?>" class="dropdown-content">
<?php gravity_form( 1, false, false, false, '', true ); ?>
</div>
</div>
as you can see i'm echoing the product ID from woocommerce to give a different div id dependent on which product the user clicks on. This works fine.
Although, now when i create javascript function :
function myFunction() {
document.getElementById("myDropdown_<?php echo get_the_ID(); ?>").classList.toggle("show");
}
how can I pull through 'get_the_ID' like i have in the html code so it can dropdown my form in accordance to the product selected?
You can take a look at it here : http://www.ctagroup.com.au/cta-group-home/products/tactile-guidance/suresteel/suresteel-classic/
Any help would be greatly appreciated.
Regards
It is because the "myDropdown_<?php echo get_the_ID(); ?>" part is treated as string not PHP code.
Try this way:
<script>
var theId = "<?php echo get_the_ID(); ?>";
function myFunction() {
document.getElementById("myDropdown_" + theId).classList.toggle("show");
}
</script>
You always can try to generate JS code by PHP instead.
Of course in case, if the attempts to solve the problem have been unsuccessful.
Don't see any problems with this "technique".
I recently download this Slideshow with jmpress.js for a website. I'm using PHP and a database in MYSQL. I used a recordset in Dreamweaver to get the data from database to the site. Then I tried to create a Repeat Region to show the latests posts in the slider.
Headings, images and text are working fine. The problem is on the href (links), which are not changed and remain the same (the ID of the latest post) for all records.
In the head I have these files:
SlideshowJmpress/css/style.css
http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
SlideshowJmpress/js/jmpress.min.js
SlideshowJmpress/js/jquery.jmslideshow.js
SlideshowJmpress/js/modernizr.custom.48780.js
Here is the HTML Code:
<section id="jms-slideshow" class="jms-slideshow">
<?php do { ?>
<div class="step" data-color="color-1">
<div class="jms-content">
<h3><?php echo $row_slider['packageTitle']; ?></h3>
<p><?php echo $row_slider['packageDescription']; ?></p>
<a class="jms-link" href="article.php?ID=<?php echo $row_slider['ID']; ?>">Read more</a>
</div>
<img src="<?php echo $row_slider['packageGraphic']; ?>" width="300px;" height="300px;" />
</div>
<?php } while ($row_slider = mysql_fetch_assoc($slider)); ?>
</section>
<script type="text/javascript">
$(function() {
$( '#jms-slideshow' ).jmslideshow({
});
});
</script>
Here is the php code for the recordset:
$maxRows_slider = 4;
$pageNum_slider = 0;
if (isset($_GET['pageNum_slider'])) {
$pageNum_slider = $_GET['pageNum_slider'];
}
$startRow_slider = $pageNum_slider * $maxRows_slider;
mysql_select_db($database_nipvlach, $nipvlach);
$query_slider = "SELECT * FROM pages ORDER BY `date` DESC";
$query_limit_slider = sprintf("%s LIMIT %d, %d", $query_slider, $startRow_slider, $maxRows_slider);
$slider = mysql_query($query_limit_slider, $nipvlach) or die(mysql_error());
$row_slider = mysql_fetch_assoc($slider);
if (isset($_GET['totalRows_slider'])) {
$totalRows_slider = $_GET['totalRows_slider'];
} else {
$all_slider = mysql_query($query_slider);
$totalRows_slider = mysql_num_rows($all_slider);
}
$totalPages_slider = ceil($totalRows_slider/$maxRows_slider)-0;
Error is either in IDs in your DB or in the slideshow script i think.
Look at source of your page. Are the links right ?
I think that the problem is in the script or in the jmpress.min.js
When I changed slider, everything worked fine!