I've got the following code on my editRecords.php page. This page is a table of records and when I cick the view link it opens a dialog box with the displayRecord.php page in it. The problem is if I open the last record in the table instead of the dialog box opening/closing and the editRecords.php page remaining as is, it appears to reload which takes me back to the top of the page.
$(document).ready(function() {
//creating a dialog box
var dlg=$('#ticketDetails').dialog({
title: 'Ticket Details',
resizable: false,
autoOpen:false,
modal: true,
hide: 'fade',
width: 1300
});
//loading dialog box with record
$('a.view').click(
function(e)
{
dlg.load('displayRecord.php?id='+this.id, function(){
dlg.dialog('open');
});
});
});
I have tried using e.preventDefault() but this causes the dialog box to load with focus in the middle instead of the top.
function(e)
{
//tested here e.preventDefault();
dlg.load('displayRecord.php?id='+this.id, function(){
dlg.dialog('open');
});
//tested here e.preventDefault();
How can fix/adjust this behaviour?
Thanks.
CLARIFICATION:
e.preventDefault() works but the problem is it causes the dialog to load with the focus in the middle. I have no problem opening or closing the dialog. I just want to stop the base page(editRecords.php) from reloading (or what appears to be like a page reload) so that when I close the dialog I see the record I clicked instead of having to scroll down again.
Let us see how to load content dynamically inside this Dialog
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Load Page Dynamically inside a jQuery UI Dialog</title>
<link rel="Stylesheet" type="text/css" href="
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css
" />
<script type="text/javascript" src="
http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js">
</script>
<script type="text/javascript" src="
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js">
</script>
<script type="text/javascript">
$(function () {
$('<div>').dialog({
modal: true,
open: function ()
{
$(this).load('Sample.htm');
},
height: 400,
width: 400,
title: 'Dynamically Loaded Page'
});
});
</script>
</head>
<body>
</body>
</html>
As you can see, we are creating a div element on the fly and specifying a callback for the open event, which loads the content of the page ‘Sample.htm’ dynamically.
Opening and closing the dialog multiple times will not remove the dialog from the page. If you want to implement the close event, use this code in the dialog options (untested code):
close: function(e, i) { $(this).close(); }
That’s all!
Related
I am somehow new to jQuery and is going through some code of a project.
The existing jQuery looks like this and this pops up a modal of confirmation upon delete:
{% for profile in profiles %}
$("#delete_{{ profile.id }}").mousedown(function(event){
let action = "deleteprofile"
$.confirm({
title: 'Delete',
content: 'Are you sure?',
buttons: {
confirm: function () {
submit_to_modal({
'profile_id': "{{ profile.id }}"
},
action)
},
cancel: function () {
$.alert('cancel');
}
}
});
})
{% endfor %}
I think this project uses jquery-confirm after searching for similarities in the code, I read about it here: https://craftpip.github.io/jquery-confirm/ it can also be found here: How to display a confirm box before submitting a form using jquery confirm?
So upon the click of a button in the html. e.g
<button id="delete_{{ profile.id }}">Delete</button>
The jQuery will be triggered producing a confirmation. After confirmation the deleteprofile action which is from the views of the backend will be triggered and it will make the DELETE request.
However, I want to be able to make an edit modal from this.
Where an item from a list of items, such as profiles when clicked will produce a modal.
I searched for it and found these resources:
Bootstrap: Modal dialog for editing data dynamically
Jquery .on() submit event
But all of them don't receive the which will trigger the specific item. For example, I only want to edit, profile-001, but it can't be done with these samples. I already tried them and the modal didn't pop out.
I found this: How to make an "Edit User" form inside Bootstrap Modal using JQUERY?
But this is on PHP, I am using only jinja for this. I also couldn't replicate this on the html as I am fairly new to frontend stuff.
How do you usually add input fields to modals in jinja, or in jQuery in this case? I want to be able to pop out a modal which will have input values, which will be received by jQuery per item.
Any source to what I want to find is also welcome, I have been scanning four hours already and tried testing it but I can't get a modal to pop up except for the deletion modal.
Use jQuery-ui cdn, Here is the code for dialog.
ConfirmDialog('Are you sure'); //need to call this function with click, "Are you sure"
message passed with function
ConfirmDialog('Are you sure');
function ConfirmDialog(message) {
$('<div></div>').appendTo('body')
.html('<div><h6>' + message + '?</h6></div>')
.dialog({
modal: true,
title: 'Your Title...',
zIndex: 10000,
autoOpen: true,
width: 'auto',
resizable: false,
buttons: {
Confirm: function() {
$('body').append('<h3>Confirm Dialog Result: <b>Confirm</b></h3>');
$(this).dialog("close");
},
Cancel: function() {
$('body').append('<h3>Confirm Dialog Result: <b>Cancel</b></h3>');
$(this).dialog("close");
}
},
close: function(event, ui) {
$(this).remove();
}
});
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
I am using Readmore.js on my website to shorten text.
<div id="TEST">THIS IS A TEST THIS IS A TEST THIS IS A TEST</div>
<script>
$('#TEST').readmore({
speed: 250,
maxHeight: 10,
moreLink: 'Read More',
lessLink: 'Read Less'
});
</script>
For some reason if I take this code and paste it directly on my page, it executes just fine. However, if I place this EXACT same code verbatim on a bootstrap 3 modal, it doesn't work. Any ideas why?
I suggest attaching readmore function when the modal actually gets showed, using show.bs.modal event.
Try this:
$(document).ready(function () {
$('#myModal').on('shown.bs.modal', function (e) {
$('#test').readmore({
// your options here...
});
});
});
I have a form with drop-down hierarchical fields with functionality derived from a JavaScript plugin called mcDropdown jQuery Plug-in.
The actual form is on a secondary page (Test.php) and set up to display on the main page through a Colorbox popup with the results also displayed in the Colorbox upon form submission.
The form submits and displays correctly in the Colorbox in its native HTML format when the JavaScript is removed (i.e. just using plain drop-down boxes).
However, when the Javascript is implemented in the form allowing the hierarchial drop-down structure of the fields there is no JS functionality when rendered through Colorbox.
Since the actual page that the form is on (Test.php) works fine by itself with the Javascript, there appears to be some issue rendering the JS through the Colorbox.
My research has indicated that this may be due to trying to access an element before it has been loaded into the document.
The Colorbox website states that this can be resolved by moving the JavaScript into ColorBox's onComplete callback; however, even with the example given, I cannot figure out how to do this correctly as I am a complete novice when it comes to JS.
Here is the drop-down script on the secondary page that has the form and ties into the external plugin (note that there are three fields in this form that use this JS hierarchical configuration):
<script type="text/javascript">
$(document).ready(function (){
$("#category").mcDropdown("#categorymenu",
{
targetColumnSize: 3,
}
);
$("#category1").mcDropdown("#categorymenu1",
{
targetColumnSize: 3,
}
);
$("#category2").mcDropdown("#categorymenu2",
{
targetColumnSize: 3,
}
);
});
</script>
Here is the Colorbox script on the main page that opens the secondary page in the Colorbox window:
<script type="text/javascript"> <!--<Check-Out Colorbox Script>-->
jQuery(function(){
jQuery('#link_content').colorbox({opacity:0.3, height:"100%", scrolling: false, onComplete: function(){
link_content_submit();
}});
});
function link_content_submit()
{
jQuery("#pre-process").submit(function(){
jQuery.post(
jQuery(this).attr('action'),
jQuery(this).serialize(),
function(data){
jQuery().colorbox({html: data, onComplete: function(){
link_content_submit();
}});
}
);
return false;
});
}
</script>
The three external files are: jquery.mcdropdown.js, jquery-1.2.6.min.js and jquery.bgiframe.js.
How can this Colorbox script on the main page be modified so the JS functionality of the form is preserved when displayed through Colorbox?
Thank you in advance for any detailed answers for this beginner.
Here is the answer:
<script type="text/javascript"> <!--<Check-Out Colorbox Script>-->
jQuery(function(){
jQuery('#link_content').colorbox({opacity:0.3, height:"100%", scrolling: false, onComplete: function(){
link_content_submit(), $('#category').mcDropdown('#categorymenu'),$('#category1').mcDropdown('#categorymenu1'),$('#category2').mcDropdown('#categorymenu2');
}});
});
function link_content_submit()
{
jQuery("#pre-process").submit(function(){
jQuery.post(
jQuery(this).attr('action'),
jQuery(this).serialize(),
function(data){
jQuery().colorbox({html: data, onComplete: function(){
link_content_submit();
}});
}
);
return false;
});
}
</script>
The respective JavaScript functions for each drop-down box in the JS form are integrated into the Colorbox onComplete: function() so each of these form elements is loaded before it is accessed through Colorbox.
Using ASP.NET MVC 4, jQuery 1.6.2, jQuery UI 1.8.11. Currently debugging in Firefox 16.0.2.
I am trying to make this thing work so I have a reusable jQuery UI modal dialog with autoOpen: false which gets opened from the main page. So far so good. That reusable jQuery UI dialog will open a new modal dialog which is later destroyed and created again whenever needed (I tried to make the other one reusable too but I failed, it kept appearing as a div on the first dialog, not as a new separate dialog as it should so eventually I decided to create it every time I need it).
When I first open the first dialog, I can open and close the second dialog without problems. However the problem occurs when I close the first dialog and open it again. It behaves as it has as many dialog placeholder divs as the number of times I have opened the first dialog. Although I am pretty sure I destroy the second dialog AND remove the placeholder div every time I close it.
I have put the dialog code into the /Views/Shared/_Layout.cshtml file and that layout file is referenced by the main page. For those who are not familiar with ASP.NET MVC, the layout file is a shared file which contains header, footer and other html elements which define the layout of the web page, so that you can reference it from any View in your web site. So the layout is infact rendered along with any View which references that layout.
Here is the (pseudo) code in my layout file:
<html>
<head>
<script type="text/javascript">
$.ajaxSetup({ cache: false });
$(document).ready(function () {
$("#veliki").dialog({
close: function () {
$("#veliki").html("");
$("#maleni").dialog("destroy");
$("body").find("#maleni").remove(); /* a desperate attempt to remove ALL divs which hold the 2nd dialog, was just: $("#maleni").remove(); */
},
modal: true,
height: 600,
width: 800,
left: 0,
autoOpen: false
});
$(".openDialog").live("click", function (e) {
e.preventDefault();
$("#veliki").load($(this).attr('data-url'));
$("#veliki").dialog("open");
});
});
</script>
</head>
<body>
<div id="veliki"></div>
#RenderBody(); <!-- The ASP.NET MVC view gets rendered here -->
</body>
</html>
The code related to the second dialog is placed in one of the views which reference another layout (the layout which does not contain any jQuery code). The code in that View looks like this:
<script type="text/javascript">
$(document).ready(function () {
$(".openSubDialog").live("click", function (e) {
e.preventDefault();
$('<div id="maleni"></div>')
.appendTo("body")
.dialog({
close: function () {
$("#maleni").dialog("destroy");
$("#maleni").remove();
$("body").find("#maleni").remove(); /* delete them all. but where did "they" appear from?! */
},
modal: true,
height: 450,
width: 600,
left: 0
})
.load($(this).attr('data-url'));
});
});
</script>
To sum it up:
I open the #veliki dialog by clicking a link in the main page.
I create and open the #maleni dialog by clicking a link in the first dialog.
I close the #maleni dialog, destroying it and removing the #maleni div.
I close the #veliki dialog.
I open #veliki dialog by clicking another link in the main page.
I create and open the #maleni dialog which magically appears two times now (as seen in FireBug).
I slam the wall with my head which doesn't solve anything.
Anyone with an idea?
Why don't you use already existing window but with varying content? I have created a fiddle with this functionality : http://jsfiddle.net/scaillerie/wEX42/ .
The main point is that you don't have to handle the close event of your #maleni window : you only close it with $("#maleni").dialog("close"); and when you again need it, you re-open it : $("#maleni").dialog("open");.
An example of implementation in your case can be the following :
Layout page :
<html>
<head>
<script type="text/javascript">
$.ajaxSetup({ cache: false });
$(document).ready(function () {
$("#veliki").dialog({
close: function () {
$("#maleni").dialog("close");
},
modal: true,
height: 600,
width: 800,
left: 0,
autoOpen: false
});
$("body").delegate(".openDialog", "click", function (e) {
$("#veliki").dialog("open").load($(this).attr('data-url'));
});
$("#veliki").delegate(".openSubDialog", "click", function (e) {
$("#maleni").dialog("open").load($(this).attr('data-url'));
});
});
</script>
</head>
<body>
<div id="veliki"></div>
#RenderBody(); <!-- The ASP.NET MVC view gets rendered here -->
</body>
</html>
Sub-page :
<div id="maleni"></div>
<script type="text/javascript">
$(document).ready(function () {
$("#maleni").dialog({
modal: true,
height: 450,
width: 600,
left: 0,
autoOpen: false
})
.load($(this).attr('data-url'));
});
});
</script>
I've created a form with a button. If users click the button, browser will generate a popup for user to upload and crop a photo.
onclick="window.open('upload.php');"
if uploaded
window.opener.document.getElementById
the popup will return the cropped pic to the opener window (form)
document.getElementById("errMsg").innerHTML="<input type=\'button\'
onclick=\'window.close();\' value=\'Use this pic\'>";
Finally, the popup will generate a "Use this pic" button.
Now, I want to upgrade this popup to jQuery Dialog to make it polish. How can I do that?
http://jqueryui.com/demos/dialog/#default
Try Using a Modal Form in which you can call the dialog for user to upload & crop the image and on clicking Use this pic on the dialog; return to your page and continue your application.
Better performances, you can use Jquery Modal Form with lighbox for a better UI.
Cheers!!!
What is the problem?
Take upload.php's code (the stuff within the BODY element) and put it inside the caller page, within a DIV.
Then apply a dialog with jQuery on that DIV. Then just activate that dialog when needed.
Now, as for the code itself - I'm sure you need to re-wire a few things but the idea is very simple and I really don't understand why this question has a bounty of +100 reputation, really. Not that I mind having it haha!
I hope I got what exactly you're trying to achieve.
Here is jsfiddle example: http://jsfiddle.net/nNw33/3/
Here is the code:
$(document).ready(function () {
$('#initUpload').click(function (event) {
$('#Dialog').dialog();
setTimeout(function () {
// upload completes
$('#errMsg')
.html("<input type=\'button\' value=\'Use this pic\'>")
.click(function () {
$('#Dialog').dialog('close');
});
}, 1500);
});
});
HTML:
<input type="button" id="initUpload" value="Upload" />
<div id="Dialog" style="display: none">
Upload content here
<div id="errMsg"></div>
</div>
You should read this cute plugin, which allows you to upload files asynchroniously.
http://malsup.com/jquery/form/#options-object
Add following in body whereever on page it fits:
<button onclick="openPopup()">Show dialog</button>
<div id="modalFormDia"><!-- blank --></div>
Add following to head to load plugin. Nice example usage here
<script src="http://malsup.github.com/jquery.form.js"></script>
It works with a hidden iframe, submitting the results to your backend without opening any windows.
This way everything can be done in one 'window' or, lets make that the dialog popup youre probably looking for
Grab sample code from a fiddle here. Following code can be put anywhere as well, globally accessible
function onComplete(xhr) {
// Lets expect that the server sends back
// the URL pointing to uploaded image, an error if failed
if (xhr.responseText.match("error")) {
// failed
$("#feedback").html("Upload failed: " + xhr.responseText);
} else {
// uploaded
$("#feedback").html('Upload done <button>"LOVING IT, USE THIS"</button>').click(function() {
// image accepted, close dialog and set the image on main page
diaDom.dialog('close')
$('#targetOnPage') // ....
});
$('#preview').html('<img src="' + xhr.responseText + '" alt="Image preview loads here"/' + '>');
}
}
function openPopup() {
// get the dialog DOM node (if first time, create)
var diaDom = $('#modalFormDia')
diaDom.html('<form id="myForm" onsubmit="return false;" action="upload.php" method="post" enctype="multipart/form-data">' + '<input type="file" name="myfile"><br>' + '<input type="submit" value="Upload File to Server">' + '<hr/><div id="preview"></div><div id="feedback"></div>').dialog({
buttons: {
"Cancel": function() {
$(diaDom).dialog('close');
}
},
closeOnEscape: false,
autoOpen: true,
modal: true,
title: 'Image Uploader'
});
// setup form with hooks
$('#myForm').ajaxForm({
beforeSend: function() {
$('#feedback').html('Upload starting')
},
complete: onComplete
});
}