We Keep Coding

How To Fix jQuery .show()/.hide() Issue

I'm experiencing issues with a skip button on this page: https://blacklotusaudio.com/free-downloads/ that hides an offer and presents users with a simple checkout form via popup.
To see the part with issues, add a product to your cart and click the "get my free downloads now" button.
A popup will be shown, with the issue being that the "skip for now, I just want to download the free packs" button just doesn't work.
Well, it does work on Chrome (but not in incognito mode?) but does not work on firefox or safari.
I've tried several different fixes, and I believe I've narrowed the issue down to the .skip-btn not properly hiding and then un-hiding the checkout form.
However, nothing I've tried has resolved the issue so I'm reaching out to the talented folks here. Maybe one of you can figure out what I'm doing wrong.
Here's the code I'm currently using:
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('body').on('click', '.skip-btn', function () {
$('.checkout-form-iframe').show();
$('.hide-me').hide();
})
});
});
</script>
<style>
.checkout-form-iframe {
display: none;
}
</style>
If you have any questions, etc. just let me know, I'm happy to answer and discuss.
Cheers!

Changing an object properties then calling a function inside a custom function with javascript

Title is probably a little messy. Basically what I'm trying to do is to create a custom function that will modify an object properties, then return that object, and then call a function.
A little background on what I'm doing : Trying my best with the Zendesk API to use a web widget on my webpage. Basically this web widget is configured to be a HelpCenter on startup, which then shows a button for either live chat or email, depending on the state. The main property in question here is called 'suppress' which disables one of the widget pages (chat, email & helpCenter). And my goal is to make that custom function 'suppress' 2 of the 3 widget pages so it only shows one. Then a API func called zE.activate() would open up the widget.
I know this is a lot of text, let me show you the code I've got so far :
<script>
function setChatPopOutProps(window) {
window.zESettings = {
webWidget: {
contactForm: {
suppress: true
},
helpCenter: {
suppress: true
}
}
};
return window.zESettings;
};
function chatPopOut() {
setChatPopOutProps(window);
zE.activate();
};
</script>
Now when I click on the button that has chatPopOut() assigned, the zE.activate() works since it opens up the widget, but basically the setChatPopOutProps(window) didn't seem to work.
I also tried the following :
Not returning window or window.zESettings
Putting everything under a single function by putting zE.activate() at the end of zESettings or just after the return window or window.zESettings
If you need to see the widget in action to have an idea, you can see it right here. Click on the green button on the bottom right, type anything, and you'll see the contact form button pop up. This button changes for a chat button when a live chat agent is available.
Now I know this is something that I should normally work out with Zendesk directly, which I tried, but they told me that there's nothing that can do what I'm trying to accomplish, but I really feel like this has something to do with the way I'm doing things in javascript and not the way the API is built..
Does anyone have an idea ? I would really appreciate it.
P.S. This is my 2nd post, so I apologize in advance for mistakes I probably made in this question.

Sadly, it turns out that what you are trying to accomplish just isn't possible. As the zE.settings get applied when the widget is first initialized, so there is no way to dynamically alter the widget settings without doing an action such as refreshing the page and re-initializing the widget. As far I can see from your code, I dont think you want to refresh the page everytime, and reinitialize the widget just to apply those settings that you listed above.

Run javascript when modalpopupextender is shown

This questions was already answered here - How to specify javascript to run when ModalPopupExtender is shown - but the accepted solution is not working for me.
The modalpopupextender is declared as below:
<ajaxtoolkit:ModalPopupExtender ID="mpe" runat="server" TargetControlID="btn"
PopupControlID="pnlModal" PopupDragHandleControlID="pnlModalDragHandle" BackgroundCssClass="modalBackground"
CancelControlID="btnModal" DropShadow="true"/>
The showing / hiding works fine. What does not work is linking a client script to the showing event of the modal popup extender. Based on the original question, I tried:
<script type="text/javascript">
function pageLoad() {
var popup = $find('mpe');
popup.add_shown(SetShowing);
}
function SetShowing() {
alert('showing');
}
</script>
Nothing happened. No alert, no errors. Reading further in the original post, I even added this line in the script:
Sys.Application.add_load(pageLoad);
The additional line had no effect. Any ideas why the original answer is not working? Thanks, I have been trying for hours.

