We Keep Coding

Shopify AJAX Request - e.preventDefault Not Working

I have a cart popup that shows the contents of the cart using an AJAX request. Inside this popup, I have an "X" link meant to remove that line item from the cart. However, when I use the following code,
$('#remove-from-cart').click(function(e) {
var link = $(this).attr('href');
// Preven link normal behavior
e.preventDefault();
$.ajax({
url: link,
type:'GET',
success: function(data){
$('#receipt-wrapper .receipt-row-2').html($(data).find('.line-item-container').html());
}
});
});
the normal link behavior of the X link still happens, meaning it takes you to the updated cart page immediately.
HTML of "remove link"
<div class="grid__item receipt--hide small--one-sixth medium--one-sixth large--one-twelfth xlarge--one-twelfth icon-remove">
<p class="cart__product-meta">
<a href="/cart/change?line={{ forloop.index }}&quantity=0" id="remove-from-cart">
{% include 'svg-icon-remove' %}
</a>
</p>
</div>
What am I doing wrong? (I'm using an identical block of JS code to make the popup appear and it works for that)
Thanks!

Remove href from anchor tag and use in in the click function.,
Take a data attribute and add the required url in the data attribute.
<div class="grid__item receipt--hide small--one-sixth medium--one-sixth large--one-twelfth xlarge--one-twelfth icon-remove">
<p class="cart__product-meta">
<a id="remove-from-cart" data-url="/cart/change?line={{ forloop.index }}&quantity=0">
{% include 'svg-icon-remove' %}
</a>
</p>
</div>
Now, refer the data attribute using this in the function.
$('#remove-from-cart').click(function(e) {
var link = this.data("url")
// Preven link normal behavior
e.preventDefault();
$.ajax({
url: link,
type:'GET',
success: function(data){
$('#receipt-wrapper .receipt-row-2').html($(data).find('.line-item-container').html());
}
});
});

Anchor tag update div without page reload

I have this div which includes an anchor tag that loads a php script that essentially adds information to a database and returns back to this page. I want to use this achor tag to run that php script update the database and refresh this div without reloading the page. The php script need those two variables title and vote which used with the php $_GET[] function. Can this be done, and if so how? I have searched everywhere and no script seems to work. Will provide more information if needed. Thanks so much will give credit to everyone who helps.
<div class='like_box'>
<a href='#' class='counter' ><img src='img/like.png' class='vote'></a><p class='vote_text'>$like_num</p>
<p style='color: #fff;'>$like_username</p>
</div>
I've tried something like this
<script>
$('a.counter').click( function(e) {
e.preventDefault();
vote.php?vote=like&title=$title
});
</script>

Use this:
<div class='like_box'>
<a href='#' class='counter' ><img src='img/like.png' class='vote'></a><p class='vote_text'>$like_num</p>
<p class="vote_text1" style='color: #fff;'>$like_username</p>
</div>
In the javascript side (jquery)
$(".like_box a").click(function(event){
event.preventDefault();
$.ajax({
url: 'vote.php?vote=like&title=$title',
success: function(result){
// update $like_num and $like_username here
// if you do not have them binded use this
$('.like_box p.vote_text').text('<value from result>');
$('.like_box p.vote_text1').text('<value from result>');
}});
});

how to dynamically add jquery mobile popup effect to links

In jquery mobile, I dynamically add a tags that is supposed to open a popup like in this example below. But since it is dynamically added, the jquery mobile effects don't affect it. How can I get it to work like this?
Thanks
Actions...
<div data-role="popup" id="popupMenu" data-theme="b">
<ul data-role="listview" data-inset="true" style="min-width:210px;">
<li data-role="list-divider">Choose an action</li>
<li>View details</li>
<li>Edit</li>
<li>Disable</li>
<li>Delete</li>
</ul>
</div>

When you append any html into a page after the page's initial load, you need to reapply any of the jquery functions in order for them to work when the event occurs
Example...
if you currently have something like this:
<script type="text/javascript">
$(document).ready(function () {
$('a').on('click', function () {
//something
return false;
});
});
</script>
This will do //something whenever the user clicks on any < a > link.
Now that you are loading the new < a > links in after the document is ready, the code above will not apply to the new code as it was not on the page when the javascript applied the above code.
To fix this, you need to run the function that does the //something again after the new < a > has been loaded.
<script type="text/javascript">
$(document).ready(function () {
somethingFunction();
});
});
//this is where we put the code to apply an event, it is now recallable later on.
function somethingFunction(){
$('a').on('click', function () {
//something
return false;
});
}
</script>
Assuming that you are pulling in the new < a > html via an ajax query, you would need to call the somethingFunction() after the ajax query is successful
EG
$.ajax({
type: "POST",
url: "/action" ,
dataType: 'text',
success: function(data){
$('.popups').html(data);
somethingFunction(); // THIS IS WHERE IT APPLIES THE EVENT TO YOUR NEW HTML.
}
});

