Develop Reference

Open a youtube link in a popup when clicking a div

I want the entire button (div) to open a youtube link in a pop-up. The pop-up is connected with the class 'popup-youtube'. The problem with this code is that the youtube link opens in youtube.com and not in the pop-up.
It's about this part:
<div onclick="location.href='//www.youtube.com/watch?v=<?php echo get_youtube_from_url( $hero_youtube_link_url_nl ) ?>';" style="cursor:pointer;" class="btn btn-secondary popup-youtube"><span href="//www.youtube.com/watch?v=<?php echo get_youtube_from_url( $hero_youtube_link_url_nl ) ?>" onclick="$('#button-youtube-nl').click();"><?php echo esc_html( $hero_youtube_link_text ) ?></span>
The result of this code is opening the video in youtube, and not in the popup.
The following code actually works like I wanted:
<a id="button-youtube-nl" href="//www.youtube.com/watch?v=<?php echo get_youtube_from_url( $hero_youtube_link_url_nl ) ?>"
But I'd like to make it work with the onclick="location.href" code. So if you click on the entire div you would get a pop-up with the video.
Below the fully code:
<?php
$hero_youtube_link_text = get_field( 'hero_youtube_link_text' );
$hero_youtube_link_url_nl = get_field( 'hero_youtube_link_url_nl' );
$hero_youtube_link_url_en = get_field( 'hero_youtube_link_url_en' );
$hero_youtube_link_url_de = get_field( 'hero_youtube_link_url_de' );
if ( $hero_youtube_link_text ) : ?>
<div class="hero__video">
<div onclick="location.href='//www.youtube.com/watch?v=<?php echo get_youtube_from_url( $hero_youtube_link_url_nl ) ?>';" style="cursor:pointer;" class="btn btn-secondary popup-youtube"><span href="//www.youtube.com/watch?v=<?php echo get_youtube_from_url( $hero_youtube_link_url_nl ) ?>" onclick="$('#button-youtube-nl').click();"><?php echo esc_html( $hero_youtube_link_text ) ?></span>
<div class="flags">
<a id="button-youtube-nl" href="//www.youtube.com/watch?v=<?php echo get_youtube_from_url( $hero_youtube_link_url_nl ) ?>"
class="popup-youtube"><img src="<?php echo get_template_directory_uri(); ?>/assets/images/flag-nl.png"/></a>
<a href="//www.youtube.com/watch?v=<?php echo get_youtube_from_url( $hero_youtube_link_url_de ) ?>"
class="popup-youtube"><img src="<?php echo get_template_directory_uri(); ?>/assets/images/flag-de.png"/></a>
<a href="//www.youtube.com/watch?v=<?php echo get_youtube_from_url( $hero_youtube_link_url_en ) ?>"
class="popup-youtube"><img src="<?php echo get_template_directory_uri(); ?>/assets/images/flag-en.png"/></a></div>
</div>
</div>
<?php endif ?>
Thanks in advance!

1.use a iframe inner DIV
2.when click DIV change the iframe src

//Add It In Your Code
$(this).click(function() { window.location = href; });
here You Can Use Your Div Id Also
$("#DivId").click(function() { window.location = href; });

Replacing Class of <a> </a> Base On Status

