I have a dialog box with two radio select options ‘exist’ and ‘upload’ and an ok button. When you click ok, depending on what radio button you have selected I want a different dialog box to show. I tried the code below so when you select ‘exist’ a box opens with the html id=chooseImage but I can’t get it to work.
How do I do this?
This is my code:
$(function() {
$( "#dialog-form" )
.dialog({
autoOpen: false,
title: "Add Images",
buttons: {"Okay": function() {$("#form").submit();
if($("#exist").is(":checked")) {
//need to add some code to show new dialog box;
$(this).dialog("close");
}
if($("#upload").is(":checked")) {
// need to add some code to show new dialog box;
// doesn't work $("#chooseImage").dialog( title: "hello");
$(this).dialog("close"); }
}},
//{"Cancel": function() { $(this).dialog("close"); }},
draggable: false,
resizable: false
});
$("#addImage")
.click(function() {
$( "#dialog-form" ).dialog("open");
});
});
});
'<div id="chooseImage">' self::chooseFromExisiting($dbr); '</div>'
When I load the page the functions chooseFromExisiting($dbr) and uploadImage() load with the page and you can see the HTML. getFormHtml() doesn’t and only shows when you click the ‘add image’ button. I want chooseFromExisiting($dbr) and uploadImage() also to only show when you select them and click the ‘okay’ button.
public static function fnAddImages(){
global $wgOut, $wgHooks, $wgUser, $wgRequest;
// import addimage javascript and css files
$wgOut->addScript('<script type="text/javascript" src="extensions/AddImages/addimages.js"></script>');
$wgOut->addScript('<script type="text/javascript" src="extensions/AddImages/js/jquery-1.7.1.min.js"></script>');
$wgOut->addScript('<script type="text/javascript" src="extensions/AddImages/js/jquery-ui-1.7.3.custom.min.js"></script>');
$wgOut->addScript('<link type="text/css" href="extensions/AddImages/css/blitzer/jquery-ui-1.7.3.custom.css" rel="Stylesheet" />');
$wgOut->addScript("<style>@import url( extensions/AddImages/style.css);</style>");
//Add Image button with popup onclick
$wgOut->addScript('<script type="text/javascript">
( function($) {
$(document).ready(function() {
$(function() {
//var exist = $( "#exist" );//var upload = $( "#upload" );
$( "#dialog-form" )
.dialog({
autoOpen: false,
title: "Add Images",
buttons: {"Okay": function() {$("#form").submit();
if($("#exist").is(":checked")) {
$(this).dialog("close");
$("#chooseImage").dialog("open");
$("#chooseImage")
.dialog({
autoOpen:false,
title: "Choose from existing Images",
draggable: false,
//resizable: false,
height: "auto",
width: 460
});
};
if($("#upload").is(":checked")) {
$( "#chooseImage" ).hide();
$(this).dialog("close");
$("#uploadImage").dialog("open");
$("#uploadImage")
.dialog({
autoOpen:false,
title: "Upload Image",
height: "auto",
width: 460
});
};
}},
});
$("#addImage")
.click(function() {
$( "#dialog-form" ).dialog("open");
});
});
});
} ) ( jQuery );
</script>');
//add from exisiting
$wgOut->addHTML('<div id="chooseImage">');
$out = self::chooseFromExisiting($dbr);
$wgOut->addHtml($out);
$wgOut->addHTML('</div>');
//upload image
$wgOut->addHTML('<div id="uploadImage">');
$form = self::uploadImage();
$wgOut->addHtml($form);
$wgOut->addHTML('</div>');
//form
$wgOut->addHTML('<div id="dialog-form">');
$form = self::getFormHtml();
$wgOut->addHtml($form);
$wgOut->addHTML('</div>');
$wgOut->addHTML('<button id="addImage">Add Image</button>');
//retun true to run hook function
return true;
}
public static function getFormHtml(){
global $wgOut;
$wgOut->addHTML('<form>
<input type="radio" name="addimage" value="exists already" id="exist"> Choose from Exisiting
<br />
<input type="radio" name="addimage" value="upload now" id="upload"> Upload your Own
</form>');
}
public static function chooseFromExisiting( $dbr ){
global $wgOut;
$wgOut->addScript('<script type="text/javascript">
( function($) {
$(document).ready(function() {
$(function() {
$( "#alignment" )
.dialog({
autoOpen: false,
title: "Align Images",
//draggable: false,
resizable: false,
buttons: {"Okay": function() {$(this).dialog("close");}},
});
$("#imageSetting")
.click(function() {
$( "#alignment" ).dialog("open");
});
});
});
} ) ( jQuery );
</script>');
$wgOut->addHTML('<div id="alignment">');
$form = self::alignment();
$wgOut->addHtml($form);
$wgOut->addHTML('</div>');
//$wgOut->addHTML('<button id="imageSetting">Add</button>');
$dbr = wfGetDB( DB_SLAVE );
$results = $dbr->query("SELECT DISTINCT img_name, img_description, img_width, img_height, img_user_text, img_timestamp
FROM wiki_image
ORDER BY img_timestamp ASC
");
$uploaded = array();
while( $row = $dbr->fetchObject( $results ) ) {
$uploaded[] = array( $row->img_name, $row->img_width, $row->img_height, $row->img_user_text, $row->img_description);
}
$wgOut->addHtml('<table><tr><td></td><th>Name</th><th>Thumbnail</th><th>Dimensions</th><th>User</th><th>Comment</th></tr>');
foreach($uploaded as $upload){
$wgOut->addHTML('<tr><td><button id="imageSetting">Add</button></td><td>');
$wgOut->addHTML($upload[0]);
$wgOut->addHtml('</td><td>');
$wgOut->addHtml('thumnail image');
$wgOut->addHtml('</td><td>');
$wgOut->addHTML($upload[1]);
$wgOut->addHTML('x');
$wgOut->addHTML($upload[2]);
$wgOut->addHtml('</td><td>');
$wgOut->addHTML($upload[3]);
$wgOut->addHtml('</td><td>');
$wgOut->addHtml('comment');
$wgOut->addHtml('</td><td>');
}
$wgOut->addHtml('</table>');
}
public static function alignment(){
global $wgOut;
$wgOut->addHtml('<form>');
$wgOut->addHtml('<table>');
// image setting
$wgOut->addHTML( "<tr><td>Image Setting </td></tr>" );
$wgOut->addHTML( "<tr><td><input type=\"text\" value=\"400x400\" id=\"size\" size=\"23\" maxlength=\"12\" onkeyup=\"createMarkup(this)\" onmouseout=\"createMarkup(this)\"/> px (width x height)</td></tr>" );
// radio buttons for alignment left/center/right
$wgOut->addHTML( "<tr> <td>Alignment: </td> </tr>" );
$wgOut->addHTML( "<tr><td>");
$wgOut->addHTML( "<input type=\"radio\" id=\"left\" name=\"position\" value=\"left\" onchange=\"createMarkup(this)\"/>left" );
$wgOut->addHTML( "</td><td>");
$wgOut->addHTML( "<input type=\"radio\" id=\"center\" name=\"position\" value=\"center\" onchange=\"createMarkup(this)\"/>center" );
$wgOut->addHTML( "</td><td>" );
$wgOut->addHTML( "<input type=\"radio\" id=\"right\" name=\"position\" value=\"right\" checked=\"checked\" onchange=\"createMarkup(this)\"/>right" );
$wgOut->addHTML( "</td></tr>" );
$wgOut->addHTML( "<tr><td>" );
//wgOut->addHtml('<input type="submit" value="OK" name="" id=""/> <input type="button" value="Cancel" class="close" />');
$wgOut->addHTML( "</td></tr>" );
$wgOut->addHtml('</table>');
$wgOut->addHtml('</form>');
}
public static function uploadImage(){
global $wgOut;
$wgOut->addHtml('Upload an Image from your computer');
}
This will not work indeed because of syntax error:
$("#chooseImage").dialog( title: "hello");You should check the console for any errors.You need to encapsulate the parameters within
{}brackets:$("#chooseImage").dialog({title: "hello"});