We Keep Coding

TinyMCE disappears after save Widget in Wordpress

first of all, sorry for my bad english, I'm from Germany.
I just created my first widget. It's a widget that creates automatically a grid out of a list.
I can add a new list-item and every form field will be duplicated.
But after 3 days of searching the internet without a result I decided to ask by myself...
So here is my first problem, when I add a new item, the TinyMCE in the new item is disabled, I can't click on the buttons or type text into it.
There are no errors in the console log.
My second problem is when I save the widget, all TinyMCE-Editors disappear and leave the textareas, with the html code.
Here also: no errors... but I've seen, that the TinyMCE isn't loading after save. There is no iframe, nothing but the textarea.
After reload the widget page, everything is fine again for both problems.
So I have to add new items and save the page and then reload it to edit and edit the content, but that don't solve the problem.
I think I have to reinitialize the TinyMCE but I don't know how.
I had problems with adding the wordpress editor to my widget so I integrated the jQuery TinyMCE from the website.
Here is the code snippet of my add-function:
$("body").on('click.sgw','.sgw-add',function() {
var sgw = $(this).parent().parent();
var num = sgw.find('.simple-grid .list-item').length + 1;
sgw.find('.amount').val(num);
var item = sgw.find('.simple-grid .list-item:last-child').clone();
var item_id = item.attr('id');
item.attr('id',increment_last_num(item_id));
$('.toggled-off',item).removeClass('toggled-off');
$('.number',item).html(num);
$('.item-title',item).html('');
$('.custom_media_image',item).attr('src','');
$('textarea',item).val('');
$('img.custom_media_image',item).each(function() {
var class_val = $(this).attr('class');
$(this).attr('class',increment_last_num(class_val));
});
$('textarea',item).each(function() {
var id_iframe = $(this).attr('id');
tinymce.EditorManager.execCommand('mceRemoveEditor',true, id_iframe);
tinymce.EditorManager.execCommand('mceAddEditor',true, id_iframe);
});
$('label',item).each(function() {
var for_val = $(this).attr('for');
$(this).attr('for',increment_last_num(for_val));
});
$('input',item).each(function() {
var id_val = $(this).attr('id');
var name_val = $(this).attr('name');
$(this).attr('id',increment_last_num(id_val));
$(this).attr('name',increment_last_num(name_val));
if($(':checked',this)){
$(this).removeAttr('checked');
}
if($(this).hasClass('custom_media_button') || $(this).hasClass('custom_media_url')){
var class_val = $(this).attr('class');
$(this).attr('class',increment_last_num(class_val));
}
if($(this).hasClass('button-primary')){
var number_val = $(this).attr('number');
$(this).attr('number',increment_last_num(number_val));
}
$(this).not('#custom_media_button').val('');
});
sgw.find('.simple-grid').append(item);
sgw.find('.order').val(sgw.find('.simple-grid').sortable('toArray'));
});
I hope this is understandable and someone can help me.
You can download the zip here: https://www.dropbox.com/s/22b8q29v94n7mdj/simple-grid-widget.zip?dl=0

Are you trying to run several editors at once? There's a limitation with Wordpress and TinyMCE where you can basically one editor at a time. I've gotten around that but it was very difficult.
To load a new editor you may have to remove the old one:
tinymce.remove();

jquery page load to get another page content, mouseover how to load once

I have a few pages, like a1.html, a2.html, a3.html, a4.html, a5.html....
All pages HTML Markup looks like
<div class="wrap">
<header>Header 2</header>
<saection>Section 2</section>
<footer>
<div class="hover"></div>
</footer>
</div>
so when onhover a1.html .hover class, then page loads a2.html .wrap and appendTo a1.html's body, on the same page, now we have a2.html's contents. when on hover a2.html 's '.hover' (still on a1.html) then loads a3.html's contents and so forth
$('.hover').on('mouseover', function(){
$.get( "/a2.html", function( data ){
///a2.html should be a variable
$('section', data).appendTo('body');
});
});
My question is how to just load a2.html, a3.html or a4.html contents just once when onhover .hover class. How do I test if a2.html is already loaded then, do not load it again? Thanks

