Include PHP page and replace divs when link clicked - javascript

I am trying to replace a div's contents with another PHP page when clicking on a link.
Link
echo 'Control Panel';
If statement checking if link clicked
<?php
/** Control panel link. */
if(isset($_GET['control'])){
$link=$_GET['control'];
if ($link == '1'){
include('controlpanel.php');
}
}
Divs
<div id="divContainer">
<div id="div1">
</div>
<div id="div2">
</div>
<div id="div3">
</div>
</div>
I am looking for divContainer to hold the controlpanel.php contents when the control link is clicked and div1 div2 and div3 to be 'removed/hidden'.
I can get both functionalities to work individually but not simultaneously.
The code currently displays the content within the page but not within a div/hiding contents of said div.
Any ideas?

Continuing with your current style, you could simply amend your conditional to the following:
<?php
if ($link == '1') {
include('controlpanel.php');
} else { ?>
<div id="divContainer">...</div>
<?php } ?>
Alternatively, as suggested, you could use some JavaScript to hotload in the control panel, and in the same breath, hide the divs you need hidden. Something like this (jQuery):
function loadPanel() {
$.ajax({
url: 'controlpanel.php',
method: GET,
success: function(res) {
$('#divContainer').html(res);
}
});
}
And then bind this to your link.

Related

Displaying the content dynamically from the dynamic id of the button using jquery

