Develop Reference

show html formatted text inside jquery dialog box on dialog button click

I have a dialog box that is opened when field validation errors are found. I have successfully captured the html formatted text inside the jQuery dialog box. I have 3 buttons defined in the dialog box. Continue (close the dialog box), Show Fields (which should display the fielderrors html text) and Show Details (which should show error details)
Here is the HTML code from the Page
<div id="dialogpresubval" title="Pre-Submit Validation Errors" style="display:none">
<div id="fielderrors" style="display:none"> </div>
<div id="errordetail" style="display:none"> </div>
</div>
This is the code in the .js file within the Ready function
when I press the Submit button on the Main Form, I get back the presubfields and presubdetail variables. I know that part is working because the console.log lines show the right information.
For test purposes here you can use
var presubfields = "The following fields contain errors: <br> member status <br> member since";
$(function() {
$( "#dialogpresubval").dialog({
autoOpen: false,
hide: "puff",
modal: true,
closeOnEscape: false,
height:400,
width:450,
resizable: true,
draggable: true,
title: "Pre-Submit Validation Errors",
open: function() {
console.log("4119 - On Open presubfields is: " + presubfields); // I see the presubfields variable and its text;
// $("#fielderrors div").html(presubfields);
// $("#fielderrors", {html:presubfields});
},
buttons: [
{
text: "Continue",
click: function() {
var button = $(this).prop("id");
console.log("4127 You clicked on:", button);
$(this).dialog("close");
},
},
{
text: "Show Fields",
click: function() {
var button = $(this).prop("id");
// Show the Fields requiring correction - div id = fielderrors
//var field_errors = $('#dialogpresubval').attr('note_text');
console.log("4143 - presubfields = " + presubfields); // console shows the correct information;
//$("#fielderrors").append(presubfields);
//$("#fielderrors", {html:presubfields});
$("#fielderrors").text("presubfields should be shown");
// Used this to test for generic text - $("#fielderrors").text("presubfields should be shown");
// $("#fielderrors").val(presubfields);
//$("#fielderrors").prop('display', 'block');
$("#fielderrors").css({'display':'block'});
$("#errordetail").hide();
},
},
{
text: "Show Details",
click: function() {
// Show the Details of the errors - div id = errordetail
// presubfields presubdetail
$("#errordetail").val(presubdetail);
$("#errordetail").show();
$("#fielderrors").hide();
},
}
],
position: {
my: "center center",
at: "center center"
}
});
});
I left in the commented out fields so you could see what I've tried already. I can't get the presubfields or presubdetail to display in the appropriate div.
What I want is that when the Show Fields button is pressed, the presubfields html is shown and the same for the presubdetail.
Thanks for looking.