Try something like that.
$('.hover').on('mouseover', function(){
if (!$(this).data('active')) {
$(this).data('active', true);
$.get( "/a2.html", function( data ){
///a2.html should be a variable
$('section', data).appendTo('body');
});
}
});
Using the data-set to store a flag (active here), let you the possibility to remove it later and to process again the handler instructions.
If you really want to load it once (and never ever later), replace on by one in your code (as told by #SSS).
$('.hover').one('mouseover', function(){
$.get( "/a2.html", function( data ){
///a2.html should be a variable
$('section', data).appendTo('body');
});
});
Be careful : the way you are using on (or one) binds the mouseover event only on existing DOM elements.
If you want to affect all existing and future DOM elements. You got to use it this way :
$('body').on('mouseover', '.hover', function(){
/// your instructions
});
Hope that will help.

The simplest way is $(..).one(event, handler). But what if you really need to do something after loading once and only once in an a asynchronized and promised way?
I have implemented a cards ui application facing the same problem: card defined in another html file which must be loaded and only once before update/show its content. My resolution is based on jQuery Promises API and a simple cache. Wish helpful and here is part of my code (the real one is much more complicated):
function expect(proc) {
var cache = {};
return function(key) {
if (!cache[key]) {
cache[key] = $.Deferred(function(deferred) {proc(deferred, key); })
.promise();
}
return cache[key];
};
}
var cards = expect(function(deferred, url) {
var $loader = $('div');
function whenDone() {
deferred.resolve(loader.contents());
}
$loader.load(url).then(whenDone);
});
cards('MyCard.html').done(function(contents) {
// It is promised that MyCard is loaded, do what you want here
});

How to hide the anchor tag element rapidly on the onclick event using jQuery?

I've two hyperlinks. I'm hiding the one hyperlink on the click of other hyperlink and vice-versa. It's working absolutely fine for me on my local machine. But the issue arises when I upload and run the same functionality from the online server.
On server, the concerned hyperlink is not hiding that much quicker as compared to local machine instance. Due to which user can click again on a hyperlink which he has already clicked and the link is expected to be hidden. It takes moment or two for hiding the concerned hyperlink. I don't want that delay. The hyperlink should get hide immediately after on click event. I tried disable/enable the hyperlink but it didn't work out for me.
My code is as below:
<script language="javascript" type="text/javascript">
$(".fixed").click(function(e) {
var action_url1 = $(this).attr('delhref');
var qid = $(this).data('q_id');
$(".fixed").colorbox({inline:true, width:666});
$("#fixedPop_url").off('click').on('click',function(event) {
event.preventDefault();
$.get(action_url1, function(data) {
//$("#fix_"+qid).bind('click', false);
$("#fix_"+qid).hide();//This portion of code I want to make fast, it's taking some time to hide and meanwhile user can click on this link. I want to avoid it.
$("#notfix_"+qid).show();
//$("#notfix_"+qid).bind('click', true);
alert("Question status updated successfully");
});
});
$(".c-btn").bind('click', function(){
$.colorbox.close();
});
});
$(".notfixed").click(function(e) {
var action_url2 = $(this).attr('delhref');
var qid = $(this).data('q_id');
$(".notfixed").colorbox({inline:true, width:666});
$("#notfixedPop_url").off('click').on('click',function(event){
event.preventDefault();
$.get(action_url2, function(data) {
//$("#notfix_"+qid).bind('click', false);
$("#notfix_"+qid).hide();//This portion of code I want to make fast, it's taking some time to hide and meanwhile user can click on this link. I want to avoid it.
$("#fix_"+qid).show();
//$("#fix_"+qid).bind('click', true);
alert("Question status updated successfully");
});
});
</script>

You dont have to write the hide part code in complete function of get request. On live it will take time to fetch the rspond.so just keep it outside get function.something like this:
$(".fixed").click(function(e) {
var action_url1 = $(this).attr('delhref');
var qid = $(this).data('q_id');
$("#fix_"+qid).hide();
//rest code......
});
$(".notfixed").click(function(e) {
var action_url2 = $(this).attr('delhref');
var qid = $(this).data('q_id');
$("#notfix_"+qid).hide();//hide it here
//rest code......
});

jQuery load local iframe url with escaped characters for disqus commenting

I'm loading a custom page type that is just comments for a post. This is so I can use Disqus threads for easier usability when multiple loop posts are on a single page.
When loading an iFrame with the following structure I keep getting this syntax error. Are my escape characters wrong?
$(".boxyComments a").click(function (event) {
event.preventDefault();
var post_id = $(this).attr("rel");
$(".commentsIframeBig")
.get(0).contentWindow.location.href =
$("<?php echo get_site_url(); ?>","\/ajax-post-fold\/",post_id);
What's happening is the get retrieves the Wordpress hook to print the site url (in this case it prints http://whateverdomainex.com for the 1st call, 2nd should print /ajax-post-fold/ and the last call should print the post ID so the entire url ends up printing as http://whateverdomanex.com/ajax-post-fold/2825.
Instead my Chrome console gives me the following message:
Uncaught Error: Syntax error, unrecognized expression: /ajax-post-fold/
Update
I've put this variable into place and called it rather than the $("<?php echo get_site_url(); ?>","\/ajax-post-fold\/",post_id); as the get reference:
var postLink = $("<?php echo get_site_url(); ?>"+"\/ajax-post-fold\/"+post_id);
Implemented as such:
$(".boxyComments a").click(function (event) {
event.preventDefault();
var postLink = $("<?php echo get_site_url(); ?>"+"\/ajax-post-fold\/"+post_id);
var post_id = $(this).attr("rel");
$(".commentsIframeBig")
.get(0).contentWindow.location.href = postLink;
Which gives me the following Chrome message:
Uncaught Error: Syntax error, unrecognized expression: http://www.theciv.com/ajax-post-fold/28448
The URL that should be in the src attribute for the iFrame looks like it should be fine and good to go, so why is this syntax error still being output?
UPDATE
var postLink = "<?= site_url('\/ajax-post\/'); ?>"+post_id;
$(this).closest(".boxy").find(".commentsIframeBig")
.css("display","block")
.animate({height: "100%"}, 500)
.get(0).contentWindow.location.href = postLink;
With the proper structure above, the custom page is now loading in the iFrame. However the additional construct of +page_id which includes the rel attribute containing the post's id isn't loading properly.
Moreover when calling the new url as it's original custom page template, then adding the post's id does not load the correct page with post id. Confused yet? Read it again. Took me awhile to write that sentence.
In any case, now my mission to have the post id load when adding the custom page and the post_id as an added string for the iFrame's url to load properly.
update
Here is final working code to load Disqus comments into same page, pseudo multiple times.
Basically this is pushing a post id to the end of a custom page type, resulting in the post's content and attributable elements being loaded into the custom page template.
When stripping that custom page template down to just show the comments for the page, you can create a load/unload reaction whereby you are only calling Disqus once, removing that instance and then loading it again when another Load Comments button is clicked within a subsequently loaded post on the same page. Yay. Multiple Disqus commenting on one page with minimal Ajax loading.
Here is the structure et al that is almost working for me. Only 2 bugs left. First is the secondary load when emptying, then reloading the new Disqus page into the Ajax element using the .ajaxComplete() callback function.
What's happening now is the callback is basically not being fired at all. As far as I can tell. Clicking on it a second time however, does make the call. But this is due to the class parameters being met for the else statement.
Second bug left is I'm having a hard time figuring out how to get the appropriate elements to enlarge, while leaving the others the same size.
// Load comments and/or custom post content
$(".boxyComments a").click(function (event) {
event.preventDefault();
$.ajaxSetup({cache:false});
var post_id = $(this).attr("rel"); var excHeight = $(this).closest('.boxy').find('.initialPostLoad').height();
var postHeight = $(this).closest('.boxy').find('.articleImageThumb').height();
var postWidth = $(this).closest('.boxy').find('.articleImageThumb').width();
// close other comments boxes that may already be open
if($('.commentsOpen').length ) {
console.log('comments are open');
$('.bigBoxy').closest('.boxy')
.animate({height:(postHeight + excHeight)}, 500);
$('.showComments')
.removeClass('bigBoxy')
.removeClass('commentsOpen');
$('.commentsAjax')
.empty(function(){
$(this).closest(".boxy").find(".showComments")
.addClass("commentsOpen")
.addClass("bigBoxy");
$(".bigBoxy").find(".commentsAjax ")
.css("display","block")
.animate({height: "500px"}, 500)
.load("http://<?php echo $_SERVER[HTTP_HOST]; ?>/ajax-post/",{id:post_id});
$(this).closest(".boxy")
.ajaxComplete(function() {
var excHeight = $(this).closest('.boxy').find('.initialPostLoad')
.height();
var postHeight = $(this).closest('.boxy').find('.articleImageThumb')
.height();
$(this).closest(".boxy").animate({height: (postHeight + excHeight)}, 500)
});
});
} else {
$(this).closest(".boxyComments").find(".showComments")
.addClass("commentsOpen")
.addClass("bigBoxy");
$(this).closest(".boxy").find(".commentsAjax")
.css("display","block")
.animate({height: "500px"}, 500)
.load("http://<?php echo $_SERVER[HTTP_HOST]; ?>/ajax-post/",{id:post_id});
$(this).closest(".boxy")
.ajaxComplete(function() {
var excHeight = $(this).closest('.boxy').find('.initialPostLoad')
.height();
var postHeight = $(this).closest('.boxy').find('.articleImageThumb')
.height();
$(this).closest(".boxy").animate({height: (postHeight + excHeight)}, 500)
});
}
});

Okay, here's full working code to do what you want. You'll have to swap out a few placeholders for your actual code:
<script>
jQuery(document).ready(function($){$(".boxyComments a").click(function (event) {
event.preventDefault();
var post_id = $(this).attr("rel");
var postLink = "<?= site_url('/path/'); ?>"+post_id;
$("#myFrame").attr('src', postLink);
});
});
</script>
And sample divs & iFrame:
<div class='boxyComments'>
<a href='#' rel='some-url'>test link</a>
</div>
<div class=".commentsIframeBig">
<iframe id='myFrame' height="500px" width="800px" src=''>
</iframe>
</div>
Tested it locally and it worked no problem. You might have been running into issues with it not properly accessing the iFrame. If you can give the iFrame an id that makes it easier.

It's because you're declaring var postlink as a jQuery object. You just need to get it as a string that you can then pass to the iframe.
var post_id = $(this).attr("rel");
var postLink = "<?= site_url('/ajax-post-fold/'); ?>"+post_id;

UPDATE 2
Looks like the string shouldn't be included within the <?= get_site_url() ?> after all.
Instead I've created a few vars to affect it. Code updated below with answer:
var postDir = "\/ajax-post-fold\/";
var postLink = "<?= get_site_url(postDir); ?>"+"\/ajax-post-fold\/"+post_id;

Phantom.js stuck on choosing next element

I'm trying to use Phantom.JS to do some page automation on this page: https://reserve.apple.com/GB/en_GB/reserve/iPhone
I know how to use document.getElementById('store') = "R363" to choose the first option. But it seems after I've chosen the first option, the DOM element of the original page will change and I don't know how to achieve that using Phantom.JS

Instead of using document.getElementById('store') = "R363" try using jQuery instead like so:
var page = require('webpage').create();
// open the page
page.open('https://reserve.apple.com/GB/en_GB/reserve/iPhone', function() {
//inject jQuery
page.includeJs("http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js", function() {
// run the following code in the context of the page
page.evaluate(function() {
// change the value of the combobox
$("#store").val( newval );
// do stuff in the page
});
phantom.exit()
});
});