Scenario:
I have a bit tricky case here:
Upon cicking the button inside the first div block (I have named it as DIV Block A for readability), I want to display the channels which is inside the second DIV Block
(I have named it as DIV Block B for readability).
The id of button from DIV Block A is:
id="sub_category_dc_button_<?=$category['category_id'];?>"
Upon clicking this button, the content inside the DIV Block B should be displayed.
Attempt 1:
For this, I have followed this approach:
$(".sub_dc_channels").on("click", function(){
$($(this).attr("data-target")).show();
});
Here is my DIV Block A:
<div class="sub_cat_buttons channel" id="dc_subcategory_button_tab">
<div class="sub_dc_channels" id="sub_dc_button">
<?php foreach ($output as $category) {
<button type="button" data-toggle="collapse"
id="sub_category_dc_button_<?=$category['category_id'];?>"
class="btn btn-primary sub_digitalchannel_button"
data-target="#Category_<?= $category['category_id'];?>">
<?= $category['category_title']?>
</button>
</div>
</div>
Here is my DIV Block B:
<?php foreach ($output as $category) {?>
<div class="channel" id="Category_<?= $category['category_id'];?>">
<div id="subchannel_list_tab">
<?php foreach ($output as $category) {?>
<?php foreach ($category['channels'] as $channels) { ?>
<img src="<?= $channels['channel_logo']; ?>"
alt="<?= $channels['channel_name']; ?>"
title="<?= $channels['channel_name']; ?>"
style="width: 100px; height: 60px;" />
<?php } ?>
<?php } ?>
</div>
</div>
<?php } ?>
Attempt 2:
I have also used this approach with the same DIV Blocks but it fails too.
$('div[id^="Category_"]').click(function() {
$(".channel").hide();
$("#subchannel_list_tab").show();
});
Issue Faced:
When I clicked the button from DIV Block A then it targets the contents inside the DIV Block B but the contents inside the DIV Block B are not shown.
What am I missing here? Or am I following the wrong approach?
Suggestions are highly appreciated.
your click is going to be triggered in the div and not in the button, it is likely that this is the problem.
Here's a dummy example of what I think you're up to.
$('.showDiv').click( function () {
let div = $(this).attr('data-target');
$(`#${div}`).show();
});
#divB {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divA">
<button class="showDiv" data-target="divB">show div</button>
</div>
<div id="divB">
info divB
</div>
You want to show dynamic data as per id of button click.You missed a target button class in selector.your issue is solved.
$(document).on("click",".sub_dc_channels .sub_digitalchannel_button",function(){
alert();
$($(this).attr("data-target")).show();
});
for reference you can click here.

How to display different values in every loop of repeater of Advance Custom Field

I am Designing wordpress page with design of a image block with a text on over it. but that design is repeated 6 times in my page, so i have used the advance custom field repeater to repeat that image block for 6 times.
but now the issue is I want a new copy of text when i hover on each image.
as I used Jquery, as my class name for the image block is same so when i hover on any of the boxes all the box content gets changed. i want on which box i hover only that content should change.
$(".services-block").on({
mouseenter: function() {
$(".wrap-content-services").hide();
$(".overlay-content-services").show();
},
mouseleave: function() {
$(".wrap-content-services").show();`enter code here`
$(".overlay-content-services").hide();
}
});
Html Structure of custom field
<?php if (have_rows('services_content')): ?>
<div class="row">
<?php while (have_rows('services_content')): the_row() ?>
<div class="col-md-6 services-block">
<?php echo wp_get_attachment_image(get_sub_field('services_image'), 'full'); ?>
<div class="wrap-content-services">
<?php the_sub_field('services__overlay_content'); ?>
</div>
<div class="overlay-content-services">
<?php the_sub_field('services__hover_content'); ?>
</div>
</div>
<?php endwhile; ?>
</div>
Change your JQuery to something like:
$(".services-block").on({
mouseenter: function() {
$(this).find(".wrap-content-services").hide();
$(this).find(".overlay-content-services").show();
},
mouseleave: function() {
$(this).find(".wrap-content-services").show();`enter code here`
$(this).find(".overlay-content-services").hide();
}
});
$(".wrap-content-services").hide(); will hide all elements with a class of .wrap-content-services

jQuery show/hide errors on click

I have a show/hide for messages which is working. There is a subject and message. I need it to work so that only onClick of the title will the message display. At the moment when I click on the title of the message, it opens the message, but when the message is open, if I click on the message, it hides. As I'm going to be having some links within the message, this doesn't work. I only need onclick of the title to show and hide the message.
HTML/PHP CODE:
<div id="note_container">
<div id='empty_msg' style="display:none;">You do not currently have any notifications in your <span id='box_type'>INBOX</span></div>
<!-- Content -->
<?
if(!empty($notes)):
foreach($notes as $box_type=>$notes_array):
if(!empty($notes_array)):
foreach($notes_array as $note):
$envelope_icon = ($note['opened']==1)?'icon_opened.jpg':'icon_closed.jpg';
?>
<div id="note_<?=$note['note_id']?>" class='hdr_active <?=$box_type?>_item'>
<input type="checkbox" name="notes_chk" value="<?=$note['note_id']?>" class="notes_chk" style="float:right;"/></label>
<div style='display:inline-block;' id='note_<?=$note['note_id']?>' class="note new_note hide">
<img src="images/buttons/<?=$envelope_icon?>" id='note_indicator_<?=$note['note_id']?>' class="note_indicator" width="20" height="19" />
<?=$note['subject']?>
<div id='note_details_<?=$note['note_id']?>' class="details" style="display: none">
<p><?=$note['message']?></p>
</div>
</div>
</div>
<?
endforeach;
endif;
endforeach;
endif;
?>
</div><!-- END NOTE CONTAINER -->
JQuery CODE
$(".note").click(function(){
// get the search values
var id = $(this).attr('id')
var id_array = id.split('_')
var note_num = id_array[1]
if($(this).hasClass('hide'))
{
$(this).removeClass('hide').addClass('show')
$("#note_details_"+note_num).slideDown()
if($(this).hasClass('new_note')){
var notes = [note_num]
$(this).removeClass('new_note')
$("#note_indicator_"+note_num).attr("src","images/buttons/icon_opened.jpg");
$.ajax({
type: "POST",
url: "ajax-redirect.php",
data: { type: 'markRead', notes: notes, page:'ajax.php' }
}).done(function(data) {
$(".notes_chk").removeAttr('checked')
if(data!=1)
{
alert("failed to update the system")
$("#note_indicator_"+note_num).attr("src","images/buttons/icon_closed.jpg");
}
})
}
}
else
{
$(this).removeClass('show').addClass('hide')
$("#note_details_"+note_num).slideUp()
}
})
$('#check-all').click(function(){
$("input:checkbox").attr('checked', true);
});
$('#uncheck-all').click(function(){
$("input:checkbox").attr('checked', false);
});
})
Please read jQuery documentation! For this case you can use native jQuery method toggle
$("div.note").click(function(){
$(this).toggle(); // or some other selector
});
or if .note is link
$("div.note").click(function(e){
e.preventDefault();
$(".your_block").toggle(); // or some other selector
});
Because div with the note class is the parent of the message any events on its children will bubble up to it so you need to prevent that with event.stopPropagation().
I can't test this code(i dont have the raw HTML to do so) but it should represent what needs to be done:
$(".note").children().click(function(e) {
e.stopPropagation();
});
You need to bind a click event to the children of the div with the note class and prevent it from bubbling up.

