Javascript show div when button is clicked - javascript

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

Related

Second button doesn't produce form in same div as first button

I have a php page with two divs. In the first div, users click a button and it brings up a form in the second div. When they submit the form, both divs refresh. All is great. But I want to add a second button to the first div to bring up a different form in the second div. I haven't been able to get this to work, either the first button stops working or the second one doesn't work. I tried making the second button a div and calling it by its ID and that didn't work. I'm an amateur and don't understand jquery very well (I think this is jquery anyway) and this is just for a project for some friends and I, so any help would be appreciated. I may just not be understanding how this works.
<script>
$(document).ready(function () {
$("button").click(function () {
var handle = "<?php echo $_SESSION['name'] ?>";
$("#infoblock").load("createhandle.html");
});
});
</script>
<div id="div1">
<button id="reservename">Reserve A Name</button>
</div>
<div id="div2"></div>
I found a solution here: https://stackoverflow.com/a/20074373/9157720
It ended up being an issue with syntax and using a pound symbol. This is the code that worked in case anyone else has this problem.
<script>
$(document).ready(function(){
var handle = "<?php echo $_SESSION['name'] ?>";
$("#reservename").click(function(){
$("#infoblock").load( "createhandle.html");
});
$("#uploadpic").click(function(){
$("#infoblock").load("uploadpic.html");
});
});
</script>
<button id="reservename">Reserve A Name</button>
<button id="uploadpic">Upload A Picture</button>
Consider the following.
<script>
$(document).ready(function () {
$("button").click(function () {
var handle = $(this).data("ref");
var target = $(this).data("target");
$(target).load("createhandle.html?handle=" + handle);
});
});
</script>
<div id="div1">
<button data-ref="<?php echo $_SESSION['nameA']; ?>" data-target="#infoblock">Reserve A Name</button>
<button data-ref="<?php echo $_SESSION['nameB']; ?>" data-target="#div2">Reserve B Name</button>
</div>
<div id="div2">
</div>
Your example is sort of ambiguous, so I wasn't sure what you were trying to accomplish. It's best to not mix PHP and HTML if you can. You can have a reference point in the HTML so that when you need to load something, in relationship to that button, you can pass that into a stand alone PHP Script and get the HTML you need back with .load().
Remember that PHP is executed before the HTML is presented to the Client. So the Session data must be present in PHP Memory when the page is initially loaded.
Reference:
https://api.jquery.com/data/
https://api.jquery.com/load/
jQuery $(this) keyword

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>

Can't refresh one specific div after ajax load (MVC system)

I already checked all others answers from that questions, but no one seems to work.
He's my problem, I try to reload a div where I got a php variable.
I got MVC system, so i can't call other files when i want.
My controller doesn't receive arguments from ajax call ($_POST and $_FILES are not isset).
When I try to do other stuff after ajax call, it works (example: unlink a file)
<?php
$test = 'lksd';
...
if( some conditions )
{
$test= 'piof';
unlink(../images/myImage.jpg);
}
?>
...
<div id="test">
<?php
echo $test;
?>
</div>
And my ajax call is in a jquery plugin (http://www.dropzonejs.com/)
I found where i can do my stuff, and then i call this function:
$('#test').load(window.location + "#test");
My div doesn't refresh but my file is deleted, if you have any idea of what can i do to solve this problem...
Thanks in advance
Create the PHP detail you want to stand alone. Call it something like getDetail.php:
<?php
$test = 'lksd';
...
if( some conditions ) {
$test= 'piof';
}
echo $test;
?>
In your page, you can now load that content at any time:
<html>
<body>
<div id="test">
</div>
Reload
<script>
$(document).ready(function(){
$("#test").load("getDetal.php");
$("#reloadDetail").click(function(){
$("#test").load("getDetail.php");
});
});
</script>
</body>
</html>

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

Wordpress post slideToggle with each() issue

I feel like I've been trying everything to get this to work, the problem is that I'm not that familiar with javascript nor jQuery.
My guess is that it's as simple as just adding one line, because I've almost got it to work.
I have a Wordpress blog which loops out numerous of posts, I've added unique ID's to everyone of them, which I'm able to grab the problem is that it doesn't work with slideToggle to show the content.
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
$(document).ready(function() {
$(".toggleContainer").hide();
$('.show_hide').click(function() {
event.preventDefault();
var pid = $(this).data('id');
var cid = $(this).data('container');
$(pid).add(cid).each(function() {
$(cid).slideToggle(1000);
});
});
});
});//]]>
</script>
Then there's the container:
<div class="toggleContainer" data-container="<?php the_id(); ?>">
<?php do_action( 'woocommerce_before_single_product_summary' ); ?>
</div>
And the toggle:
<a href="<?php the_permalink(); ?>" class="show_hide" data-id="<?php the_id(); ?>">
If I use an alert on each of them it shows the correct ID, but it doesn't work when I want to toggle the content.
try: $('[data-container*='+cid+']').slideToggle(1000);

Categories