Javascript gets only the first id from a foreach loop. Why? - javascript

I use a foreach loop to get some tabs with different id's. This way I get tabs with ids tab1, tab2, tab3, etc. Than, when I want to get the id of each tab using javascript, it returns only the id of the first tab and uses this for all tabs. It does not loop as php do. Why?
<?php
foreach ($DB_con->query($foos) as $foo) {
?>
<div id='tab<?php echo $counter_foo; ?>'>
<div id="divid" style="visibility: hidden"><?php echo $counter_foo; ?></div>
<script>
$(document).ready(function() {
var dividvalue = document.getElementById('divid').innerHTML;
alert(dividvalue);
});
</script>
<?php
}
?>

Change the id in your HTML to class, and use getElementsByClassName instead of getElementById your in JavaScript.
Your div:
<div class="divid"> <!-- etc -->
and your JS..
var dividvalue = document.getElementsByClassName('divid')[0].innerHTML;
Also consider changing divid to divclass for consistency's sake.
Full edited code:
<script>
var i = 0;
</script>
<?php
foreach ($DB_con->query($foos) as $foo) {
?>
<div id='tab<?php echo $counter_foo; ?>'>
<div class="divclass" style="visibility: hidden"><?php echo $counter_foo; ?></div>
<script>
$(document).ready(function() {
var divclassvalue = document.getElementsByClassName('divclass')[i].innerHTML;
alert(divclassvalue);
i++;
});
</script>
<?php
}
?>

Related

Using php to run a JavaScript that edits the css after a from is submitted?

After the user submits a form the .php file is supposed to display only certain parts of the forum depending on if cc_owner has a value of personal or something else. I have the contents to be displayed in two separate div elements one called CreditContent_ID and the other called BillContent_ID the inline css sets both div display elements to 'none'. I am trying to use php to check whether the value of cc_owner is personal or something else. If it's personal I want it to change the CreditContent_ID display to block.
I think the problem is with this line:
echo 'document.getElementById("CreditContent_ID").style.display="block"';
Here is my code:
<style>
.CreditContent{
display:none;
}
.BillContent{
display:none;
}
</style>
<body>
<?php
if($_POST['cc_owner']=='personal'){
echo '<script language="javascript">';
echo 'document.getElementById("CreditContent_ID").style.display="block"';
echo '</script>';
}else{
echo '<script language="javascript">';
echo 'document.getElementById("BillContent_ID").style.display="block"';
echo '</script>';
}
?>
<div class=CreditContent id="CreditContent_ID">
//I have other code here.
</div>
<div class=BillContent id="BillContent_ID">
//more code here
</div>
</body>
<style>
.hideContent {
display: none;
}
</style>
<body>
<div class="CreditContent <?php echo $_POST['cc_owner'] != 'personal'? 'hideContent': ''; ?>"
id="CreditContent_ID">
//I have other code here.
</div>
<div class="BillContent <?php echo $_POST['cc_owner'] == 'personal'? 'hideContent': ''; ?>"
id="BillContent_ID">
//more code here
</div>
</body>
Add css class hideContent to div based on cc_owner value.

PHP echo statement within getElementByID div tag

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".

Links not working in a Repeat Region in JQuery

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!

How to access a internal div's ID (auto-incremented) by an external DIV id?

guys!
I got the following code:
<?php
for ($i = 0 ; $i < 4 ; $i++) {
?>
<!--EXTERNAL DIV-->
<div class = "square" onClick = "paint(this.id); doSomethingElse(this.id)"<br> id = "<?php echo "$i" ?>">
(...)
<!--Internal DIV-->
<div id = "test<?php echo "$i";?>">
</div>
</div>
What I want is: I need to call the 'doSomethingElse' function in the External DIV (because it's a square that will be clicked), but it will show (display: visible) the Internal DIV, so I need to access the internal div's ID from the external div's ID using jQuery or javascript.
I know it's a little confusing, but I think that's the way I can get what I want.
Thank you!
Well, to start, get rid of the break tag in your div. and your id's need to begin with a letter. and your echo statements need a semi-colon:
<div class="square" onClick="paint("#a<?php echo "$i"; ?>"); doSomethingElse("#a<?php echo "$i"; ?>")" id = "a<?php echo "$i"; ?>">

Ajax WordPress post popup with SimpleModal and jQuery

I tried to implement this mode here http://wordpressthemescollection.com/ajax-wordpress-post-popup-with-simplemodal-and-jquery-488.html but nothing seems to work.
This is what I do.
1 / Include in header
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="<?php bloginfo("template_url"); ?>/js/jquery.simplemodal.js"></script>`
The links are goods cause I checked them both.
2 / Include in header this script
<script>
jQuery(document).ready(function() {
jQuery('a.postpopup').live('click', function(){
var id = jQuery(this).attr('rel');
jQuery('<div id="ajax-popup"></div>').hide().appendTo('body').load('<?php bloginfo('url')?>/ajax/?id='+id).modal({
opacity:90,
position: ["0%"],
overlayClose:true
});
return false;
});
});
</script>
3 / Make a custom template with this code
<?php
/*
Template Name: Ajax
*/
?>
<?php
$post = get_post($_GET['id']);
?>
<?php if ($post) : ?>
<?php setup_postdata($post); ?>
<div class="whatever">
<h2 class="entry-title"><?php the_title() ?></h2>
<div class="entry-content">
<?php the_content(); ?>
</div>
</div>
<?php endif; ?>
And after that made a page named Ajax and assign the template Ajax.
4 / Implement a link
this link
If i click on the link nothing happens.
What did I do wrong cause I did not have a clue about it?
Thanks.
jQuery .load() is ajax and so you need to do any subsequent things in a callback like this:
var $ajax-div = jQuery('<div id="ajax-popup"></div>').hide().appendTo('body');
var url = '<?php bloginfo('url')?>/ajax/?id=' + id;
$ajax-div.load(url), function() {
// the callback
jQuery('#ajax-popup').modal({
opacity: 90,
position: ["0%"],
overlayClose:true
});
});
when you create an new post or page content on wordpress admin, select the "Ajax" template for your page

Categories

Resources