Show div on click by Jquery only apply to 1 div at a time

I'm using wordpress and in my loop I have a link that is clickable to toggle a div to show and hide the content, since this is within the loop it uses the same class for each item in the loop so when I toggle one link it shows the content for all.
<div class="additional-info">Additinal Information</div>
<div class="additional-info-box">
<?php echo $additional_info; ?>
</div>
<script type="text/javascript">
$(document).ready(
function(){
$(".additional-info").click(function () {
$(".additional-info-box").toggle();
});
})
</script>
So the additional-info class and the additional-info-box gets generated for each post, but when I click on any of the additional-info divs every additional info box gets shown.
Try wrapped :
<div class="additional-info">
Additinal Information
<div class="additional-info-box">
<?php echo $additional_info; ?>
</div>
</div>
<script type="text/javascript">
$(document).ready(
function(){
$(".additional-info").click(function () {
$(this).find(".additional-info-box").toggle();
});
})
</script>
with that only the .additional-info clicked will show their content.
Live Demo

Allow only one slide toggle div to show at a time

I am working on a site where I have 4 expandable divs using jquery's slide toggle. All works fine but I don't want more than 1 of those divs expanded at a time. In other words: when a div is expanded, other divs that are expanded should close. Accordion isn't an option I think because all the div's styling is different. Below is my code.
$(document).ready(function(){
// slidetoggles
$("#tgx-window").hide();
$("#tgx-button").show();
$("#tgs-window").hide();
$("#tgs-button").show();
$("#tgm-window").hide();
$("#tgm-button").show();
$("#tgl-window").hide();
$("#tgl-button").show();
$('#tgx-button').click(function(){
$('#tgx-button').toggleClass('closebutton');
$("#tgx-window").slideToggle();
});
$('#tgs-button').click(function(){
$('#tgs-button').toggleClass('closebutton');
$("#tgs-window").slideToggle();
});
$('#tgm-button').click(function(){
$('#tgm-button').toggleClass('closebutton');
$("#tgm-window").slideToggle();
});
$('#tgl-button').click(function(){
$('#tgl-button').toggleClass('closebutton');
$("#tgl-window").slideToggle();
});
HTML:
<a onclick="" class="show_hide" id="<?=strtolower($service['title']);?>-button"></a>
<div class="slidingDiv" id="<?=strtolower($service['title']);?>-window">
<?
$infoBox = '<h1>'.$service['subtitel'].'</h1>';
$infoBox .= $service['description'];
echo replaceTags($infoBox);
?>
</div>
It's a bit hard to answer this question without knowing your HTML but here is a solution I hope;
HTML (I presume):
<div id="tgx-window">tgx window</div>
<div id="tgs-window">tgs window</div>
<div id="tgm-window">tgm window</div>
<div id="tgl-window">tgl window</div>
<button id="tgx-button">Show tgx</button>
<button id="tgs-button">Show tgs</button>
<button id="tgm-button">Show tgm</button>
<button id="tgl-button">Show tgl</button>
JavaScript:
jQuery(function($) {
var $windows = $('#tgx-window,#tgs-window,#tgm-window,#tgl-window'),
$buttons = $('#tgx-button,#tgs-button,#tgm-button,#tgl-button');
$windows.hide();
$buttons.on('click', function(e) {
var $id;
e.preventDefault();
$buttons.removeClass('closebutton');
$id = $('#' + this.id.split('-')[0] + '-window');// Get window id
$windows.slideUp();
if(! $id.is(':visible') ) {
$id.slideDown();
$(this).addClass('closebutton');
}
});
});
You can see a working example here.
Use class instead of id of button and probably its parent .tgx-window
$('.tgx-button').click(function(){
$(this).toggleClass('closebutton');
$(this).closest(".tgx-window").slideToggle();
});

Categories