Why is the div positioning changing on popup button click? - javascript

I have a single HTML page which has several div class. In second div class I have a registration form. When I click on submit button and check validation and give pop up, after clicking on the pop up it redirect on home div, and I want the registration div class to stay the same after clicking on the pop up button. How can I do this?

if you are using href to get click and call js method. You have to prevent default behavior. It may solve your prob even you don't use href.
function(e){
e.preventDefault();
// your code.
return false;
}

It sounds like the href value for your link is #
You could add
return false;
as the last line of the function bound to the click event

Related

How to trigger an event in jQuery?

I'm working on a page that opens a modal window when the user clicks a certain radio button. I want to trigger whatever that event handler is via my own jQuery code. Right now, I'm attempting to mimic a user clicking on the radio button by:
$("#myRadioButton").trigger("click");
The code works somewhat. The state of the radio button does become selected. However, the modal window does not open.
What must I do to trigger the events and event handlers that make the modal window open?
(Also, is there a way in Chrome DevTools to see what events are attached to an element?)
This will make the click function work, with a id on the element. You will need to make some logic for the modal itself, inside the function.
Not sure there is a way to see the events in the developer console.
$( "#myRadioButton" ).click(function() {
//Whatever you wants to happen, when you click the button
alert( "You clicked on #myRadioButton" );
});
Try and check out -> https://jquerymodal.com/

How to trigger my javascript pop up form with WordPress navigation link?

I've created a javascript pop up contact form, how do I trigger this after clicking a WordPress navigation item?
I have already tried the following code which works fine. However, after 1 second it loads the page which I've set the nav item to in WordPress.
document.getElementById('menu-item-177').addEventListener("click", function() {
document.querySelector('.bg-modal').style.display = "flex";
$('body').css('overflow','hidden')
});
I tried deleting the page, but obviously the nav link disappears. I also tried removing the menu item in the Menu settings of WordPress, same outcome.
I somehow need to block the page loading when the nav link is clicked. Is there a way round this?
Make sure that you are selecting the <a href=".. anchor element and listen for the click on that. I see that you have jQuery loaded in, so it might be good to just use that, or don't use it at all.
In your click event listener you listen for a click to happen. Whenever this click happens the function in the listener will be called. This function exposes some information about the event in the Event object. You'll see this in other pieces of code named e, evt, event or something else to refer to this Event object.
The Event object has a method called Event.preventDefault() which stops the browser from executing any kind of behavior that is linked to that element. Like navigating with an <a> tag. See why it is important to know what element you are clicking on? By adding that you can add your own behavior. See the example below.
$('#menu-item-177 > a').on('click', function(event) {
event.preventDefault(); // Prevents default navigation behavior.
$('.bg-modal').css('display', 'flex');
$('body').css('overflow', 'hidden');
});

Bootbox: how to avoid recursive calls?

I have the following code:
$('boddy').click(function(e) {
bootbox.alert("clicked!");
});
When a page is clicked, I see a popup window with "clicked" displayed. However, if I click the OK button to close it, the popup shows up again and never ends.
Interestingly, I tried the following code:
$('boddy').click(function(e) {
alert("clicked!");
});
After I click the OK button in the popup, it never shows up again.
Thanks!
Bootstrap modals (and therefore Bootbox modals) are simply <div> elements with higher z-indexes than the rest of the page content. They're still contained with the body of the page, so when you click on any element in the modal, it propagates through every parent element of the modal. Since the body tag is the top-level parent, clicking a button in the modal ultimately also clicks the body element.

javascript change element from another page

I have two buttons using javascript.
First creates text and removes the link and Second creates link and removes the text
Can a click on the link change the text? When they are on a page at the same time it works.
Otherwise it does not.
Yes it can change the text.
Any event on most HTML elements can have their default action overridden.
Having the onclick event object you should use event.preventDefault() to cancel the default action.
An example:
document.getElementById("my-link-element").addEventListener("click", function(event) {
event.preventDefault();
// and here change the text ..
});

Javascript function call in asp.net page

I have taken 1 textbox, 1 button and 1 alert image in my asp.net page. And I have written JavaScript function and call it in onblur and onclick event of text box. The function of onblur is that if the textbox is empty then the alert picture will show else picture will hide. And in onclick picture will hide. And another JavaScript function I also used to hide the picture when I open the page first time. I call this in pageload of aspx.cs page
Same things I want to do in my button Onclientclick event but it is not working because when I clicked on button the page is loaded.
How to solve this problem?
Your button click is causing postback. The simple way without seeing your code, at the end of javascript function that onclick is invoking, before the closing bracket - return false.
From the code you shared, do return false after alert();

Categories

Resources