I have a link on my ShowData.aspx page that I'm calling fancybox on.
Edit Data
My JQuery code is:
$("#editLink").fancybox({
'opacity': true,
'overlayShow': true,
'transitionIn': 'elastic',
'transitionOut': 'none'
});
The form EditData.aspx contains a save button. My problem is that after I click the save button the dialog does not close. Furthermore, after the save is performed on the server the client page redirects to EditData.aspx.
The expected outcome is that the dialog closes and I am returned to the parent page (ShowData.aspx).
Thanks!
I removed fancybox and found that this issue also occurs with regular JQuery dialogs. If you load a page that has a submit button (or posts back in any way) then your dialog will disappear and your main page will redirect to the dialog page. Here's a simple test:
HTML:
<div id="divClick"></div>
JQuery:
$(function () {
$("#divClick").dialog({
modal: true,
open: function () {
$(this).load('Postback.aspx');
},
title: 'Ajax Page'
});
});
Postback.aspx:
<body>
<form id="form1" runat="server">
<div>
</div>
Enter Name:
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
</form>
</body>
Is there a way to attach an event to the postback from the dialog?
Furthermore, I modified Postback.aspx to include jscolor.js (a JQuery plugin) to see if it would work, it did not work. Any JQuery functionality doesn't seem to work in a dialog.
I ended up using an iFrame. This seems to do the job.
MainPage.aspx
<div id="divClick"><iframe src="Postback.aspx"></iframe></div>
JQuery:
$(function () {
$("#divClick").dialog({
modal: true,
title: 'iFrame Page',
width: 500,
height: 500
});
});
JQuery plugins in Postback.aspx work well and posting back doesn't close the dialog and redirect the main page.
Related
I have a modal that is triggered when the button is clicked in the main page. It works and the success modal is displayed and the url modal is closed. But my problem is that if I click the button again, url modal cannot be displayed. Here's my code.
<button class="btn pink apply_btn" type="submit" name="button">Apply</button> //my apply button in the page
<form class="search_form" action="" method="">
#csrf
<label>
<input type="url" required id="instagramLink" value="" placeholder="Instagram Post URL (Paste Here)">
<p>
<span class="alert"></span>
</p>
</label>
<div class="flex_box">
<button class="btn pink" type="button" id="save">Apply</button>
</div>
</form>
<script src="{{ url('/assets/js/modal.js') }}"></script>
And this is my ajax code in closing the url modal.
success: function(store) {
$(".apply_modal").hide();
$(".applyfnsh_modal").toggleClass("open");
$('.alert').html('');
},
error: function() {
$('.alert').html('Error occured while applying. Please try again.');
}
In my modal.js
//apply pop up
$(".apply_btn").on("click", function(){
$(".apply_modal").toggleClass("open");
$("body").toggleClass("open");
});
$(".modal_close").on("click", function(){
var modal = $(this).parent("div").parent("div");
modal.toggleClass("open");
$("body").toggleClass("open");
});
$(".apply_modal").on('click touchend', function(event) {
if (!$(event.target).closest('.apply_box').length) {
$(".apply_modal").toggleClass("open");
$("body").toggleClass("open");
}
});
So when the url is valid, save to db and display the success modal, which works, but clicking again the apply button in the page, is not displaying the url modal again. I have tried the answers here but nothing is working.
Ok, so here's what I'm thinking is happening... $(".apply_modal").hide(); is setting your modal's style to "display: none;" directly onto the DOM element. In order to display your modal, your code is simply applying a class of "open" to the modal. Any local styles to a DOM element override any styles from CSS. What this means is that the CSS styles applied to the class "open" don't matter because the div itself has a style attribute in it, and that style attribute contains "display: none". To fix this, wherever there is an instance of .toggleClass("open");, add a "show" declaration (.toggleClass("open").show();). You should do some serious refactoring if this works, but it'll at least let you know if we're on the right track.
html:
<div data-role="page" id="main">
Menu
<script>$(document).on("pageshow", menu);</script>
</div>
js:
function menu() {
$('#menubtn').on('click', function () {
...
});
alert("menu");
}
does only work with the first pageload,
after clicking a link JQM loads the link via ajax...
menu() is called, alert viewable... but no click event added to the link
any ideas?
I am using dropzone and have the following init function.
Dropzone.options.filedrop = {
url: '/path/to/handler.ashx',
paramName: 'file',
uploadMultiple: true,
parallelUploads: 20,
forceFallback: true,
init: function () {
console.log('init'),
this.on("sendingmultiple", function (files, xhr, formData) { //event fired for each added files
console.log('sendingmultiple');
function() ValidateAllFiles();
});
this.on("successmultiple", function (file, data) { //event for each successful upload
console.log("done");
DisplayMsg();
});
}
This work perfectly if the browser support dropzone. However, the sendingmultiple and successmultiple functions do not get triggered if i am in fallback mode. (nothing get wriiten into console)
This is my html markup.
<form id="filedrop" runat="server" action="/path/to/handler.ashx">
<div>
<div class="fallback">
<input name="file" type="file" multiple />
<input type="submit" id="btnFallBack" value="Upload"/>
</div>
</div>
</form>
Does dropzone support these triggers even in fallback mode or i have to manually do it using button click event? If the later is true, then how can i get the array of file object like i did in the sendingmultiple function?
Thanks for your help!
yea, i was right. I refactor my code so the dropzone sendingmultiple and fall back button click event triggers ValidateAllFiles(). After that, i call the Upload() method from code behind in the button click event. The Upload() method is the same method used by dropzone for uploading files.
I have a form inserted by jQuery Ajax to a page's div (say, 'content') and when the user finishes filling the form and hits 'submit' button, the result will be shown for further verification. The html and ajax code are as follows:
HTML:
<form id="userForm" action="..." method="post">
...
...
</form>
Ajax:
$(document).ready(function() {
$('#userForm').ajaxForm({
success: function(returnData) {
$('#content').html(returnData);
}
});
});
The 'returnData' is the filled form (without input fields) for further confirmation. Now, how do I implement a 'back' button such that the user may go back and modify the previously entered data?
I am working on Google App Engine with Python. Thanks.
I wouldn't replace the form with new HTML.
I would rather hide the form with display: none and add the new HTML for viewing alongside. If you want to go back, then you can just hide the "viewing div" and show again the form, without the need to refill any input elements.
Something along these lines should work
HTML:
<div id="content">
<div id="user-form-container">
<form id="userForm" ...>...</form>
</div>
<div id="viewing-container"></div>
</div>
CSS:
#viewing-container {
display: none;
}
The viewing part contains some sort of back-button, which hides the viewing area and shows the form again
jQ:
$(document).ready(function() {
$('#userForm').ajaxForm({
success: function(returnData) {
$('#viewing-container').html(returnData);
$('#user-form-container').hide();
$('#viewing-container').show();
$('#viewing-container #back-button').click(function() {
$('#user-form-container').show();
$('#viewing-container').hide();
});
}
});
});
I can successfully load a local page into a modal preview:
$('.preview-button').click(function () {
$('#dialog').dialog('open');
$('#dialog').load("#Url.Action("Index", "LatestNews", new {area = "Home"})");
});
But I cannot load a remote webpage, say "http://www.example.com/home/php".
Moreover, when links in the embedded contents of modal page are click, the user leaves the modal altogether.
How can I embed a remote web page in an mvc (jquery modal)?
How can I keep the user in the modal when they click the links in the embedded remote page in the modal?
Thank You.
<script>
$('.preview-button').click(function () {
$('#dialog').dialog('open').html('<iframe id="modalIframeId" width="100%" height="100%" marginWidth="0"
marginHeight="0" frameBorder="0" scrolling="auto" />');
$("#modalIframeId").attr("src","http://www.blahblahblah.com/default.asp");
return false;
});
});
</script>
<div id="dialog" title="Dialog Title" />