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

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.

Related

Replace a existing HTML link dynamically using js?

I'm using Joomla and use a radio box to select a buy option.
Everything works fine and I'm able to dynamically update the information displayed to the user.
My issue is to update the buy link when they select the option. My current js code to update the front end is:
jQuery(function($){
$(document).ready(function(){
$('#pricing').text('R'+'<?php echo (int)$opt1_o_price ?>');
$('#savings').text('R'+'<?php echo $opt1_save ?>');
$('#discount').text(Math.round('<?php echo $perc1 ?>')+'%');
});
$('.item').on('change',function(){
$('#pricing').text('R'+($(this).data('price')));
$('#savings').text('R'+($(this).data('price')-$(this).data('after')));
$('#discount').text(Math.round(100-
($(this).data('after')/$(this).data('price')*100))+'%');
$('input[name=sku]').val($(this).data('sku'));
And the code used to generate the link is:
<a href="<?php echo JRoute::_('my-groupbuy-cart?&task=add_to_cart&id='.$cmgbstore_id).'&option_id=1'; ?>"</a>
I am already able to select the ID using "$cmgbstore_id" because it gets loaded when the page loads, but I need to be able to change the "option_id" at the end of the link by using the option they have selected in the radio box. The value will always either be "1", "2" or "3".
An example of my radio box code is:
<div class="product-options">
<div class="option-input">
<input id="1" type="radio" value= "1" name="product-option" class="radio item" checked="checked" data-sku="1001" data-price="<?php echo (int)$opt1_o_price ?>" data-save="<?php echo (int)$opt1_save?>" data-after="<?php echo (int)$opt1_d_price ?>" />
</div>
<label for="1" class="option-detail">
<span class="option-title"><?php echo $opt1_title ?></span>
<span class="option-price">R<?php echo $opt1_o_price ?></span>
<span class="option-was-price">R<?php echo $opt1_d_price ?></span>
<span class="option-discount">Save R<?php echo $opt1_save .'.00'?></span>
</label>
I tried using the append option in js but every time the option changes another buy button gets added. Also it gets added at the end of the page and not where the original buy button was. The code I tried was something like this:
var link = document.createElement('a');
link.setAttribute('href', 'my-groupbuy-cart?&task=add_to_cart&id='+'<?php echo $cmgbstore_id ?>'+'&option_id=1');
link.innerHTML = "BUY NOW";
$('body').append(link);
I'm open for suggestions though and would really appreciate any help!
Thanks in advance.
Figure it out using the replies on my initial question.
What I did if someone else needs it: DEMO - https://jsfiddle.net/nbucona8/4/
It was simpler than I thought, but as #IncredibleHat said above I needed to use
$( selector ).attr('href','http://new/value');, so I made it:
$( "a[name='buy-button']" ).attr("href","/somelink/"+ dealid +"&option_id="+ $(this).attr("value"));
It refers back to any <a> element with the name "buy-button" and changes the href to the correct option_id.
So I call the buy link using:
<a name="buy-button" href=""> BUY NOW! </a>
And whenever the radio box option changes it changes the option_id by using :
$(this).attr("value")
at the end of the link.
Thanks to everyone that helped out.

jquery - get html of element after foreach loop

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>

How to sort data recieved in php into 3 different div tags in html?

Im using php to collect my instagram feed however all the images php collects using the instagram api are all placed in the same location(or same div) so i recieve my images
<?php foreach ($result->data as $post): ?>
<div class="images">
<!-- Renders images. #Options (thumbnail,low_resoulution,high_resolution)-->
<a class="group" rel="group1" href="<?= $post->images->standard_resolution->url ?>"><img src="<?= $post->images->thumbnail->url ?>"></a>
<?php endforeach ?> </div>
so all the images collected are turned into links and are all placed in the div images so what i would like to do is equally distribute all 20 images received into these 3 different divs using php or js.
<div class="col-md-4"></div>,
<div class="col-md-4"></div>,
<div class="col-md-4"></div>
This is my first post, code might be awkward. Thanks for the help.
Well, I've gone ahead and built out a proper full solution. It works by first building an array of response objects, then chunking them out for display. If you want to split them up, you'll pretty definitely need to put them into a sub-buffer, like the $results buffer you see below.
<?php
$results = array();
foreach ($result->data as $post):
// Using output buffering as a simple means of building HTML.
ob_start();
?>
<a class="group" rel="group1" href="<?= $post->images->standard_resolution->url ?>">
<img src="<?= $post->images->thumbnail->url ?>">
</a>
<?php
$results[] = ob_get_contents();
ob_end_clean();
endforeach;
// Now we have an array of elements as HTML. We'll chunk them
// into 3 arrays. We could also randomize or other things here.
$chunked = array_chunk($results, 3);
?>
<div class="col-md-4"><?=implode("\n", $chunked[0])?></div>
<div class="col-md-4"><?=implode("\n", $chunked[1])?></div>
<div class="col-md-4"><?=implode("\n", $chunked[2])?></div>
You will need to split your array and then iterate it within your desired div tag.
Example:
<?php
$chunked = array_chunk($array, 3);
foreach ($chunked as $value) {
foreach($value as $v) {
echo '<div class="col-md-4">';
print_r($v);
echo '</div>';
}
}

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

Two times same onclick function - only one works

I am desperate on this.
I create a list with an image and some description and other data.
The image and the description should be linked the same way.
The description link(onclick event) work fine:
<?php echo (string)$flat.'<br />'; ?>
But around the image it doesn't:
<a href="#" onclick="show_object('<?php echo $itemId.','.$identifier; ?>');return false;">
<img src="<?php echo (string)$image_url; ?>" class="list_image"></img>
</a>
Why? I do not understand, I tried several other ways, with including the onclick into the image, making a span out of the a.. Nothing works.
If I click on the image, I see in the javascript console that the request get started, but it does not load the page.
I do not understand since the two requests are exact same and immitedly behind another (inside a table)
please help!
I think you are missing some quotes:
<a href="#" onclick="show_object('<?php echo $itemId."','".$identifier; ?>');return false;">
<img src="<?php echo (string)$image_url; ?>" class="list_image"></img>
</a>
In your version, you call show_object('someitemid,someidentifier') but you want to call show_object('someitemid','someidentifier') as you do in your first <a>-tag.
How is that "exactly the same" ?
"show_object('<?php echo $itemId."','".$identifier; ?>'); return false;"
"show_object('<?php echo $itemId.','.$identifier; ?>');return false;"
I suggest you double check the quotes, or copypaste the working one into the other, then come back to us if it's not fixed :)

Categories