I already created many autocomplete, and there has never been a problem.
This time, I tried to insert an autocomplete in an existing page (very complex and having many javascript calls)
My code is simple like that :
$('#named_invitees_0_user_id').autocomplete({
source: 'www.bidon.com'
});
I tried to :
Charge this javascript inside a $(document).ready() function
Not charge this javascript on page loading, then execute the previous code in Firebug console
Add some parameters to autocomplete (minLength, disabled, delay, beforeSend, ...)
Set an array on source
In this 2 cases, my input 'understand' my autocomplete function, because it takes some of autocomplete specific attributes
<input id="named_invitees_0_user_id" name="named_invitees[0][user_id]" type="text" value="aaaa" autocomplete="off" class="ac_input">
But NO request is never send when I wrote something on my input (regarding the Firebug Network activity). I think some of the javascript already present on the page is tracking control of this query, but I have no idea what it can be.
And you ?
Edit:
Thanks to your replies. I follow your suggestions :
try to set an array as 'source' : doesn't change anything
remove all the JS of this page : only jQuery-1.4.3 and jQuery-ui-1.8.20 were loaded : doesn't change anything
change the value of minLength to 1 : doesn't change anything
check if the source url returns JSON : it's confirmed
check if the source url is on my website namespace : it's confirmed
Edit2:
Problem found !
There was an hidden JS code somewhere... An old "autocomplete" jquery include. Result : 2 autocomplete were defined.
I delete this hidden code and everything works ok !
Thanks for your replies.
Make sure your source is outputting proper json.
check http://jqueryui.com/autocomplete/#remote for documentation and sample code
here's an example:
$( "#named_invitees_0_user_id" ).autocomplete({
source: "search.php",
minLength: 2
});
use ":" after source!
Related
does anyone here have any idea how to set up Site Tracking by passing a contact's email address into Javascript Code?
I am on Wordpress using the visual builder Elementor's native contact form.
Here's the contact form: https://www.bestseo.sg/free-report/ (Bottom of the page)
I have already inserted ActiveCampaign's site tracking code sitewide.
However, it does not seem to start site tracking even after the form submission.
According to ActiveCampaign's documentation(https://help.activecampaign.com/hc/en-us/articles/221542267-An-overview-of-Site-Tracking#how-to-pass-a-contact-s-email-address-into-javascript-code), I believe I have to add this line of code:
vgo('setEmail', 'Email_Address_Goes_Here');
above
vgo('process');
But I have no idea what to replace 'Email_Address_Goes_Here' with, in order to call the actual contact's email after form submission.
Any help would be much appreciated!
Thank you.
So the plugin used to insert these JavaScript codes is https://wordpress.org/plugins/header-and-footer-scripts/ - I’d suggest to maybe just keep using that, and keep the scripts in the footer, so that this does not require too much modication.
Inside your template, you have to output the email addresse somewhere, where the JS can read it from - via a custom data attribute added to the body element for example.
The header.php of your theme should contain something similar to
<body <?php body_class(); ?>>
Modify that, to add a custom data attribute to store the email address entered in the from:
<body <?php body_class(); ?> data-freereportemail="<?php echo !empty($_POST['form_fields']['email']) ? esc_attr($_POST['form_fields']['email']) : ''; ?>">
If the POST parameter by that name is set, then it will be output as content of this attribute, otherwise it’ll simply stay empty.
Then modify the JavaScript code you insert via the plugin like this,
var freereportemail = $('body').attr('data-freereportemail');
if( freereportemail != '' ) {
vgo( 'setEmail', freereportemail );
}
This assumes that jQuery has already been loaded at this point, but I think that should most likely be the case.
If the attribute contained an email address, then this will execute the vgo tracker function, if the attribute value is empty, then it will simply skip this call.
This is not the most sophisticated approach, but it should do.
(Only if you had other forms on the site as well, that use a form field of that exact same name, you might be tracking more than intended. In that case, you’d need to find some additional criterion, to be able to differentiate between these different forms.)
A person at the AC support gave me thsi code :
jQuery('form').submit(function() {
var userEmail = jQuery("form input[type='email']").val();
vgo('setEmail', userEmail);
vgo('process');
});
I hope it'll help you.
I use FluentForms, so i just went on the form specific Custom JS/CSS to apply it (so i had no problems of proper targeting...)
the html code is way too long to copy and paste on stackoverflow so I'm just gonna link my site. If you go to the site, you will see the search bar above some designer names. basically I'm trying to implement autocomplete using jquery-ui plugin. and It doesn't show any result below the search bar. I've never used this plugin so I literally have no idea why this doesn't work.
I'm handling the autocomplete part in /js/autocomplete.js. There's not much code in it. data and adding to event listener. that's it.
let designers = [ .. ] // click to see whole data
$(function() {
$('#keyword').autocomplete({
source: designers,
minLength: 6
})
})
Any help would be appreciated :)
Actually when pressing on search input you have error in console which leading to this place in your code. That's why autocomplete doesn't work.
$(".m4").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
});
Try JQuery UI autocomplete (https://jqueryui.com/autocomplete/#default)
It does for me...
You've got minLength of 6 there meaning it won't search through the array until you've typed 6 characters, tried running the code with out the minLength parameter and worked as expected
I am wondering is there any solution to change or update the URL's query string part (visible in the browser's address bar) with some new values by clicking on some checkboxes through JavaScript or Jquery. I want to do this without any jQuery plugin.
When the user will click on any checkbox in a group then the data will be fetched from the database based on the user's selected value of checkbox. Along with it, the query string of URL will also be changed with new updated value. Note that the page will never be reloaded in this whole procedure. We can run through AJAX when checkbox is checked. How we can achieve this? A demo will be very much appreciated.
Yeah, this is a very common thing to do. window.replaceState is the function you're looking for. Alternatively you could also use pushState if you want to allow the user to be able to go back to the previous state of checkboxes, but that's more work and not always expected.
Then again, you actually need something to change one URL into another. Manipulating the URL as string is counter productive, so instead you can use a library like URI.js.
Use window.history like so :
window.history.pushState('page2', 'Title', '/new-uri');
For your case , you will have 2 nested functions: Event Listener which contains AJAX call + Callback of this ajax call :
$('[input]').change(function(){
if(this.checked){
//AJAX
$.get("URL",{},function(data){
//AJAX - Callback
window.history.pushState('page2', data.title, data.url);
});
}
});
My classmates and I are building a small submission form in which a user submits shipping and billing information for their order.
The two main factors that effect the order price are the type of shipping the user selects ( $shippingType ) and the price of the item ( $initialPrice ). The variable $totalPrice is then defined which adds $shippingPrice and $initialPrice.
What we are working towards is having $totalPrice update when $shippingPrice is changed without the user having to resubmit the form. Can this be solved using php? Or would we have to use a jquery event to update the page in realtime.
You'll want to use some sort of jQuery as mentioned above. It's important to understand that PHP is only used either in AJAX, or before the page has loaded. Meaning you cannot use PHP on a page that has already been loaded. To change elements after it's loaded you would need to use javascript/jquery of some sort. I've attached a quick fiddle to illustrate an example of what I think you're looking for.
The gist of it is that you would bind a change event so that when the elements you want to use for mathing are changed you can update the other items.
$('#shipping').bind('focus, change', function() {
//Get the inital value of the #cost input
var initial_val = parseInt($("#cost").val());
//Value from the #shipping input
var additional = parseInt($("#shipping").val());
//Parsed ints because '+' is used for concatination as well, so making the vars ints will make '+' go back to math.
$("#cost").val(initial_val + additional);
});
No it's not the prettiest, but it works.
Here's the Fiddle:
http://jsfiddle.net/Lb486ck8/2/
You will have to use Javascript to accomplish this behavior. Furthermore, you will need to use AJAX (Asynchronous Javascript And XML) to make it work. AJAX is a way for Javascript to send requests to a web page "behind the scenes" while your page stays in the foreground.
http://api.jquery.com/jQuery.post/
I am trying to use the jQuery POST function but it is handling the request in AJAX style. I mean it's not actually going to the page I am telling it to go.
$("#see_comments").click(function() {
$.post(
"comments.php",
{aid: imgnum},
function (data) {
}
);
});
This function should go to comments.php page with the aid value in hand. It's posting fine but not redirecting to comments.php.
#Doug Neiner Clarification:
I have 15 links (images). I click on a link and it loads my JavaScript. The script knows what imgnum I opened. This imgnum I want in the comments.php. I have to use this JavaScript and no other means can do the trick. The JavaScript is mandatory
Your method successfully POSTs the aid value. But in the comments.php when I try to echo that value, it displays nothing.
I am using Firebug. In the Console, it shows the echo REQUEST I made in Step (2) successfully.
I know what you are trying to do, but its not what you want.
First, unless you are changing data on the server, don't use a POST request. Just have #see_comments be a normal <a href='/comments.php?aid=1'>...
If you have to use POST, then do this to get the page to follow your call:
$("#see_comments").click(function() {
$('<form action="comments.php" method="POST">' +
'<input type="hidden" name="aid" value="' + imgnum + '">' +
'</form>').submit();
});
How this would actually work.
First $.post is only an AJAX method and cannot be used to do a traditional form submit like you are describing. So, to be able to post a value and navigate to the new page, we need to simulate a form post.
So the flow is as follows:
You click on the image, and your JS code gets the imgnum
Next, someone clicks on #see_comments
We create a temporary form with the imgnum value in it as a hidden field
We submit that form, which posts the value and loads the comments.php page
Your comments.php page will have access to the posted variable (i.e. in PHP it would be $_POST['aid'])
$("#see_comments").click(function () {
$('<form action="comments.php" method="POST"/>')
.append($('<input type="hidden" name="aid">').val(imgnum))
.appendTo($(document.body)) //it has to be added somewhere into the <body>
.submit();
});
While the solution by Doug Neiner is not only correct but also the most comprehensively explained one, it has one big problem: it seems to only work at Chrome.
I fidgeted around for a while trying to determine a workaround, and then stumbled upon the second answer by devside. The only difference is the extra code appendTo($(document.body)). Then I tested it in firefox and it worked like a charm. Apparently, Firefox and IE need to have the temporary form attached somewhere in the DOM Body.
I had to do this implementation for a Symfony2 project, since the path generator inside the .twig templates would only work with GET parameters and messing with the query string was breaking havoc with the security of the app. (BTW, if anyone knows a way to get .twig templates to call pages with POST parameters, please let me know in the comments).
i think what you're asking is to get to 'comments.php' and posting aid with value imgnum. The only way to do this is to submit this value with a form.
However, you can make this form hidden, and submit it on an arbitrary click somewhere with jquery.
html necessary (put anywhere on page):
<form id='see_comments_form' action='comments.php' action='POST'>
<input id='see_comments_aid' type='hidden' name='aid' value=''>
</form>
js necessary:
$("#see_comments").click(function(){
$('#see_comments_aid').val(imgnum);
$('#see_comments_form').submit();
);
this will redirect to 'comments.php' and send the proper value imgnum (that i assume you are getting from somewhere else).
Actually, $.post() sends some data to the server. It does not cause any redirection unless you do it in your server side code which handles the POST request. I can suggest two solutions:
To go to comment page, instead of using JQuery post, you can simply use a 'anchor' tag - Show Comments.
Or if you are want to go through JQuery, you can use this code snippet: $(location).attr("href", "comments.php?aid=1");
didnt exactly solve the problem. but did manage to work around it. i had to do a lot modification to the JS to make this work, but the core problem of this question was solved by doing this:
$("#see_comments").attr({href: "comments.php?aid='"+imgnum+"'"});
this appended the aid value to the URL as #Doug Neiner initially suggested me to do.
Thanks a lot Doug for all the effort. I really appreciate. +1 and accept to your answer for the effort.