I have a piece of javascript code where I am trying to get to the previous element declared. Currently I have two onclick functions within eachother.
$('#formIngredient').on("click", '.newIngredient', function() {
value = $(this).attr('data-name');
$(this).attr('data-isactive', 'true');
$('#newIngredientInput').val(value);
$('#newIngredient').modal('show')
$('#createNewIngredient').click(function() {
inputName = $('#newIngredientInput').val();
inputCategory = $('#newIngredientCategory').val();
var newIngredient = $.ajax({
type: "GET",
url: '/content/includes/ajax/createNewIngredient.php',
data: {name: inputName, id_category: inputCategory}
});
newIngredient.done(function(result) {
//PAI.showPage(PAI['PAGE']);
$(this).parent().replaceWith('Hello');
$('#newIngredient').modal('hide');
});
});
});
I am trying to use the previous element with this code.
$(this).parent().replaceWith('Hello');
Any ideas?
The scope of $(this) seems to be your issue here... you need to correct your code.
$('#createNewIngredient').click(function() {
var self = this; // This is the #createNewIngredient element
inputName = $('#newIngredientInput').val();
inputCategory = $('#newIngredientCategory').val();
var newIngredient = $.ajax({
type: "GET",
url: '/content/includes/ajax/createNewIngredient.php',
data: {name: inputName, id_category: inputCategory}
});
newIngredient.done(function(result) {
//PAI.showPage(PAI['PAGE']);
// $(this).parent().replaceWith('Hello'); // $(this) scope is lost to current function... so
$(self).parent().replaceWith('Hello'); // This is now the scope you need
$('#newIngredient').modal('hide');
});
});
Use the below code:
$(this).parent().prev().replaceWith('Hello');
I'll pass about your code logic (nested click events), but your problem seems to by about 'this' reference (scoping):
var self = this;
var newIngredient = $.ajax({
type: "GET",
url: '/content/includes/ajax/createNewIngredient.php',
data: {name: inputName, id_category: inputCategory}
});
newIngredient.done(function(result) {
//PAI.showPage(PAI['PAGE']);
$(self ).parent().replaceWith('Hello');
$('#newIngredient').modal('hide');
});
This was the simplest way, but better would be to use closure:
(function(self){
var newIngredient = $.ajax({
type: "GET",
url: '/content/includes/ajax/createNewIngredient.php',
data: {name: inputName, id_category: inputCategory}
});
newIngredient.done(function(result) {
//PAI.showPage(PAI['PAGE']);
$(self ).parent().replaceWith('Hello');
$('#newIngredient').modal('hide');
});
})(this);
Related
I'm using Zend Framework 2.
I would like to know how to get data defined in html in my javascript code.
html
<tr class="MyClass" data-MyData="<?php echo json_encode($array);?>">
javascript
$(document).on('click','.MyClass', function () {
var temp =document.getElementsByClassName("data-MyData");
$.ajax({
url: path_server + "pathDefinedInMyConfig",
type: 'post',
encode: true,
dataType: 'json',
data: {
'temp ': temp
},
success: function (data) {
//some code
},
error: function () {
alert("ERROR");
}
});
});
The problem is I don't have access to row in my Controller method. And i want to have access to My $array defined in html in my Controller.
Problem is that you are trying to find a class by the name data-MyData, but the object you "want" to look for is "MyClass"
Try something like var temp =document.getElementsByClassName("MyClass").attr("data-MyData");
Even better is that since you click on the object with MyClass you can use $(this).attr('data-MyData');
then result will look like: var temp = $(this).attr('data-MyData');
Simply replace temp var assignment line:
var temp =document.getElementsByClassName("data-MyData");
with this one:
var temp = this.getAttribute("data-MyData");
Since you use jQuery use the following:
$('.MyClass').data('MyData')
or
$('.MyClass').attr('data-MyData')
use like this-
$(document).on('click','.MyClass', function () {
var temp =$(this).attr('data-MyData');
$.ajax({
url: path_server + "pathDefinedInMyConfig",
type: 'post',
encode: true,
dataType: 'json',
data: {
'temp ': temp
},
success: function (data) {
//some code
},
error: function () {
alert("ERROR");
}
});});
You have a wrong selector. document.getElementsByClassNames() returns the collections so you have to loop through to get the target element:
var temp =document.getElementsByClassName('MyClass');
[].forEach.call(temp, function(el){
console.log(el.dataset['MyData']);
});
or as you are using jQuery then you can use .data():
var temp =$(this).data("MyData");
and with javascript:
var temp =this.dataset["MyData"];
// var temp =this.dataset.MyData; // <---this way too.
I want to append data into divs by passing their id as attributes in a script tag. In this example the first-div should get get 'test1' appended to it, and the second-div should get the 'test2' appended to it.
However, the result it that both 'test1' and 'test2' are appended to second-div. first-div is empty. I'm guessing it has to do with how document.currentScript is functioning. Is there any way to get the result I am looking for?
<div id="first-div"></div>
<div id="second-div"></div>
<script attr1="name1" attr2="name2" to-div="first-div" type="text/javascript">
var this_script = document.currentScript;
var attr1 = this_script.getAttribute('attr1');
var attr2 = this_script.getAttribute('attr2');
var append_div = this_script.getAttribute('to-div');
$.ajax({
url: "/dir?attr1=" + attr1,
type: 'GET',
success: function(data) {
$('#' + append_div).append("test1");
});
</script>
<script attr1="name3" attr2="name4" to-div="second-div" type="text/javascript">
var this_script = document.currentScript;
var attr1 = this_script.getAttribute('attr1');
var attr2 = this_script.getAttribute('attr2');
var append_div = this_script.getAttribute('to-div');
$.ajax({
url: "/dir?attr1=" + attr1,
type: 'GET',
success: function(data) {
$('#' + append_div).append("test2");
});
</script>
Also, in the solution, the scripts cannot have id attributes, which is why I am trying to use document.currentScript.
The reason for this is that the code will be hosted on my servers. The code will append information into the divs the user wants, given parameters passed through attributes on the script tag. In the end the user should be able to use:
<script attr1="var1" attr2="var2" to-div="custom-div" src="http://www.myurl.com/assets/script.js" type="text/javascript"></script>
To insert data into their custom-div based on code I run on my servers dependend on the parameters attr1 and attr2 they provide.
Your problem is that var append_div is a global variable and each time a new script tag is encountered it gets overwritten with the new value.
Since ajax is asynchronous , by the time the responses return the other script tags will have been evaluated so append_div will have the value of the last script tag.
You could fix this by creating a function that wraps the ajax
function doAjax(elementId, attr1) {
$.ajax({
url: "/dir?attr1=" + attr1,
type: 'GET',
success: function (data) {
$('#' + elementId).append("test2");
}
});
}
doAjax(append_div, attr1);
An even better solution as pointed out by #Rhumborl is to use an IIFE
(function( elementId, attr1){
$.ajax({
url: "/dir?attr1=" + attr1,
type: 'GET',
success: function (data) {
$('#' + elementId).append("test2");
}
});
}(elementId, attr1);
Or wrap all of your code in an IIFE and no arguments would need to be passed in.
(function(){
var this_script = document.currentScript;
var attr1 = this_script.getAttribute('attr1');
var attr2 = this_script.getAttribute('attr2');
var append_div = this_script.getAttribute('to-div');
$.ajax({
url: "/dir?attr1=" + attr1,
type: 'GET',
success: function(data) {
$('#' + append_div).append("test2");
}
});
}();
I want to change the value of a label on mouse over. This is what I have done so far:
$(function () {
var hoverOff = "";
$("[id*=GV] td").hover(function () {
hoverOff = $("label", $(this).closest("td")).text();
$.ajax({
type: "POST",
url: "MyMethode.aspx/GetNewValue?text=" + hoverOff,
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
$("label", $(this).closest("td")).html(data.d);
}
});
},
function () {
$("label", $(this).closest("td")).html(hoverOff);
}
);});
At the beginning I save the current text in hoverOff and send that value to the method GetNewValue wich returns the new value and inside ajax success I want to apply that value to the label. The problem is that the text for label never changes, although data.d contains the new text. Should I use something else instead of .html()?
this inside ajax callback isn't referring to the current hovered TD but to the jqXHR object. You can use $.ajax context option:
context: this,
BTW, $(this).closest("td") is quite unrelevant because obviously, even you have nested TDs, $(this).closest("td") will always return the current TD, so you could just use this:
hoverOff = $("label", this).text();
And data: "{}", could be data: {},, no point of setting a string here. >> because you are setting contentype to JSON
It's a context problem you can't use this inside success function, try this code:
$(function () {
var hoverOff = "";
$("[id*=GV] td").hover(function () {
var label = $("label", $(this).closest("td"));
hoverOff = label.text();
$.ajax({
type: "POST",
url: "MyMethode.aspx/GetNewValue?text=" + hoverOff,
data: {},
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
label.html(data.d);
}
});
},
function () {
label.html(hoverOff);
}
);});
You could use this solution from https://stackoverflow.com/a/10701170/3421811
$('.btn').hover(
function() {
var $this = $(this); // caching $(this)
$this.data('initialText', $this.text());
$this.text("I'm replaced!");
},
function() {
var $this = $(this); // caching $(this)
$this.text($this.data('initialText'));
}
);
I have a vote function in one of my projects. Please see following code.
$(function () {
$(".vote").click(function () {
var id = $(this).data("id");
var name = $(this).data("name");
var dataString = 'id=' + id;
//var dataId = id;
var parent = $(this);
if (name == 'up') {
$(this).fadeIn(200).html;
$.ajax({
type: "POST",
url: "vote_up.php",
data: dataString,
cache: false,
success: function (html) {
parent.parent().find(".display-vote").html(html);
}
});
} else {
$(this).fadeIn(200).html;
$.ajax({
type: "POST",
url: "vote_down.php",
data: dataString,
cache: false,
success: function (html) {
parent.parent().find(".display-vote").html(html);
}
});
}
return false;
});
});
and I'm using jQuery infinite scroll to load rest of the pages/posts. I'm using following code in main page and second page which i load rest of the data
('#left').infinitescroll({
navSelector: '#page-nav', // selector for the paged navigation
nextSelector: '#page-nav a', // selector for the NEXT link (to page 2)
itemSelector: '.post-box', //
}, function (newElements, data, url) {
$(".vote").click(function () {
var id = $(this).data("id");
var name = $(this).data("name");
var dataString = 'id=' + id;
//var dataId = id;
var parent = $(this);
if (name == 'up') {
$(this).fadeIn(200).html;
$.ajax({
type: "POST",
url: "vote_up.php",
data: dataString,
cache: false,
success: function (html) {
parent.parent().find(".display-vote").html(html);
}
});
} else {
$(this).fadeIn(200).html;
$.ajax({
type: "POST",
url: "vote_down.php",
data: dataString,
cache: false,
success: function (html) {
parent.parent().find(".display-vote").html(html);
}
});
}
return false;
});
});
Issue is after 2nd 3rd or any other page load, vote function is triggering twice. How can I fix this issue. Any help will be appreciated.
Maybe if you unbind the click event and then bind it
function(newElements, data, url){
$(".vote").unbind( "click" );
$(".vote").click(function() {
You need to unbind the click event before binding it again.
[...]
$(".vote").unbind('click').click(function()
[...]
or
[...]
$(".vote").off('click').click(function()
[..]
depending on the version of jQuery you are using.
I'm trying to do an autocomplete to my textbox, but it doesn't work. Follow my code.
$(function () {
var credenciada = '<%= credenciadaId %>';
xml_NomeCompleto = "";
var Nomes = "";
var retorno = '';
var count = 0;
var t = '';
$.ajax({
url: "../Xml/AcessoExterno.aspx?Credenciada=" + credenciada,
type: "get",
dataType: 'xml',
async: false,
success: function (data) {
$(data).find("REGISTRO").each(function () {
t = $(this).find("NOMECOMPLETOUSUARIO").text();
Nomes += ["\"" + t + "\","];
});
}
});
$("#ctl00_contentConteudo_txtNome").autocomplete({ source: Nomes });
});
The variable 't' receives all the names of my users, normally, but the autocomplete don't work.
Wait for ajax response to complete and then initialize the autocomplete because before you initialize the plugin data is not available. Also the way you are creating Nomes(source) is wrong. Declare it as an array and use push method to populate it.
Try this
var Nomes = [];
$.ajax({
url: "../Xml/AcessoExterno.aspx?Credenciada=" + credenciada,
type: "get",
dataType: 'xml',
async: false,
success: function (data) {
$(data).find("REGISTRO").each(function () {
Nomes.push($(this).find("NOMECOMPLETOUSUARIO").text());
});
$("#ctl00_contentConteudo_txtNome").autocomplete({ source: Nomes });
}
});