We Keep Coding

how to open a jquery-ui dialog from included page in php?

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.

Javascript TinyMCE and Tinybox2

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.

Get an alert box to popup at the jquery event $(document).ready in smarty template

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");
});

Unable to Display Model Dialog with JQuery-UI

I'm attempting to display a modal dialog as a test run before I try to perform a more difficult task. However, I seem to be doing something wrong as the code I copied from the demo site is not working when I set it up and run it locally.
Here is my source:
<html>
<head>
<script type="text/javascript" src="lib/jquery/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="lib/jquery/js/jquery-ui-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var $dialog = $('<div></div>')
.html('This dialog will show every time!')
.dialog({
autoOpen: false,
title: 'Basic Dialog'
});
$('#opener').click(function() {
$dialog.dialog('open');
});
});
</script>
</head>
<body>
<button id="opener">Press</button>
</body>
</html>
So far, I have primarily been thinking the problem may have been a relative path problem with the way I'm bringing in the external libraries. But I tried variations, and nothing changed.
I am still new to Javascript, so I may be doing some very noob-ish here. Any help would be appreciated. Thank you.

Here are some things you could try firstly add a link tag for the css
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css" type="text/css" rel="stylesheet"/>
secondly make sure that you have the dialog component selected in your custom ui js package.

$(document).ready(function() {
var $dialog = $('<div></div>').appendTo(document.body);
});

Simple Jeditable Problem

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.