My html page has a list of people's names, with a button at the bottom that says 'Add new'. On clicking this button, a pop up page opens. This page has a form to collect a new name. I want to add this name to the original list. This is my javascript which works perfectly to append a list on the same page as the text box:
<script>
$('#add').click(function(){
var text = $('#input').val();
if (text.length){
$('ul.list-group').append('<li class="list-group-item">' +text+'</li>');
}
});
</script>
How can I edit it so that it appends the list on the original page?
What type of popup do you use ? With a classical popup (ie a "new page"), you can't do this with Javascript because it requires server-side treatment (Javascript is only for client, and so can only play with the current page DOM)
However, you can use something like Bootstrap Modal, that is just a "popup-like" append to the DOM ; then you can easily modify your first list. ;)
Related
I am working on an ecommerce site, I have a page that shows the products grid. There are two button side by side. One contains link to the post and other opens a dialogue box with textarea inside. (see picture)
Image 1
Image 2
Now, what I want is when I click the GETLINK BUTTON button it must take the href attribute of the VIEW BUTTON and populate in the textarea. But what I get in the link of 1st product only even if I click the other Get Link Buttons.
Here's the JS code:
function opengetlink(){
var sacprodlink = document.getElementById("sac_prod_link").href;
jQuery("#sac_link_text").html(sacprodlink);
}
Help would be appreciated, thanks in advance.
EDIT: Solved
$(".open").click(function() {
var link = $(this).closest('div.viewbutton').find('a.btn-link').attr('href');
$("#link_text").html(link);
});
Ids are given to HTML elements to make them unique. Since you have many elements of the same kind and want to perform the same operation on each of them, you should use classes. Give your View and Get Link buttons a class.
$(".sac_open_link").click(function() {
var link = $(this).siblings(".sac_prod_link").href;
$(this).html(link);
});
At first I apologize for not having the code of my desire & I've no idea how I'll ask the exact question by focusing any specific keywords.
However, I want to show my product information in an area(div) whenever I click a button in another area(div). & The work should be done without refreshing pages.
Again I apologize for that I've not the code. But I can provide an
image and hope you'll understand my desire
Example: Whenever I click on angry burger, the price and quantity should be shown in the right(California Fried Chicken) area. And multiple selecting product should also work one by one. After that I should be able to submit product information bu pressing submit button where a PHP operation should be done.
I want to do the whole task by jQuery & PHP
Thanks
You can achieve this by setting up click listeners in your javascript/jquery code and assign them to the ids of your pictures or fields. For example you can assign an id to an tag like below;
<p id="div">Hello world</p>
And then set up a click event in your jquery code to execute a function whenever that tag is clicked
$( "#div" ).bind( "click", function() {
var tag = $(this).html(); //get the value of the tag
alert(tag);//this will display Hello world
});
You can do this for any tag and retrieve its value or contents or anything and carry out an activity like changing the display of another element as below
$("#change").append(tag) //this will change the display of the tag with id change
Please ask if you have any questions
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 am having one html page for recommendation.
In this page I have different buttons like choose contact, choose merchant. In choose merchant button, I have one textbox, after clicking on the button I will navigate to the page which contains the list of merchants.
After clicking on merchant name, that merchant name should displayed in textbox of recommend.html (first html page), but its not possible as the textbox id belongs to different html page and that merchant name id belongs to different html page.
I m able to append that merchant name to the same html page of choose merchant but can't append it to the recommend.html..anybody knows solution for this,..?
In a simple code example, using HTML5's session storage,
On your merchant list page, before bouncing back to the recommendation page, set the session storage item when the merchant is selected:
sessionStorage.setItem("selectedMerchant", "merchant_name");
On the recommendation page, read the item and display recommendations based on the selected merchant name:
var selectedMerchant = "";
if ( sessionStorage.getItem("selectedMerchant") ) {
selectedMerchant = sessionStorage.getItem("selectedMerchant");
}
Of course, you will need to handle various conditions, such as clearing the selected merchant names and validating the values, etc.
Check out the link below for more references:
https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage
You need to generate that html code and have to pass it in that page using jquery
For example if that element is like "#merchant" and generated html is like $("") then append it to selected element using insertAfter or appendTo
When you click on second.html (where ever merchant name exists), you need to submit a html form with action attribute to recommend.html and pass the merchant name as a hidden input type .
Then from second.html, you can access the POST parameters and display it in your text box.
Basically you need to have some server side coding (JSP/PHP/PERL etc)
I want to create something like this:
Clicking a "button" in an HTML page will direct the user to another HTML page, and make a "hidden div" in that other page shows.
How to make this with jQuery?
Here is my code:
• PAGE01.html (where the "button" resides):
(HTML code & jQuery code):
http://jsfiddle.net/pDpeN/
• PAGE02.html (where the user will be directed and the "hidden div" resides):
(HTML code):
http://jsfiddle.net/kdHrh/
Thank you in advance.
You can just pass a parameter to URL (e.g. www.example.com/?loaddiv=1) and then check for loaddiv=1 using simple jquery code on the next page (Search on Google).
Best I can think off based on your example is to make call to second page with anchor
document.location.href='PAGE02.html#'+x;
Second page will be than PAGE02.html#hiddenDiv. Than parse value of hash from jQuery on second page and show div with same id. See here how: Getting URL hash location, and using it in jQuery
Second line of your script on first page ( $('#'+x).slideDown(200);) can not in any way do that, you must do it on second page.
But I think you should rethink your approach, in your example all should be probably done in a single page.
This will open the redirect url:
<a href="javascript:q=(document.location.href);void(open('http://example.com/#redirect,'_self','resizable,location,menubar,toolbar,scrollbars,status'));">click here
</a>
for second window:
$(function(){
if(window.location.hash.replace('#','') == 'redirect'){
$('#hiddenDiv').slideDown();
}
});
here i use a hashing when the url is visited by button.