If I understood correctly, you want to add buttons dinamically, resulting in the style proposed in your example:
class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-gear ui-btn-icon-left ui-btn-a"
To apply jQuery Mobile enhancements after appending some HTML you have to call the widget creation method: .button(); in this case (can be .checkboxradio();, .listview();, etc).
I put toghether a JSFiddle which demonstrates dynamically creating a button calling .button() and also applying hardcoded classes (which I think it's not a good thing to do).

There is a demo available in jquery mobile documents Dynamically create popup
Following i write a simple html tags in javascript then append in to jquery mobile pages.
html:
<div data-role="page">
<div data-role="content" id="forpopup">
</div>
<div>
Here is the Fiddle Demo.
i hope this will be helpful.

Using jQuery post function, the returned link cannot have addClass function run on it

HTML
<div id="add_to_library" class="add-library-wrapper">
<a href="javascript:void(0)" class="library-select" id="library-status-select" >Click</a>
<div class="dropdown">
<ul>
<li><a onclick="create_library_entry('Complete', 123, 124);" href="javascript:void(0)">Stuff</a></li>
</ul>
</div>
jQuery
$('#library-status-select').click(function() {
$(this).toggleClass('open');
$('.dropdown').toggleClass('open');
});
function create_library_entry(status, user_id, anime_id) {
jQuery('#custom_lightbox').html('');
jQuery.post("/wp-content/themes/phanime/custom_functions/create_single_libraryEntry.php", {user_id : user_id, anime_id : anime_id, status : status}, function(data) {
//this is your response data from serv
console.log(data);
jQuery('#add_to_library').html(data);
});
}
So when I click on the anchor tag with the id of library-status-select it shows the div with the class dropdown. By adding an open class and so on. Once the dropdown shows it also has a link that does a jQuery post. The jQuery post returns it's result which in the #add_to_library id, where the link is contained. That link is replaced by another link that is returned from that jQuery.post. That link looks like this...
<a href="javascript:void(0)" class="library-select" id="library-status-select" >Click me updated</a>
It's essentially the same link with the same class / id but for some reason the jQuery.addClass / removeClass no longer works on the link that is returned from the jQuery.post. In other words the open class is not being added. If anyone knows exactly why this happens, it would be of great help.

Since you are replacing the contests you are dealing with dynamic contents so use event delegation
$('#add_to_library').on('click', '#library-status-select', function () {
$(this).toggleClass('open');
$('.dropdown').toggleClass('open');
});

I need some help with the Load function in JQuery

I currently have links w/ class="ajax" that I want to retrieve the element with id="test" from the file "data.html" in the same directory, and put that content into the id="content" div on my page:
<script>
$(document).ready(function(){
$("a.ajax").click(function(event){
$("#content").load("/data #test");
});
});
</script>
<a class="ajax" href="#">Text</a>
<div id="content"></div>
and externally, but in the same directory, I have data.html:
<div id="test">Will this show up?</div>
On the clicking of the anchor, Safari reports "page loading interupted", and no change occurs.
I definitely have JQuery called in the header. Can I get some help with this function? Thanks!

You have /data but the file is /data.html, assuming you're in the root. :)
I just tested what you have with this change and it works fine for me. I also recommend you get a tool like Firebug so you can easily see what your AJAX requests are doing.

$.ajax({
url: "data.html",
type: "POST",
success: function (answer) {
$("main_content").html($(answer).find("div#content_id").html());
}
});
I hope it will help you.