I can't reload the Captcha of my contact form - javascript

I'm creating my web page using Yii. When I created the page, Yii created a form very similar than the following:
<?php
/* #var $this SiteController */
/* #var $model ContactForm */
/* #var $form CActiveForm */
$this->pageTitle=Yii::app()->name . ' - Contact';
$this->breadcrumbs=array(
'Contact',
);
?>
<?php if(Yii::app()->user->hasFlash('contact')): ?>
<div class="flash-success">
<?php echo Yii::app()->user->getFlash('contact'); ?>
</div>
<?php else: ?>
<div class="form">
<?php $form=$this->beginWidget('CActiveForm', array(
'id'=>'contact-form',
'enableClientValidation'=>true,
'clientOptions'=>array(
'validateOnSubmit'=>true,
),
)); ?>
<p class="note"><?php echo Yii::t('app','Fields with');?> <span class="required">*</span> <?php echo Yii::t('app','are required.');?></p>
<?php echo $form->errorSummary($model); ?>
<div class="row">
<?php echo $form->labelEx($model,'name'); ?>
<?php echo $form->textField($model,'name'); ?>
<?php echo $form->error($model,'name'); ?>
</div>
<div class="row">
<?php echo $form->labelEx($model,'email'); ?>
<?php echo $form->textField($model,'email'); ?>
<?php echo $form->error($model,'email'); ?>
</div>
<div class="row">
<?php echo $form->labelEx($model,'subject'); ?>
<?php echo $form->textField($model,'subject',array('size'=>60,'maxlength'=>128)); ?>
<?php echo $form->error($model,'subject'); ?>
</div>
<div class="row">
<?php echo $form->labelEx($model,'body'); ?>
<?php echo $form->textArea($model,'body',array('rows'=>6, 'cols'=>50)); ?>
<?php echo $form->error($model,'body'); ?>
</div>
<?php if(CCaptcha::checkRequirements()): ?>
<div class="row">
<?php echo $form->labelEx($model,'verifyCode'); ?>
<div>
<?php $this->widget('CCaptcha'); ?>
<?php echo $form->textField($model,'verifyCode'); ?>
</div>
<div class="hint"><?php echo Yii::t('app','Please enter the letters as they are shown in the image above.');?>
<br/><?php echo Yii::t('app','Letters are not case-sensitive.');?></div>
<?php echo $form->error($model,'verifyCode'); ?>
</div>
<?php endif; ?>
<div class="row buttons">
<?php echo CHtml::submitButton('Submit'); ?>
</div>
<?php $this->endWidget(); ?>
</div><!-- form -->
<?php endif; ?>
In the begining, this form worked, but after that, I improved the web page adding more features. Few minutes ago, I was checking all the page and I saw that the reloaded captcha button didn't work. Now, When I try to reload the captcha, the web page is reloaded and display a empty page with this code:
{"hash1":774,"hash2":774,"url":"\/MyApp\/site\/captcha.html?v=526045d3d1187"}
I tried to search for some similar error in google, but I didn't find anything. To be honest, I don't understand what is happening. I guess that the code that I added in another file of my web page produce this error, but I don't have any idea...I don't understand what means this code.
Please, I need your help!
Someone could help me? THANKS
EDIT:
If I look the source code of the web page on my browser, and I search for "captcha.html", I can see the following code:
<script type="text/javascript">
/*<![CDATA[*/
jQuery(function($) {
jQuery('#yw0').after("<a id=\"yw0_button\" href=\"\/MyApp\/site\/captcha.html?refresh=1 \">Obtenga un nuevo c\u00f3digo<\/a>");
jQuery(document).on('click', '#yw0_button', function(){
jQuery.ajax({
url: "\/MyApp\/site\/captcha.html?refresh=1",
dataType: 'json',
cache: false,
success: function(data) {
jQuery('#yw0').attr('src', data['url']);
jQuery('body').data('captcha.hash', [data['hash1'], data['hash2']]);
}
});
return false;
});
But I didn't find the captcha.html in any place...
EDIT 2:
I found the problem. I added javascript code at the end of the main page of my wep page. I added this:
<script type="text/javascript" src="<?php echo Yii::app()->theme->baseUrl; ?>/scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="<?php echo Yii::app()->theme->baseUrl; ?>/scripts/jquery-ui-1.8.12.custom.min.js"></script>
<script type="text/javascript" src="<?php echo Yii::app()->theme->baseUrl; ?>/scripts/jquery-photostack.js"></script>
<script type="text/javascript" src="<?php echo Yii::app()->theme->baseUrl; ?>/scripts/jquery-coin-slider.min.js"></script>
If I remove this code, the captcha can be reload correctly. Please, someone could tell me what I'm doing badly here? Why my javascript code produce this? How can I solve it?

The problem is this code in CCaptcha Yii widget:
jQuery(document).on('click', '$selector', function(){
jQuery.ajax({
...
});
return false;
});
The click listener is on document, instead of the element itself. When you add your script tags after this code, you load a new jQuery version that clears all those listeners on init.
To solve this, use only one jQuery version, preferably Yii included one.
If you really want to replace it, do it the right way, in CClientScript->scriptMap in config, set the value of jquery.js and jquery.min.js keys to the new URL of jQuery.

Related

Hide particular word using css or javascript

I tried the below code to add div id and replace div class from basic text to heading h3 well it worked but it started displaying all the domain names in the table of contents before the heading.
as ......com with the title text
I want to hide anything which displays with .com
<h3 class="producttitle">
<?php if ($merchant = TemplateHelper::getMerhantName($item)): ?>
<div class="cegg-mb10">
<small class="text-muted title-case"><?php echo \esc_html($merchant); ?></small>
</div>
<?php endif; ?>
<?php if ($item['rating']): ?>
<div class="cegg-title-rating">
<?php TemplateHelper::printRating($item, 'small'); ?>
</div>
<?php endif; ?>
<?php echo \esc_html(TemplateHelper::truncate($item['title'], 80)); ?>
</h3>
I want this code but at the same time i want to hide it in the table of contents from so and so domain .com
ok I fixed it! Now the domain names has gone and headings are working perfectly.
<h3 class="producttitle">
<?php if ($title = TemplateHelper::getMerhantName($item)): ?>
<?php endif; ?>
<?php if ($item['rating']): ?>
<div class="cegg-title-rating">
<?php TemplateHelper::printRating($item, ''); ?>
</div>
<?php endif; ?>
<?php echo \esc_html(TemplateHelper::truncate($item['title'], 80)); ?>
</h3>

RazorPay form auto load on page load without clicking Pay Now button

I am trying to integrate Razorpay in my application. Here is a code that controls loading of payment model when "Pay Now" button is clicked. I want to make the modal load on page load instead of button click. I tried submitting form via javascript to see if that loads the modal but that's not working.
Here is the code:
<form action="verify.php" method="POST" id="gateway">
<script
src="https://checkout.razorpay.com/v1/checkout.js"
data-key="<?php echo $data['key']?>"
data-amount="<?php echo $data['amount']?>"
data-currency="INR"
data-name="<?php echo $data['name']?>"
data-image="<?php echo $data['image']?>"
data-description="<?php echo $data['description']?>"
data-prefill.name="<?php echo $data['prefill']['name']?>"
data-prefill.email="<?php echo $data['prefill']['email']?>"
data-prefill.contact="<?php echo $data['prefill']['contact']?>"
data-notes.shopping_order_id="3456"
data-order_id="<?php echo $data['order_id']?>"
<?php if ($displayCurrency !== 'INR') { ?> data-display_amount="<?php echo $data['display_amount']?>" <?php } ?>
<?php if ($displayCurrency !== 'INR') { ?> data-display_currency="<?php echo $data['display_currency']?>" <?php } ?>
>
document.getElementById("gateway").submit(); // Not working
</script>
<!-- Any extra fields to be submitted with the form but not sent to Razorpay -->
<input type="hidden" name="shopping_order_id" value="3456">
</form>
However, I also noticed that form actions to page verify.php so if the form is submitted it will go to that page where I just want to load the payment modal. Hence, what I tried can just not be the solution.
I found the solution. Posting as it may be of help for someone in the future:
In razorpay/checkout/automatic.php (or manual.php) place this right after the opening <form> element:
<script>
$(window).on('load', function() {
$('.razorpay-payment-button').click();
});
</script>
Attach an onload event to script and simulate click in the handler
<script>
function loadPaymentModal() {
const elem = document.getElementsByClassName('razorpay-payment-button')[0];
elem.click();
}
</script>
<form action="verify.php" method="POST" id="gateway">
<script onLoad="loadPaymentModal()" src="https://checkout.razorpay.com/v1/checkout.js"
data-key="<?php echo $data['key']?>"
data-amount="<?php echo $data['amount']?>"
data-currency="INR"
data-name="<?php echo $data['name']?>"
data-image="<?php echo $data['image']?>"
data-description="<?php echo $data['description']?>"
data-prefill.name="<?php echo $data['prefill']['name']?>"
data-prefill.email="<?php echo $data['prefill']['email']?>"
data-prefill.contact="<?php echo $data['prefill']['contact']?>"
data-notes.shopping_order_id="3456"
data-order_id="<?php echo $data['order_id']?>"
<?php if ($displayCurrency !=='INR' ) { ?> data - display_amount="<?php echo $data['display_amount']?>" <? php } ?>
<? php if ($displayCurrency !== 'INR') { ?> data - display_currency="<?php echo $data['display_currency']?>" <? php } ?>
>
</script>
<!-- Any extra fields to be submitted with the form but not sent to Razorpay -->
<input type="hidden" name="shopping_order_id" value="3456">
</form>
<script src="{{url('/')}}/frontendtheme/js/plugins/jquery-3.3.1.min.js"></script>
<script>
$(window).on('load', function() {
jQuery('#gateway').submit();
});
</script>
note: Use your min.js file folder on script source

Lighbox only showing data of the current post in Wordpress

I wanted to show some lightbox funtionality with the use of shortcodes. The code is working fine except for the data shown in the ligthbox. It only shows the data from the latest post in the loop. How can i manage to get lightbox showing the data belonging to the post?
<?php
// Posts are found
if ( $posts->have_posts() ) {
while ( $posts->have_posts() ) :
$posts->the_post();
global $post;
?>
<center>
<div id="su-post-<?php the_ID(); ?>" class="su-post">
<?php if ( has_post_thumbnail() ) : ?>
<a class="su-post-thumbnail" href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
<?php endif; ?>
<div class="su-post-excerpt">
<!-- Shows the button and the hidden lightbox -->
<?php echo do_shortcode ('[su_lightbox type="inline" src="#showInfo"][su_button] Info[/su_button][/su_lightbox]'); ?>
<!-- Shows the lightbox if button is clicked with the data -->
<?php echo do_shortcode ('[su_lightbox_content id="showInfo"][su_meta key="info" default="Geen tekst"][/su_lightbox_content]'); ?>
<?php echo do_shortcode ('[su_lightbox type="inline" src="#showVideo"][su_button] Video[/su_button][/su_lightbox]'); ?>
<?php echo do_shortcode ('[su_lightbox_content id="showVideo"][su_video url="{su_meta key=video}"][/su_lightbox_content]'); ?>
<?php echo do_shortcode ('[su_lightbox type="inline" src="#showFoto"][su_button] Foto[/su_button][/su_lightbox]'); ?>
<?php echo do_shortcode ('[su_lightbox_content id="showFoto"][su_meta key="fotos" default="Geen fotos"][/su_lightbox_content]'); ?>
</div>
</div>
</center>
<?php
endwhile; echo do_shortcode ('[su_lightbox_content id="showInfo"][su_meta key="info" default="Geen tekst"][/su_lightbox_content]');
}
// Posts not found
else {
echo '<h4>' . __( 'Posts not found', 'shortcodes-ultimate' ) . '</h4>';
}
?>
By adding a counter in the while loop and using the variable in the shortcode SRC and ID fields. I needed unique ID's for each post.
$n = 0; /* Outside While Loop */
echo do_shortcode( '[su_lightbox type="inline" src="#showInfo'.$n.'"][su_button] Info[/su_button][/su_lightbox] ');
echo do_shortcode( '[su_lightbox_content id="showInfo'.$n.'"][su_meta key="info" default="Geen tekst"][/su_lightbox_content]' );
$n++; /* Inside While Loop */

How to detect a product attribute with Javascript? (Magento)

I have a working solution to a problem where we're replacing all 'Add to Cart' buttons with 'In Store Only' buttons for items that are only available in store. I'm using PHP to detect the attribute and produce HTML that replaces the button.
<?php
//Checks if the "Disable Add to Cart" variable is set to 'Yes':
if(($_product->getAttributeText('No_cart_button')) == "Yes"){
//If set to Yes, tell PHP what to output:
echo "This Product is not available online, please call our representative if you wish to purchase this.";
}
//If set as No, then show the 'add to cart box' as usual.
else {
?>
<?php if (!$this->hasOptions()):?>
<div class="add-to-box">
<?php if($_product->isSaleable()): ?>
<?php echo $this->getChildHtml('addtocart') ?>
<?php if( $this->helper('wishlist')->isAllow() || $_compareUrl=$this->helper('catalog/product_compare')->getAddUrl($_product)): ?>
<span class="or"><?php echo $this->__('OR') ?></span>
<?php endif; ?>
<?php endif; ?>
<?php echo $this->getChildHtml('addto') ?>
</div>
<?php echo $this->getChildHtml('extra_buttons') ?>
<?php elseif (!$_product->isSaleable()): ?>
<div class="add-to-box">
<?php echo $this->getChildHtml('addto') ?>
</div>
<?php endif; ?>
<?php
}
?>
I've been told that Javascript would be a less intrusive way of doing achieving the same result. Am I right in assuming that you would use PHP to insert a class or id into the HTML element and do the rest with Javascript? Detect the id or class --> generate the replacement button?
Thanks!

Dynamic jQuery with same ID

Im trying to make a dynamic jQuery function with some help from Advanced Custom Fields in Wordpress. This may not have something to do with the question, but I work in Wordpress with this plugin, anyway.
My code is like this:
<div id="restaurangmeny">
<h2>Vår meny</h2>
<? if( get_field('meny_for_restaurangen') ): ?>
<?php while( has_sub_field('meny_for_restaurangen') ): ?>
<div class="kategori">
<div class="kategorinamn" id="<?php the_sub_field('namn_for_kategorin'); ?>"><?php the_sub_field('namn_for_kategorin'); ?></div>
<div class="matratter" id="<?php the_sub_field('namn_for_kategorin'); ?>">
<? if( get_sub_field('matratter') ): ?>
<?php while( has_sub_field('matratter') ): ?>
<div class="matratt">
<div class="left">
<div class="namn"><?php the_sub_field('namn_pa_matratt'); ?></div>
<div class="beskrivning"><?php the_sub_field('beskrivning_av_matratten'); ?></div>
</div>
<div class="pris"><?php the_sub_field('pris_pa_matratten'); ?>:-</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div><!--#restaurangmeny-->
So what I want is when I click on the div called "kategorinamn" I want to div called "matratter" be shown or hidden. That's why I use same id for "kategorinamn" and "matratter" just because these 2 belong together.
Simply, if I click on 1 I want everything that got the same id (1) be shown. If I click on 2 I want everything that got the same id (2) be shown.
I don't know what dynamic jQuery like this is called, but I'm far away from being good with jQuery so that's why I'm asking.
Something like this http://jsfiddle.net/gwK6d/18/, but with jQuery only and that fit's my code above.
1) Import jquery
2) Make sure you are not using the same id for multiple elements
3) Change this bit:
<div class="kategorinamn" id="<?php the_sub_field('namn_for_kategorin'); ?>"><?php the_sub_field('namn_for_kategorin'); ?></div>
<div class="matratter" id="<?php the_sub_field('namn_for_kategorin'); ?>">
To this:
<div class="kategorinamn" id="<?php the_sub_field('namn_for_kategorin'); ?>">
<?php the_sub_field('namn_for_kategorin'); ?>
<div class="matratter" id="<?php the_sub_field('namn_for_kategorin'); ?>">
</div>
4) Declare this function after load:
$(".kategorinamn").click(function(){
$(this).children('.matratter').toggle();
});
JSFIDDLE: http://jsfiddle.net/uRpc8/

Categories