You were close with $("#fielderrors div").html(presubfields); but that is saying find a div element that is inside another element with an id of fielderrors. There is no such element in your HTML.
You can instead simply use only the id (ID's on elements should be unique) so it would be $("#fielderrors").html(presubfields); in the open function.
You now have the html in the proper div's so the next step is to either .show() and/or .hide() the elements when the corresponding buttons are clicked. An example below.
var presubfields = "The following fields contain errors: <br> member status <br> member since";
var presubdetail = "I am an example of an error detail.";
$(function() {
$("#dialogpresubval").dialog({
autoOpen: false,
hide: "puff",
modal: true,
closeOnEscape: false,
resizable: true,
draggable: true,
title: "Pre-Submit Validation Errors",
open: function() {
$("#fielderrors").html(presubfields)
$("#errordetail").html(presubdetail);
},
buttons: [{
text: "Continue",
click: function() {
var button = $(this).prop("id");
console.log("4127 You clicked on:", button);
$(this).dialog("close");
},
},
{
text: "Show Fields",
click: function() {
$("#fielderrors").show();
$("#errordetail").show();
},
},
{
text: "Show Details",
click: function() {
$("#fielderrors").hide();
$("#errordetail").show();
},
}
],
position: {
my: "center center",
at: "center center"
}
});
// show the modal
$( "#dialogpresubval" ).dialog( "open" );
});
<link href="https://code.jquery.com/ui/1.11.4/themes/black-tie/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div id="dialogpresubval" title="Pre-Submit Validation Errors" style="display:none">
<div id="fielderrors" style="display:none"> </div>
<div id="errordetail" style="display:none"> </div>
</div>

HTML form default action is running if jqueryui dialog div content change to original content

i am displaying html form inside jqueryui dialog and i am using jquery validation plugin to validate it.
Problem - when i submit form by changing content to original, default form action is running.
It is only happening if i change html content to original content before form closing.
Here is my code:
$(document).ready(function() {
var getOldForm = $("#send-pm-win").html();
$("#pmLink").click(function() {
$("#send-pm-win").dialog({
modal: true,
draggable: false,
resizable: false,
autoOpen: true,
buttons: [{
text: "Cancel",
click: function() {
$(this).dialog("close");
},
style: "outline: none;"
}],
close: function(event, ui) {
$("#send-pm-win").html(getOldForm);
$(this).dialog("destroy");
}
});
});
});

Jquery UI box - Takes more than 1 click to run

I am dynamically appending a <div> to the body of my webpage. This <div> does not exist on my .html page.
Within this <div> I am creating a Jquery UI YES NO box. Quite simply, it will 'do something' and close the box when YES, and just close the box when NO.
I have a working piece of code to create this box. However, frequently it takes two clicks of the YES button to work, which is very confusing. You'll see I have used a variety of methods to close the box.
$(function () {
$('body').append('<div id="dialog-confirm"></div>').click(function (e) {
e.preventDefault();
$("#dialog-confirm").dialog("open");
});
$("#dialog-confirm").dialog({
autoOpen: true,
height: 200,
width: 200,
modal: true,
title: 'Choose item?',
buttons:
{
'YES': function () {
$(this).dialog("close");
//$("#dialog-confirm").dialog("close");
//$('body').remove('#dialog-confirm');
$('#dialog-confirm').remove();
},
'NO': function () {
$(this).dialog("close");
//$("#dialog-confirm").dialog("close");
//$('body').remove('#dialog-confirm');
$('#dialog-confirm').remove();
}
}
});
});

The problem is that there is a race condition between your adding the div and attaching the click handler. Sometimes it happens before, sometimes after. That's why you get inconsistent click behavior. Try the following:
$(function() {
$('body').append('<div id="dialog-confirm"></div>');
$("#dialog-confirm").dialog({
autoOpen : true,
height : 200,
width : 200,
modal : true,
title : 'Choose item?',
buttons : {
'YES' : function() {
$(this).dialog("close");
// $("#dialog-confirm").dialog("close");
// $('body').remove('#dialog-confirm');
$('#dialog-confirm').remove();
},
'NO' : function() {
$(this).dialog("close");
// $("#dialog-confirm").dialog("close");
// $('body').remove('#dialog-confirm');
$('#dialog-confirm').remove();
}
}
});
$('#dialog-confirm').click(function(e) {
e.preventDefault();
$("#dialog-confirm").dialog("open");
});
});

jquery grabs the previous value instead of current one

I cannot make jquery to grab the current value of textarea. I have several posts and each of them has "write a review" button. When I select on the button of first post, it shows the dialog box with first post title and a textarea. When I write something in the appeared textarea and press submit, it alerts nothing. Then I am clicking the same button on the first post and it shows me dialog box with the title of second post and when I type something in the textarea and press submit, it alerts the text which I typed in the previous dialog box. Could you please have a look on my code and help me to find my mistake.
Here is my view:
$data = array(
'name' => $places_id,
'class' => 'review',
'content' => 'Write a Review'
);
echo form_button($data);
<div id="write_review">
<h3><?php echo $title; ?></h3>
<textarea rows='6' cols='90' maxlength='600' id="review_text"></textarea>
</div>
Here is my JS file:
$(document).ready(function () {
$(".review").click(function () {
var self = this;
var places_id_review = $(self).attr("name");
$("#write_review").dialog({
title: "Write a Review",
modal: true,
draggable: false,
width: 600,
height: 300,
buttons: [{
text: 'Submit',
click: function () {
var review_text = $("#review_text").val();
alert(review_text);
$.post('filter/post_review', {
places_id_review: places_id_review,
review_text: review_text
}, function (data) {
alert("ok")
}, "json");
}
}, {
text: 'Cancel',
click: function () {
$(this).dialog('close')
}
}]
});
});
});

It happens because there are duplicates of your dialog in DOM
at least you can get your value like this:
var review_text = $("#review_text", this).val(); //to prevent lookup in while DOM
But you better control your dialog's duplicates( using 'destroy' on close event 'close'):
$(".review").click(function () {
var self = this;
var places_id_review = $(self).attr("name");
$("#write_review").dialog({
title: "Write a Review",
modal: true,
draggable: false,
width: 600,
height: 300,
close:function(){ $(this).dialog('destroy'); }, // DELETE dialog after close
buttons: [{
text: 'Submit',
click: function () {
$(this).dialog('close'); // do not forget close after submit
var review_text = $("#review_text").val();
alert(review_text);
$.post('filter/post_review', {
places_id_review: places_id_review,
review_text: review_text
}, function (data) {
alert("ok")
}, "json");
}
}, {
text: 'Cancel',
click: function () {
$(this).dialog('close');
}
}]
});
});

jQuery dialog button how to set the click event?

Ok i got this code:
$(document).ready(
function() {
$(".dialogDiv").dialog({
autoOpen: false,
modal: true,
position: [50, 50],
buttons: {
"Print page": function() {
alert("Print");
},
"Cancel": function() {
$(this).dialog("close");
}
}
}
);
$('.ui-dialog-buttonpane button:contains("Print page")').attr("id", "dialog_print-button");
$(".dialogDiv").parent().appendTo($('form'));
}
How do I assign or set a new function to the click event?
$("#dialog_print-button"). ???
Edit, This works:
$("#dialog_print-button").unbind("click").click(
function () {
alert("new function that overide the old ones")
}
)
Tried to find how to do in the jQuery documentation but I think it's hard to find around in the documentation. Especially when new to javaScript and the jQuery libary.
Edit, A fast way to get help is to go to jQuery irc channel :D

I think this would help:
$(".dialogDiv").dialog("option", "buttons", {
"Print page": function() { /* new action */ },
"Cancel": function() { $(this).dialog("close"); }
});
Because buttons property sets all the buttons, you have to include cancel button handler.

$("#Print page").click(function () {
...
});
Or maybe it should be
$("#dialog_print-button").click(function () {
...
});

jQuery UI dialog buttons now supports the "id" attribute natively.
$("#dialog-form").dialog({
autoOpen: false,
height: "auto",
width: 300,
buttons:
[
{
text: "Create Revision",
id: "btnCreateRev",
click: function () {
//code for creating a revision
}
},
{
text: "Cancel",
id: "btnCancel",
click: function () { $(this).dialog("close"); },
}
]
});

You put the code within the button section:
...
buttons: {
"Print page": function() {
//here you execute the code or call external functions as needed
}
Once you click the button on the Dialog, that code is automatically invoked.
Therefore you insert there directly the code that implements your logic.