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.
Related
I am trying to create a full page interface using the excellent jQuery UI Layout plugin.
but unfortunately west side unable to resize with mouse which i have mentioned in below image. i am not able to find any solution for it.
Below is my code which i used:
<div class="ui-layout-west">
<%#include file="abc.jsp"%>
</div>
Below is my sample image of west pane.
I found a solution, It looks like you have to include js for jquery ui. you can then set resizable option like below according to your need.
<html>
<head>
<script src="jquery-latest.js"></script>
<script type="text/javascript" src="jquery-ui-latest.js"></script>
<script src="jquery.layout-latest.js"></script>
<script>
$(document).ready(function () {
$('body').layout({
applyDefaultStyles: true,
resizable: true,
east__resizable:false,
north__resizable:false,
south__resizable:false,
});
});
</script>
</head>
<body>
<div class="ui-layout-center">Center</div>
<div class="ui-layout-north">North</div>
<div class="ui-layout-south">South</div>
<div class="ui-layout-east">East</div>
<div class="ui-layout-west">West</div>
</body>
</html>
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.
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.
So excuse me for being really new to this....but I shall try my best to detail the prob.
I have a script running on page for fancybox which is this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="css/jquery.fancybox.css?v=2.0.4" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.fancybox.pack.js?v=2.0.4"></script>
<!-- Optionaly add button and/or thumbnail helpers -->
<link rel="stylesheet" href="css/jquery.fancybox-buttons.css?v=2.0.4" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.fancybox-buttons.js?v=2.0.4"></script>
<link rel="stylesheet" href="css/jquery.fancybox-thumbs.css?v=2.0.4" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.fancybox-thumbs.js?v=2.0.4"></script
ul class="list">
<li>
<a class="various fancybox.iframe" href="http://www.topholidayrecipes.com">Iframe</a>
</li>
</ul>
<script type="text/javascript">
$(document).ready(function() {
$(".various").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
});
</script>
NOW PROB IS THIS SCRIPT -->
* This script causes my drop down menu (that uses cufon replace function) to be static. And I need this script for the fancy box, but adding this disables the animation affect of the drop down.
The buttons located at the top right of the page works originally at: www.topholidayrecipes.com
And here is a page that uses the fancy box (link located in the recipes box named "iframe") but here the menu is static: http://topholidayrecipes.com/artichokes-recipes.html
Please help me with this.....I will be very grateful : )
You have a little bug in your js code:
._shadowBox()
that is creating this error:
Error:
shadowBox is not a function
Source File: http://topholidayrecipes.com/artichokes-recipes.html
Line: 717
and that breaks the rest of your js code (the animation affect of the drop down included).
Maybe you forgot to delete that line after unloading shadowbox and moving to fancybox
yes i tried by removing those lines of codes, but i discovered i dont need those codes anyways. what i discovered is this line of code in particular that seems to cause problems directly with the drop down:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
i have even downloaded the javascript from google directly and called it in my page another way using:
<script type="text/javascript" src="js/jquery.google.js"></script>
they both run the same thing and the fancy box works as it should. but i noticed that it is this particular line used for the fancybox that's causing problem with my dropdown menu. as soon as i remove this line of code the drop down works!
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);
});