Call javascript from appended text (order cart) - javascript

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/

Related

How to trigger javascript pop-up box by if-condition within the HTML code?

I created an html site where the user can input a code in a text input and then this code is being inserted in a MYSQL database if certain conditions are met. In case of a successfull database entry I would like to notify the user with a little pop up message, which displays something like "Success" and also stating some data from the table row, the code was inserted into.
I found a nice looking pop up message on the following page, which I would like to use: https://www.gitto.tech/posts/animated-modal-box-using-html-css-and-javascript/.
However, in the implementation from the page, the pop-up is triggered by the click of a button:
document.getElementById("open-popup-btn").addEventListener("click",function(){
document.getElementsByClassName("popup")[0].classList.add("active");
});
document.getElementById("dismiss-popup-btn").addEventListener("click",function(){
document.getElementsByClassName("popup")[0].classList.remove("active");
});
I would like to execute the pop-up based on an if-condition, in which I check whether an php variable is already set:
<?php
if (isset($group)) {
?> ......HTML code.....
So, can anybody tell me how to successfully remove that "onClick" function of the pop-up?
Thanks in advance!
I understand that you reload the page after said data was inserted into database?
If so, what you can do to show pop-up initially, is to simply add class active to your popup (element with class popup, like that:
<div class="popup center active">
...
</div>
BUT
in order to be able to close the popup, you still will have to attach the second part of the provided script (you can simply insert it within script tags inside php if statement (at the end of HTML body element), like:
<script>
document.getElementById("dismiss-popup-btn").addEventListener("click",function(){
document.getElementsByClassName("popup")[0].classList.remove("active");
});
</script>
note: It doesn't change the fact that, as said above - it would be better to handle this with XHR (e.g. via ajax)

Get link of a button and assign to other in jQuery

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);
});

Information shows in a div while pressing button from another div without loading page by jQuery & PHP

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

jQuery dynamic DOM elements are not posted in PHP

I have a button with id btnGo wrapped in a form with id frmNewRequest. When I tried to use
$('#frmNewRequest').on('click', '#btnGo', (function(e){
//do something
}));
it was not working but when I changed to
$('#btnGo').click(function(e){
//do something
});
it was working. What is the different between the two ?
I have a DOM dynamically generated upon the click of btnGo, but when posted to codeigniter's controller, the newly DOM elements are not posted. Anyone now what's the problem ?
First snippet of code tries to click on form. where there is not method to click on form element. So, it will not work.
Whereas the second snippet you are clicking on button and button have a property to click So, it will work for you.

Facebook Like button for every item?

I have Facebook iframe app where I am pulling content with JSON and representing it in a list with search criteria.
On item click new content shows on the same page (using ajax), and that page shows more info about item. I want to add a LIKE button for every clicked item.
But it must be a different URL so I can publish it on my FB wall. So when I check link from Like button on wall, it will redirect me on that special item.
Here are few issues:
1) How to define Like button for every item?
<div class="fb-like" data-href="LINK FOR LIKE BUTTON" data-send="true" data-layout="button_count" data-width="450" data-show-faces="true" data-colorscheme="dark"></div>
Here is LIKE button, I need to specify different data-href for every item.
2) I need to send some parameters to url. Let's say when clicking on item, I should send item id to URL. Right now I can send item id to my URL but it is doing just in my iframe -- not in facebook URL. How can I do this?
I think second problem would give an answer for my first problem.
Edit: I am doing this using jQuery.
edit2:
so, i am using jquery for my site, pulling content with JSON and representing it with html and jquery, i have, it is all the same page, but on click i hide some contents and show another, so my main content is a list of items, click on item i hide main content, and i show item info content
so, it is all one page, so it has the same URL (main content, item content,... all the same URL)
so for adding LIKE buttons for every item, i need to make a difference between those items, so i done this
'window.location.href=window.location.href + "#id=" + propertyid;'
so right now, every item has its own URL, which i done manually, so right now every item has own URL which i could use for LIKE button
but, when i alert this new window.location.href is seems all right, i get this new location with #id=12345 included, but when i try to send that location to LIKE button data-href it is always just the main location, without this new part includind item id #id=12345
Yes, you can create FB Like buttons for "items" shown on dynamically created screen content (eg Ajax popups).
Issues:
Individual item urls
FB demands a "social graph endpoint" for each item that can be liked. So you also need to support a url which returns only the "item." This is the url for the individual item. It is also the url that a FB viewer will click on if they want to find out more about the item.
Example: a page shows a list of articles. There is an individual Like button next to each article. When a person "Likes" article B, it is shown in their FB stream. When they click on "Article B" in the stream, it should go to a page that only shows article B.
Also, the url for just article B will be queried by Facebook to obtain the FB meta headers for the individual item (image, classification, etc).
Parsing the new dom for FB items Depending on which method you use for adding FB like buttons et al, you may need to tell FB to explicitly (re-)parse the new parts of the dom that you just added dynamic content to. (Your pop-up.)
Since you know the element that you added the popup to, there is no need to tell FB to reparse your entire dom. Tell them to parse starting at the beginning of your newly added/changed element:
Code I use:
if (event_data) { // event_data was received, show it
panel.setBody(event_data); // set the pop-up's body
if (!this.ie && typeof(FB) != "undefined" && FB.XFBML)
{FB.XFBML.parse(this.panel_el);} // Parse FaceBook markup
....
Docs from FB on this:
http://developers.facebook.com/docs/reference/plugins/like/
http://developers.facebook.com/docs/opengraph/
http://ogp.me/ # FB site about "Open Graph Protocol"
Place this in a for loop, and you should be fine.
var elements = $("#divId").html();
$("#divId").html(elements + "like button code");
$("#divId.fb-like").attr("data-href", "what you want to link to");
See .html() and .attr() specs.

Categories

Resources