I'm having trouble with Jquery and flickering. My problem is this, when I convert my id's to classes the below syntax isn't working. The problem is, it flickers. It flickers approx. 7-8 times. What am I doing wrong? Any help would be appreciated. Thanks everyone.
I would also like to add when I change my classes to ID's everything works great but only one item on my webpage has the ability of hide>click>slideToggle (which isn't what I want because I'm listing more than one item per page for sale). This syntax is below as well, it's very similar to the syntax that does not work but I've decided to include it anyway.
(Not working syntax. Has classes)
<?php
echo "<div class=\"fmv2\">Your Name</div>";
?>
<div class="p122">
<?php
echo form_open("submit/submit_info");
echo form_label('Your Name:','name');
$data = array(
"name" => 'name',
"id" => 'box_width',
"value" => set_value('name')
);
echo form_input($data);
echo '<br>';
echo form_submit('Submit','Submit');
echo form_close();
?>
</div>
My Jquery (Not working, has classes)
// JavaScript Document
$(document).ready(function(){
$(".p122").hide(function(){
$(".fmv2").click(function() {
$(".p122").slideToggle(300);
});
});
});
Working syntax (Has Ids)
<?php
echo "<div id=\"fmv2\">Your Name</div>";
?>
<div id="p122">
<?php
echo form_open("submit/submit_info");
echo form_label('Your Name:','name');
$data = array(
"name" => 'name',
"id" => 'box_width',
"value" => set_value('name')
);
echo form_input($data);
echo '<br>';
echo form_submit('Submit','Submit');
echo form_close();
?>
</div>
My Jquery. (Working, has Ids)
// JavaScript Document
$(document).ready(function(){
$("#p122").hide(function(){
$("#fmv2").click(function() {
$("#p122").slideToggle(300);
});
});
});
I figured out my problem. I've been playing around with the syntax and the below code works.
$(function() { // Shorthand for $(document).ready(function() {
$('div.p122').hide();
$('div.fmv2').click(function() {
$(this).next('div.p122').slideToggle(300);
});
});
Related
I want to make a bundle creator in Wordpress using Woocommerce, where you select 1 of 4 T-shirts + 1 of 4 pairs of socks and they get added to the cart. Currently I am stuck on figuring out how to approach this. What I currently need to achieve is this:
There is a top image which corresponds to the currently selected product and three smaller images below that. Once you click the small image, it needs to change the top image. There is also a title on the bottom, which corresponds to the currently selected product, that changes together with the top image. You can see the intended result here.
I need to somehow get the ID of the product the user clicks on and pass it to other php functions. This is where I got stuck. Can anybody help me out?
The code should look something like this:
<div id="selected-product-image">
<?php get_the_post_thumbnail(/* ID of the currently selected product*/); ?>
</div>
<ul class="products">
<?php
$args = array( 'post_type' => 'product', 'posts_per_page' => 4, 'product_cat' => 't-shirts', 'orderby' => 'name' );
$loop = new WP_Query( $args );
?>
<?php while ( $loop->have_posts() ) : $loop->the_post(); global $product; ?>
<li class="product">
<div class="select-product"><!--This should have a function to capture the product ID on click. -->
<?php echo get_the_post_thumbnail($loop->post->ID, 'shop_catalog'); ?>
</div>
</li>
<?php endwhile; ?>
<div id="selected-product-name">
<?php get_the_title(/* ID of the currently selected product*/) ?>;
</div>
<?php wp_reset_query(); ?>
</ul>
I understand that I can do something like this using AJAX, but I am not sure how to use the returned ID back in get_the_post_thumbnail() or get_the_title(). This is what I got:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#select-product").click(function() {
var id = 29; /* Any value for testing */
jQuery.ajax({
method: "post",
url: "/test.php",
data: {
productID: id
}
})
.done(function(data) {
alert(data);
/* How do I use this data to update the picture/title? */
});
});
});
</script>
<!-- THE test.php FILE -->
<?php
$productID = $_POST['productID'];
echo $productID;
?>
UPDATE:
I have tried editing the test.php to echo a function, but I am getting a 500 error every time I try using a Wordpress function inside the test.php file. I tried including the wp-blog-header.php file so the functions can run, but it still doesn't help. What am I doing wrong?
<!-- THE test.php FILE -->
<?php
include_once('wp-blog-header.php');
$productID = $_POST['productID'];
echo get_the_post_thumbnail($productID);
?>
So what I'm trying to do is the following:
first: When the button add-location is clicked this loads a php file using AJAX.
jQuery
$('.add-location').click(function() {
var locationName = $(this).data('location');
$.post('http://www.example.com/reload-location-2.php?addparam',
{locationName: locationName}, function(data) {
$("textarea#location").html(data);
})
});
PHP FILE
<?php start_session();
$locationName = array_key_exists('locationName',
$_POST) ? (string) $_POST['locationName'] : '';
if(isset($_GET['delparam'])){
unset($_SESSION['locations'][$locationName]);
}
if(isset($_GET['addparam'])){
$_SESSION['locations'][$locationName] = $locationName;
}
?>
<?php foreach ($_SESSION['locations'] as $location): ?>
<?php echo htmlspecialchars($location); echo "\n"; ?>
<?php endforeach;?>
This all works like a charm! No worries here. No what I'm trying to do is when the button add-location is clicked this echo's the following code to a div called textarea#thema.
<?php foreach ($_SESSION['products'] as $product): ?>
<?php echo htmlspecialchars($product); echo "\n"; ?>
<?php endforeach;?>
OR, if that's easier when the page is loaded -> echo that code to the textarea#thema div.
I do not understand AJAX that much but I'm getting there. But I think the last option maybe the easiest solution?
Could anyone help me figure this one out?
What I tried
Right now, When the button add-location is clicked I reload a previous jQuery script:
$('.add-location').click(function() {
var productName = $(this).data('product');
$.post('http://example.com/reload-2.php?addparam',
{productName: productName}, function(data) {
$("textarea#thema").html(data);
})
});
This works, but it adds an extra <p>-tag leaving me with a line break in the code.
I also changed the .html(data); to .val(data); for the textareas. Also I made a new PHP file with just this code:
<?php foreach ($_SESSION['products'] as $product): ?>
<?php echo htmlspecialchars($product); echo "\n"; ?>
<?php endforeach;?>
And this jQuery code:
$('.add-location').click(function() {
var productName = $(this).data('product');
$.post('http://www.example.com/reload-3.php',
{productName: productName}, function(data) {
$("textarea#thema").val(data);
})
});
But still no go... And I don't think this is the way to go?? I hope I gave enough information.
You should use .val() function to fill textarea, not .html().
kinda got lost here, i want to change a class='label' according to the data pulled out of db with Django. So according to {{account.status}} I will have either class='label-danger' or 'label-info'
My .js
$(document).ready(function () {
if($('#label').attr('value').val() == 'New'){
$('#label').addClass('label-info');
};
else($('#label').attr('value').val() == 'Rep'){
$('#label').addClass('label-warning');
};
else($('#label').attr('value').val() == 'Progress'){
$('#label').addClass('label-success');
};
});
My Html:
{{account.status}}
I think you can do this
PHP:
<?
$getClass = mysql_query("SELECT class FROM myTable");
while($rows = mysql_fetch_array($getClass)){
$class = $rows["class"];
?>
<h1 class='<?php echo $class; ?>' >Hello</h1>
<?
}
?>
I think is may work,but i don't test this yet,still hope it can deal with you job
I'm doing a cakephp form in my view and clicking on the button, I would like to evaluate values before making a certain action, the problem is not me, in another view I have exactly the same code and if it works, but here , do not. However, I do not have any error console.
echo $this->Form->create('Detalle', array('class'=>'form_center', 'type'=>'file','id'=>'detalle_form'));
echo $this->Form->input('FechaEvento', array('type'=>'hidden','value'=>$fecha_evento));
if($SuperAdmin and !$evento['Evento']['gratuito']){
echo $this->Form->input('Inscripcion.cortesia', array('type'=>'checkbox', 'value'=>1, 'label' => utf8_encode('CortesÃa'), 'div' => 'input checkbox inputRutPasaporte'));
echo $this->Form->input('Inscripcion.boleta_no_generar', array('type' => 'hidden', 'value' => 0));
}
$options_btn = array('label' => __('Pagar'), 'class' => 'btn_blue', 'div' => false);
echo $this->Form->end($options_btn);
javascript :
<script type="text/javascript">
$(document).ready(function(){
<? if($evento['Evento']['generar_boleta']){ ?>
<? if($evento['Evento']['habilitar_compra_multiple']){ ?>
$('#detalle_form').data('callback', function(form){
alert("TEST");
});
<? } ?>
<? } ?>
});
</script>
The code looks fine but the point is we need information on your control flow. I assume there are missing variables due to it being different.
I advise you to
combine the code into a CakePHP element that is called in the view so you write the code only once (keeping your code DRY)
set DebugLevel to 2
install CakePHP DebugKit DebugKit on Github
check for missing variables and errors
if the problem persists, give us more information accordingly
I'm trying to show content from a gallery in a #showcontent div. Currently i have this set up
The Js
<script>
$(document).ready(function() {
$('.gallery-item').on('click', function(e) {
$(".show-gallery-content").appendTo ("#showcontent").toggle();
});
});
</script>
index.php
<?php
$args = array('post_type' => 'Gallery', 'order' => ASC);
$loop = new WP_Query($args);
while ($loop->have_posts()) : $loop->the_post($post_id);
echo '<div class="gallery-item">';
echo '<div class="gallery-image">';
the_content();
echo '</div>';
echo '<div class="show-gallery-content">';
echo '<div class="gallery-title">';
the_title();
echo '</div>';
echo '<div class="gallery-excerpt">';
the_excerpt();
echo '</div>';
echo '</div>';
echo '</div>';
endwhile;
?>
CSS
.show-gallery-content {
display:none;
}
Live preview of current website -> http://erwin.my89.nl/stage/sieh/
So, when I click an image i want to get the_title() & the_excerpt to show in #showcontent.
I had it fine last night but PhpStorm kinda screwed it up this morning, so i'm really frustrated now :D.
Thanks in advance!
Also i'd like some background information since I'm a student :-)!
Try this:
<script>
$(document).ready(function() {
$('.gallery-item').on('click', function(e) {
$("#showcontent").append($(".show-gallery-content").html()).show();
});
});
</script>
I think your approach for linking photo to content is not optimized solution. anyway, based on your html structure you need a connection between clicked image to content. you can try this snippet.
<script>
$(document).ready(function() {
$('.gallery-item').on('click', function(e) {
$(this).children(".show-gallery-content").appendTo ("#showcontent").toggle();
});
});
</script>
Please, consider this snippet:
$('.gallery-item').on('click', function(e) {
$('#showcontent').empty().append($(this).find('.show-gallery-content').contents().clone());
});