I am not familiar with "modalpopupextender",
but why not just use some jquery?
$(document).ready(function(){
if ($('#mpe').is(':visible')){
//code for when MPE is visible here
}
});
jquery documentation
http://jsfiddle.net/N62g5/8/

I ended up having to attack this problem another way. None of the suggestions were able to successfully detect when the modalpopupextender was displayed. I instead changed my approach to handle user actions on the shown elements - like focusing on a textbox, etc. I could be confident the modalpopupextender was displayed if the user was interacting with it.
If you came here, I would direct you to the original post here - How to specify javascript to run when ModalPopupExtender is shown - and hope you were more successful than I was.
Thank you to everyone who commented, I sincerely appreciate your time.

Change page using a button in SP2010, strange behaviour

I'm trying to do something in Sharepoint 2010 that ought to be very simple, create a button that changes page (to a "create new item" form as it happens).
I set up a Content Editor Webpart and put a button in it (not in a form, because in Sharepoint the whole page is a form) with an "onclick" handler that changed the windows.location.href.
In 2010 the CEWP fights you a bit when you try to enter non-trivial HTML, it keeps escaping characters like "&" which can be a real pain. However in the end I got the right content entered.
It didn't work (the page just refreshed itself without changing URL). By checking on StackOverflow I found some recommendations for a more robust form for the CEWP content, which ended up as-
<script type="text/javascript">
function submit_rec(){
window.location.href = "<my server root URL>/Lists/Rec/NewForm.aspx";
return;
}
</script>
<button onclick="javascript:return submit_rec();return false"/>Submit a Recommendation</button>
Here's the strange part.
If I use Firebug and put a breakpoint in the submit_rec() function this works fine. But without a breakpoint, it goes back to the behaviour of always returning to the current page.
It seems there's a timing issue, or Sharepoint is taking control after my URL starts to load, and reloads the original page again!
Anyone seen this before and found a solution?
Ideas and suggestions woudl be much appreciated.
Regards: colin_e

Try this:
javascript:SP.UI.ModalDialog.OpenPopUpPage('/dev/KfD/KfDdev/Lists/Recommendation/New‌​Form.aspx');return false;
in the onclick event

Thanks to everyone who responded. With some more experimentation, and following hints from other threads on Stackoverflow, I was finally able to get this working.
My mistake with my last effort, using the Sharepoint builtin OpenNewFormUrl() function, was to expect this this would be a global function defined in a central library by SP. Turns out it's not, it has to be defined separately on every page where it's used, partly because it hard-codes the size of the popup frame for the library edit form.
(Yes this is ugly, like a lot of Sharepoint under the covers, anyway, I digress...)
I was able to get a Sharepoint 2010 style "popup" editor working with a button of the same style as the standard SP Document Centre "Submit a Document" button using the following code in a Content Editor WebPart. I have no idea what the script does in detail, I just copied it from the Document Centre site template home page-
<script type="text/javascript">
// <![CDATA[
function ULS18u(){var o=new Object;o.ULSTeamName="DLC Server";o.ULSFileName="default.aspx";return o;}
var navBarHelpOverrideKey = "wssmain";
// ]]>
function OpenNewFormUrl(url)
{ULS18u:;
var options = {width:640, height:720};
SP.UI.ModalDialog.commonModalDialogOpen(url, options, null, null);
}
</script>
<div class="ms-uploadbtnlink">
<button onclick="javascript:OpenNewFormUrl('/dev/KfD/KfDdev/Lists/Recommendation/NewForm.aspx');return false;" type="submit"><nobr><img alt="Submit a Recommendation" src="/_layouts/Images/uploaddoc.png"/> <span>Submit a Recommendation</span></nobr>
</button>
</div>
I'm wary of what setup this will do if (say) the users screen is smaller than the hard-coded popup size, and i'm still confused as to why my earlier (and much simpler) efforts failed, but at least I have a working soluion.

Anyone can close the popup generated by Jquery plugin bPopup, from a child iframe?

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;
}