I have this simple demo to test bootstrap modal and JSON.
Code
When I click button "show", it loads the JSON and parses it.
And button "Launch demo modal" shows the parsed JSON.
But when I click the button "show" again,
the previous list in the modal is not removed and it appends with the current list
increasing the size of the modal.
I want to refresh the cache everytime I click the "show" button.
Please help.
You have to use .html() instead of .append() . .append() adds other list to your modal body, .html(list) instead, changes all the content of the modal body you're manipulating.
Otherwise you could remove all .ID1 content and then refill it, but it is not such a good way to do.
Instead of .append() use $(".ID1").html(list); this will replace the html of .ID1, while append will add to the current content.
Adding the code
$('.ID1').html('');$('.ID2').html('');
below
$getJSON
Will remove the cache from previous sessions and it works.
Related
At the moment, I've got the code:
$(document).ready(function(){
$("#sign-up").click(function(){
$(".collapse").slideToggle();
});
});
That, when the anchor is clicked, the form will either expand or collapse. The problem I've got at the moment is that the page will load with the form expanded - I want it to be collapsed.
Many Thanks.
You need to add style="display:none" to the form tag assuming it is the form that is to be expanded and collapsed?
I have an "article" page where the selected article is displayed by default and another articles are ajax-appended to the bottom after clicking on "next" button.
Every article has its own FB share button.
I can reinitialise all the buttons by FB.XFBML.parse(); command, but the existing buttons disappear for a short moment during reinitialisation.
Is there a way to reinitialise only last appended button or somehow to prevent visual disappearing of the buttons?
(Btw. this issue does not apply to twitter button, which can be reinitialised by twttr.widgets.load(); command)
FB.XFBML.parse() function takes a parameter with selected DOM element. Then it will only reinitialise share buttons that are present in the DOM element:
var buttons = newblog.find('.share-buttons')[0];
FB.XFBML.parse(buttons);
Let's say that I'm building something like order cart.
I have one main page, and a lot of subpages.
On the subpages I have some specified product which user can add to the order by clicking on the button.
If the user click the button, javascript is called grabbing the name of the product and sending it AJAX to some PHP file which add this product name to some $_SESSION array.
If there's atleast one product in the cart, the FIXED div on the bottom of the screen appear. This div runs modal (bootstrap) and it contains all of the products which user had add to the order. Again I'm using here javascript + AJAX to determine click. If it's, there is a call to .php file which return STRING contains all the products. Then, this string is appended to the div inside this modal.
Content of this modal looks like:
'name_of_the_product', 'delete', 'id_from_session_array'
...
...
So I want allow the user to use DELETE option for any of his products in this list if he no longer want this product in the cart. I wrapped the delete text in some anchor and gave it class - let's say '.delete_from_cart'.
And now, when I'm trying to check in javascript if this element ('.delete_from_cart') has been clicked, nothing happens.
Sample code for this looks like:
$('.delete_from_cart').click(function() {
alert("foo");
});
No alert at all after clicking some .delete_from_cart div. However, in the code source all of this anchors has this class.
How to fix that? It seems like javascript doesnt see appended elements from ajax in this div. Any help?
since you said that your modal is generated using an Ajax call, you will not be able to attach the click event to the element. You will need to use jQuerys on() method to bind the onclick.
$("#themodal").on( "click", ".delete_from_cart", function(){
alert('it worked');
});
See on() method more details.
https://api.jquery.com/on/
I have an option in my page where in I can add new div on button click.
But when ever I add new div the page scrolls back to top, instead of staying focused on new item.
How can i make page stay focused on newly added div??
You can use .focus().docs are here.hope that helps.
As if that button is created using <a href="#"> tag then whenever you click on it due to href="#" it will automatically go to top of the page.
So you need to give either "ID" of that new appended DIV or "javascript:;".
If you passed ID of the DIV then that DIV focused and if you given "javascript:;" then that page will be there only it will perform the action whatever the action function written on click of it.
OR
If that DIV is loading after some service call then you need to handle it through JS you can use event.stopPropagation() function.
If that button is simple <button> element then add an attribute "type" as <button typr="button"> default type is submit so some times its perform some action if that button is included in some <form>
I am assuming the scenario because that Js Fiddle link is not accesible.
Hope it will helps.
Well, I need to refresh the page without giving a refresh, I'm currently doing so.
When the page loads I keep the contents of the html body in a variable, and when I click the button I delete the contents of the html body and add the value of the variable in it.
So I update the body without giving refresh.
The problem is that I use the datepicker plugin and when the body is rewritten by the variable datepicker does not work.
When load the page, I save the html like this:
currentBody = $('body').html();
when I click the button, do so:
$('body').html('');
$('body').html(currentBody);
$('#id_ship_date').datepicker();
But, unsuccessfully.
this is all because I have a form and the fields it is dynamically added by the user, there need a reset button that everything he did on the page, remove everything that he added and remove all the result of queries made by him.
You probably need to reinitialize the datepicker.
http://api.jqueryui.com/datepicker/#method-refresh
$( ".selector" ).datepicker( "refresh" );