Firefox4 has a new feature → 【Prevent this page from creating additional dialogs】
But it was also a trouble with me when I hope an alert dialog opened more than once.
Now, A new problem has appeared ...like below ↓
1) I call the alert dialog more than once , and check the
【Prevent this page from creating additional dialogs】
2) I click a download button , My web application is down....
(my button' event is below.... and because it hasn't into the action , so I'm just write the client source....)
My Button Event
getDownloadFile:function(){
$('xform').submit();
}
My Page Code
<div style="display:none;">
<form id="xform" action="down.do" method="post" target="xfra">
</form>
</div>
<iframe id="xfra" name="xfra" src="/?scid=dummy.htm" style="width:0px;height:0px;visibility:hidden;"></iframe>
Hope anybody can help me ...thanks...
I am guessing the $ on your code means you are using jQuery (you should mention it in the tags if this is the case).
If you are not using jQuery, then I don't know much of the other frameworks' selectors. However, if it is jQuery, your selector is not correct, it should be:
$('#xform').submit();
not
$('xform').submit();
Since you are using PrototypeJS, the above is incorrect.
Here's a simple fix:
function myAlertMsg() {
alert("Whatever message you want");
location.reload(); /*This prevents the browsers pop-up disabler*/
}
Related
I am using Popup.js by Toddish.
http://docs.toddish.co.uk/popup/demos/
Long story short, the popup plugin creates divs by default given the classes ".popup_back" and ".popup_cont".
I have another button I wish to press which should completely delete the added divs with those classes after they have been generated and added to the html. As if they never even existed. Surely this is possible?
I have tried running a function which simply runs:
$(".popup_back").remove();
$(".popup_cont").remove();
As shown in this example:
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_dom_remove
Unfortunately despite the code running, the actual divs are never deleted as required.
Any ideas? I am new to this kind of thing and have googled around and read a lot about DOM etc but am yet to crack it.
Thanks
EDIT:
In reply to the comments:
The Javascript:
function removePopups() { // This function is called to remove the popups.
console.log("removing...");
$(".popup_back").remove();
$(".popup_cont").remove();
}
function func(url) { // url is the url of the image to be displayed within the popup.
removePopups(); // As soon as the function casillas is called, removePopups is used to remove any existing instances of the divs.
$('a.theimage').popup({ // This is where the Popup plugin is utilised.
content : $(url),
type : 'html'
});
}
The HTML:
<a class="theimage" onclick="func('image/image1.jpg')" href="#" >
Long story short, an image is displayed in the popup.
I think the issue is that the popup plugin runs due to the class but the function func is never actually run when the click occurs. However simultaneously "removing..." still prints out in the console which tells me that the function IS being executed. The problem is I want the popup plugin to run together with the javascript function. Is there a solution for this conflict?
Your implementation should really be as simple as this:
<a class="theimage" href="#" >Open</a>
Bind the popup creation to your popup link:
$('a.theimage').popup({
content : 'image/image1.jpg',
type : 'html'
});
I'm speculating here, but what might be happening is that you're invoking the popup twice by binding the popup() call to a click handler in your markup. The popup plugin already binds the popup creation to a click event.
View working demo. Note the 3 external resource: the popup CSS, the popup JS, and the jQuery JS.
I am trying to find a way to detect when my browser is loading and show a loading icon.
Also, is this the correct way to go about it or is there a 'standard' practice to accomplish something like that?
Edit: This functionality will be used for one of my sites during database transactions / table building.
I like the JQuery loadmask plugin for this. Apply a mask over the element that is waiting to load some stuff (say via AJAX) on page load:
$('#containerid').mask("<img src='loadinganim.gif'/> Waiting...");
Then when everything is loaded and the user can interact with the element, remove the mask overlay (typically in a callback for an AJAX call after successful completion):
$('#containerid').unmask();
I took a slightly different approach to this problem and this is what I came up with.
Code to reset my loading icon when the page is ready
$(document ).ready(function() {
$('#test').hide();
});
The function that shows the loading icon
$('.loadState').click(function () {
$('#test').show();
});
HTML Code
<div id="test">
<h3> <i class='icon-spinner icon-spin icon-large'></i> Compiling Requested Data </h3>
</div>
And I'm calling the show function my adding this class='loadState' on my submit button.
Edit: Cleaned the mixing between js and jQuery code.
Try an onPage load event listener. Im kind of new to js so I may be off a little.
I hope someone can help. I am missing some logic and styles while I am running the form in JQuery modal window with the 'modal' property is set to 'true'. I am trying to utilize the form from http://jqueryui.com/dialog/#modal-form.
The same code used outside modal window is running correctly. I am not sure how to fix it and decided to share it with you.
I created a page in JSFiddle - http://jsfiddle.net/vladc77/GcQRg/16 to show the code. However, the modal window cannot be ran from there. As a result, I uploaded the same test in here - http://www.vladcdesign.com/modalWindow
When I set (modal: true) then I am getting the following problems.
1.The check boxes in work hours form should enable/disable menus to set the time
2.“More” check box should show/hide a text field
3.I lost ability to set margins between elements in Hours settings form. Now all menus are touching each other even though I use margins styles. They just don’t apply.
All of these issues are present only while I run this DIV in a modal window. It works OK outside the modal window. I am wondering if someone can help and explain what is wrong with the code. Any advice is highly appreciated.
Looking at both the fiddle and the example you posted on your site, you're getting the following error:
Uncaught ReferenceError: closedHours is not defined
The problem appears to be coming from this line:
$(this).append(' <span class="closed custom-checkbox"><input type="checkbox" name="closed" value="closed" class="closed" id="closedHoursElement" onchange="closedHours()"><span class="box"><span class="tick"></span></span></span>Closed');
Also, the reason you can't get the dialog to load on your fiddle is that you're including the JS files in the wrong order. It should be jquery, jquery ui, and then jquery ui.selectmenu.
Your change function on the checkboxes also has a bug, it should be something like this:
$('input[type=checkbox]').change(function() {
if (!this.checked) {
$(this).parent().siblings('select').removeAttr("disabled");
}
else {
$(this).parent().siblings('select').attr('disabled', 'disabled');
}
});
Even when I changed all that, the checkboxes still weren't working, so I removed your custom jquery and jquery ui references. When I did that, they worked fine so something that you've done to customize those is what's causing your problem. You can view my changes here.
The first $(document).ready(function(){}); and second $(function() { }); are the same, the code will be executed in order they are in these blocks.
However the $(window).load(function(){ }); is a little bit differenet, it gets executed later. Check this post to see the difference.
You could experminet a little with defining the click event to your "Open modal window" button, and do all of the binding when that fires:
$('#create-user').bind('click',function(e){
// To avoid navigating by link
e.preventDefault();
e.stopPropagation();
// Do every binding / appending
// $('.workDayHours').each(function() { ...
});
I've got a Primefaces command button that I need to add a callback to in jQuery on document.ready. Basically what I've been trying to do is get a reference to the existing function and then call it in a new function that I wrote:
var existingFunction = jQuery("[id~='submit']").live("click");
jQuery("[id~='submit']").live("click", function(){
existingFunction();
alert('test');
updateControlPanel(buildControlPanelUrl(getUrlVars()));
});
It seems simple enough to me but for some reason this will not work. When I load the page and click the submit button it doesn't even reach the alert.
I've checked the error console and found that it's throwing the following errors:
((f.event.special[s.origType] || {}).handle || s.handler).apply is not a function
There is existing jQuery functions on the page that I did not write but I'd like to make sure this error is not related to the way I'm approaching this.
I'm using tomcat 6 with an older version of JQuery (1.3 or 1.4 ).
Thanks and let me know if you guys need any more info.
Edit
I've put up an example of what I'm trying to do on JS Fiddle: http://jsfiddle.net/anSXH/2/
Here is some further clarification:
I've built the button as a project in JSF 2.0 (MyFaces) using the latest Primefaces component library. I've then taken that button and embedded it into an existing web page. The button submits the form and then calls a JavaScript function to show the result on the page after an ajax request is complete. This all works when I embed the button onto the page but I now need to update something on the client side after the button calls the function. That's why I'm looking at adding a callback to the existing onclick function.
As a side note, because I'm using Primefaces I can attach a JavaScript function to run after the ajax request is complete. My plan B is to try and access this function and somehow override it.
Edit part 2
Here is the generated control from primefaces:
<button
id="topsaveform:submittop"
name="topsaveform:submittop"
class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"
onclick="PrimeFaces.ab({source:'topsaveform:submittop',process:'topsaveform OEIMeasurementsTable',update:'errorMessages submittedPopup',onstart:function(cfg){jQuery('#loadingBar').show('fast');;},oncomplete:function(xhr,status,args){postSubmit();;}});return false;"
type="submit">
<span class="ui-button-text">Save</span>
</button>
Did you try making the original function die (ref)?
jQuery("[id~='submit']").die("click");
jQuery("[id~='submit']").live("click", function(){
alert('test');
updateControlPanel(buildControlPanelUrl(getUrlVars()));
});
The problem was that I was trying to do this with a primefaces button. When I switched to a standard JSF button I was able to affix the function to it no problem.
Okay, the story is abit long but hope you can bear with me so that there could be some background to the problem:
I'm developing the registration section for a portal using ASP.NET and to make things nice,
I decided to use bPopup from here to load the registration page into the iframe of the calling page (parent page). Now I need a way to close down the iframe after a successful registration so from the codebehind of the registration page (nested in the iframe) I tried a Javascript function from the parent that allows me to do so, here's the function to close the iframe generated by the plugin:
function bPopup_close() {
$(".bClose").closePopup();
return false;
}
and here's the code behind from the iframe (the function will be called on submit):
ClientScript.RegisterOnSubmitStatement
(GetType(), "Javascript", "javascript: window.opener.bPopup_close();");
I wasn't able to close the popup. Interestingly, Firebug showed me that after I clicked the submit button, window.opener was null. Does that mean that the parent was indeed closed? Anyway the popup was still there...
Hope you guys could share some insights on anything similar?
I can see that dinbror already answered you on his page :)
#fred: Glad you like it. Are you using
the newest version of bPopup?
Solution: Create a function on the
page which opens the popup:
function closeBPopup() {
$(selector).bPopup().close() }
Then you can trigger it inside your
iframe whenever you are done doing
your stuff with:
parent.closeBPopup();
After half a day, I finally got it working with:
ClientScript.RegisterStartupScript
(GetType(), "blah", "< script type=\"text/javascript\">bclose(); < /script> ", false);
and the code bclose() is:
function bclose() {
parent.$("#popup").bPopup().close();
return false;
}