In my page there is a list of buttons. Depending on the clicked button the same .php file is loaded with a different content for the <textarea>. Then TinyMCE is initialised and after that the content of TinyMCE is set.
However, this only works on the first click. When a user clicks a different button, the <textarea> is loaded, but TinyMCE is not initialised. I don't know why it's doing that, because it's the same script that is executed.
$("ul").on("click", "a.click-menu", function() {
var id = $(this).attr("id");
$(".inject").load("Including/modules/Pages/index.php?page="+id, function () {
tinymce.init({selector:"textarea"});
});
});
And this is index.php in a nutshell:
<?php
echo '<textarea>'.$_GET['page'].'</textarea>';
?>
You should remove old TinyMCE and add new one to new controls...
Heres how it should be made
Related
Scenario: user profile. I would like to be able to display a user name with a popover that displays a limited amount of information from the user profile. So far, I have that part working. I can build it on the fly and have it do what I need. The popover works perfectly.
What I would also like to do is have the user be able to click on the user name and bring up a Bootstrap modal form with more information about the user (if provided). The first problem I am seeing is that it appears the data-toggle attribute can only have a single setting:
echo '' . $user_row['user_name'] . '';
In that example, if I add the modal to the data-toggle attribute it doesn't seem to do me much good.
I have discovered by tinkering (and that is why the class 'userprof' in the code above), that a JavaScript click event can be triggered (right now all I'm doing is a basic JS alert dialog to test), but from there I would want to load the modal. I am not sure if I can make it all work.
I have a set of functions I've used successfully for another modal (calling this one 'userModal') that I got some help from someone here a while back with -- is it possible to call that from the click event?
// code to open the modal with the caption and description:
$('#userModal').on('show.bs.modal', function (event)
{
var button = $(event.relatedTarget); // Button that triggered the modal
var title = button.data('title'); // Extract info from data-* attributes
var body = button.data('body'); // Extract info from data-* attributes
var modal = $(this);
modal.find('.modal-title').text( title );
modal.find('.modal-body').append( body );
});
// when modal closes, clear out the body:
$('#userModal').on('hidden.bs.modal', function ()
{
$(this).find(".modal-body").text('');
});
Since these are "anonymous" functions I am not sure I can call them ... feeling a bit lost in the code here. Any help pointing me in the right direction would be great. I'd even be willing to consider a different idea, but I would like this kind of functionality (hover and click) for this situation and possibly something else. Thanks!
You're listening for the modal to show itself, when the DOM is showing the modal.
try using something like this, and use a button or a link with data-toggle="modal"
$(document).on('hidden.bs.modal', '#userModal', function ()
{
$(this).find(".modal-body").text('');
});
for reference https://jsfiddle.net/y063mu4t/1/
You can try:
$(document).on('click', 'a.userprof', function(){
$('#userModal').modal('show');
});
To make your callback function work, you need to add according data-* attribute to each of the <a> tag.
I have a table in my page, for which I get the data from database. In some cells I have an edit icon.I want when users clicks on it, they see a pop up window.
In the pop up window, I want to show three option(check boxes), that user can select only one of them, and then click on OK button, and return the value of the selected option to the data variable.(as you see in the code below)
I have to mention, that right now when the user clicks on the edit icon, some information are sent to another file. Because I need to update database.
$(".SSO").click(function () {
var id = $(this).attr("data-id");
var data= HERE I NEED TO GET THE VALUE OF THE SELECTED OPTION IN THE POP UP WINDOW
}
So SSO is the value of class attribute for the image icon. data-id value helps to update the correct record in the database.
Right now this is the code in one file:
$(".SSO").click(function()
{
var id = $(this).attr("data-id");
// open popup window and pass field id
window.open('sku.php?id=' + encodeURIComponent(id),
'width=400,toolbar=1,resizable=1,scrollbars=yes,height=400,top=100,left=100');
}
and this is the code in sku.php
<script type="text/javascript">
function sendValue (s){
var parentId = <?php echo json_encode($_GET['id']); ?>;
window.opener.updateValue(parentId, s);
window.close();
window.close();
}
</script>
<form name="selectform">
<input type=button value="OK" onClick="sendValue(document.querySelector('.messageCheckbox:checked').value);"
</form>
Mu form right now has only OK button, when when I click on teh edit button, nothing happens. Should not I see a pop up window, with OK button inside it?
Typically a popup windows is shown with alert() or something similar, which causes the browser to make an actual popup window. That kind of popup window cannot have HTML elements added to it. You could do something like this http://www.codeproject.com/Tips/170049/Pure-HTML-CSS-Modal-Dialog-Box-no-JavaScript
I used those in a website and I liked them a lot, but I am not a fan of the css :target selector, so I opened it with Javascript instead, but it is pretty much the same thing.
I have an Ajax call that is run when a div is clicked. This displays a dynamic drop down menu. Below is the ajax call.
The drop down menu contains a list of other items that can be clicked to launch an "editor". The issue is that when I close the editor I request the user confirm they want to navigate away from the page, based on the answer the div will either close or remain open for further editing. Below is the code that launches the editor:
jQuery(function($){
var launchEditor = "#launch-editor-<?php echo $this->section_num; ?>";
var contentEditor = jQuery("#<?php echo $this->section_num; ?>-editor");
var closeEditor = "#<?php echo $this->section_num; ?>-editor-close";
var closeMessage = "Your changes will not be saved, are you sure you want to close without saving?";
jQuery(document).on("click", launchEditor, function(){
contentEditor.unbind();
contentEditor.show("fade", 1000);
contentEditor.draggable();
});
jQuery(document).on("click", closeEditor, function(){
if(confirm(closeMessage)){
contentEditor.fadeOut(1000);
//contentEditor.die("click");
} else {
}
});
});
The issue is as follows... If I click on the initial div more than once which launches the AJAX call, the "jQuery(document).on("click", closeEditor...)" function bubbles up in the DOM which poses a problem when the user decides to close the editor. Effectively the "confirm" message displays equal to the amount of times the original div is clicked. hope this makes sense... let me know if further info is required... cheers.
Following seemed to fix it.. thanks SCRAGAR for your suggestion:
closeEditor.one().bind("click", function(){
if(confirm(closeMessage)){
contentEditor.fadeOut(1000);
} else {
//do something
}
});
I'm using jquery to load my website content once its fully loaded. That works great.
jquery code
function check() {
$("#content").load('items.html');
}
$(document).ready(function() {
check();
});
html
<div id="content">
</div>
Is there a way without refreshing the whole page to dynamically load html element (div) when user clicks on one of the items which were already loaded('items.html')?. On one click I want to remove already loaded 'items.html' inside #content div and load new div from any.html file.
So basically, I need to show more info for that particular item by dynamically replacing already loaded items.html and adding new div instead.
I managed to load new html page by adding anchor tags on every item, but it would be much better if I could load only one part(div) of a html file and not a whole page, that way I can write all items informations in only one html file, and then add those div's dynamically when user clicks on any item.
function check() {
$("#content").load('items.html #loadable'); // #ID to load
}
$('#loadCont').click(check);
main page example
page 2 example
You might also want to put this somewhere
$.ajaxSetup({ cache: false });
https://api.jquery.com/jquery.ajaxsetup/
As seen from the demo, .load() does already content-replacement, so no need to .empty() or .html('') beforehand.
Simple.Try to call the check() function on clicking of the element
$('element').click(function(){
check();
});
On page1.php I have a click event that causes the user to be redirected to page2.php. It goes something like this:
$("#someButton").click(function() {
window.location = "page2.php";
});
And that works great. But what I really want is to open a hidden, UI-blocking <div> on page2. The user can already open this <div> manually by clicking another button on page2, that goes something like this:
$('#someOtherButton').click(function() {
$("#pageContainer").block({message: $("#theDivIWant2See")});
});
Can I make a click event from the JavaScript on one page call the JavaScript on another? Or will I need to add in some HTML-parsing to pass information between pages? (I'm not looking for a JavaScript hand-out here, just a strategy to help me move forward.)
When you redirect from the first page, add a querystring value in your url. and in the second page, using your server side page language, set in in a hidden field and in the document ready event check the value of that hidden field. If the value is expected, call a javascript function to show the popup.
Some thing like this
$("#someButton").click(function() {
window.location = "page2.php?showpopup=yes";
});
and in page2.php set it (forgive for errors, i am not a php guy)
<input type='<?php $_GET["showpopup"] ?>' id='hdnShow' />
and in the script
$(function(){
if($("#hdnShow").val()=="yes")
{
//Call here the method to show pop up
}
});
You need to do your stuff when DOM for page2 is ready. You can use jQuery's ready function for that.
$(document).ready(function() {
// put code for showing your div here
});
Hope that helps.
Could you pass a query string argument or assign a cookie that the other page could then check when the document loads? If the value exists then present a modal dialog (e.g. jQuery UI Modal Popup)
http://jqueryui.com/demos/dialog/