I have a jQuery custom file which is disabling or conflicting my other jQuery file, please how do i resolve this. Please see below:
My Custom file:
$(".search").keyup(function()
{
var searchid = $(this).val();
var dataString = 'search='+ searchid;
if(searchid!='')
{
$.ajax({
type: "POST",
url: "search.php",
data: dataString,
cache: false,
success: function(html)
{
$("#result").html(html).show();
}
});
}return false;
});
Conflicting Files:
<script src="js/jquery.isotope.min.js"></script>
<script src="js/nprogress.js"></script>
I would be more than happy if this is resolved.
I'm assuming that you know for certain jQuery is conflicting - you've checked the console errors, etc.
You could wrap your jQuery in a self-executing anonymous function as follows:
(function($) {
$(".search").keyup(function()
{
var searchid = $(this).val();
var dataString = 'search='+ searchid;
if(searchid!='')
{
$.ajax({
type: "POST",
url: "search.php",
data: dataString,
cache: false,
success: function(html)
{
$("#result").html(html).show();
}
});
}return false;
});
})(jQuery);
EDIT - a bit of explanation of what's happened above. In order to prevent any potential conflicts with other scripts / frameworks we are passing the jQuery object as an argument to our function (hence function($)). The benefits of doing this is that you can now use $ locally within the function at will. Without fear of conflicting with other scripts on a global scope.
I Was able to fix the problem by just wrapping it with:
$(document).ready(function() {
//-----
});
Related
I'm having a lot of trouble with getting this code working:
<script type = "text/javascript">
jQuery(document).ready(function($){
$('#submitbutton').click(function(){
var email=document.getElementById('emailadd').value;
var password=document.getElementById('pass').value;
$.ajax({
type: "POST",
url: "/wp-content/themes/roots-master/login.php",
data: {emailaddress:'email', password:'password'},
dataType: "text",
success:function(response){
alert("success");
}
});
});
});
</script>
When I comment out the $.ajax function, the javascript works fine(I tested it with an alert). However, the $.ajax part doesn't seem to be working. Does anybody have any suggestions?
When I change the code to the following, the javascript appears to not work as well:
$('#submitbutton').click(function(){
var email=document.getElementById('emailadd').value;
var password=document.getElementById('pass').value;
$.ajax({
alert(password);
});
});
I am using wordpress so I didn't put any links to jquery in the head. Instead, I put the following into my functions.php and then jquery started working.
wp_deregister_script('jquery');
wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery /1/jquery.min.js', false, '1.9.1', false);
wp_enqueue_script('jquery');
UPDATE: For some reason, when I put an alert after the $.ajax, it works!
jQuery(document).ready(function($){
$('#submitbutton').click(function(){
var email=document.getElementById('emailadd').value;
var password=document.getElementById('pass').value;
$.ajax({
dataType: "html",
type: "POST",
evalScripts: true,
url: "/wp-content/themes/roots-master/login.php",
data: {emailaddress:'email', password:'password'},
dataType: "text",
success:function(){
alert("success");
}
});
alert("testing");
});
});
Does anyone know why this would be?
Solved it!! It should have looked like this:
$('#submitbutton').click(function(j){
j.preventDefault();
I was missing the preventDefault()...doh!
This question already has answers here:
$(this) inside of AJAX success not working
(2 answers)
Closed 9 years ago.
I am using JQuery and AJAX to submit and process a form. Once the user submits the form, the html from the processing form (Using a success function) should get appended to the the current input. But what keeps happening, is that the html gets appended to all inputs on the page, not just the one being selected.
My Code:
$(".comment-form").submit(function() {
var dataString = $(this).serialize();
$.ajax({
type: "POST",
url: "comment.php",
data: dataString,
success: function(html) {
$(".comment-input-wrap").append(html); <-- The code in question
}
});
$(this).find('.comment-input').val("");
return false;
});
I Tried to use:
$(this).parent().append(html);
But I think the problem is that I can't use $(this) because it is outside the scope of the function. What can I do?
Thanks!
Simplest approach would be to cache the element before ajax call and access it inside the callback.
You can do this way:
$(".comment-form").submit(function() {
var dataString = $(this).serialize();
var $this = $(this); //Cache it here
$.ajax({
type: "POST",
url: "comment.php",
data: dataString,
success: function(html) {
$this.parent().append(html); //access the variable
}
});
$(this).find('.comment-input').val("");
return false;
});
Or use context property of ajax.
$.ajax({
type: "POST",
url: "comment.php",
data: dataString,
context: this, //Set the context for callback
success: function(html) {
$(this).parent().append(html); //access it using the context itself.
}
});
or you can also use $.proxy
$.ajax({
type: "POST",
url: "comment.php",
data: dataString,
success: $.proxy(function(html) {
$(this).parent().append(html); //access it using the context itself.
}, this); // Set the context
});
or using ecmascript5 function.prototype.bind
$.ajax({
type: "POST",
url: "comment.php",
data: dataString,
success: (function(html) {
$(this).parent().append(html); //access it using the context itself.
}).bind(this); // Set the context
});
You could simply store $(this) in a variable:
{
var $this = $(this);
{
$this.append(html);
}
}
I am using this pretty simple jquery function, but it seems to work only on the first keyup..
$('#cmentuser').keyup(function() {
var mess = document.getElementById('cmentuser').value;
var dataString = 'message='+ mess;
$.ajax({
type: "POST",
url: "atuamae.org/comentbyuser.php",
data: dataString,
success: function() {
}
});
});
any ideas on how to keep it active?
It works, also in the following form (changed mess into jQuery(this).val() and relied on jQuery when encoding the data string):
$('#cmentuser').keyup(function() {
$.ajax({
type: "POST",
url: "atuamae.org/comentbyuser.php",
data: {
'message': jQuery(this).val()
},
success: function() {
// success callback
}
});
});
Proof that it works: jsfiddle.net/xfxPR/
You may be dynamically changing some elements (eg. changing ID or assuming id does not need to be unique), or maybe unbinding the event. Just make sure the event is being attached and stays attached to the element you need.
$(document).on('keyup', '#cmentuser', function(e) {//try to find lower element then doc
var dataString = 'message='+ $(e.target).val();
$.ajax({
type: "POST",
url: "/comentbyuser.php", //no cross domain requests, no need for domain name
data: dataString,
success: function() {}
});
});
try this
$('#cmentuser').live('keyup',function() {
var mess = $(this).val();
var dataString = 'message='+ mess;
$.ajax({
type: "POST",
url: "atuamae.org/comentbyuser.php",
data: dataString,
success: function() {
}
});
});
I'm trying to get data from a resource with jquery's ajax and then I try to use this data to populate a bootstrap popover, like this:
$('.myclass').popover({"trigger": "manual", "html":"true"});
$('.myclass').click(get_data_for_popover_and_display);
and the function for retrieving data is:
get_data_for_popover_and_display = function() {
var _data = $(this).attr('alt');
$.ajax({
type: 'GET',
url: '/myresource',
data: _data,
dataType: 'html',
success: function(data) {
$(this).attr('data-content', data);
$(this).popover('show');
}
});
}
What is happening is that the popover is NOT showing when I click, but if I hover the element later it will display the popover, but without the content (the data-content attribute). If I put an alert() inside the success callback it will display returned data.
Any idea why is happening this? Thanks!
In your success callback, this is no longer bound to the same value as in the rest of get_data_for_popover_and_display().
Don't worry! The this keyword is hairy; misinterpreting its value is a common mistake in JavaScript.
You can solve this by keeping a reference to this by assigning it to a variable:
get_data_for_popover_and_display = function() {
var el = $(this);
var _data = el.attr('alt');
$.ajax({
type: 'GET',
url: '/myresource',
data: _data,
dataType: 'html',
success: function(data) {
el.attr('data-content', data);
el.popover('show');
}
});
}
Alternatively you could write var that = this; and use $(that) everywhere. More solutions and background here.
In addition to the answer above, don't forget that according to $.ajax() documentation you can use the context parameter to achieve the same result without the extra variable declaration as such:
get_data_for_popover_and_display = function() {
$.ajax({
type: 'GET',
url: '/myresource',
data: $(this).attr('alt'),
dataType: 'html',
context: this,
success: function(data) {
$(this).attr('data-content', data);
$(this).popover('show');
}
});
}
i am using this code, that works well. Now i need to change only the name of inputs, input1, input 2, and so on.
<script type="text/javascript">
$(document).ready(function() {
$("#input1 > select.profissao").live('change', function(){
$.ajax({
type: "POST",
data: "data=" + $(this).val(),
url: "drop1.php",
success: function(html) {
$("#input1 > select.estatistica").html(html);
}
});
});
});
</script>
why reason this version doesn't work? i already check the code in lint, and none error is detected.
Basically if i copy the code above and change input1 to input2, works well, but my objective is reduce the redundancy.
<script type="text/javascript">
$(document).ready(function() {
for (i=1; i<3; i++) {
$("#input"+i+" > select.profissao").live('change', function(){
$.ajax({
type: "POST",
data: "data=" + $(this).val(),
url: "drop1.php",
success: function(html) {
$("#input"+i+" > select.estatistica").html(html);
}
});
});
}
});
</script>
EDIT: the output is something like that <option value=2>Artes</option><option value=1>Humanidades</option> but this is not added to the html
with the loop my drop down simple stops to work
You can try
<script type="text/javascript">
$(document).ready(function() {
for (i=1; i<3; i++) {
(function(idx){
$("#input"+idx+" > select.profissao").live('change', function(){
$.ajax({
type: "POST",
data: "data=" + $(this).val(),
url: "drop1.php",
success: function(html) {
$("#input"+idx+" > select.estatistica").html(html);
}
});
});
})(i);
}
});
</script>
And your function get the same reference of i in a scope.
The top and bottom block have different classes for the selects is that one problem?
Also the concatenation approach seems less maintainable.
Perhaps consider using something like this
$('#input1, #input2, #input3').children('select.area').each(function () {
$(this).live(...);
});
Edit: also swapping out html contents of selects in ie is not very well supported and has led to quite a few bugs for me so you may want to consider rebuilding the select each time