I have a button that triggers a modal window to show up. Because of data-toggle="modal" the url is not changed to www.doman.com/index.html#modalDiv, and I need it to change.
Is there an elegant way to achieve this?
Only thing that comes to my mind is to have a script that will add the hash to the url, but I was wondering if there is simpler solution.
It looks like you will have to override the default handling of data-modal, since its code in Bootstrap includes a return false.
You will have to create your own workaround. Something like:
Remove data-toggle="modal" and add a class of launch-modal to the <a> element
Then some javascript:
$('a.launch-modal').click(function (e) {
var modalId = $(this).attr('href');
$(modalId).show();
});
Related
Scenario: user profile. I would like to be able to display a user name with a popover that displays a limited amount of information from the user profile. So far, I have that part working. I can build it on the fly and have it do what I need. The popover works perfectly.
What I would also like to do is have the user be able to click on the user name and bring up a Bootstrap modal form with more information about the user (if provided). The first problem I am seeing is that it appears the data-toggle attribute can only have a single setting:
echo '' . $user_row['user_name'] . '';
In that example, if I add the modal to the data-toggle attribute it doesn't seem to do me much good.
I have discovered by tinkering (and that is why the class 'userprof' in the code above), that a JavaScript click event can be triggered (right now all I'm doing is a basic JS alert dialog to test), but from there I would want to load the modal. I am not sure if I can make it all work.
I have a set of functions I've used successfully for another modal (calling this one 'userModal') that I got some help from someone here a while back with -- is it possible to call that from the click event?
// code to open the modal with the caption and description:
$('#userModal').on('show.bs.modal', function (event)
{
var button = $(event.relatedTarget); // Button that triggered the modal
var title = button.data('title'); // Extract info from data-* attributes
var body = button.data('body'); // Extract info from data-* attributes
var modal = $(this);
modal.find('.modal-title').text( title );
modal.find('.modal-body').append( body );
});
// when modal closes, clear out the body:
$('#userModal').on('hidden.bs.modal', function ()
{
$(this).find(".modal-body").text('');
});
Since these are "anonymous" functions I am not sure I can call them ... feeling a bit lost in the code here. Any help pointing me in the right direction would be great. I'd even be willing to consider a different idea, but I would like this kind of functionality (hover and click) for this situation and possibly something else. Thanks!
You're listening for the modal to show itself, when the DOM is showing the modal.
try using something like this, and use a button or a link with data-toggle="modal"
$(document).on('hidden.bs.modal', '#userModal', function ()
{
$(this).find(".modal-body").text('');
});
for reference https://jsfiddle.net/y063mu4t/1/
You can try:
$(document).on('click', 'a.userprof', function(){
$('#userModal').modal('show');
});
To make your callback function work, you need to add according data-* attribute to each of the <a> tag.
I'm new to JavaScript and want a function that activates when you click on a link that leads outside the website. It should alert that you are about to leave the page and bring up a box that says "Do you really want to leave the site?" with response alternatives "OK" and "Cancel".
I've managed to do this like this (with an img that works like a link):
HTML:
<a href="http://www.urbanoutfitters.com"
onClick="return confirm('Do you really want to leave the site?')"
class="relaterade"> <img src="img5.jpg"/> </a>
I wonder if you can make a function so all in the class "relaterade" gets this confirm box instead of writing this on every single link. Maybe with document.getElementByCLassName? I want all JavaScript in a separate document.
Thanks! :)
You can get the element collection by doing document.getElementsByClassName. You must then loop through the collection and set the onclick event handler
var elements = document.getElementsByClassName('yourclass');
for (var element in elements) {
elements[element].onclick = function() {
return confirm('are you sure?');
}
}
this is from the top of my head, so dont know if it works for sure.
You could do this more easily with a library like jQuery though, cause IE < 9.0 will fail on the getElementsByClassName function
I'm creating a dynamic website. My problem is when i click on the following tag:
<a class="s-inte" href="set_interesantes.php?n=Frank Melo&u=f6e79cfe9c0ecc4c08dac4c860c4802b&back=http://localhost:8085/Something/success/profile.php?search_user=f6e79cfe9c0ecc4c08dac4c860c4802b&p=12&sa=f6e79cfe9c0ecc4c08dac4c860c4802b&i=2345123&dl=&iv=1">Interesante</a>
The page gets refreshed, How do I avoid this page refresh?
What you want to accomplish is to update some counter of interestings w/o refreshing the page?
You should do it using AJAX techniques, this is what AJAX was invented for.
Consider the following code, it's top easy (jQuery library required):
Interesante
<script>
$(function(){
$("a.counter").click(function()
{
$.get("set_interesantes.php?n=Frank Melo&u=f6e79cfe9c0ecc4c08dac4c860c4802b&back=http://localhost:8085/Something/success/profile.php?search_user=f6e79cfe9c0ecc4c08dac4c860c4802b&p=12&sa=f6e79cfe9c0ecc4c08dac4c860c4802b&i=2345123&dl=&iv=1" );
.... // you can do some animation here, like a "Liked!" popup or something
return false; // prevent default browser refresh on "#" link
});
});
</script>
you need to prevent default action on the click event.
You can do a simple inline handler which will return false
<a class="s-inte" onclick="return false" href="set_interesantes.php?n=Frank Melo&u=f6e79cfe9c0ecc4c08dac4c860c4802b&back=http://localhost:8085/Something/success/profile.php?search_user=f6e79cfe9c0ecc4c08dac4c860c4802b&p=12&sa=f6e79cfe9c0ecc4c08dac4c860c4802b&i=2345123&dl=&iv=1">Interesante</a>
or write a jQuery handler which will do the same
$('.s-inte').click(function(e){
e.preventDefault()
})
If you are dynamically loading the content using ajax. You should probably call it in this way. This way it will work for every anchor with .s-inte class, no matter it's added dynamically or statically.
$(document).on('click', '.s-inte',function(e){
e.preventDefault();
// Do more stuff every anchor click here...
});
put href="javascript:void(0)"
Hi I need to have a method to do the same use of links.I have buttons in my web sites. (css styled and only colored buttons). I need to have a method to load a page when the button clicked.
as a example: when someone clicked the red button, the instruction page should load. can anyone suggest me a js or jquery function to do this.
Thank you!
Try this JS:
location.href = 'http://www.google.com/' //goes to www.google.com
So, your full code would look something like this:
var btn = document.getElementById('your_button_id');
btn.onclick = function() {
location.href = 'http://www.google.com/' //insert your URL here
}
Of course, you could always wrap the button in an a tag instead:
<a href='http://www.google.com/'><button type='button'>Click Me</button></a>
This method:
is more SEO and accessibility friendly
tells more about what the button's actually supposed to do
activates behaviors certain browsers have for links, like
showing where they go in the status bar
special highlighting
works with JavaScript disabled
so it's generally a better idea.
You can try this code
<input name="" type="button" value="button" onclick="window.location='www.yourdomain.php'"/>
Sometimes it makes sense to have a link within a fancybox to launch another fancybox (or load content within the current one).
Say, you have a fancybox error message on login. You also have a "email me my password" widget that works via a fancybox. You may want to combine the two to say (in a fancybox):
Bad password!
Forgot my password!
Unfortunately, this will not work. I considered adding the following js:
$('#fancybox-content a').live('click', function(){
$(this).fancybox();
});
Surprisingly, this sort of worked: You have to click on the link twice and then the right thing happens. Ugh.
Finally, I found a hacky ugly work-around (it works!):
$('#fancybox-content a').live('click', function(){
var href = $(this).attr('href'); //assume there is a selector inside href
$.fancybox($(href).html()); //find the html manually and load
});
What is the right way to accomplish this?
This is i how i solved this problem in my projects:
$('a.fancybox').live("click",function(event) {
event.preventDefault();
var href = $(this).attr('href');
$.fancybox({href: href})
});
In this way you can add fancybox to any current un future A elements with .fancybox class so you don't have to define new events after opening fancybox.
Version 2 is already using "live", so using class names - `$(".fancybox").fancybox();' - would also work on elements loaded using ajax
You should be telling elements to open a Fancybox from within your plugin.
Somewhere you have the following ->
$(document).ready(function(){
$("#my_element").fancybox();
});
That's a very basic function to open a Fancybox, and not only that, but it will also what to open based on the href of the element. You don't need to do any leg work here.
So if you have ->
Forgot my password!
Simply add an ID, such as 'x' for simplicity ->
<a id="x" href="#forgot-password">Forgot my password!</a>
Then, enable the Fancybox plugin for this element.
$(document).ready(function(){
$("#my_element").fancybox();
//this is for our new container to fire
$("#x").fancybox();
});
That should be all you need.