Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I am learning jquery. I wrote an script but it is not working
1 My HTML
<ul id="recur" class="elasticstack">
<li id=<?=$item['id']?>>.......</li>
....................................
</ul>
2 My jquery function
function viewDetails()
{
$('#recur>li').live(function(){
var id = $(this).attr('id');
$.ajax({
url:'myUrl'
,type:'post'
,dataType:'json'
,data:{propertyId:id}
,success:function(data){
console.log(data);
}
});
});
}
where is my error? Thanks all!
I think you have more id "recur" in same html.
Check your jquery library version for live function. you can use 1.8 version of library
Firstly, you've omitted the event you want handled for each <li> element. Let's assume click for now...
If you're using jQuery > 1.9, you cannot use .live(). Instead, use .on() with event delegation
$('#recur').on('click', 'li', function(e) {
var id = this.id;
$.ajax({
url: 'myUrl',
type: 'POST',
dataType: 'json',
data: {propertyId: id}
}).done(function(data) {
console.log(data);
});
});
You are missing the quotes in the id. Try this:
<ul id="recur" class="elasticstack">
<li id="<?=$item['id']?>">.......</li>
</ul>
You cant get the id because isn't there.
A better way to do the jQuery part is:
function viewDetails(){
$('#recur').find('li).each(function(){
$(this).on('click', function(){
var id = $(this).attr('id');
$.ajax({
url:'myUrl'
,type:'post'
,dataType:'json'
,data:{propertyId:id}
,success:function(data){
console.log(data);
}
});
});
});
}
Don't use the .live() method. Is deprecated now. And with the .find() method you have better performance.
If you are dinamicaly adding the items and want to display the data every time an item is added, you can use the livequery.js plugin, and do like this:
function viewDetails(){
$('#recur li').livequery(function(){
var id = $(this).attr('id');
$.ajax({
url:'myUrl'
,type:'post'
,dataType:'json'
,data:{propertyId:id}
,success:function(data){
console.log(data);
}
});
});
}
in HTML
<ul id="recur" class="elasticstack">
<li id="<?=$item['id']?>" >.......</li>
....................................
</ul>
In Ajax function
data:[{name:'propertyId', value:id}]
Related
First, sorry for my English, you can correct me in that area too :)
I know that i can replace text in html with <?=$var?> for example. Also, i can do it through ajax. I use $.ajax to get data in JSON format, than inside jquery i'm changing appearance of my web app.
This is example of getting data, and inside this function i'm calling $.View function where apperance is changing.
$.Model = function(route, data){
$.ajax({
url: "php/books.php?"+route,
type: "POST",
data: {data: data}
}).done(function(response){
var resp = JSON.parse(response);
$.View(route, resp, data);
}).fail(function(msg){
console.log('something is wrong');
});
});
};
Example of $.View function
$.View = function(route, response, data){
if(route==='menuItem'){
var studio='';
$.each(response, function(index, value){
studio += '<button id='+value['STUDIJI_ID']+' class="btn btn-primary studio_button">'+value['STUDIO']+'</button>';
});
$(studio).appendTo(".here");
}
};
So, my question is, what is the best approach for such things? Embed PHP variable to html or do it through jQuery on described way? Or, something third?
Thank you for your time and help.
It depends on your requirements.
If you know everything on page creation, insert the values with php.
If you wnat to update only parts of your page after page is loaded, do it with ajax.
I am attempting to use AJAX to generate PHP to be displayed inside of a div based on the ID of the link clicked. (I haven't dealt with HTML formatting yet, just want to figure this out first)
My Code:
<script type="text/javascript">
jQuery(document).ready(function()
{
$(".myClass h3").click(function(){
var clickID = $(this).attr('id'); //For sake of argument lets say id = 1.
$.ajax({
url: 'landingPage.php',
data: {ProductIDNumber: clickID},
success: function(html) {
$('#container').append(html);
}
});
});
});
</script>
I have dealt with getting the PHP to run when the url is landingPage.php?ProductIDNumber=1 and that all works properly, I just don't quite grasp how to return the resultant HTML.
Edits made and commented on.
You need to include success, which is run once the response is received, similar to;
<script type="text/javascript">
jQuery(document).ready(function()
{
$(".myClass h3").click(function(){
var clickID = $(this).attr('id'); //For sake of argument lets say id = 1.
$.ajax({
url: 'landingPage.php',
data: {
ProductIDNumber : clickID
},
success: function(html) {
// Do what you need to here with 'html'
$('#container').append(html);
}
});
});
</script>
As Alvaro said the structure of the data was also incorrect
Here's a link to the jQuery docs where you can find out more about the parameters and options you have (such as handling fails etc)
the data is wrong,
it is like this:
data: {varname: value, varname1: value},
I'me trying to implement an on/off button on a php loop but I can't make it work because of the id of jQuery event. How can I get the correct id on click and pass it to the rest of the script?
The problem is in the $('#myonoffswitch')...
<script type="text/javascript">
$(document).ready(function(){
$('#myonoffswitch').click(function(){
var myonoffswitch=$('#myonoffswitch').val();
var wnfID=$('#wnfID').val();
if ($("#myonoffswitch:checked").length == 0) {
var a="2";
var b=wnfID;
} else {
var a="3";
var b=wnfID;
}
$.ajax({
type: "POST",
url: "ajax_wnf_status.php",
data: "statusWnf="+a+"&wnfID="+b,
success: function(html) {
$("#display").html(html).show();
}
});
});
});
</script>
I'm generating different id's for the loop rows (ex: id="#myonoffswitch1" ; id="#myonoffswitch2"; etc).
I'm not certain I fully understand the question, but .val() will not get the ID of an element. You should use .attr('id') instead.
Also, it looks like you're trying to format data for a GET request, not a POST.
If I understand the question correctly, I think you're looking for
event.target.id
where 'event' is passed in to your handler:
('#myonoffswitch').click(function(event){
id = event.target.id
. . .
Though at that point, you might not need the id, since you can just use event.target directly.
So i've a situation where I have a selectbox that makes a jquery .post call to another script on a .change event.
I was wondering if there is anyway i can revert the selectedoption back to the original default should something occurs or that my .post event fail?
Hi ppl, I'm sorry.
Here's the javascript code. I've made some amendments to it. I'm trying to get the second line to work as this code is not working now due to some errors(due to don't know what on the second line). My selectbox is part of a list so i'm not able to make it a unique id to it and to remember the box the user selects, i need to use $(this).
$('.order_stateselect').click(function(){
var val=$(this).find(":selected").val();
$(this).change(function(){
if(confirm('Confirm Order Status Change?')){
var conduct_status_chge=$.post('/seller/helpers/order_status_change.php',{order_item_id:$(this).parent('td').siblings('.order_item_id').text(),order_item_status:$(this).find(':selected').val()},function(data){
alert(data);
})
.error(function() { alert("error"); })
}
});
});
Difficult to tell without code, but I'll try
$("#selectbox").data('origValue', $("#selectbox").val());
$("#selectbox").on('change', function () {
$.post(...).done(function () {
// other stuff
$("#selectbox").data('origValue', $("#selectbox").val());
}).fail(function () {
$("#selectbox").val($("#selectbox").data('origValue'));
});
});
Use something like this
var value=$("#selectbox").val();
$.ajax({
type:post,
url:"something.com",
success:function(){
},error:function(){
$("#selectbox").val(value);
}
})
$('select').val('defaultvalhere');
You could use this to select first option not regarding default value:
$('#selectId option:eq(0)').attr('selected',true);
you can simply use a global variable to save the option selected previously. Once save you can just use that on your error Its something like this
<script type="text/javascript">
this.previousVal = 0;
function changeHandler(selectBox)
{
$.ajax({
type:post,
url:"URL",
success:function(){
//ur code
this.previousVal=selectBox.selectedIndex;
},error:function(){
//use previousVal and set the value back to the previous value
}
})
}
</script>
<select id="changeLang" name="changeLang" onchange="changeHandler(this)"></select>
First I want to show you guys what I am trying to do.
I am trying to create a search functionality in my application using AJAX, jquery and php
and as for the framework I am using Codeigniter, but it's not necessary to be CI, this could be similar to all(well I suppose).
I have this piece of code to observe a focus and blur event.
$("#searchbox").on({
keyup : debounce(function(){
MSI.Interface.search();
},350,false),
blur : function(){
$("#search_results").hide();
}
});
I have not finished it yet that is why the blur event has only .hide() . I can't think of what other else to include, maybe reset the html of the #search_results to make it blank, but I don't know if that is reasonable.
1st question: What do you think is a more reasonable solution for that?
As you can see in the previous code, i have the debounce function, just to prevent per character request on the server, I wonder if that is correct.
Then I have this search function
search : function() {
var keyword = $("#searchbox").val();
if (keyword == '') {
} else {
$.ajax({
url : MSI.variables.base_url + 'search',
type: 'POST',
data: {
keyword : keyword
},
dataType : 'json',
success: function(output) {
$.each(output, function() {
$.each(this, function(key, value){
$("#search_results").show().prepend("<p>"+value+"</p>");
});
});
}
});
}
}
With that code, the script will be able to add contents to the #search_results div.
2nd Question: What do you think is a better solution for this?