I have this at above the body tag in my page --
<script type="text/javascript">
$(document).ready(function() {
$('#button').popupWindow({windowURL:'http://something',centerBrowser:1,width:400,height:300});
});
</script>
Is there a way to make this popup happen without the user actually clicking a button -- programmatically w/ code inserted into the middle of the page with php on page load?
Add the following next.
$("#button").trigger("click");
Or put it all on on chained line:
$('#button').popupWindow({...options...}).trigger("click");
For what it's worth, you can invoke this from a non-rendered element:
$("<div></div>").popupWindow({..options..}).click();
I think for security reasons a lot of browsers will not open a popup window without some kind of user action.
popupWindow is hard-coded to work with links, and only responds to "click" events. That said, if you want the popup to appear on page load, you could try editing line 6 of jquery.popupWindow from this;
$(this).click(function(){
to this;
$(this).ready(function(){
add an id to your body element;
<body id="popuptrigger">
and call the plugin;
$('body#popuptrigger').popupWindow({ ... });
This is untested, but even if it works it's not a very elegant solution. I'd suggest looking around for a popup plugin that allows you more flexibility. I use jqModal to load internal url requests for popup forms and can throughly recommend it. Your mileage mey vary though, so do a google search for "jquery modal" and check out some alternatives.
I'd suggest using a jQuery UI Dialog. That way you won't have to worry about how different browsers handle popups differently.
As stated by others, some browsers (notably Microsoft Internet Explorer) will refuse to open a JavaScript popup window unless it was triggered as a result of user interaction. You can easily fake this with a bit of jQuery:
// Create a 'fake' a tag, this will never be added to DOM.
$('<a href="#" />')
// Register a click handler which will open a new popup window.
.click(function () {
window.open(url, name, options);
})
// Simulate the click in jQuery - this will open the popup window.
.click();
I can't comment on the accepted solution, so I'll just post this here - regarding Jonathan Sampsons last proposition (which is really clever): on latest Firefox & Chrome the element, that triggers the click event, must be visible. So you can't really generated a non-rendered element.
Also, if you're using an element from your page, just choose one that doesn't have any other click event defined yet - otherwise all other click events will trigger, which might not be the desired outcome.
Related
I have a problem with jQuery events.
First let me explain the setup of the page:
The main-page.php is consisted of:
a) a header (where the logo is)
b) a navbar (where the various selections are)
c) a dynamic content area (Where the content of the clicked element on the navbar will be loaded)
d) Footer
Lets say that the navbar is consisted of | HOME | MESSAGES | ABOUT US | ...
The content of HOME is a separate PHP file, with a separate CSS and JS file. The same goes for all selections.
As soon as I select HOME (for example), i remove any content from the DYNAMIC CONTENT area and I place the content of HOME using AJAX. At the same time I remove any CSS/JS files associated with the previous content and I link the CSS/JS files associated with the one loaded. This part is working perfectly.
Now, if I switch from one selection to other selections (lets say from HOME --> MESSAGES --> ABOUT US and then back to HOME), if I click on a button inside HOME it will fire the event multiple times. This is even worse if that event is causing an AJAX call to the server (imagine calling the server 5 times instead of 1).
**The reason I use the on() event on the element with radio-element class is because is a future DOM element. Initially this element is not on the page.
A sample of JS code:
$(document).on('click', '.radio-element', function(){
$.ajax({
url: "js/ajax/ajaxcall.php",
success: function(output){
$('#ajaxcall-container').html(output);
}
});
});
What I do is, as soon as I click an element with the class of radio-element, I go in the server and i fetch the output of ajaxcall.php script.
Watching the NETWORK tab inside INSPECT ELEMENT, I see that the click event is executing the AJAX call multiple times. Sometimes 2, other 3 or even 5.
What I did to solve the problem (non of them is working 100%):
A) unbind the event before binding it using "off"
$(document).off('click','.radio-element').on('click', '.radio-element', function(){ .... });
B) Use event.stopImmediatePropagation()
$(document).on('click', '.radio-element', function(event){
event.stopImmediatePropagation();
//rest of code
});
Below is a solution that I haven't tried yet since I read in an article that it will not stop event binding process, it will just prevent multiple event execution (don't know if this will cause other problems).
$(document).on('click', '.radio-element', function(event){
if(event.handled !== true)
{
//Code goes here
event.handled = true;
}
});
The problem with multiple event firing is that there are AJAX calls that perform actions that are not supposed to be executed more than once (eg. send email to clients).
Also, this behavior (multiple event firing) is not something i can predict. Sometimes it works fine, some others it fires the event 5 times in a row.
I have been searching the web for a week now, but everything i tried did not solve the problem. Any solution will be much appreciated :)
Thanks!
Based upon what I am reading here - I would guess you are bringing on the js file with the click bind event more than once. If you are using custom routing or single page app and not refreshing the page, it is very likely based on what you are saying.
You could test this theory by adding a console.log inside the click event (above the ajax) and fool around with it and check the logs. If you are clicking it and it is logging whatever you logged more than once, then you know that this is the issue. I don't think it is the ajax.
I have also encountered the same problem quite a while. I solved this by unbinding all the events associated with the element before executing new event handlers.
Use like this:
$('#element').unbind().click()
{
//write something here
}
This will unbind previous event handlers before creating a new one. I think this will works well for you.
If you are using jquery version 1.7+
you can use off() like this
$('#element').Off().click()
{
//write something here
}
My guess based on your description is that you are not removing the event listeners. So every time you switch tab/page the same event will be added over and over again. Even though you have tried to do it, something is not going right. I doubt it has anything to do with Ajax.
I want to open a popup on pageload .In this popup people can fill data in dropdown for city and locality.
After closing this popup this data should be sent to my parent window where I have a form which contain city and locality textbox.
No I want to implement this using php and javascript.pls suggest.
Put this echo code at php end of child window,
echo '<script type="text/javascript">
window.opener.function_name_of_parent_window('.json_encode($user_data).');
window.close();
</script>';
That will call your desired function on parent window and data that you want to send over there as parameter
I would suggest modal windows (because now browsers block onload popups) and ajax. PHP here is not required, as everything can be implemented in client side
You should with javascript be able to set a variable on the parent page using:
parent.data = localdata
however, why do you want to use a popup window in the first place. A popup layer would be much cleaner and wouldn't be blocked by popup blockers
I am having a problem, my website www.projectbuilder.tk is 100% ajax powered, how I have ran into a problem that seems to stump me, I can set the urlbar/history to each visited page, and have php loading the pages on the user's first visit based on ?page= from there all pages and data is loaded via ajax.
The problem is that no one can actually right click the links (as I cannot give them the href attribute without causing the page to reload, and skipping the onclick event)
So my question is how do I make the ajax links look like normal links for right-click and open in new window, or tab, or copy url? thanks.
Put the normal link in the 'href' tag, but adjust your onclick jquery handler method to this:
function handleLinkClick(event){
if (event) event.preventDefault();
... Continue as normal ...
}
The 'preventDefault' stops the normla event propogation so left clicking the link will use your onclick method without sacrificing the valuable info stored in the HREF. Also. Take caution of using jqueries 'live' binding. It used to capture right-clicks as well, may not be the case any more though.
Sorry just realized i assumed you were using jquery. Just returning false, as the other poster mentioned should work fine. I'm so used to jQuery these days.
Why can't you give them href without skipping the onclick?
Just return false from the onclick handler and it won't use the href.
Am I missing something? Because this is very basic.
After someone completes a form on our website and clicks on submit s/he is directed to a landing page. I would like to change that flow so that upon submitting (1) URL1 opens as new window; and (2) user is redirected from current form page to URL2.
Can you help?
current code snippet -
if(! isset($RedirectOnSuccess))
$RedirectOnSuccess = 'oldURL';
I'm a tech newbie so need your help in piecing it together. I am using MODx and the web page itself calls the php script with the following -
[!FORM_SNIPPET?
&RedirectOnSuccess=oldURL
!]
do it with javascript. http://www.tizag.com/javascriptT/javascriptredirect.php & http://www.pageresource.com/jscript/jwinopen.htm
It likely depends on the context of your popup, but rather than using a traditional popup you might consider something less invasive and prone to ad-blocking such as a lightbox or other ajax-based display tools within the page. You can trigger the lightbox from a click event on the submit button, display your message with it, and then submit the form on close or confirm.
Avoid solutions where viewing the form result page is dependent on javascript as some (uncommon) users may have it disabled. If it is implemented as above, such users would miss your popup but the form would still go through.
You could use jQuery to implement this without modifying the php code that MODx uses to generate your form, and instead attach a click event to the form's submit button by putting javascript in the xhtml header. For example:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="/colorbox/jquery.colorbox.js"></script>
<script type="javascript">
$("#FormID.input[type=submit]").click(function(e) {
/* prevent form from submitting */
e.preventDefault();
e.stopPropagation();
/* on colorbox close, submit form */
$(document).bind('cbox_close', function(){
e.submit(); // submit the form on close
});
/* open the colorbox */
.colorbox({href:"http://example.com/url1"});
});
</script>
I used ColorBox here, but the same idea should apply to other lightbox alternatives. I didn't browser test this, so be sure to test and adapt as necessary.
Given problems with popup blockers your best bet is to target a new window with HTML on the form upload.
<form target="_blank">
Then using JavaScript (perhaps via opener.location.href in the popup), you can redirect the main window to another URL.
Can someone me to open the modal popup when a vistor requests the page for the very first time, a cokie hides it thereafter. I need to do a survey. They answer one question and are redirected so a close button or submit button is not needed. Im using php.
Thanks for the help.
Bruce
Are you allowed to use jQuery? I would user jQuery + jQuery-UI (http://jqueryui.com/demos/dialog/)
What you have to do is just define a Div element with the markup of the popup, and then invoke the popup method used by jQuery UI in the document ready event.
e.g.
$(document).ready(function() {$( "#dialog" ).dialog();});
and
<div id="dialog"> Here goes your survey form</div>
Also it is a good idea to load jQuery and jQuery-UI from a CDN, like google's, use these addresses:
https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js
https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js
Hope this helps