My goal: upon clicking a link, I want to load an external page (with a image upload form) into a jQuery UI Dialog and have it submitted AJAX style.
My problem: The dialog loads the external PHP page just fine and I'm able to submit the form via AJAX -- using the jQuery form plugin shown here http://jquery.malsup.com/form/ -- BUT for some reason the AJAX submission won't work inside the dialog box, only when I view the page directly. It simply loads the page itself as if the JS was turned off or something.
Here's the parent page displaying the dialog:
port_edit.php (header)
<script type="text/javascript" src="../common/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../common/js/jquery-ui-1.8.4.custom.min.js"></script>
<script type="text/javascript" src="../common/js/jquery.form.js"></script>
<script type="text/javascript">
function refreshWindow(){
location.reload(true);
}
$(document).ready(function() {
$('#gallery-display').each(function() {
var $link = $(this);
var $dialog = $('<div></div>')
.load($link.attr('href'))
.dialog({
autoOpen: false,
title: 'Gallery Display',
width: 280,
height: 280,
close: refreshWindow,
resizable: false
});
$link.click(function() {
$dialog.dialog('open');
return false;
});
});
});
</script>
port_edit.php (link)
Modify
And the external document loaded into the dialog:
image_upload.php
<script type="text/javascript" src="../common/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../common/js/jquery.form.js"></script>
<script type="text/javascript">
// wait for the DOM to be loaded
$(document).ready(function() {
// attach handler to form's submit event
$('#image-upload').submit(function() {
// submit the form
$(this).ajaxSubmit();
return false;
}); });
</script>
</head>
<body>
<form action="image_upload_action.php" method="post" enctype="multipart/form-data" name="portfolio-upload" id="image-upload">
<input type="file" name="file" id="file" />
<input type="submit" name="btn-submit" id="btn-submit" value="Upload" class="button"/>
<br />
</form>
HELP!
Would you want to try moving the code within the document.ready() in image_upload.php into the same function in the port_edit.php and try again? I am not sure this would work, but you could try that...
Like below:
port_edit.php
<script type="text/javascript" src="../common/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../common/js/jquery-ui-1.8.4.custom.min.js"></script>
<script type="text/javascript" src="../common/js/jquery.form.js"></script>
<script type="text/javascript">
function refreshWindow() {
location.reload(true);
}
$(document).ready(function() {
$('#gallery-display').each(function() {
var $link = $(this);
var $dialog = $('<div></div>').load($link.attr('href')).dialog({
autoOpen: false,
title: 'Gallery Display',
width: 280,
height: 280,
close: refreshWindow,
resizable: false
});
$link.click(function() {
$dialog.dialog('open');
return false;
});
});
// attach handler to form's submit event
$('#image-upload').submit(function() {
// submit the form
$(this).ajaxSubmit();
return false;
});
});
</script>
Modify
image_upload.php
<form action="image_upload_action.php" method="post" enctype="multipart/form-data" name="portfolio-upload" id="image-upload">
<input type="file" name="file" id="file" />
<input type="submit" name="btn-submit" id="btn-submit" value="Upload" class="button"/>
<br />
</form>
Related
I am trying to make div element screenshot, but combined with draggable jQuery, and have no luck, I can take screenshot of div and save it like png, but if I drag some elements on that div and then save screenshot I get only what is inside that div and draggable elements over that div? Any idea, this mine code so far
<script type="text/javascript" src="js/html2canvas.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script language="javascript">
$(document).ready(function() {
$("#myBtn").click(function () {
html2canvas($("#chartDiv"), {
onrendered: function (canvas) {
var imgSrc = canvas.toDataURL();
$("#myDiv").html('').show();
var url = "ajax.php";
$.post(url, {contentVar: imgSrc} ,function(data) {
$("#myDiv").html(data).show();
});
}
});
});
});
</script>
<script>
$(function() {
$( ".draggable" ).draggable();
});
</script>
I am using AJAX to save image and present in new element
AJAX.PHP
$contentVar = $_POST['contentVar'];
$filteredData=substr($_POST['contentVar'], strpos($_POST['contentVar'], ",")+1);
//Decode the string
$unencodedData=base64_decode($filteredData);
//Save the image
file_put_contents('img.png', $unencodedData);
echo "<img src="img.png">";
And here is the HTML:
<div id="chartDiv"><img src="img/assets/logo.png"></div>
<button id="myBtn">Create image</button>
<div id="myDiv"></div>
<img src="img/assets/logo.png" class="draggable" />
<img src="img/assets/logo.png" class="draggable" />
Why not disable the the draggalbe elements before taking the screenshot, then re-enabling them. This will remove the jquery_ui draggable elements and css.
I want to implement Nivoslider for a slideshow as well as jQueryUI pop-op boxes. When I implement them as separate entities, then the pop-up boxes stop working as they should.
Is there a way to implement them together, or is there a fatal error?
By the way, I am a complete noob when it comes to js - please be kind and spell things out for me please :D
This is the code for Nivoslider:
<script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="scripts/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect: 'fade', // Specify sets like: 'fold,fade,sliceDown'
animSpeed: 2000, // Slide transition speed
pauseTime: 6000, // How long each slide will show
});
});
</script>
and this is the code for jQuery UI pop-up box:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script>
$( "#dialog" ).dialog({ autoOpen: false });
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
</script>
My implementation based on the demo script provided with Nivo Slider, just add in jquery UI and use this code. It stores the slider information and re-creates the slider each time the dialog is opened.
HTML Code
<div id="wrapper">
dev7studios
<button id="btnTestMe">Open Slideshow</button>
</div>
<div id="dlgTestMe">
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="images/toystory.jpg" data-thumb="images/toystory.jpg" alt="" />
<img src="images/up.jpg" data-thumb="images/up.jpg" alt="" title="This is an example of a caption" />
<img src="images/walle.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" />
<img src="images/nemo.jpg" data-thumb="images/nemo.jpg" alt="" title="#htmlcaption" />
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is an example of a <em>HTML</em> caption with a link.
</div>
</div>
</div>
JQuery Code
$('#btnTestMe').click(function(e){
e.preventDefault();
$('#dlgTestMe').dialog({
open: function(){
var data = $('.slider-wrapper').html();
if (typeof($(this).data("slider")) == "undefined"){
$(this).data("slider", data);
}
$('#slider').nivoSlider();
}, beforeClose: function(){
$('#slider, .nivo-controlNav, .nivo-html-caption').detach();
$(this).children('.slider-wrapper').html($(this).data("slider"));
}
});
});
While their are plenty of posts regarding reloading a jQueryUI tab via the load method, I can't seem to make it work in 1.9+. I wish I could see a way to show this in a fiddle, but as I don't... note that the refresh button/function works every time in the following nested tabs set-up under 1.8+ but works only once under 1.9+, and fails after that. In context, (loading dynamic content via php under wordpress) it doesn't work at all. According to the ajaxStart()ajaxStop() function calls, an ajax call is made every time the refresh button is clicked, however the content (watch the date/time under tab E or tab A/sub parent E) is only reloaded on the first click of the #refresh button, which fails to re-load the tab content on subsequent clicks.
stye.css
div.clear { clear:both; }
#refresh { position: relative; top:-40px; left:300px; }
#loading
{ display:none;
position: absolute;
top:100px;
left:300px;
font-size: 200%;
z-index:1001;
border:3px solid green;
background:#ffffff;
}
tabs.js
jQuery(function()
{ set_tabs();
jQuery('body').on("click", "#refresh", function()
{ jQuery('.tabset ul li a').each(function()
{ var link = jQuery(this);
var tab = link.parent();
var tabset = link.closest('div.tabset');
if(tabset.is(':visible') && tab.hasClass('ui-state-active')) index = link.text().replace(/ /g, '_');
});
jQuery(".tabset").tabs( "load" , index );
});
jQuery("#loading").ajaxStart(function() {jQuery(this).show();});
jQuery("#loading").ajaxStop(function(){ jQuery(this).fadeOut(1500); });
});
function set_tabs()
{ jQuery('.tabset').tabs({ cache:true }); }
index.html
<!--script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/smoothness/jquery-ui.css" rel="stylesheet"-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet">
<script type="text/javascript" src="tabs.js"></script>
<link type="text/css" href="style.css" rel="stylesheet" />
<div id="parentTabSet" class="tabset">
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
<input type='button' id='refresh' value='refresh' />
<div id='loading'>Loading...</div>
<div id="A" class="tabset">
<ul>
<li>A_1</li>
<li>A_2</li>
<li>parent E</li>
</ul>
<div id="A_1"><p>A_1 - FOO</p></div>
<div id="A_2"><p>A_2 - BAR</p></div>
</div>
<div id="B"><p>Div B</p></div>
<div id="C"><p>Div C</p></div>
<div id="D"><p>Div D</p></div>
</div>
tabs_e.html
<script>
jQuery( function()
{ set_tabs();
var d = new Date();
jQuery('#E_1 p').text(d);
jQuery('#E_2 p').text(d);
});
</script>
<div class="tabset">
<ul>
<li>E_1</li>
<li>E_2</li>
</ul>
<div id="E_1"><p>E_1 - BAR</p></div>
<div id="E_2" class='clear'><p>E_2 - BAZ</p></div>
</div>
The .live() function has been deprecated for a while now, and support is completely gone in jQuery 1.9+. Use this:
$(document).on("click", "#refresh", function() {
// your current "live" code
});
So it turns out that not only has the cache option been deprecated in 1.9+ it's legacy behavior has been altered such that (if used) the load method will not reload the tab content.
The approach I've come up with is -- I think -- an abomination which I'm hoping some one might provide a cleaner alternative to. (oh pleeeaazzz!) Anyway, FWIW... here's what I came up with.
tabs.js (revisited)
jQuery(function()
{ set_tabs();
jQuery(document).on("click", "#refresh", function()
{ refresh = {};
refresh.tab = true;
jQuery('.tabset ul li a').each(function()
{ var link = jQuery(this);
var tab = link.parent();
var tabset = link.closest('div.tabset');
if(tabset.is(':visible') && tab.hasClass('ui-state-active')) index = link.text().replace(/ /g, '_');
});
jQuery(".tabset").tabs( "load" , index );
});
jQuery("#loading").ajaxStart(function() {jQuery(this).show();});
jQuery("#loading").ajaxStop(function(){ jQuery(this).fadeOut(1500); });
});
function set_tabs()
{ jQuery('.tabset').tabs(
{ beforeLoad: function( event, ui)
{ if(typeof refresh.tab =='undefined')
{ if ( ui.tab.data( "loaded" ))
{ event.preventDefault();
return;
}
ui.jqXHR.success(function() { ui.tab.data( "loaded", true );});
} else refresh={};
}
});
}
I would like to open a JQuery UI dialog when a user clicks on a link. So far I have this
<script>
//to hide the dialog box on loading
$j(function() {
$j( "#dialog" ).hide();
});
$('.button').click(function(){
$('#dialog').dialog('open');
});
</script>
<div id="dialog" title="Basic dialog">
<p>Dialog box</p>
</div>
The button
But the dialog won't open by clicking the link... Everything is included well.
EDIT
<script type="text/javascript" language="javascript" src="js/jquery-1.6.2.js"></script>
<script>
var $j = jQuery.noConflict();
</script>
<script type="text/javascript" language="javascript" src="js/ui/jquery.ui.core.js"></script>
<script type="text/javascript" language="javascript" src="js/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" language="javascript" src="js/ui/jquery.ui.dialog.js"></script>
<script type="text/javascript" language="javascript" src="js/ui/jquery.effects.core.js"></script>
Are you referencing jQuery and jQuery ui library? You can autohide when initializing:
$("#dialog").dialog({ autoOpen: false });
$('.button').click(function() {
$('#dialog').dialog('open');
});
Demo: http://jsfiddle.net/pxQ8j/
You can use this code for your purpose.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Dialog - Animation</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#opener" ).on( "click", function() {
$( "#dialog" ).dialog( "open" );
});
} );
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<form action="" method="post">
Name :- <input type="text" name="name" value="">
Email :-<input type="email" name="email" value="">
Submit:-<input id="dialog2" type="submit" onclick="myfuncation();" name="submit" value="save">
</form>
</div>
<button id="opener">Open Dialog</button>
<div id="dialog-message"></div>
</body>
</html>
<script type="text/javascript">
function myfuncation()
{
// Here is your ajax request to db related work.
var ajaxresponce = "Sucessfully Insert Form";
$('#dialog-message').html(ajaxresponce);
$( "#dialog-message" ).dialog();
}
</script>
Hope it helps you. Please let me know if you have any query.
Your problem is you are trying to access the dialogs open method even though you never created the dialog instance.
Just change your code to do:
$('#dialog').dialog()
If you read the docs: http://jqueryui.com/demos/dialog/, it spells that out for you, you will also see that it opens by default on the initial call.
Notification dialog function like alert().
function msgbox(text,buttontext) {
buttontext = buttontext || "OK"
$( "<div>" + text + "</div>" ).dialog({
dialogClass: "no-close",
buttons: [
{
text: buttontext,
click: function() {
$( this ).dialog( "close" );
$(this).remove();
}
}
]
});
}
call function
msgbox("test dialog");
or
msgbox("test dialog", "I agree");
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
}
/* Safari */
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
<title>jQuery UI Dialog - Animation</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#opener" ).on( "click", function() {
$( "#dialog" ).dialog( "open" );
});
} );
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<form action="" method="post">
Name :- <input type="text" name="name" value="">
Email :-<input type="email" name="email" value="">
<div id="test" class="loader"></div>
Submit:-<input id="dialog2" type="submit" onclick="myfuncation();" name="submit" value="save">
</form>
</div>
<button id="opener">Open Dialog</button>
<div id="dialog-message"></div>
</body>
</html>
<script type="text/javascript">
$( "#test" ).hide();
function myfuncation()
{
alert("hai");
// Here is your ajax request to db related work.
$( "#test" ).show();
//var ajaxresponce = "Sucessfully Insert Form";
//$('#dialog-message').html(ajaxresponce);
// $( "#dialog-message" ).dialog();
}
</script>
Good morning,
It appears that the jQuery UI Layout is resetting my options after a call to sizePane(). When I load the following into FireFox, then click the "Resize" button, the north pane suddenly becomes resizable, and the hotkeys are suddenly enabled again. Am I doing it wrong? Or is this a bug?
<html>
<head><title>Layout Test</title></head>
<link href="css/jquery-ui.custom.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.7.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.layout-1.2.0.js"></script>
<script language="JavaScript">
jQuery(document).ready(documentReady);
function documentReady(){
jQuery('body').layout({
defaults: {
applyDefaultStyles: true
},
north: {
enableCursorHotkey: false,
closable: false,
resizable: false
},
center: {
}
});
}
</script>
<body>
<div class="ui-layout-north">
North Pane
</div>
<div class="ui-layout-center">
Center Pane
<input type="button" value="Resize" onclick="jQuery('body').layout().sizePane('north',100);" />
</div>
</body>
OK, I believe I've found the solution. Calling jQuery('body').layout() a second time appears to replace my previous "layout" object with a brand new one, resetting all the options.
The solution is to maintain a reference to the original declaration and operate on that object, like so:
<html>
<head><title>Layout Test</title></head>
<link href="css/jquery-ui.custom.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.7.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.layout-1.2.0.js"></script>
<script language="JavaScript">
jQuery(document).ready(documentReady);
var myLayout;
function documentReady(){
myLayout = jQuery('body').layout({
defaults: {
applyDefaultStyles: true
},
north: {
enableCursorHotkey: false,
closable: false,
},
center: {
enableCursorHotkey: false,
closable: false,
}
});
}
</script>
<body>
<div class="ui-layout-north">
North Pane
</div>
<div class="ui-layout-center">
Center Pane
<input type="button" value="Resize" onclick="myLayout.sizePane('north',100);" />
</div>
</body>
</html>
Also, the "resizable: false" options have to be removed because otherwise the call to sizePane() will not have any effect.
You can add this option to pane:
animatePaneSizing: true