I am using [tinyMCE][1] and [tinybox2][2] i can get both to work independently but what i am tryng to achieve is that i click on edit button tinybox2 opens the url with the relevant id string on the page the link opens up this has tinyMCE on it with the update form, but i dont understand why tinymce does not load within the popup.
Is there a way to allow javascript to go to this popup of tinybox? or why is it preventing more javascript to load?
Thanks for any help :D
I have done this so far:
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
get test.php content via $.ajax(); -no idea on this one-
<p><a class="Forumusername" onclick="TINY.box.show({url:'test.php',width:750,height:300})">CLICK ME</a>
reinit TinyMCE editor with tinyMCE.init call. -i dont know how to implement this either-
Edited links but question is answered.
I'm not good in updating old code, so I will rewrite it completely. That's content of two my files test.php and edit.php:
test.php
<!doctype html>
<link rel="stylesheet" href="js/tinybox2/style.css" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript" src="js/tinybox2/tinybox.js"></script>
<script type="text/javascript">
$(function(){
$('#open_editor').click(function(){
$.get(this.href).done(function(html){
TINY.box.show({
html: html,
width: 500,
height: 400,
openjs: function(){
tinyMCE.init({ mode: 'textareas', theme: 'advanced' });
}
});
});
return false;
});
tinyMCE.init({ mode: 'textareas', theme: 'advanced' });
});
</script>
<a id="open_editor" href="edit.php">Open editor</a>
<textarea></textarea>
edit.php
<textarea name="body" rows="10" cols="50"></textarea>
Correct paths to stylesheets and scripts before running test.php.
These scripts are checked and tested.
Related
I have a problem using jquery-ui dialog with php. I'm begginer to jquery. I tried to solve it my self but I couldn't.
I have "index.php" as home page to my website:
index.php:
<?php include "includes/header.php"; ?>
<?php include "includes/config.php"; ?>
<?php include "includes/right_side_bar.php"; ?>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/wow.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/slick.min.js"></script>
<script src="assets/js/custom.js"></script>
<script src="assets/js/dropdown.js"></script>
<script type="text/javascript" src="assets/js/ajax.js"></script>
</body>
</html>
I referenced all the related jquery-ui scripts, also the style sheets (which are exists in the "header.php").
in the index.php I included "right_side_bar.php", which has a button that call jquery-ui:
right_side_bar.php:
<link rel="stylesheet" href="./assets/css/general.css">
<link rel="stylesheet" href="./assets/js/jqueryui/jquery-ui.css">
<link rel="stylesheet" href="./assets/js/jqueryui/jquery-ui.min.css">
<link rel="stylesheet" href="./assets/js/jqueryui/jquery-ui.theme.css">
<script type="text/javascript" src="assets/js/jqueryui/external/jquery/jquery.js"></script>
<script type="text/javascript" src="assets/js/jqueryui/jquery-ui.js"></script>
<script type="text/javascript" src="assets/js/jqueryui/jquery-ui.min.js"></script>
<script type="text/javascript" src="assets/js/validation.js"></script>
<div class="right_sidebar">
<div class="single_widget">
<h2 id="welcomeLogin">Login Page</h2>
<form id="loginForm" action="" method="post">
<div class="form-group text-center">
<span class="input-group-btn">
<a id="clickform" name="login" class="btn btn-primary">login</a>
</span>
</div>
</form>
<div id="container"></div>
</div>
</div>
what I need when I click on that button which exists in "right_side_bar.php" is to make jquery-ui fires and create the dialog
validation.js:
$(document).ready(function(){
$("#container").hide();
$("#clickform").click(function(){
$("#container").load("includes/update_user_info.php #customForm",function(rt,ts,xhr){
if(ts == "error")
alert("ERROR!!!!!!");
else
alert("Success!!");
});
alert("Done..!!");
$("#container").attr('title','Registration Form').dialog({width:600, height:600, closeOnEscape: true, draggable: true, resizable: false, show:'fade',modal:true});
});
});
the "#container" is a "div" tag which exists in the main page (index.php), this "div" will hold the form tag that came from "update_user_info.php".
when I run the code everything works fine, even the alerts are displayed, but the "jquery-ui dialog" never displayed.
I forgot to mention that I made "index2.php" and copied the "right_side_bar.php" into "index2.php" (I mean without including it) and the dialog works correctly without any problem. but I need that code to be included.
I know I wrote very much, but I want you to guide me if I made something wrong with this code.
any help will be appreciated, thanks in advance.
One thing that pops out at me is that you have jquery-ui included twice:
<script type="text/javascript" src="assets/js/jqueryui/jquery-ui.js"></script>
<script type="text/javascript" src="assets/js/jqueryui/jquery-ui.min.js"></script>
You should only include it once, I would recommend you use the jquery-ui.min.js minified version only as it is a smaller payload, and remove jquery-ui.js.
Other than that are you seeing any errors in your console?
Alternatively if you need an external jquery-ui to verify you can try:
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
I would suggest a few changes.
Working example: http://jsfiddle.net/Twisty/km3zx1pt/
jQuery
$(function() {
$("#container").dialog({
autoOpen: false,
width: 600,
height: 600,
closeOnEscape: true,
draggable: true,
resizable: false,
show: 'fade',
modal: true
});
$("#clickform").click(function() {
// Example Code to test loading HTML content from remote source
// Replace with .load() and your own URL
$.post("/echo/html/", {
html: "<h2>ALL YOUR BASE ARE BELONG TO US.</h2>"
},
function(d) {
$("#container").html(d);
$("#container").dialog("option", "title", 'Registration Form')
.dialog("open");
});
});
});
In this way, we initialize the dialog with all our settings up front. We collect the Form data or HTML and add it to the Dialog container. We then update the title and open the dialog for viewing.
It all appears to work here, but I do not have all the extra scripts you're eluding to in your post. There could be a conflict.
My javascript isn't currently working. I guess while I'm at it, is there any programs that I can use that can essentially give me errors made so that I am able to trouble shoot myself?
Javascript...
<script type="text/javascript" src="/js/jquery-ui.min.js">
$(document).ready(function() {
$(".button").click(function(){
$("#ticketTable").fadeOut( 'slow', function(){
});
});
});
</script>
Button used to fadeout...
<button class="button">Respond</button>
HTML That I want to fade out...
<div id="ticketTable">
<table border="1" width="1000" class="transparent">
<tr><th width="15%">Ticket</th><th width="15%">Queue</th><th width="15%">Severity</th><th width="15%">Created</th><th width="15%">Creator</th><th width="25%">Subject</th></tr>
</table></div>
Your code seems fine but the way you are including your .JS file (and later initializing behaviour) seems incorrect.
Try adding this to your page's <head> tag, and change your JS <script> tag like this:
<head>
<script type="text/javascript" src="/js/jquery-ui.min.js"></script>
<!--other script and also external css included over here-->
<script type="text/javascript">
$(document).ready(function() {
$(".button").click(function(){
$("#ticketTable").fadeOut( 'slow', function(){
});
});
});
</script>
</head>
DEMO: JS Fiddle
I just can't figure this one out. The Dialog Box doesn't popup. I've tried all sorts of things but it just doesn't work. Here's my code:
<head>
<script type="text/javascript" src="/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.8.20.custom.min.js"></script>
</head>
<body>
<script>
$(function() {
// Dialog
$('#dialog').dialog({
autoOpen: false,
width: 600,
buttons: {
"Ok": function() {
$(this).dialog("close");
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
// Dialog Link
$('#dialog_link').click(function(){
$('#dialog').dialog('open');
return false;
});
});
</script>
Open Dialog
<div id="dialog">This should popup</div>
</body>
What's wrong here? Any help appreciated.
Try to use this it might be work.
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
Where is jquery.ui.dialog.js in this scode?????
Please add this file into code as script tag....
you can put this JS file from here :
http://jqueryui.com/ui/jquery.ui.dialog.js
<script></script> is not enough. Should be <script type="text/javascript"></script>
I think the script tag just after body missing type="text/javascript". ie. <body><script type="text/javascript">...
You have to include the script block after the
Open Dialog
<div id="dialog">This should popup</div>
block just before the body element and it should work.
You have to include also all the styling of the jQuery UI so that it looks nicer.
I have a same problem.
It is probably a compatibility issue, try including the below instead of what you have
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.22/jquery-ui.min.js" type="text/javascript"></script>
Also to display the dialog properly, replace jquery-ui-1.8.xx.custom.css to match the jquery-ui.min.js version, I could not find a google ajax link.
I want to find an alternative solution but no idea if I can find one.
I'm juuuuuust trying to get an pop up displaying test when the document is ready. I've managed to get google maps working on another page but somehow this is a lot of pain.
Here's the code:
<html>
<head>
[...]
<script type="text/javascript" href="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
{literal}
<script type="text/javascript">
$(document).ready(function () {
alert ("test");
});
</script>
{/literal}
</head>
[...]
</html>
What should I do to get that popup message? I also tried copy pasting from my working jquery page without much success.
Changing <script href=...> to <script src=...> works like a charm for me.
Does you javascript is enabled in your browser ?
You can type this:
$(function() {
alert("test");
});
I just started with Jeditable and for 3 hours now it seems I can't figure it out. This tutorial should have been piece of cake:
http://www.appelsiini.net/projects/jeditable
, but it turned out to be a little pain in the a$$. I've put the jquery.js and jquery.jeditable.js in the same directory with the main page. This is my code (it seems like the code tags won't do the trick, so I'll give you only the important blocks):
the header contains
<script type="text/JavaScript"
src="jquery.js"></script>
<script type="text/JavaScript"
src="jquery.jeditable.js"></script>
<script type="text/JavaScript"
$(document).ready(function() {
$('.edit').editable('#');
});
and the body of my html contains:
<div class="edit" id="div_1">Edit me</div>
And that's about it. It should give me an editable form when I click the "Edit me", but nothing happens. Where do I go wrong ? Thanks in advance.
I don't know if this is a typo in the question or your actual code but check this line:
<script type="text/JavaScript"
$(document).ready(function() {
$('.edit').editable('#');
});
it should be
<script type="text/JavaScript">
$(document).ready(function() {
$('.edit').editable('#');
});
</script>
Are you trying to send the ajax to the same page you are on? If so, replace the '#' with window.location.href and you should be good to go.