Develop Reference

Toggle DIV element

Ok, this seems to be a easy question but I'm not able to get it.
I have index.php and find.php in my project.
In index.php, I'm showing results of list-group items as follows
<div id="showDetails">
</div>
<div id="showList">
//All my list-group items are listed here
</div>
My Ajax returning the list-group as follows
function funcReadRecord() {
var readrecord1 = "readrecord1";
var sometext = $('#SNOW_INC').val();
$.ajax({
url : "find.php",
type : 'post' ,
data : { readrecord1 : readrecord1,
sometext : sometext } ,
success : function(data, status){
$('#showList').html(data);
}
});
}
Now, I'm returning the values as a HTML link so it looks like this
<div id="showList">
data 1
data 2
data 3
</div>
What I want is when I click data 1 link, I want to show showDetails div with data 1 populated. Then when I click data 2 link, it changes to data 2 in showDetails.
How do I do that?
Probably the information I've provided is not enough but feel free to ask and I'll provide more.

The simplest solution would be to add a click handler to each item that calls a function, passing in the id of the item you want to display.
Within that function, fetch the data for the given item and show it.
function showData(which) {
console.log(`fetch data ${which} here and show it in the data div.`);
document.getElementById('showData').innerHTML = `show data ${which}`
return false; // prevents navigation on the clicked link
}
<div id="showList">
<a onclick="showData(1)" href="#">data 1</a>
<a onclick="showData(2)" href="#">data 2</a>
<a onclick="showData(3)" href="#">data 3</a>
</div>
<div id="showData"></div>

Send order of jQuery sortable to Laravel controller

I have a collection of Article objects that have a public attribute int priority. This field ist used to display the articles in the intended order. However, I'd like to be able to rearrange the order of the articles in the admin area.
I included jQuery and with this Laravel/Blade snippet
<ul class="selectable-demo-list" id="sortable-list-basic">
#FOREACH($articles as $article)
<li> {{ $article->label}} </li>
#ENDFOREACH
</ul>
I can produce this HTML output:
<ul class="selectable-demo-list" id="sortable-list-basic">
<li> My article (ID: 1) </li>
<li> Another article (ID: 2) </li>
<li> ... </li>
</ul>
I can access the respective priority via $article->priority and their unique IDs via $article->id if these elements should be included in the code.
The <ul> posted above is rendered correctly: All <li> elements are displayed as sortable jQuery elements. If I drag an item to a certain position, it stays there for the time being.
Unfortunately, I have no idea how to save the new order (= update the items priorities according to the list positions).
This shouldn't be done directly. Instead, I want to use an update button. Maybe I can use a form and send an array like this to my controller:
$priorities = [1=>3; 2=>1; 3=>2] // ID => new priority
Is this possible? Or should I use a different approach? Any help is greatly appreciated!

Add id with each of your li like id="id-{{ $article['id'] }}"
You can call an ajax request when you are changing any order using this sortable plugin like below code
$("#sortable-list-basic").sortable({
update: function (e, u) {
var data = $(this).sortable('serialize');
$.ajax({
url: "{{ url('controller/sorting_method') }}",
type: 'post',
data: data,
success: function (result) {
},
complete: function () {
}
});
}
});
Then inside your method, take your new order for each item & save it to database such as
$ids = $request->id;
foreach($ids as $order => $id){
$article = Article::findOrFail($id);
$article->order = $order;
$article->save();
}

how to create dynamic submenu using javascript

I create a menu. Now i want to create a dynamic submenu. I call an array from database using javascript. Now How to connect array element with the list of submenu using the javascript.
enter code here
// Request For array from database using function gameNames()
// I define array
var gameName = new Array();
// database responses and get array list in this array.
// I dont know how to code for create a array list as a submenu
div id = "bar">
<ul id = "ul1">
<li class = "li1">Games
<ul id = "submenu"><li></li></ul>
</li>
<li class = "li1">Stake</li>
<li class = "li1">Max Players</li>
</ul>
<img src = "css/images/table_menu.png" id = "tm"/>
<div id = "rmg">Real Money Game</div>
</div>

Here is a demo. The source code in the SubMenu() function is what you will want to use to create the list items from your array.
var gameName=['Game one','Game Two','Game three']
function SubMenu(){
//Set variable for the submenu ul element
var Submenu = document.getElementById('submenu');
//For loop - for each value in the array
for(var i=0; i<gameName.length; i++){
//Create new li/List Item
var Item = document.createElement('li');
//Set innerHTML for this element
Item.innerHTML=''+gameName[i]+'';
//Append new element to the submenu.
Submenu.appendChild(Item);
}
//---Demo use Only
document.getElementsByTagName("button")[0].remove();
//---
}
<button onclick="SubMenu();">Create</button>
<ul>
<li>Games
<ul id="submenu"></ul>
</li>
<li>Stake</li>
<li>Max PLayers</li>
<ul>
If you have any questions about the source code above, leave a comment below and I will get back to you as soon as possible. If this answers your question appreciation is shown by marking it.
I hope this helps. Happy coding!

too much recursion when inserting data in mongodb - meteor

I have a couple of templates with some copy in them. The copy is editable by the user and when the user edits and saves (by clicking a button) I insert the edited copy along with all HTML tags (for later, when I print the data out again) in a db.
When I log the data it works but as soon as I try and write it to the db I get a 'too much recursion' error and I don't understand why.
// Event
Template.editControls.events({
'click .save': function(e) {
var target = e.currentTarget.parentNode;
var targetContent = target.nextElementSibling;
if(targetContent.isContentEditable) {
var targetData = targetContent;
var selectedCopy = Session.get('activeElement');
ContentCollection.update(selectedCopy, {$set: {content: targetData}});
targetContent.contentEditable = false;
}
}
});
// Template
<section class="content" id="header">
<ul class="inline-list">
<li class="edit">edit</li>
<li class="save">save</li>
</ul>
<div class="content__editable" contenteditable="false">
<p>Header content I can change</p>
</div>
</section>

HTML structure in treeview with jQuery

I need to display a HTML structure in a treeview. I found some jQuery treeview plugins but they generally require a list.
Let's take a simple HTML (nodes may have different tags, not only 'div'):
<div id="node1">
<div id="node2">
<div id="node3"></div>
<div id="node4"></div>
</div>
<div>
I want to display it like this:
node1
node2
node3
node4
For now, i'm using this jQuery plugin: treeview
So I need to convert the HTML to an unordered list like this:
<ul>
<li>node1
<ul>
<li>node2
<ul>
<li>node3</li>
<li>node4</li>
</ul>
</li>
</ul>
</li>
</ul>
How can I do this using jQuery? If you think a different approach would be better, please let me know.

Here you go...that was fun. Demo - Updated to not be specific to div tags, and return an element, that could be turned into a html string.
$.fn.convertToUL = function(isTop) {
if(isTop==null) isTop=true;
var ul=$("<ul>");
var li=$("<li>");
li.append($(this).attr("id"));
var children=0;
$(this).children().each(function(){
ul.append($(this).convertToUL(false));
children++;
});
if(children>0)
li.append(ul);
if(li.is(':empty'))
return "";
if(isTop)
return $("<ul>").append(li);
return li;
}
//to get text of elements use .wrap('<div/>').parent().html()
var ulElement=$("#node1").convertToUL();
alert(ulElement.wrap('<div/>').parent().html());
$("#node1").replaceWith(ulElement);