jquery - get html of element after foreach loop - javascript

Not sure how to do this. I get a list of projects using php and mysql.
I display the project using a loop. Then using jquery click() I wanna grab the html of the element where I displayed the project name to use the name somewhere else, but it doesn't matter what project I click, I always get only the first project of the loop.
here is the code:
<?php foreach ($projects as $project): ?>
<li class="todo-projects-item" data-projectid="<?php echo $project->project_id ?>">
<h3 id="p_name" data-proname="<?php echo $project->project_name ?>"><?php echo $project->project_name ?></h3>
<p><?php echo $project->project_body ?></p>
<div class="todo-project-item-foot">
<p class="todo-red todo-inline">Project #<?php echo $project->project_id ?></p>
<p class="todo-inline todo-float-r">32 Members
<a class="todo-add-button" href="#todo-members-modal" data-toggle="modal">+</a>
</p>
</div>
</li>
<div class="todo-projects-divider"></div>
<?php endforeach; ?>
It gives me the following:
I'm using this in my script with the click function:
pName = $('#p_name').data('proname');
alert(pName);
It doesn't matter what project I click, it always alerts "The Project", the first within my array... what am I doing wrong?

What element is the click handler on?
The issue is that you're using $('#p_name'), but you actually have many elements on the page with that same ID. This is actually a big no-no... element IDs should always be unique.
If the click handler is on the <li> tag, something like this should work better:
$('.todo-projects-item').click(function (e) {
e.preventDefault();
alert($(this).find('h3').data('proname'));
});

You should use $(this) to get the clicked element.
$("h3").click(function() {
var pName = $(this).data("proname");
alert(pName);
});
And, if you're hooking the click event to a parent of the h3, you can use $(this).find("h3") to grab it.

One ID in a page should be only once. #p_name can be used only once. If you need to use that multiple time use it as a class .p_name and in your script change it:
<h3 class="p_name" data-proname="<?php echo $project->project_name ?>"><?php echo $project->project_name ?></h3>

Related

Generating unique ids via PHP for use in document.getelementID?

I'm trying to use php to go through an array via a for loop. I'd like to create objects of each of the items in the for loop, and when the objects are clicked, they'll turn into a different color. To do so, I'm using document.getElementId() which requires unique IDs. I've tried to generate these unique IDs as per below, but it seems that when I click the object, it's not changing color so the ID isn't exactly working. Here's the code below:
<?php $i = 0;?>
<button class = "answerchoice" id="c1"+<?php echo $i; ?>><?php echo $data['C1']; ?></button>
<script>
document.getElementById("c1"+[<?php echo $i; ?>]).onclick = function() {
document.getElementById("c1"+[<?php echo $i; ?>]).style.backgroundColor = "#abebbd";}
</script>
Your formatting is slightly off. The echo $i needs to be inside the quotes for the id attribute. The plus sign is also extraneous(you are not concatenating here, the value is literally being output. Additionally, in PHP, concatenation is performed with the "." operator).
<button class = "answerchoice" id="c1<?php echo $i; ?>"><?php echo $data['C1']; ?></button>
You may also consider the alternate echo syntax which is more concise.
<button class = "answerchoice" id="c1<?= $i ?>"><?php echo $data['C1']; ?></button>
Additionally, you could benefit from assigning the id to a local variable rather than rebuilding it in three places. The same could apply to selecting the element in JavaScript(var button=document.getElementById(...)).

How to change a href when using multiple variables in PHP?

