I`m kind of novice in jquery and want to make a sliding table.
The orinal table has 3 levels:
<ul class="categories">
<li id="category1">1 element</li> //parentid=0
<li id="category2">2 element</li> //parentid=0
<ul>
<li id="category3">1 element of element id2</li> //parentid=2
<ul>
<li id="category4">1 element id3</li> //parentid=3
</ul>
</li>
</ul>
</li>
</ul>
The first level elements have parentid = 0, id=1++, the next level have nested parentid and there own id and so on.
Page loads with only 1 level with parentid = 0.
<ul class="categories">
<li id="category1">1 element</li> //parentid=0
<li id="category2">2 element</li> //parentid=0
</ul>
Then I want to click the li, take id ID - go to file, execute mysql, get the new table in variable, bring it back and slideToggle it under LI.
php side
if(isset($_POST['subcategory'])){
$subcategory = str_replace('category', '', $_POST['subcategory']);
echo build_category_tree($subcategory); // builds the UL tree
}
this returns me id, i need to return the list and toggle it.
NOW the new UL is connected BUT i jquery cant work with it, updated the script with the one below but still cant.
UPDATED JQuery
$(".tablecategoryname").on('click', function(){
var $a = $(this).closest('li').attr('id');
var $c = $(this).closest('li');
$.ajax({
type: "POST",
url: "functions.php",
data: {subcategory:$a},
cache: false,
success: function(data)
{
$(data).hide().insertAfter($c).slideDown(400);
}
});
});
ID's should not contain just a number (or start with a number), you should probably use #a1 or something similar. In the data parameter you're sending an object, and equalsigns does'nt really work.
$(".table li").on('click', function(){
var self = this;
$.ajax({
type: "POST",
url: "functions.php",
data: {id : self.id},
cache: false
}).done(function(data) {
//guessing you're returning valid HTML
$(data).hide().insertAfter(self).slideDown(400);
});
});
EDIT:
Your build_category_tree() function needs to return the HTML so you can echo it back to the ajax request:
if(isset($_POST['subcategory'])){
echo $subcategory = str_replace('category', '', $_POST['subcategory']);
$ULtree = build_category_tree($subcategory); // builds the UL tree
echo $ULtree; //echo back to Ajax
}
You should put an id in your main ul to catch his parent and them toggle the list inside the main ul.
$("ul.umenu > li).click(function (e) {
e.preventDefault();
var element = $(this);
if (element.parent().find("ul").is(":visible")) {
} else {
$("ul.umain> li > ul").slideUp();
element.parent().find("ul").slideToggle("fast");
}
});
Related
I have an array list as shown below
var items = ['Iphones', 'Samsung', 'Huawei'] which I append to a li as below.
HTML & JS
<div id="host">
<div class="data_box"></div>
</div>
$.ajax({
dataType: 'json',
success: function (results) {
$('.data_box').html('<li class="li_of_phones">'+results.toString().split(',').join('<br/>')+'</li>').slideDown();
},});
<script>
$('#host').on('click', '.li_of_phones', function () {
console.log($(this).text());
});
</script>
When I try to get the selected li when user clicks, it returns the array i.e Iphones,Samsung,Huawei instead of the selected phone (may be iphones)
Why am I not getting the selected phone when user clicks on the li but then it returns the all phones in the array to user?
It seems you receive the results from the ajax call as a comma separated string and then set it in a single <li> element with the li_of_phones class.
You could loop the splitted response in a foreach and create different li elements for each result.
const results = 'Iphones, Samsung, Huawei';
let phonesList = '';
results.split(',').forEach(phone => {
phonesList += '<li class="li_of_phones">' + phone.trim() + '</li>';
});
$('.data_box').html(phonesList).slideDown();
$('#host').on('click', '.li_of_phones', function () {
console.log($(this).text());
});
.as-console-wrapper { max-height: 5.5em !important; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="host">
<ul class="data_box"></ul>
</div>
You might have to change some css styles of the resulting list items.
You should add an event on li. I have created a small example.
$('li').click(function(e) {
console.log(e.target.innerHTML);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
So here's whats going on, I have a couple scenarios where I can't seem to apply any styles to content coming from a get request, and on one of them I managed to be able to but it wouldn't be considered best practice.
Premise:
I have an empty Ul to which Li's will be attached from a GET request to an API.
Scenarios
1) I create DOM objects using JQuery and append LI <-- SPAN <-- string to the empty UL and then state that all the children of the UL will be colored green.
(this does not work & yes I could target the UL and have everything inherit the styles but that wont work for what I have in mind)
2) I append a string which contains HTML markup within it to then add styles and concat them with what the GET request spits out. ( for some reason it seems to work this way but I really don't want to be creating LI's and SPANS + classes all in one string)
//scenario 1
var $orders = $("#orders");
$.ajax({
type: 'GET',
url: 'http://rest.learncode.academy/api/johnbob/friends',
success: function (data) {
$.each(data, function (i, item) {
if (item.name && item.drink) {
var $spn = $("<span></span>");
var $lli = $("<li></li>");
// $spn.append(String(item.name));
$spn.css({width: "20px"});
$orders.append($lli).append($spn).append("name: "+item.name+", Order: " + item.drink);
$orders.children().css({ color: "green" });
console.log($spn);
}
})
}
});
/* scenario 2
var $orders = $("#orders");
$.ajax({
type: 'GET',
url: 'http://rest.learncode.academy/api/johnbob/friends',
success: function (data) {
$.each(data, function (i, item) {
if (item.name && item.drink) {
var $spn = $("<span>hell</span>");
var $lli = $("<li></li>")
// $spn.append(String(item.name));
$spn.css({width: "20px"});
$orders.append("<li>Name: <span class='tato'>" + item.name + ",</span> Order: " + item.drink + "</li>");
$orders.children().css({ color: "green" });
console.log($spn);
}
})
}
});
*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Coffee Orders</h2>
<br />
<ul id="orders">
<li>control group</li>
</ul>
<br />
<h4>Add a coffee order</h4>
<p>name: <input type="text" id="name"></p>
<p>drink: <input type="text" id="drink"></p>
<button id="add_order">Add!</button>
I haven't been able to find a reliable answer as to why this is happening, eventually I'll want to line up the orders regardless of the name length using a span.
edit:
What was happening (as stated in the answer) was I was appending empty LI's SPANs and Strings to the original UL. When using append() keep in mind anything you add (in a chain form) will be appended to the original stated element and not the previous one.
Side note:
For more information on better practice of templating incoming GET stuff check out this vid I found.
https://www.youtube.com/watch?v=GbNWPn8vodo&index=9&list=PLoYCgNOIyGABdI2V8I_SWo22tFpgh2s6_
As noted by #Taplar the issue is use of .append(). You are appending <span> elements and #text nodes to <ul> at
$orders.append($lli).append($spn).append("name: "+item.name+", Order: " + item.drink);
which are not valid child elements of <ul>
Permitted content zero or more <li> elements, which in turn often
contain nested <ol> or <ul> elements.
To correct issue, set #text node as .innerHTML of <span> element, and span element as .innerHTML of <li> element using html of jQuery(html, attributes) function attributes property.
Also set span css display property to block for width property to be applied to the element.
//scenario 1
var $orders = $("#orders");
$.ajax({
type: 'GET',
url: 'http://rest.learncode.academy/api/johnbob/friends',
success: function(data) {
$.each(data, function(i, item) {
if (item.name && item.drink) {
var $spn = $("<span></span>", {
html: "name: "
+ item.name
+ ", Order: "
+ item.drink,
css: {
width: "20px",
display: "block",
position: "relative"
}
});
var $lli = $("<li></li>", {
html: $spn
});
$orders.append($lli)
.children().css("color", "green");
}
})
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Coffee Orders</h2>
<br />
<ul id="orders">
<li>control group</li>
</ul>
<br />
<h4>Add a coffee order</h4>
<p>name:
<input type="text" id="name">
</p>
<p>drink:
<input type="text" id="drink">
</p>
<button id="add_order">Add!</button>
I have an Ajax code like this:
$j(document).ready(function () {
function loading_show() {
$j('#loading').html("<img src='images/loading.gif'/>").fadeIn('fast');
}
function loading_hide() {
$j('#loading').fadeOut();
}
function loadData(page) {
loading_show();
$j.ajax({
type: "POST",
url: "load_data.php",
data: "page=" + page,
success: function (msg) {
var $response = $j(msg);
// Query the jQuery object for the values
oGlobal = $response.filter('#Z').text();
$j("#container").ajaxComplete(function(event, request, settings) {
loading_hide();
$j("#container").html(msg);
});
}
});
}
loadData(1); // For first time page load default results
$j('#container .pagination li.active').live('click', function () {
var page = $j(this).attr('p');
loadData(page);
});
});
Im getting this response:
<div id="container">
<div id="Z">JuanFernando</div>
<div id="q">
<div class="pagination">
<ul>
<li p="1" class="inactive">First</li>
<li class="inactive">Previous</li>
<li p="1" style="color:#fff;background-color:#006699;" class="active">1</li>
<li p="2" class="active">2</li>
<li p="2" class="active">Next</li>
<li p="2" class="active">Last</li>
</ul>
<input class="goto" size="1" style="margin-top:-1px;margin-left:60px;"
type="text">
<input id="go_btn" class="go_button" value="Go" type="button"><span class="total" a="2">Page <b>1</b> of <b>2</b></span>
</div>
</div>
</div>
I want to extract "JuanFernando" in order to show in div container but alone and I want that the rest of the response could be show in other different div for example: container2.
ajaxComplete is not what you want to use here, especially inside your success function. You want your success function to look something like this:
success: function (msg) {
loading_hide();
var $response = $j(msg);
// Query the jQuery object for the values
oGlobal = $response.find('#Z').text();
$j("#container").html(oGlobal);
$response.find('#Z').remove();
$j('<div id="container2"></div>').html($response.html()).appendTo('body');
}
We're just taking the oGlobal (which should be JuanFernando in this case) and sticking it in the #container. After that, remove the #Z div from the response, and stick the rest inside of a new #container2, and append it to the body, or wherever you'd like it.
Here's an "adapted" fiddle.
Basically the only thing that changes with you code is
replace
oGlobal = $response.filter('#Z').text();
with
oGlobal = $response.find('#Z').text();
also, see MattDiamant's answer concerning ajaxComplete.
I am working on a project, i have two anchors in my View(for voting functionality),
I have a div inside which i am having a <ul> and in 3 <li> i am having anchor for upvote,vote count (in <h2>) and anchor downvote respectively
I want functionality that when i click on any anchor, the h2 html show the vote count, i've implemented the functionality but because of i am unable to do this,
this is my View
<div class="voting" style="margin-left:20px;">
<ul>
<li class="addvote"><a href="#" class="voteAnswer" answerid="#answer.AnswerID" name="Voted">
Up</a></li>
<li class="votecounter">
<h2>
#answer.AnswerLikes.Where(a => a.IsActive == true).Count()</h2>
</li>
<li class="subvote"><a href="#" class="voteAnswer" answerid="#answer.AnswerID" name="Voted">
Down</a></li>
</ul>
</div>
and this is my JS
$(".voteAnswer").click(function (event) {
var answerid = $(this).attr('answerid');
var name = $(this).attr('name');
var id = $(this).attr('id');
var output = $(this);
$.ajax({
url: ResourceAjaxUrl.VoteUnvoteTheAnswer,
type: "POST",
data: JSON.stringify({ answerID: answerid }),
dataType: "html",
contentType: "application/json; charset-utf-8",
success: function (Result) {
alert("Voted");
// $(output).html("Voted (" + Result + ")");
$(output).closest("li").find("h2").html(Result);
$(output).attr("name", "Voted");
},
error: function (msg) {
alert("Unable to Vote answer: " + msg);
}
});
event.preventDefault();
});
i have tried using $(output).closest("li").find(".votecounter") but its still not working
The UL is the closest common ancestor.
Try:
$(output).closest("UL").find(".votecounter")
there are some problems in your code .
here
$(".voteAnswer").click(function (event) {
var id = $(this).attr('id');
there is no attribute id in .voteAnswer
and also how do you differentiate upvote and downvote .
you have to check the anchor's parent li tag's class and check it is upvote or down vote .
also you can select the .votecounter
simply by
$(".votecounter").find("h2").html(Result);
or
$(output).closest("ul").find(".votecounter");
I have used jquery tabs for loading data with ajax, but I need to add some parameters to the url when the user clicks in a tab. I don't know the parameters in advance because they come from a form which has been filled by the user. So I've tried something like the following code, but I don't get it working:
<div id="tabs">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
</div>
and I serialize the form in an array and join the array to the array containing the satic data.
var staticData = [{name:'id',value:'${myId}'}];
$("#tabs").tabs({
var $tabs = $("#tabs").tabs({
ajaxOptions: { data: staticData},
select: function(event, ui) {
var dynamicData = $("#common_form").serializeArray();
var dataToSend = staticData.concat(dynamicData);
$("#tabs").tabs("option", "ajaxOptions", { 'data': dataToSend });
return true;
}
});
});
but this doesn't update the ajax data after the tabs are created (I'm seeing the request sent with Firebug and it only includes the initial params).
How can I change the ajax data when the user clicks the tab?
Thanks
EDITED: now with this code works
I think that what you are looking for is the "url" method :
http://jqueryui.com/demos/tabs/#method-url
You code would look something like that :
$(function(){
$("#tabs").tabs({
select: function(event, ui) {
var data = $("#common_form").serialize();
if(ui.index == 1){
var url = '${tab2_url}' + "&" + data;
$("#tabs").tabs("url", 1, url); //this is new !
}
return true;
}
});
});
jQuery(document).ready(function($){
$("a[name=tab]").click(function(e){
if($(this).attr('id')=="tab1")
{
//pass url1
}
if($(this).attr('id')=="tab2")
{
//pass url2
}
if($(this).attr('id')=="tab3")
{
//pass url3
}
});
});
This work for me but if i need for ex 100 tabs i need to put in all 100 tabs url.
<div id="tabs">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
</div>
Jquery code...
jQuery(document).ready(function($){
$("a[name=tab]").click(function(e){
if($(this).attr('id')=="tab1")
{
//pass url1
}
if($(this).attr('id')=="tab2")
{
//pass url2
}
if($(this).attr('id')=="tab3")
{
//pass url3
}
});
});