How to update modal body and open on a link click - javascript

I want to change some contents of bootstrap modal body on link click.
Here is the link code:
<a href="" id="login_link" data-toggle="modal" data-target="#myModal" >Log In</a>
And Here is the JQuery code:
$('#login_link').click(function (element) {
$('#myModal').find('#signup_form').hide();
});
Here is the form inside Modal body:
<form class="form-horizontal" id="signup_form" name="signup_form" ></form>
On link click the modal is opening but modal body is not changing.
please help me.
[UPDATES]: Modal is not getting the external js file that manupulate the modal body.
<script type="text/javascript" src="js/code.js"></script>
the js codes works fine when it is the js codes directly embed along with modal.
So I need to know exactly where i have to put the external js file.Currently is it before tag.

Why do you need click function if it is bootstrap modal?
Anyhow you have given "data-target and data-toggle" attribute so you can directly click a button without any click function.
refer https://www.w3schools.com/bootstrap/bootstrap_modal.asp for better understanding of modal
You can try below code. This will hide form on popup of your modal
$('#myModal').on('shown.bs.modal', function () {
$(this).('#signup_form').hide();
});

Try this
$(document).on('click', '#login_link', function(){
$('#myModal').find('#signup_form').hide();
});

Related

javascript open.window function in same page bugging

I use a Javascript code to open a link in new tab when a button is clicked. I use this button:
<button onclick="myFunction()">Link1</button>
<script>
function myFunction(){
window.open("Link1");
}
</script>
And in another post in the home page of my blog, I put another button:
<button onclick="myFunction()">Link2</button>
<script>
function myFunction(){
window.open("Link2");
}
</script>
The problem is, when I click the button to go to Link1, it opens Link2.
How can I put my buttons all in home page without having this bug?
Thank you,
Your functions have the same name, rename your second function to myFunction2():
<button onclick="myFunction2()">Link2</button>
<script>
function myFunction2(){
window.open("Link2");
}
</script>
Naming your functions differently will fix your problem. But if your buttons really do just open links in new tabs you are better off using an Anchor tag with target="_blank"
e.g.
link1
And if you need that to look like a button, you can just style it with CSS!

Popup window link launching in window as well as in the browser tab

I'm working on a website built using Laravel and AngularJS.
I want a certain link to open in a popup window.
The javascript code is
function popitup(url) {
newwindow=window.open(url,'test','height=400,width=550');
if (window.focus) {newwindow.focus()}
return false;
}
and the link is
<a ui-sref="test({id:test.id})" class="btn btn-primary fright" onclick="return popitup(this.href)" oncontextmenu="return false;">Resume</a>
when I click on the button the popup works fine but the link also opens up in the tab where I clicked it, but I don't want it to.
Is there a way to do it?
I would guess ui-sref will also bind a click-event and that event will trigger before yours.
You could skip the ui-sref and put the url in a data-attribute or inside the onclick-attribute. You could get the url using $state.href() instead. Then the problem may disappear.
Edit
You could bind it to a scope function and skip onclick all toghether. Something like this:
In the Controller (Also make sure you include $state in the controller first):
$scope.popitup = function(stateName, options) {
var url = $state.href(stateName, options);
newwindow=window.open(url,'test','height=400,width=550');
if (window.focus) {newwindow.focus()}
}
And in the HTML you invke the popuitup function with the state name and its parameters:
<a ng-click="popitup('test', {id:test.id})"
class="btn btn-primary fright" oncontextmenu="return false;">Resume</a>
Also see documentation for state.href.
<!DOCTYPE html>
<html>
<body>
Popup-window
</body>
</html>
try this code for popup window and change google.com to you site

Boostrap Modal example doesn't show

I'm testing Bootstrap Modal example "live demo" and I've included bootstrap jquery and js in bootstrap starter template, and also the custom javascript:
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').focus()
})
but the modal run from my text editor doesn't show like the one on their website does. I click the button and nothing happens.
I've tried using Google Chrome Inspector/console and it shows:
Uncaught ReferenceError: $ is not defined
at the line where the function starts. When I remove the custom js, it doesn't show error but still the modal doesn't show on Chrome, Edge or Firefox.
My code is just the combination of Bootstrap starter template and its modal live demo code in the body so there's no need to post the code here.
Also, please note that I could make the code work (the button works like the example shown on boostrap website) by assigning an id to the button:
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" id="button">
then add a custom function later:
<script type="text/javascript">
$("#button").click(function() {
$('.modal').modal('show');
});
</script>
However, that's not the same as the sample code provided by Bootstrap.
Generally, this error occurs because you're trying to use JQuery without having referenced it in your project first.
Try adding the following to the top your page:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Thank you all for your suggestions. I've found out the answer:
The sample code by bootstrap has an error:
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
the data-target="" should contain the id of the modal, which, in this case is #myModal not #exampleModal.
it means you are running your script before document is ready. Try this
$(function(){
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').focus()
})
});

Add more button not working on my admin panel

This code is working but by clicking on the button then the page reload automatically.So, the new div is not appeared.
I can't find out what is the problem. Can you help me please.
<script src="jquery.min.js"></script>
<script>
function newJacky()
{
var new1= "<p>one more added</p>";
$(".apn").append(new1);
}
</script>
<button onclick="newJacky()">Add New</button>
<div id="apn" class="apn"></div>
This code is working but by clicking on the button then the page reload automatically (...)
From the above, I suspect that the <button> is placed inside a <form> element. That would explain why your page is reloaded after clicking the button.
An example using your code with button placed inside form. This would not happen if the button is placed outside the form - example
Solutions:
You can add a type=button attribute to the button (type=submit is by default if the attribute is not specified):
<button type="button" onclick="newJacky()">Add New</button>
DEMO 1
type attribute of <Button> element. Possible values are:
submit: The button submits the form data to the server. This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value.
reset: The button resets all the controls to their initial values.
button: The button has no default behavior. It can have client-side scripts associated with the element's events, which are triggered when the events occur.
Reference
Prevent default form submission using event.preventDefault() (add "my-btn" class to the button):
<script src="jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".my-btn").click(function(event){
event.preventDefault();
var new1= "<p>one more added</p>";
$("#apn").append(new1);
});
});
</script>
<button class="my-btn">Add New</button>
<div id="apn" class="apn"></div>
DEMO 2
What you are getting from the page using jquery is not specified as an elements class or div. Like below:
$("apn").append(new1);
This should either be $(".apn").append(new1); where you are getting an element with class apn, or $("#apn").append(new1); where you are getting an element with div apn.
try that
If you are using jquery, I'd recommend using the on click functionality it provides:
<script src="jquery.min.js"></script>
<script>
$(function() {
$('.addNewBtn').click(function() {
var new1 = '<p>one more added</p>';
$('#apn').append(new1);
});
});
</script>
<button class="addNewBtn">Add New</button>
<div id="apn" class="apn"></div>
Just make sure to add the class to the button.
Fiddle

Clicking on an image upload button using JS or JQuery

I have the following code,
http://fiddle.jshell.net/hvLf8yua/
When I click on the image upload button using my mouse, it opens file dialog as expected. However, I couldn't trigger this using JQuery or JS. Could anyone tell me how I can achieve this? What I want is to open the file dialog box when such script is called.
Here is an exmaple snippet you can refer to:-
<script>
function openFile()
{
document.getElementById("dialog").click();
}
</script>
<body onload= "openFile()">
<input type="file" id="dialog" style="display:none">
</body>

Categories