I am trying to change the class of anchor tag of my html and php code.
This is the screenshot:
And below is php code for that screenshot
Here is my PHP code:
<?php echo "<td>{$id}</td>" ?>
<?php echo "<td>{$ontrack_websiteName}</td>" ?>
<?php echo "<td>{$ontrack_url}</td>" ?>
<?php echo "<td>{$ontrack_geography}</td>" ?>
<?php echo "<td>{$ontrack_Comment}</td>" ?>
<?php echo "<td><a class='btn btn-success' href='status_db.php?id={$id}&status={$ontrack_status}'>
<span>$ontrack_status</span></a>
</td>" ?>
<?php echo "<td width='100px'><a class='btn btn-warning btn-sm' href='archiveProcess.php?id={$id}' role='button'><span class='glyphicon glyphicon-save-file' aria-hidden='true'></span></a>
<a class='btn btn-danger btn-sm' href='delete_websiteOntrack.php?id={$id}' role='button'><span class='glyphicon glyphicon-trash' aria-hidden='true'></span></a></td>" ?>
There is two values coming from "Status" column. One is "Enable" and another is "Disable". When user click "Enable" green link. It will change the value in DB as "Disable" and show "Disable". When it show "Disable", i would like to change the background as "btn btn-danger" class so that the background will become red.
But currently. It only show as green background as show below:
Pleae kindly help me. I trying to do different way but always failed :(

You can Do something like below
on success and When it show "Disable" :
$( "#btn-change" ).removeClass( "btn-success" );
$( "#btn-change" ).addClass( "btn-danger" )
Let btn-change is an id of that button.

Okay, so first of all you should not use so many <?php ?> tags.
What you are actually looking for is a simple if-statement:
<?php
//if status is enable, set button class to success
if($ontrack_status == "Enable"){
$btn_class = "success";
}else{
$btn_class = "danger"; //else set it to danger
}
//put btn class into the string:
echo "<td>{$id}</td>
<td>{$ontrack_websiteName}</td>
<td>{$ontrack_url}</td>
<td>{$ontrack_geography}</td>
<td>{$ontrack_Comment}</td>
<td> <!-- set button class here-->
<a class='btn btn-{$btn_class}' href='status_db.php?id={$id}&status={$ontrack_status}'>
<span>$ontrack_status</span>
</a>
</td>
<td width='100px'>
<a class='btn btn-warning btn-sm' href='archiveProcess.php?id={$id}' role='button'>
<span class='glyphicon glyphicon-save-file' aria-hidden='true'></span>
</a>
<a class='btn btn-danger btn-sm' href='delete_websiteOntrack.php?id={$id}' role='button'>
<span class='glyphicon glyphicon-trash' aria-hidden='true'></span>
</a>
</td>";
?>

I don't exactly get why you're using a new echo and opening and closing PHP on each line. You could just do
<?php
echo "<td>{$id}</td>
<td>{$ontrack_websiteName}</td>
<td>{$ontrack_url}</td>...
Apart from that, to answer your question, you'll need to use an if-statement. So for example:
if($ontrack_status == 'Disable') {
echo "<td><a class='btn btn-success' href='status_db.php?id={$id}&status={$ontrack_status}'>
<span>$ontrack_status</span></a>
</td>"
}else{
echo "<td><a class='btn btn-danger' href='status_db.php?id={$id}&status={$ontrack_status}'>
<span>$ontrack_status</span></a>
</td>"
}
A nicer solution would be to use shorthands
echo "<td><a class='btn btn-".($ontrack_status == 'Disabled' ? 'success' : 'danger')."' href='status_db.php?id={$id}&status={$ontrack_status}'>
<span>$ontrack_status</span></a>
</td>"

<script type="text/javascript">
var status = <?= $ontrack_status ?>;
$(document).ready(function() {
if(status == "Enable"){
$("a").addClass("btn-success");
$("a").removeClass("btn-danger");
} else {
$("a.status").addClass("btn-danger");
$("a.status").removeClass("btn-success");
});
<a class="status " href=""></a>

Dynamic content in Bootstrap Modal

I have little problem with Bootstrap modal. I embedded HTML code in PHP. For some reasons I want couple of modals in page.
<?php
//Looping modals...
for($i = 0; $i < 5; $i++){
echo '<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">';
echo 'Launch demo modal';
echo '</button>';
echo '<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">';
echo '<div class="modal-dialog" role="document">';
echo '<div class="modal-content">';
echo '<div class="modal-header">';
echo '<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>';
echo '<h4 class="modal-title" id="myModalLabel">';
echo $i; //Title goes here.
echo '</h4>';
echo '</div>';
echo '<div class="modal-body">';
echo '...'; //Content goes here.
echo ' </div>';
echo '<div class="modal-footer">';
echo '<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>';
echo '<button type="button" class="btn btn-primary">Save changes</button>';
echo '</div>';
echo '</div>';
echo '</div>';
echo '</div>';
}
?>
Loop works fine but I can't update title and content I my modal. All content and title data stays the same.
I tried this:
$(document).ready(function(){
$('#myModal').on('hidden.bs.modal', function () {
$(this).removeData('bs.modal');
});
});
Well...I'm not sure how to use this correctly.
I mean I don't know hot to use jQuery in PHP code. I tried saving jQuery code in script.js file and including in my modal:
echo '<script type = "text/javascript">';
include ('script.js');
echo '</script>';
Anyway, that doesn't work.
So, how to change modal content dynamically?

You need to change the modal ID every time you loop - so add the $i var in the modal ID for example. You must have unique IDs in HTML or jQuery / Bootstrap modal won't find the correct modal.
Change
echo '<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal'.$i.'">';
and
echo '<div class="modal fade" id="myModal'.$i.'" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">';
Alternately, you might rather try varying modal content based on a trigger button.
Also - just a style note: You can have multi-line echo statements, which might make your code a little easier to read. Or close the PHP tage and re-open when done with HTML:
echo '
<div ... >
<div ... >
</div>
</div>
';
or (instead of echo):
<?php
for ($i ... ) {
?>
<div ... >
<div ... >
</div>
</div>
<?php
} //ending for loop
?>

replace onclick action to display inline output

i want to change the behavior of the button in this function
$STRING .= ''.$CORE->_e(array('auction','41')).'';
to when clicked to display the output of this function
$data = get_user_meta( $authorID, 'cellno', true);
if(strlen($data) > 0){
echo "<span><i class='fa fa-phone'></i> <a href='phone:".$data."' rel='nofollow' target='_blank'</a> </span>";
so that when " class="btn btn-info btn-lg" is clicked it will display the phone number inside it, for now it shows contact author, and opens a new page to the author page.
thanks everybody

Try this,
<?php
$STRING .= ''.$CORE->_e(array('auction','41')).'';
$data = get_user_meta( $authorID, 'cellno', true);
if(strlen($data) > 0){
echo "<span id='phoneNumber'><i class='fa fa-phone'></i> <a href='phone:".$data."' rel='nofollow' target='_blank'</a> </span>";
}
?>
<script>
$(document).ready(function(){
$('#phoneNumber').hide();
});
function showPhoneNumber(){
$('#phoneNumber').show();
}
</script>
Also, try learning onclick events.

Modal reopens automatically after clicking the closing button

I've been trying to dynamically create a modal view in a table.
The data used to create the table is comming from a sql database.
Now my problem:
Whenever I click on a button called "Details" the modal view is opening and contains the data it should.
However, when I try to close the view with the "Close"- Button or the X in the top right corner the modal view will close for a second and reopen on its own.
The background will get darker after I do one of the above mentioned operations.
Here comes the tricky part. Whenever I close the view with the escape button on my keyboard, it'll close as it should and I'll get back to my previous view.
<?php
mysql_connect("localhost", "****" , "****");
mysql_select_db("hallo");
$sql= "SELECT * FROM erfassung WHERE Status='Abgeschlossen'";
$query=mysql_query($sql) or die (mysql_error());
while($row = mysql_fetch_assoc($query)) {
$thisId = $row['id'];
$thisModalId = 'modal'.$thisId;
$thisModalIdHref = '#'.$thisModalId;
$thisFormDoneId = $row['id'].'FormDoneId';
// Create table row
echo "<tr onclick=\"input\" data-toggle=\"modal\" href='$thisModalIdHref'>";
echo "<td>";
echo $row['Name'];
echo "<td>";
echo $row['Betreff'];
echo "<td>";
echo "<button class=\"btn btn-primary btn-lg\" data-toggle=\"modal\" data-target='$thisModalIdHref'>";
echo "Details";
echo "</button>";
echo"<div class=\"modal fade\" id='$thisModalId' tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"myModalLabel\" aria-hidden=\"true\">";
echo "<div class=\"modal-dialog\">";
echo "<div class=\"modal-content\">";
echo "<div class=\"modal-header\">";
echo "<button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">×</button>";
echo "<h4 class=\"modal-title\" id=\"myModalLabel\">Weitere Information </h4>";
echo "</div>";
echo"<div class=\"modal-body\">";
echo "<dl class=\"dl-horizontal\">";
echo "<dt>Bereich</dt>";
echo "<dd>" .$row['Bereich']. "</dd>";
echo "</dl>";
echo"</div>";
echo"<div class=\"modal-footer\">";
echo "<button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Close</button>";
echo "<button type=\"button\" class=\"btn btn-primary\">Save changes</button>";
echo"</div>";
echo"</div>"; //<!-- /.modal-content -->
echo"</div>";//<!-- /.modal-dialog -->
echo"</div>";//<!-- /.modal -->
echo "</td>";
echo "</tr>";
}
?>
For clarification:
If the $thisModalId is changed to the previous "MyModal" it works, but the button will, as it's supposed to, open the same text.
If you need any more source code or something else, I'd be more than happy to post it.
Thanks in advance for your help guys.
Best regards.

This is probably caused by the fact that your modal div is defined inside the element (tr) that the onclick handler is defined on. If the close button handler does not consume the click event, it will bubble to the containing elements all the way up (div, div, div, div, td, tr). When it gets to the tr, the onclick handler will execute and the modal will open again.
Obviously, you can solve this by not having your modal div inside your table structure, which doesn't really have a function anyway. This means that you will have to perform more than one separate loop, because the divs have to be all the way outside the table. This does not have to mean that your code will get messy if you take the advice of some of the commenters above and separate your PHP from your HTML a little bit.
Try something like this:
<?php
// Collect data
mysql_connect("localhost", "****" , "****");
mysql_select_db("hallo");
$sql= "SELECT * FROM erfassung WHERE Status='Abgeschlossen'";
$query=mysql_query($sql) or die (mysql_error());
$modals = array();
while($row = mysql_fetch_assoc($query)) {
$modals[] = array(
'id' => 'modal' . $row['id'],
'href' => '#modal' . $row['id'],
'FormDoneId' => $row['id'] . 'FormDoneId',
'Name' => $row['Name'],
'Betreff' => $row['Betreff'],
'Bereich' => $row['Bereich'],
);
}
?>
<table> <!-- Or something -->
<?php
foreach ($modals as $modal) {
// Create table rows
?>
<tr onclick="input" data-toggle="modal" href="<?php echo $modal['href'] ?>">
<td>
<?php echo $modal['Name'] ?>
<td>
<?php echo $modal['Betreff'] ?>
<td>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="<?php echo $modal['href'] ?>">
Details
</button>
</td>
</tr>
<?php
}
?>
</table>
<?php
foreach ($modals as $modal) {
// Create modal divs
?>
<div class="modal fade" id='<?php echo $modal['id'] ?>' tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Weitere Information </h4>
</div>
<div class="modal-body">
<dl class="dl-horizontal">
<dt>Bereich</dt>
<dd><?php echo $modal['Bereich'] ?></dd>
</dl>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div> //<!-- /.modal-content -->
</div>//<!-- /.modal-dialog -->
</div>//<!-- /.modal -->
<?php
}