Hi I am a total newbie to JS and am trying the following:
I am having a Yii application in which there is an ajaxLink that triggers a fancybox. This link renders a view in an iframe inside the fancybox. The rendered view is a form containing Yii zii.widgets.jui.CDatePicker widget. This renders the view and shows the date text field with proper date values. But onclick it doesnt show up the calendar.
Code triggering the fancybox:
echo CHtml::ajaxLink('Add Entry',Yii::app()->createUrl('site/myentry', array('action'=>'new')),
array('type'=>'GET', 'update'=>'#adexp', 'complete'=>'afterAjax'));
js function:
function afterAjax()
{
$.fancybox({
href : '#adexp',
scrolling : 'no',
transitionIn : 'fade',
transitionOut : 'fade',
width: 1024,
height: 500,
autoDimensions: false,
onClosed: function() { $('#adexp').html(''); location.reload();},
});
}
Rendering the iframe for the form:
<iframe src="<?php echo $this->createUrl('site/entryform', array('UtcRecord'=>$model->UtcRecord, 'UserId'=>$model->UserId, 'action'=>$action));?>" style="width: 100%; height:440px;" id="entryform"></iframe>
and the widget inside this form view:
$this->widget(
'zii.widgets.jui.CJuiDatePicker',
array(
'model' => $model,
'attribute' => 'EntryTime',
'language'=> 'en',
'options' => array(
'dateFormat' => 'dd-mm-yy',
'style'=>'z-index: 5000;',
),
)
);
Observation made by Firebug:
the input field in the form doesnt have the Datepicker class. If I use the same Yii widget code in a normal page, this class is present in the input tag and the widget works fine.
I tried:
1. Increasing the z-index of the datepicker widget to 5000.
2. Including jquery and css manually in iframe head tag since I thought iframe might not be picking up styles and js.
Could this be a Yii widgets rendering issue inside an iframe?
Would really appreciate any insights on the issue. :-)
Change your renderPartial() to
$this->renderPartial('path.to.view',$variables_into_view,false,true);
The last parameter is $processOutput which calls CController::processOutput() which inserts the required client scripts (in your case the datePicker js and css) into the output.
Related
I am writing e2e Testcases on Cypress for webshop, we have integrated PayPal and I am unable to click on the PayPal button with in the iframe.
I always get an error in finding the element in iframe.
someone have an idea how can I do that?
code
cy.get('iframe')
.getframe3D()
.find('paypal-button-number-0')
Command
Cypress.Commands.add('getframe3D', { prevSubject: 'element' }, $iframe => {
return new Cypress.Promise(resolve => {
$iframe.ready(function() {
resolve($iframe.contents().find('body'));
});
});
});
Interacting with iframe is quite tricky in Cypress however it's possible. Your custom command looks correct and it worked for me as well. However, you can also try below way and check if it is working for you.
Here provide CSS selector for the iframe as an argument getIframeBody() function.
cy.getIframeBody('iframe').find('paypal-button-number-0').click()
Custom Commands
Cypress.Commands.add('getIframeBody', (iframe) => {
return cy.get(iframe).then($iframe => {
const $body = $iframe.contents().find('body')
cy.wrap($body)
})
})
For more info you can follow the cypress blog to interact with iFrame
Your custom command to get the iframe body is fine, you just have the wrong selector for the button.
Since it's a class, you need a . prefix
cy.get('iframe')
.getframe3D()
.find('.paypal-button-number-0')
I'm creating a simple WordPress plugin that requires wp_enqueue_media() to be called from a TinyMCE pop up in order to upload and/or select an image.
The issue im having is wp_enqueue_media() and wp_enqueue_script() don't appear to work with the TinyMCE pop up modal.
I am including wp-load.php in my modal window.
Is there a way to utilize native WordPress script loading within a TinyMCE modal?
Here is an example of what I am doing.
http://return-true.com/adding-tinymce-button-to-wordpress-via-plugin-part-2/
Like I already said in my comment, I think the best approach is to use an inline modal (no iframe).
It is very simple: using the 1st part of the article (http://return-true.com/adding-tinymce-button-to-wordpress-via-a-plugin/) as a basis, just replace the JavaScript with the following (copied from TinyMCE guidelines):
(function() {
tinymce.PluginManager.add('example', function(editor) {
// Add a button that opens a window
editor.addButton('example', {
text: 'Example',
icon: false,
onclick: function() {
// Open window
editor.windowManager.open({
title: 'Example plugin',
body: [
{type: 'textbox', name: 'title', label: 'Title'}
],
onsubmit: function(e) {
// Insert content when the window form is submitted
editor.insertContent('Title: ' + e.data.title);
}
});
}
});
});
})();
After that, you have a simple modal, with no iframe, thus using the native Wordpress script loading.
If the content must be in an iframe (which I doubt), one option is to create a 'blank' page in Wordpress with a page template of its own and use that page as the modal content. I actually tested that it works, but it is clearly more complicated (requires something like a blog post to explain).
The issue was that I was not including wp_head() and wp_footer() in the modal window html.
Adding these functions solved the enqueue issues.
I am using jquery fancybox plugin in the website for displaying the country selection options to the user. So, I have a dropdown on my fancybox page that displays the list of country user can select and button "Go" which closes the fancybox and reloads the parent window. Also, I am replacing the normal dropdown <select> tag with the <div>'s to add style on the dropdown button. This is done using custom jscript similar to what's explained on the below dropdown style
To call this dropdown page, I am using
$('a.fancy').fancybox({
'type': 'iframe',
'scrolling': "no",
'width': 395,
'height': 123,
'overlayOpacity': 0.62,
'onClosed': function () {
parent.location.reload(true);
; // <---i guess you don't need this (JFK)
}
});
if I change the type to "ajax" my drop-down on the page shows fine with all the values. But when I use type as "iframe", my drop-down list values are not displaying outside the page and got truncated with the iframe window size (i.e first two values are visible and rest are not displayed outside of iframe window size)
Can anyone please suggest what's the difference it is causing when i am changing type from ajax to iframe?
Thanks!!
Yatish
Kindly visit the codes in action here: http://jsfiddle.net/ff2P9/
and tell me if this is the effect you want.
Basically, when you use **type: iframe** in conjunction with **scrolling: no**, any content outside the iframe's borders are clipped [hidden from view]. So, if you require to see the rest of the content [in an iframe], you need to set the scrolling option to either "yes" or "auto".
snippet:
$(document).ready(function() {
$('a.fancy').fancybox({
'type': 'iframe',
'scrolling': "auto",
'width': 395,
'height': 323,
'overlayOpacity': 0.62,
'onClosed': function () {
parent.location.reload(true);
; // <---i guess you don't need this (JFK)
}
});
return false;
});
--
Again, please see fancybox in action here: http://jsfiddle.net/ff2P9/
I am dynamically creating an iframe and loading it with content from a cgi. The content is a table. I would like to apply jeditable to a div in that iframe content. Here is the html which renders as I need.
<td align=left width=5%><font style="font-family:lucida console; font-size: 10px;"><div class="edit" id="div_1">$databasename</div><div class="edit_area" id="div_2"></div>
and here is the js:
var iframe = document.createElement('IFRAME');
$(iframe).attr({
id: 'frameName',
frameBorder: 'none',
width: '100%',
height: '465',
scrolling: 'yes',
src: "./dump.cgi?system=" + sys
});
document.body.appendChild(iframe);
$(iframe).load(function() {
$(document).ready(function () {
$('.edit').editable('./adtu.php', {
indicator : 'Saving...',
tooltip : 'Click to edit...'
});
$('.edit_area').editable('./adtu.php', {
type : 'textarea',
cancel : 'Cancel',
submit : 'OK',
indicator : '<img src="img/indicator.gif">',
tooltip : 'Click to edit...'
});
});
});
The jquery.js and jquery.jeditable.js ARE NOT coded in the cgi. I'm hoping to avoid that overhead, but I will try if advised.
So when the page loads I click on the "databasename" in the table and I get nothing. I have had the jeditable code in numerous places. This code is my latest attempt, my thinking being that the iframe was not ready for jeditable to find the div class when coded outside the load() function.
I would lose the cgi and frame altogether but the cgi has other submit functions and the iframe container is how I contain the page refresh.
Thank you,
Mike
I know there is at least 1 other post on SO dealing with this but the answer was never exactly laid out.
I am working in a WP child theme in the head.php document. I have added this in the head:
<link type="text/css" href="http://www.frontporchdeals.com/wordpress/wp-includes/js/jqueryui/css/ui-lightness/jquery-ui-1.8.12.custom.css" rel="Stylesheet" />
<?php
wp_enqueue_style('template-style',get_bloginfo('stylesheet_url'),'',version_cache(),'screen');
wp_enqueue_script('jquery-template',get_bloginfo('template_directory').'/js/jquery.template.js',array('jquery'),version_cache(), true);
wp_enqueue_style('jquery-style', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/smoothness/jquery-ui.css');
wp_enqueue_script('jq-ui', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.js ');
wp_enqueue_script('jq-ui-min', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js' );
?>
and I added this in the body:
<script>
jQuery(function() {
$( "#dialog" ).dialog();
});
</script>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
but no dice. My div shows as standard div.
Any ideas at all? I know that top stylesheet should be called with enqueue but that shouldn't stop this from working.
WordPress jQuery is called in no-conflict mode:
jQuery(document).ready(function($) {
$('#dialog' ).dialog();
});
Also jQuery UI is loading before jQuery. You're getting 2 javascript errors:
Uncaught ReferenceError: jQuery is not defined
103Uncaught TypeError: Property '$' of object [object DOMWindow] is not a function
The first error is from jQuery UI loading before jQuery and the second is because the $ is not recognized in no-conflict mode.
Remove any of the inline <script src= tags and the call to the custom.css in header php and add this function to your child theme functions.php file to load the scripts. WordPress will put them in the right order for you.
add_action( 'init', 'frontporch_enqueue_scripts' );
function frontporch_enqueue_scripts() {
if (!is_admin() ) {
wp_enqueue_script( 'jquery' );
wp_register_script( 'google-jquery-ui', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js', array( 'jquery' ) );
wp_register_script( 'jquery-template', get_bloginfo('template_directory').'/js/jquery.template.js',array('jquery'),version_cache(), true);
wp_register_style( 'jquery-style', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/smoothness/jquery-ui.css', true);
wp_register_style( 'template-style', 'http://www.frontporchdeals.com/wordpress/wp-includes/js/jqueryui/css/ui-lightness/jquery-ui-1.8.12.custom.css', true);
wp_enqueue_style( 'jquery-style' );
wp_enqueue_style( ' jquery-template' );
wp_enqueue_script( 'google-jquery-ui' );
wp_enqueue_script( 'jquery-template' );
}
}
I'm building a custom plugin on WP admin to insert data on custom MySQL tables. For nearly a week I was trying to do a confirmation dialog for a delete item event on a Wordpress table. After I almost lost all my hair searching for an answer, it seemed too good and simple to be true. But worked. Follows the code.
EDIT: turns out that the wp standard jquery wasn't working properly, and the Google hosted jQuery included in another class was making the correct calls for the JS. When I removed the unregister/register added below, ALL the other dialog calls stopped working. I don't know why this happened, or the jQuery version included in this particular WP distribution, but when I returned to the old registrations, using Google hosted scripts as seen below, everything went back to normality.
On PHP (first, register and call the script):
add_action('admin_init', 'init_scripts_2');
function init_scripts_2(){
///deregister the WP included jQuery and style for the dialog and add the libs from Google
wp_deregister_script('jquery-ui');
wp_register_script('jquery-ui', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js');
wp_deregister_style('jquery-ui-pepper-grinder');
wp_register_style('jquery-ui-pepper-grinder', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/pepper-grinder/jquery-ui.min.css');
wp_enqueue_script('jquery-ui'); ///call the recently added jquery
wp_enqueue_style('jquery-ui-pepper-grinder'); ///call the recently added style
wp_deregister_script('prevent_delete'); ///needed the deregister. why? don't know, but worked
///register again, localize and enqueue your script
wp_register_script('prevent_delete', WP_PLUGIN_URL . '/custom_plugin/js/prevent_delete.js', array('jquery-ui'));
wp_localize_script('prevent_delete', 'ajaxdelete', array('ajaxurl' => admin_url('admin-ajax.php')));
wp_enqueue_script('prevent_delete');
}
Next, if you're opening the dialog on a click event, like me, make sure you ALWAYS use class instead of id to identify the button or link later, on jQuery.
<a class="delete" href="?page=your_plugin&action=delete">Delete</a>
We also need to use a tag that holds the dialog text. I needed to set the style to hide the div.
<div id="dialog_id" style="display: none;">
Are you sure about this?
</div>
Finally, the jQuery.
/*jslint browser: true*/
/*global $, jQuery, alert*/
jQuery(document).ready(function ($) {
"use strict";
///on class click
$(".delete").click(function (e) {
e.preventDefault(); ///first, prevent the action
var targetUrl = $(this).attr("href"); ///the original delete call
///construct the dialog
$("#dialog_id").dialog({
autoOpen: false,
title: 'Confirmation',
modal: true,
buttons: {
"OK" : function () {
///if the user confirms, proceed with the original action
window.location.href = targetUrl;
},
"Cancel" : function () {
///otherwise, just close the dialog; the delete event was already interrupted
$(this).dialog("close");
}
}
});
///open the dialog window
$("#dialog_id").dialog("open");
});
});
EDIT: The call for the standard wp dialog style didn't work after all. The "pepper-grinder" style made the dialog appear correctly in the center of the window. I know the looks for the dialog are not very easy on the eye, but i needed the confirmation dialog and this worked just fine for me.
The dialog div is created AFTER when you're trying to act upon it. Instead, you should use:
$(document).ready(function() {
$( "#dialog" ).dialog();
});