Shopify AJAX Request - e.preventDefault Not Working - javascript

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

Related

Undesired text is added when setting the href attribute with JavaScript

I am developing on localhost: http://127.0.0.1:8000
When I perform some search on the website, I want that if the query does not return results, the New entry button allows the creation of a new article from what has been searched in the search input.
So if I search 'whatever' and there is no article called 'whatever', the button should redirect me to the creation page of the article 'whatever'.
<script>
$( document ).ready(function() {
var newEntryUrl = window.location.hostname+":8000/wiki/_create/?slug="+"{{ search_query }}";
document.getElementById('newEntrybtn').setAttribute('href',newEntryUrl);
});
</script>
{% for article in articles %}
{% block wiki_search_loop2 %}
{% endblock %}
{% empty%}
There is no page created for '{{ search_query }}', would you like to create a page nowee?
<a class="btn btn-success" id="newEntrybtn" role="button"><i class="fa fa-plus" aria-hidden="true"></i> New entry ({{ search_query }})</a>
{% endfor %}
To calculate the url to create the new article, I use this line:
var newEntryUrl = window.location.hostname+":8000/wiki/_create/?slug="+"{{ search_query }}";
If I do an alert(newEntryUrl); it returns the desired result: 127.0.0.1:8000/wiki/_create/?slug=whatever
However, if I click the newEntrybtn button, it redirects me to the following url: http://127.0.0.1:8000/wiki/_search/127.0.0.1:8000/wiki/_create/?slug=whatever
Which is strange to me since at no time have I assigned the href attribute to the button, much less have I assigned it any value. It seems that somehow, by default, it gets the value of the current page.
My question is, how can I remove the current page: http://127.0.0.1:8000/wiki/_search/ so that the button href just has this structure: 127.0.0.1:8000/wiki/_create/?slug=whatever ?
I think you are appending the value twice. Once when the page loads because it is in the document.ready function and once again when the button is clicked. Try writing it in another function and calling the function when the button is clicked.
setAttribute is being called twice
https://codepen.io/sijbc/pen/zYNdrmz
.setAttribute() is being called twice
function createUrl(){
var newEntryUrl = window.location.hostname+":8000/wiki/_create/?slug="+"{{ search_query }}";
var newEntryBtn = document.getElementById('newEntrybtn')
newEntryBtn.addEventListener("click" function(){
newEntryBtn.setAttribute('href',newEntryUrl);
})
The problem is because you are using a relative URL as the href, causing the browser to append this to the current URL you are looking at.
In your example, your button will be set as follows:
<a class="btn btn-success" id="newEntrybtn" role="button" href="127.0.0.1/...">
And clicking on it will append the href to the current URL since the browser will consider it as a resource of the current page.
Following your example, using an absolute URL will allow you to go directly to the URL as you have it set as long as you know the full structure (in your case, you are missing the protocol/scheme):
<a class="btn btn-success" id="newEntrybtn" role="button" href="http://127.0.0.1/...">
Or ideally you should use a relative URL by defining correctly the segment of the URL it represents (defining the path from your host where the resource is located):
<a class="btn btn-success" id="newEntrybtn" role="button" href="/wiki/_create/...">
(notice how the URL starts with a slash and omits the server host and protocol).
It is preferred in most cases to use relative URLs to make your code run regardless of the server (environment), meaning it will always use the same server or protocol of the current URL. But it's up to you based on your needs.
References:
https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_URL#absolute_urls_vs_relative_urls
I found a good solution without using JavaScript, in just one line of code:
<a class="btn btn-success" href="/wiki/_create/?slug={{ search_query }}" role="button"><i class="fa fa-plus" aria-hidden="true"></i> New entry ({{ search_query }})</a>
Thanks to those who have posted an answer, you have inspired me a lot.

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

display a link from another php page without page reload

So basically I have a link as a div in page 1.
<a href="/computing/abc/page2.php" class="topic-list-item">
<h3 class="topic-title">Internet Protocol Basics</h3>
<div class="topic-description-text">
Learn how Internet Protocol is used
</div>
</a>
When I click on the div it opens the page 2 by reloading the page.
I want the new content of page 2 to appear without any reloading while at the same time this changes my URL.
Is this possible?
HTML:
Disable your <a> tag because you will send an ajax request instead of loading a new page
<a href="#" data-url="/computing/abc/page2.php" class="topic-list-item">
<h3 class="topic-title">Internet Protocol Basics</h3>
<div class="topic-description-text">
Learn how Internet Protocol is used
</div>
</a>
JS (jQuery):
Bind the click event to execute your ajax call, then set the HTML your server send back where you want it to be.
$("a").click(function(){
$.ajax({
url: $(this).data("url"),
method: 'get',
success: function(data){
$("#targetContainer").html(data);
}
})
});
The success function's argument will be what your server send back, the /computing/abc/page2.php page. You can set it where you need it to be on your page (here inside $("#targetContainer") ).
See Modify the URL without reloading the page for the url modification without reload

Ajax not working in a jquery split button

I have a project in Codeigniter. There is a link
Edit
Clicking on the link will go to the main controller and will execute the function updatearecord. (79 is just an id).
ClientParent is called by a javascript using Ajax call
function testfunction() {
$('a.testclass').live('click', function() {
$url = $(this).attr('href');
$.ajax({
url: $url,
data: {},
dataType: 'html',
type: 'post',
success: studentSubjectCallBack
});
The link works fine anywhere on the page, but when I use it in a split button, it does not work. Here is the code for the split button
<div>
<div>
<a class="split-button"><span class="ui-button-text">Select</a>
Menu
</div>
<ul style="display:none;">
<li>Delete</li>
<li>Edit</li>
</ul>
</div>';
Can anyone help me out. I really dont understand why it is not working inside a split button
It's because you don't have testclass assigned to the a link in the second example. Your jQuery is looking for this class and can't find any elements that match.
Change:
$('a.testclass').live('click', function() {
to
$('a.editStudentSubject').live('click', function() {
As a side note, .live is now deprecated as per jQuery 1.7.1. Please use .on, such as:
$(document).on('click', 'a.editStudentSubject', function() {
Instead of :
<a class="split-button"><span class="ui-button-text">Select</a>
Try:
<a class="split-button testclass"><span class="ui-button-text">Select</a>
See: http://jsfiddle.net/leonardeveloper/8vKfb/2/

using django tags with javascript function during hyperlinking

I have a html code snippet
home
I want to add a call to javascript funciton in the end of url,
if home url is http://localhost/home then above code generates
http://localhost/home?p=1
however I do not understand how to add a parameter at the end of it.
following does not work
<a href = "{% url home %}?p=1"+getParameters()>home</a>
You're not using template tags properly (see: https://docs.djangoproject.com/en/1.4/ref/templates/builtins/#url)
Correct:
{% url <url-name> %}
Now "{{ url home }}" returns empty string so you're adding GET param for current URL.
{{ x }} form returns variable named "x".
Adding parameters to URL using JS
This is simple example of on click script changing anchor url:
anchor
<script>
function getParameters(elem) {
elem.href = elem.href + "&abc=1";
}
</script>

Categories