Develop Reference

Load DIVs with same class into a modal dialog

I'm creating a fairly simple FAQ system to overhaul my company's outdated one. The page layout is very basic:
<div class="faq_c"> // Container
<div class="faq_q">Question Goes Here</div> // Question -- clicking this should open the Answer div in a dialog
<div class="faq_a">Answer Goes Here</div> // Answer
</div>
The faq_a class has display:none set in CSS to hide it.
What I'm wanting to do is have each faq_a load into a modal dialog when the parent faq_q class DIV is clicked. The structure of the modal should be:
Question
--------- // Horizontal Rule formatted with CSS
Answer
jQuery (Revised)
$(document).ready(function(){
$('.faq_a').each(function(){
$('.faq_a').dialog({
autoOpen: false,
modal: true,
resizable: false,
draggable: false,
overflow: scroll,
title: "Frequently Asked Question",
width: 500
});
$('.faq_q').click(function(){
$('.faq_a').dialog('open');
});
});
});
This isn't working exactly correctly. Instead of opening the single desired faq_a it's opening all of them. I also can't figure out how to get the desired layout inside the div.
Thanks in advance.

Looks like you just need to fix your selector:
jsFiddle
//var $dialog = $('<div>' + $('.faq_q') + '<hr>' + $('.faq_a') + '</div>'); // bad
var $dialog = $('div, .faq_q, hr, .faq_a');// good
$dialog.click(function() {
alert('clicked');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
click me
</div>

TinyMCE Enable button while in read only mode

I have a TinyMCE 4.x instance where the text should be in read only mode. But I still have some buttons that I want to have enabled. For example, one button could provide a character count for the part of the text I've selected.
But when I turn on read only mode for TinyMCE all buttons are disabled. Can I enable just my buttons while still retaining read only mode?

It's probably too late for you but other people may pass by here.
I came up by writing this function
function enableTinyMceEditorPlugin(editorId, pluginName, commandName) {
var htmlEditorDiv = document.getElementById(editorId).previousSibling;
var editor = tinymce.get(editorId);
var buttonDiv = htmlEditorDiv.querySelectorAll('.mce-i-' + pluginName.toLowerCase())[0].parentElement.parentElement;
buttonDiv.className = buttonDiv.className.replace(' mce-disabled', '');
buttonDiv.removeAttribute('aria-disabled');
buttonDiv.firstChild.onclick = function () {
editor.execCommand(commandName);
};
}
It does the trick in 2 steps:
make the button clickable (remove mce-disabled CSS class and remove the aria-disabled property)
assign the good command to the click event
And in my editor init event I call the function.
editor.on('init', function () {
if (readOnly) {
editor.setMode('readonly');
enableTinyMceEditorPlugin(htmlEditorId, 'preview', 'mcePreview');
enableTinyMceEditorPlugin(htmlEditorId, 'code', 'mceCodeEditor');
}
});
Current version of TinyMCE for which I wrote this code is 4.4.3. It may break in a future version, specifically about the selectors to get and modify the good HTML elements.
Command identifiers can be found at this page otherwise you can also find them under tinymce\plugins\PluginName\plugin(.min).js

Here is a simple way to enable your custom toolbar button and attach a click event handler inside a read only TinyMCE editor using JQUERY:
//Initialize read only Tinymce editor so that Lock button is also disabled
function initReadOnlyTinyMCE() {
tinymce.init({
selector: '#main'
, toolbar: 'myLockButton'
, body_class: 'main-div'
, content_css: 'stylesheets/index.css'
, readonly: true
, setup: function (readOnlyMain) {
readOnlyMain.addButton('myLockButton', { //Lock button is disabled because readonly is set to true
image: 'images/lock.png'
, tooltip: 'Lock Editor'
});
}
});
}
function displayReadOnlyTinyMCEwithLockButtonEnabled() {
var edContent = $('main').html();
$("#main").empty();
initReadOnlyTinyMCE(true);
tinyMCE.activeEditor.setContent(edContent);
//enable the lock button and attach a click event handler
$('[aria-label="Lock Editor"]').removeClass("mce-disabled");
$('[aria-label="Lock Editor"]').removeAttr("aria-disabled");
$('[aria-label="Lock Editor"]').attr("onclick", "LockEditor()");
}
function LockEditor() {
alert("Tiny mce editor is locked by the current user!!");
//Write your logic to lock the editor...
}

I couldn't find an easy way to do this. The simplest way is to remove the contenteditable attribute from the iframe body instead and substitute a read only toolbar set. It also means that people will still be able to copy content from the editor.
$("iframe").contents().find("body").removeAttr("contenteditable");

How about this :
editor.addButton('yourButton', {
title: 'One can Enable/disable TinyMCE',
text: "Disable",
onclick: function (ee) {
editor.setMode('readonly');
if($(ee.target).text() == "Disable"){
var theEle = $(ee.target).toggle();
var edit = editor;
var newBut = "<input type='button' style='opacity:1;color:white; background-color:orange;' value='Enable'/>";
$(newBut).prependTo($(theEle).closest("div")).click(function(e){
edit.setMode('design');
$(e.target).remove();
$(theEle).toggle();
});
}
}
});

You can try to run the code below:
$("#tinymce").contentEditable="false";
if you have more than one editors, you can use their id like below
$("#tinymce[data-id='idOfTheEditor']").contentEditable="false";

Load a popover after page refresh

I've got stuck when i tried to show a bootstrap's popover after my page refresh/reload using <a></a> element.
More detailed... I want to show a popover when the user click on logout button, the page reload and after that, i want the popover to be showed.
I've tried to set the URL to .../index.php?page=index&success, get the 'success' part of the link if it exists, and show the popover, but it hasn't worked.
$(document).ready(function()
{
var x = location.pathname;
var parts = x.split('&', 2);
if(parts[1] == "success")
{
$("#popoverLogout").popover({
content: "Message to be shown",
html: true,
placement: 'top',
trigger: 'manual'
delay: {'show':1000, 'hide':250},
container: 'popoverContainer',
});
}
});
Any ideas how i can get this work? Thanks!

After you have created your popover you will need to show it
$("#popoverLogout").popover('show');
because you have set your trigger to manual.

change
var parts = x.split('&', 2);
if(parts[1] == "success")
to
var parts = x.split('&');
if(parts.indexOf('success') > -1)

making jQuery Dialog to wait for post back or JavaScript prompt allowing custom html

I want to prompt the user with possible values (which I've got stored in JavaScript array ) to be displayed as radio buttons to choose if some value in text-box is left empty and user clicks on 'Save' telerik's Rad Ribbon Bar button laying in master page.
My problem is, when I click on Save, the server side method does not
wait for the jQuery UI Dialogue to close, I tried a while loop saying
wait here till the dialogue box disappears but that spiked abruptly & hung up my page :-(
For my scenario, we're importing data from other application so, can;t use the on change event
We'e the requirement : While saving prompt the box with available values, get the selected value and continue saving with selected value, so I can not add a button, hide it and trigger .click() event
my client may not welcome "return false;" they just want to continue saving
I've got following working
Client side event handler gets called from content page when save button is called
the above JavaScript function checkes if value is empty
Getting available values from server side and storing in array
creating html and on the fly (code below)
Code Snippet 1 ( to declaring div for jQuery UI dialogue in content page)
<script src="../Scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="../Scripts/JQueryUI/js/jquery-ui-1.10.3.min.js" type="text/javascript"></script>
<link href="../Scripts/JQueryUI/css/smoothness/jquery-ui.min.css" rel="stylesheet"
type="text/css" />
<link href="../Scripts/JQueryUI/css/smoothness/jquery.ui.theme.css" rel="stylesheet" type="text/css" />
<div id="dialog-confirm" title="Tracking #">
<span style="float: left; margin: 0 7px 20px 0; z-index: 999999 !important"></span>
<p>
</p>
</div>
Code Snippet 2 ( fires client side function when Click event triggers on Save )
function onSave(sender, args) {
var sButtonText = args.get_button().get_text();
if (sButtonText == "Save") {
var
trackingIDs = $('#<%=_tbPrevtrackerID.ClientID %>').val(),
$trackerIDInputControl = $('#<%= tbtrackerID.ClientID %>'),
currenttrackerIDValue = $trackerIDInputControl.val(),
trackerIDs = trackingIDs.split(',').clean(''), //Extension Method
noOftrackerIDsAvailable = trackerIDs.length,
markup = 'trackerID is empty : <br/><br/><input type="radio" name="trackerIDGroup" value="" >Leave Empty</input><br/>';
for (var i = 0; i < noOftrackerIDsAvailable; i++) {
markup += '<input type="radio" name="trackerIDGroup" value="' + trackerIDs[i] + '">' + trackerIDs[i] + '</input><br/>';
}
if (currenttrackerIDValue == '') {
$('#dialog-confirm').css({ 'display': 'block' });
$("input:radio[name=trackerIDGroup]").click(function () {
$trackerIDInputControl.val($(this).val());
trackerIDChecked = true;
});
//Please note, if I'd use following it does work, but I am going to have multiple values
//$trackerIDInputControl.val(prompt(markup, trackerIDs[0]));
if ($("#dialog-confirm") != null) {
$("#dialog-confirm p").html(markup);
$("#dialog-confirm").dialog({
resizable: false,
height: 300,
width: 300,
closeOnEscape: false,
modal: false,
buttons: {
"Ok": function () {
if ($trackerIDInputControl.val() != '') {
$('#dialog-confirm').css({ 'display': 'none' });
$(this).dialog("close");
}
},
Cancel: function () {
$(this).dialog("close");
$('#dialog-confirm').css({ 'display': 'none' });
}
}
}).parent().appendTo(jQuery("body form"));
}
}
}

I think Ajax Control Tool kit has something more suitable for you, please have a look at this demo.

jquery modal popup guidance needed. What am I doing wrong?

I'm creating a website and on one page of the site (it's .php) I have two links. The first reads register and the next reads login. I am using jquery to create a popup and which form pops up depend on the link clicked. (I am trying to do this but not able to). I have 2 files in total (logReg.php) and (popup.css).
When I click on login the login form pops up as expected, but when i click on register nothing pops up. And if I reverse these that if I put the jquery code for register first then... the register box pops up but the login doesn't. I have read the click() function's jquery API but it seems to me i'm doing everything right but obviously not. Any help would be greatly appreciated. BTW This code is not 100% mine I modified the code that I found for a single popup window.
Content of logReg.php
<html>
<head>
<!-- Typical stuff here. link to the popup.css & jquery.js -->
<title>MyPage</title>
<script type="text/javascript">
$(document).ready(function () {
$("a.login-window").click(function () {
//Getting the variable's value from a link
var loginBox = $(this).attr("href");
//fade in the popup
$(loginBox).fadeIn(300);
//set the center alignment padding
var popMargTop = ($(loginBox).height() + 24) / 2;
var popMargLeft = ($(loginBox).width() + 24) / 2;
$(loginBox).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
//Add the mask to body
$('body').append('<div id="mask"></div>');
$('mask').fadeIn(300);
return false;
});
//When clicking on the button close the pop closed
$('a.close, #mask').live('click', function() {
$('#mask, .login-popup').fadeOut(300, function() {
$('#mask').remove();
});
return false;
});
$("a.register-window").click(function () {
//Getting the variable's value from a link
var registerBox = $(this).attr("href");
//fade in the popup
$(registerBox).fadeIn(300);
//set the center alignment padding
var popMargTop = ($(registerBox).height() + 24) / 2;
var popMargLeft = ($(registerBox).width() + 24) / 2;
$(registerBox).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
//Add the mask to body
$('body').append('<div id="mask"></div>');
$('mask').fadeIn(300);
return false;
});
//When clicking on the button close the pop closed
$('a.close, #mask').live('click', function() {
$('#mask, .register-popup').fadeOut(300, function() {
$('#mask').remove();
});
return false;
});
});
</script>
</head>
<body>
<div id="links>
Login
Register
</div>
<div id="login-box" class="login-popup">
<form method="post" class="signin" action="">
<!-- All form stuff here -->
</form>
</div>
<div id="#register-box" class="register-popup">
<form method="post" class="signin" action="">
<!-- All form stuff here -->
</form>
</div>
</body>
</html>

first don't use .live, upgrade jquery and use
$(document.body).on({event:function(){},...},"selector"
second don't use append, use
$('<div../>').appendTo($(document.body));
(i believe your bug comes from second)
also you could make a plugin of your open box code, then you bind the two at once using.on

For starters you are missing a double quote on this line:
<div id="links>
change to
<div id="links">
That should get your links fixed.
Then you should do what mikakun said about upgrading jquery and using .on as it is best to stay current.