I applied tinyMCE to a text area in my sites admin area.
Now there is a page "create category" and and page "edit category."
In edit category, there is a drop-down of the categories, I select one and the text area for category description is filled in with AJAX and a tinyMCE function:_
tinyMCE.activeEditor.setContent(responce);
The category description is filled into the text area on which tinyMCE is applied. But when I click submit, NOTHING happens at all.Similarly, on the create category page, there is no drop down, but when you click submit, nothing happens at all.
This problem does not occur when tinyMCE is not applied. But on the edit category page, it was submitting but not filling in the text area with the category description, when instead of
tinyMCE.activeEditor.setContent(responce);
I used
$("#lang_description").html(responce);
in the callback function for jQuery AJAX.
So the main problem is that the forms are not being submitted and that was the story.
Someone suggested to use the tinyMCE function getContent before I post but I dont understand where and how I would do that.
I've faced a situation once like yours and what I did that was first i set in tinyMCE.init
tinyMCE.init({
mode : "exact", // Used exact
elements : "page_content", // I gave the textarea id and name 'page_content'
...
});
Then I've wrote a function as follows
function get_page_content()
{
var ed = tinyMCE.get('page_content');
return ed.getContent();
}
Then inside my form submit event handler/function I just did
$('#page_content').val(get_page_content()); // I populated my textarea (id=page_content) before the form submission
I received the data using $page_content=$_POST['page_content'] in my php script
Update: May be you can use
var ed=tinyMCE.activeEditor.getContent(); // when you didn't set the mode : "exact" in init function
Reference: getContent and setContent
May be not a solution but If this helps then I'll be glad to know. Also notice Sparky672's comment.
Related
Can somebody help me with a situation I am facing?
I'm using a woocommerce table plugin (wct) + woocommerce product addon. If you click on the button to select a pizza, it opens a lightbox popup with some ingredients options.
It's almost perfect, but the point is that i need the user to choose until three options (and not being able to mark all those options), but at least one (this part is solved, because it is a required field).
What if were 2 (min) and 4 (max) ingredients?
Do you know how can I solve that or even another plugin that does the job? I've checked a demo of a plugin, but it allows you to select how many checkboxes you want and only shows a error msg after you click on "buy" buttom. I guess that this method won't work within a lightbox, that it will just close the popup and show the msg at the top of the page.
Thank you so much for your attention.
ingredients lightbox options
You can use jQuery to count how many checkboxes have been checked. When the number is between 1 und 3, the submit button is clickable. If not, the button is disabled.
In my example your checkboxes have the class of check and your submit button the id of sbmBtn so we have access to the elements. Put this is the footer.php file of your theme or just where you want to place the javascript code in your theme files.
<script>
( function( $ ) {
window.updateCount = function() {
var checkcounter = $(".check:checked").length;
};
if(checkcounter == 1 || checkcounter >= 4) {
$("#sbmBtn").attr("disabled", true);
}
else { $("#sbmBtn").attr("disabled", false); }
}( jQuery ) );
</script>
This code will save the number of checked checkboxes in the variable called checkcounter. After that, we check if it has the value we want it to have and disable or enable the button in the different cases.
I have form with few input box, for example:
FORM START
News -> input
News picture -> input (id="newspics", name="news_picture")
Add -> submit button
"Hyperlink Set picture" -> opening Fancy box window with gallery (table, 5*5, 25 pictures), images must be hyperlinked with unique id
FORM END
I need communication between Fancy box onclose() and my input (news_picture), when user click to picture I need: closing fancy box, putting id number to my input (news picture). Please if anybody help me.
Update:
I solved problem.
I make little php script, fwrite function write id number when user click to addpicture.php?id=$id in fancy box
After this, I get them, code:
'onClosed' : function() {
jQuery.get('aa.txt',function(data){
alert(data);
});
}
If you want to pass php variables into a fancybox callback you can do
$(".fancybox").fancybox({
"onClosed" : function(){
$("#input_selector").val(<?php echo $phpVariable; ?>);
// or add an ID attribute
// $("#input_selector").attr("id", ""+<?php echo $phpVariable; ?>+"");
}
});
... the example above is to get you an idea how to do it, its not a recipe ;)
Bear in mind that onClosed is a callback for fancybox v1.3.4 ... if yours is v2.x use afterClose instead.
I am trying to use the jquery to Prevent page realoading. I have the whole code php done... and is functional. if you can please go to http://www.jonathansconstruction.com/gallery3.php and click on the different gallery SUbmenus for category View All, Kitchen etc... i'm using get for variables. However, I would like to use a jquery to process the php so i dont have to include it into the gallery.php and also, to prevent page reloading because it brings the page back up and that could be confusing. Any hlep willl be greatly appreciated THanks
UPDATE, Thanks for everyone that helped:
SO far i made an advance on the website, Corrected URL was edited on top of the post
Everything is working smoothly on the effects of quicksand.. HOwever, Lytebox Doesn't Load when a quicksand effect is placed. , at the beginning it loads just fine, but right after pressing one of the menus for the quicksand effect. It stops working. Also, I want to style my menu buttons as is in http://www.jonathansconstruction.com/gallery.php. I see jquery doesnt add and witht the sample I downloaded. and also the that says "gallery Pictures" dissapears ont he quicksand demo.
Any Help is appreciated. Below is the script.js code I have modified so far
$(document).ready(function(){
var items = $('.photo_show figure'),
itemsByTags = {};
// Looping though all the li items:
items.each(function(i){
var elem = $(this),
tags = elem.data('tags').split(',');
// Adding a data-id attribute. Required by the Quicksand plugin:
elem.attr('data-id',i);
$.each(tags,function(key,value){
// Removing extra whitespace:
value = $.trim(value);
if(!(value in itemsByTags)){
// Create an empty array to hold this item:
itemsByTags[value] = [];
}
// Each item is added to one array per tag:
itemsByTags[value].push(elem);
});
});
// Creating the "Everything" option in the menu:
createList('View All',items);
// Looping though the arrays in itemsByTags:
$.each(itemsByTags,function(k,v){
createList(k,v);
});
$('#gallery_menu nav a').live('click',function(e){
var link = $(this);
link.addClass('current').siblings().removeClass('current');
// Using the Quicksand plugin to animate the li items.
// It uses data('list') defined by our createList function:
$('.photo_show').quicksand(link.data('list').find('figure'), {adjustHeight: 'dynamic'} );
e.preventDefault();
});
$('#gallery_menu nav a:first').click();
function createList(text,items){
// This is a helper function that takes the
// text of a menu button and array of li items
// Creating an empty unordered list:
var ul = $('<ul>',{'class':'hidden'});
$.each(items,function(){
// Creating a copy of each li item
// and adding it to the list:
$(this).clone().appendTo(ul);
});
ul.appendTo('.photo_show');
// Creating a menu item. The unordered list is added
// as a data parameter (available via .data('list'):
var a = $('<a>',{
html: text,
href:'#',
data: {list:ul}
}).appendTo('#gallery_menu nav');
}
});
ANOTHER EDIT :
All Looking good So far Fixed Lot of problems, However, for some reason, the span I had on teh static html dissapears from display and even html code when loading jquery quicksand code..?? Here is the code i have on the html part of the website that Does Not appear on the live website for some reason.
<div id="portfolio">
<div class="photo_show"><span>Gallery Pictures</span>
the span part doesnt appear, dont know why
I had the TOp Part Resolvd. just moved the on top of photo_show div and edited positioning... HOPEFULLY Last Edit
the jquery for quicksand made my calendar dissapear, checked and yes it was some jquery conflict but dont know what can be causing it.. also the form validation not working as well ... any help is appreciated!
I visited your webpage link after correcting a typo in the URL for word construction.
I also see the problem that the page reloads when clicking on a sorting filter such as View All, Kitchen, and Miscellaneous which is what you want to prevent.
Unfortunately, those buttons are using URL Links asking to reload the webpage with a filtered option via query string. Nothing can be done for that method of filtering, your just going to reload the webpage since filtering is done on page load.
Perhaps this DEMO shows what you want to accomplish since it does not reload the webpage. That demo has markup that is easy to create and maintain which is build using the Quicksand jQuery Plugin. The tutorial for that demo is accessed using the link at the bottom right, but looking at the source HTML file shows how simple it is.
I made a downloadable demo using both Quicksand and Shadowbox, a lightbox alternative HERE, which might interest you since your webpage is linking the filtered icon results to a lightbox alternative named Lytebox.
Since your edit reflects your interest in Lytebox, the following markup will reinitialize that lightbox alternative after a filtering event has occurred with Quicksand. Update your script.js file accordingly.
$('.photo_show').quicksand(link.data('list').find('figure'), function(){
adjustHeight = 'dynamic';
initLytebox();
});
I also made a correction to your existing adjustHeight since it was using a semicolon instead of an equal sign, but the correct location and use of that is for something unrelated.
The reason that you are not seeing the bullets is because your not using ul/li tags that the demo is using.
I am editing to try to put my primary question at the beginning of this post:
1) I am sitting at my customers/preferences page updating info in the form
2) I want to add a widget to my list of available widgets, so I need to open the widgets/addWidget page/form to add a new widget (note I am still working in my current customers/preferences page/form, so I need to continue with this page after adding a new widget in the widgets/addWidget page/form.
3) I select a link to go to widgets/addWidget, and I have jQuery dialog open this link in a dialog with the addWidget form and submit button
4) after adding a newWidget in the dialog popup form, I want to submit the newWidget (the code for addWidget is in the widgets/addWidget controller/action, not in the customers/preferences action)
Problem: the addWidget form action goes to widgets/addWidget, so when I submit the addWidget form in the dialog, it takes me away from my current customers/preferences page
Question 1) what is the proper/best way given this scenario to popup a form in another controller/action to submit that form, but then resume my current controller/action?
Question 2) should I move all of my form and code from the widgets/addWidget controller action into my existing customers/preferences action? (that seems to be the wrong approach)
I have researched jQuery documentation, Zend documentation, and searched other threads with trusty Google and stackoverflow, but I am still struggling to figure out the right way to get this to work with Zend Framework and popup forms such as jQuery dialog.
I have a working Zend action/controller that using a Zend Form and view to display and process my form. I have also been able to use jQuery dialog to popup a window when I click the link to that controller/action.
My issue is with the proper way to get the dialog to display the form and still be able to submit and process the page. If I only load the #content tag in the dialog the form and submit button appear in the dialog box, but the submit button no longer works. If I let the dialog open the full page (not just the #content) now the form will process properly, but the form submit is set to go to my action page for processing, so the form submits and takes me away from the original page and to the real controller/action page instead.
In my customerController I have a preferencesAction where a customer can choose a widget from a list of widgets. When the customer needs to add a new widget to the list, I want to open the addWidgetAction from the WidgetsController in a popup form. I want to add the widget in the popup form, submit the form to the addWidgetAction, and come back to the customer/preferences page I was already working in (with the newly added widget available in my list to select from).
//CustomerController
public function preferencesAction(){
//this is where I click a link to /widgets/addWidget and use jQuery dialog for form
}
//Customer preferences.phtml
<script>
$(document).ready(function() {
$('#add-link').each(function() {
var $link = $(this);
var $dialog = $('<div></div>')
.load($link.attr('href'))
.dialog({
autoOpen: false,
title: $link.attr('title'),
width: 600,
height: 500,
buttons: {
"Add Widget": function(){
$("#AddWidget").submit();
},
"Cancel": function(){
$(this).dialog("close");
}
}
});
$link.click(function() {
$dialog.dialog('open');
return false;
});
});
});
</script>
<a id="add-link" href='<?php echo $this->url(array('controller' => 'widgets',
'action' => 'addwidget')); ?>'>Add a Widget...</a>
//WidgetsController
public function addWidgetAction(){
// display form to add widget
// process form, validate, add to widgets table
$baseUrl = $this->getRequest()->getBasePath();
$action = $baseUrl . '/widgets/addWidget';
$form = new Form_Widget();
$form->setName('Add Widge')
->setAction($action);
}
I need to understand how to get the dialog to load my Zend action page for form processing, but without requiring the entire layout with header, footer, etc. I also need to understand how to process the form in the dialog popup without moving away from my original page where the popup was linked from.
Thank you for your assistance!
Well, I am not sure if i understand your question but you can try this
You can load your form in UI dialog box, to disable layout do this on you can do this
public function addwidgetAction(){
$this->_helper->layout()->disableLayout();
//just diable layout and do eveything normal
}
on your preferences.phtml file load the content of url baseurl/contrller/addwidget to jquery modal dialog
UPDATE
One way is use a jqueryplugin fancybox (external src) check the forgot password link
The other way is to use ajax
UPDATE
Well now i read your question well, though don't understand so clearly, i understand that you are trying to do something that is quite ambitious. And you cannot achieve through normal load method. You need to use ajax
I have to admit that I don't like jquery ui modal dialog so i don't know much about it, and i usually use jquery fancy box where it would give me an ability to load external page. Maybe you can do this through jquery ui modal dialog box.
I guess the problem that you are facing right now is you open a dialog box, you get the form in dialog, and you submit the form, it sends the normal post request, so dialog is reloaded, that's what happens in the link i have above, just click on forgot password link
Well there's solution for that too, the solution is ajax, and i hope you are quite familiar with it. you send ajax request and get response back, and depending on your response, you can exit dialog box as well update the the parent (preferences controller page) but that is quite ..... I tried to so same with few months back, but not with zf, i don't know how much i accomplished but it sure gave me a nasty headache
TinyMCE editor lets you assign a custom button to its editor toolbar. I did that and hooked it up to a Flickr account, so a custom dialog box appears with a selection of images.
I want the user to be able to then click any image and have the URL of that image added to the original input, from where the custom TinyMCE button was clicked.
This is the TinyMCE custom button code I have:
setup : function(ed) {
// Add a custom button
ed.addButton('flickr', {
title : 'Add Flickr Image',
image : 'styles/media_icons/flickr.png',
onclick : function() {
// Add your own code to execute something on click
$("div.mediaLibraryPopup .box").load("scripts/loadMediaLibrary.php");
$("div.mediaLibraryPopup").fadeIn("slow").addClass(container);
}
});
}
Then, when you click on an image, I have this jQuery to handle that event:
$("div.mediaLibraryPopup img").live("click", function() {
var url = $(this).attr("src");
$("div.mediaLibraryPopup").fadeOut("slow");
});
I've been reading the TinyMCE documentation and working with it for hours, and I can't figure out how to pass that URL variable back to the TinyMCE "ed" event so that it can add it to the input.
Since I'll be using this on multiple inputs, I can't just hard-code the input class, either. Any thoughts?
I think you need to insert The URL on the Current Cursor Location in the Editor. if that is the case then you can use this command to insert the content:
tinyMCE.execCommand('mceInsertContent',false,'Your Content Goes Here...');
Hope this helps :)