So I didn't found what I was looking for in last two days.
To be clear I have a table "tracks" in my database.
So I can show from "tracks" the "demo" field wich is an audio file "url"..
<?= $tracks['demo']; ?>
I have multiple url's but then I need to replace the a href
<a href="<?php echo $tracks['demo'];?>"
in a logical way.
In simple terms it's like I want to click on button 1 that loads
url 1 into this a href with the ID, title field from that track.
When you press button 2 you need to load another url and replace url 1 with url2.
I tried many ways including javascript but it won't work.
Problem now is that when I list 4 items it always loads the latest "URL" i have posted in my source code. :)
When I echo out <?php echo $tracks['demo]; ?> on all items I can see the correct url's so the functionality to replace the url is my issue.
* I basically want to load many mp3 url's in a player I made in the footer of my website. It works by hardcoding the urls in the url field but this is not what it should be... *
Code:
<?php while($tracks = mysqli_fetch_assoc($muziek)) : ?>
<div class="col-md-2 viny" id="muziek">
<h4><?= $tracks['title']; ?></h4>
<img src="<?= $tracks['img']; ?>"
alt=" <?= $tracks['title']; ?> />
<p class="artist">Artist: <?= $tracks['artist']; ?></p>
</div>
<?= $tracks['demo'] = $audiourl ; ?>
<button type="button" onclick="play">Play</button>
</div>
<?php endwhile; ?>
*THIS LOOPS PERFECT FOR ALL ITEMS TRACKS ARE LISTED PERFECT *
In my player I have
<a href="<?php echo $audiourl;?>" ><?= $tracks['artist']; ?></b> - <?= $tracks['title']; ?></a>
function play(){
I'm not good at JS... And this is my issue because it now loads the latest output from the php loop...
}
I don't know how you are replacing it but
Why not pass the audio in the function. Here like this
<button type="button" onclick="play(<?= $tracks['demo'] = $audiourl ; ?>)">Play</button>
assign a id to anchor tag
<a id="someId" href="<?php echo $audiourl;?>" ><?= $tracks['artist']; ?></b> - <?= $tracks['title']; ?></a>
and in the play function, you receive it like this
function play(audioUrl){
}
and change the href like this in the play function
If you are using jquery
$('#someId').attr("href", audioUrl);
sometimes the above does not works. Can't remember why but if that does not works try this
$('#someId').href = audioUrl
If you are using javascript
document.getElementById('abcd').href = audioUrl
So I tried many things but I had many issues with the player it's js file using the same id's and so on.
The new logic I tried out seems to work:
<form action="" method="POST">
<input type="submit" value="Play" name="Play">
</form>
<?php
if (isset($_POST["Play"]))
{
echo $tracks['demo'];
}else{
echo ' ';
}
?>
There is more going on but I tried to write it down as simple as this to show the logic. All Track url's are hidden and when the page loads there is an empty $audiourl by default loaded in the a href from my audioplayer. By clicking the button play I show the url in the source but not on the site.
Then the latest $audiourl variable changes to this value.

Targeting dynamic id's within a javascript file

In a php file I have tags with dynamic id's.
Example:
<ul id="<?php echo 'ul_'.$xx; ?>">
<li id="test_li">...</li>
</ul>
In a separate JavaScript file I am wanting to use the load function and target that div.
$('<?php echo 'ul_'.$xx; ?>').load('../includes/myphpfile.inc.php #test_li');
My question is, how could I load that php within a JavaScript file?
Notes:- The reason I have it set up this way is due to looping multiple ul's. I just want my ajax file to refresh the li's within the specific ul I am inside of.
Edit: If I use classes instead of Id's it adds my newly inserted rows into all of the ul's with the same class. If I use a plain Id it only works on the first ul. Further explaining why I need to target the way I am.
Unable to find a solution using the path I was on, I looked for alternate methods. Worked out I could add the event in the php file on the submit form button click.
The reason I wasn't using this method at first was because the code was running before it submitted to the DB and therefore was always behind in relation to the new data being submitted.
To my surprise I fixed this by just duplicating the line of code.
<script>
$("<?php echo '#enter_submit_button'.$linkid ?>").click(function(){
/*1*/
$('#<?php echo 'ul__'.$linkid; ?>').load('../includes/pursuit.inc.php <?php echo '#li__'.$linkid; ?>');
$("<?php echo '#insert_new'.$linkid; ?>").fadeOut();
/*2 with delay*/
$('#<?php echo 'ul__'.$linkid; ?>').delay( 800 ).load('../includes/pursuit.inc.php <?php echo '#li__'.$linkid; ?>');
});
</script>
I honestly couldn't say exactly why this works but the logic behind trying the method came from hoping that the double load would pick up the latest submission.
The simplest answer would be to put your JavaScript code into the PHP file inside
<script></script> tags, i.e, just before closing your <body> tag, do this:
<script type="text/javascript">
$('<?php echo 'ul_'.$xx; ?>').load('../includes/myphpfile.inc.php #test_li');
</script>
But if you must use an external js file, then you could do this:
Create a (.php) file and write:
<?php
header("Content-type: application/javascript");
?>
// your js code with php inside (as you would do in HTML)
var othervar='<?php echo $phpVar; ?>';
//<?php //some php ;?>
Then, in your main (html/php) file, put in:
<script src='myjs.php' type='application/javascript'></script>
Hope that solves it.

WordPress: how to open the_content() in a lightbox or new window?

I´m trying to open the_content (just pictures) in a lightbox.
I´d like a page like a Christmas-calendar so that you can see the posts (and the planned too) and if you click the published post, the image (the_content) should be shown in a shadowbox, lightbox or whatever, I think you´ll know what I mean. Right now my code looks like:
<header class="entry-header" rel="shadowbox" onclick="location.href='<?php the_permalink();?>';" style="cursor:pointer;">
<?php if ( ! post_password_required() && ! is_attachment() ) :
the_post_thumbnail();
endif; ?>
<?php if ( is_single() ) : ?>
<h1 class="entry-title"><?php the_title(); ?></h1>
<?php else : ?>
<?php endif; // is_single() ?>
<?php if ( comments_open() ) : ?>
<div class="kalender">
<p1> <?php the_field('nummer'); ?> </p1>
<br>
<p2><?php the_time('j. F Y'); ?> </p2>
<p3><?php the_title(); ?></p3>
</div>
<!-- .comments-link -->
<?php endif; // comments_open() ?>
</header>
I think the easiest way would be to handle the_content like a read_more link and just say onclick show in an shadowbox. But right now I just don't know how to. You can have a look here (right now just in Firefox or Safari, don't know why Chrome hates me:-))
Consider using the Fancybox plugin: http://fancybox.net/howto
Then include an anchor tag in each of your posts, like 'read more', with the content's unique ID:
<a class="fancybox" href="#content">Read More - This shows content of element who has id="content"</a>
Just ensure that each post's #content DIV has a unique ID, increment a variable in your loop and append it to read something along the lines of:
#content-01, content-02, etc.
Then just hide the content DIV's with CSS.
.fancybox { display: none; }
P.S. seems fine in Chrome 34.0.1847.131
Here's a useful pattern to pass server-side data to the client-side:
1. Use wp_localize_script to output a script fragment to the DOM.
2. Inside that script fragment, assign the value of the_content to a
JavaScript global string variable.
3. Use this JavaScript global from
inside your JavaScript to read the value of the_content

Javascript show div when button is clicked

I realize that this is a common question and I have searched for solutions and the one that I'm trying to use (it works in jsfiddle) but when I tried to use it in my website it just won't work. I'm trying to show a div when a button is clicked. Am I doing something wrong? Maybe there's something wrong with the javascript? Or could it be I need to include a jquery js file? Thanks for your help in advance.
Here is the code I'm trying to use:
<script type="text/javascript">
$("#seeAnswer").click(function() {
$('#subtext').html($(this).next().html());
});
</script>
And I'm trying to use it with this:
<div class="back_button">
<button id="seeAnswer">See Answer</button>
</div>
<span>
<?php
/* foreach($row2 as $ans) {
$answer = $ans['answer'];
}
echo $answer;
echo "hi";
*/
?>
<?php foreach ($row2 as $ans) : ?>
<p><?php htmlspecialchars($ans['answer']) ?></p>
<?php endforeach ?>
<p>hi there</p>
</span>
<div id="subtext">
</div>
Use .parent() after .next() because you are referring to the next element after the button... but there is no element... so you want the next() of the parent element.
EDIT: as per new information about the <HEAD>, you are executing the code before the whole dom is ready... so you're actually applying the code to nothing. You need to wait for the DOM to be ready. Like this
$('docment').ready(function() {
$("#seeAnswer").click(function () {
$('#subtext').html($(this).parent().next().html());
});
});
Fiddle

Categories