I've come up with a way to maintain and combine two lists, however I am a little puzzled exactly how I can display the result without the page being stored. I thought .data() might be the solution - but this is new to me.
Basically I have 2 lists:
<ul id="choice_1">
<li><img id="c1_1" src="image_path">Option 1</li>
<li><img id="c1_2" src="image_path">Option 2</li>
<li><img id="c1_3" src="image_path">Option 3</li>
</ul>
<ul id="choice_2">
<li><img id="c2_1" src="image_path">Option A</li>
<li><img id="c2_2" src="image_path">Option B</li>
<li><img id="c2_3" src="image_path">Option C</li>
</ul>
Then with jQuery I've made a script where you can click the image to select the choice(s) from the left and right column, where the image changes onclick and stores the ID numbers in two hidden inputs - #hidden_1 and #hidden_2 (this part works perfectly, and stores just the number from the image ID). I've also made a button #transfer which, when clicked, gets the values of the hidden text inputs and resets the choices as if nothing has been selected.
I thought first that I should pass the hidden data via ajax to #groups, however since I don't want to save the data in MySQL until someone hits the save button, and I also want to process the data (so that if someone were to select Option 1 with Options A+B, then next selecting Option 2 with A+B, I would process the data in PHP to show the result being Option 1+2, A+B - since they effectively go together. Then I would use the ID values to display the name of the Options. Then I could either delete or edit (by sending the data back to the lists) the groups.
This made me think that somehow .data() could be used to store the data, however I'm unsure how I can access it from #groups since it has been called via ajax. I also thought that would be handy, especially if I later came to edit the groups after they were stored in MySQL. My ajax call is below:
var data_array = {};
data_array['id'] = $("#hidden_id").val(); // only used when editing
data_array['c1'] = $("#hidden_1").val();
data_array['c2'] = $("#hidden_2").val();
$.ajax({
url: "processor.php",
type: "POST",
data: data_array,
success: function(response){
$("#groups").html(response);
},
error: function(){
$("#groups").html("<p>Could not process choices</p>");
}
});
In processor.php I thought that I could access .data() simply by calling it $("data").data();, but it seems to just return null - though I then thought that even if I could call it, how can I allow PHP to process the data, so I guess I'd have to pass that through ajax anyway. But then, how could I delete something from #groups so it doesn't get passed back later and get displayed? Or how to I overwrite the data with the updated edit? If I could access .data() in processor.php after ajax call, write to it, then make it available to the rest of the page, then that would be the goal.
I hope someone can help me figure this out - I am a bit new to .data(), especially accessing/writing from inside some called by ajax.
Seems I need to do something like this is the parent:
$.ds = "";
$.ds = $("#data").data(JSON.parse()); // json_encode the existing php array (if there is one)
Then I can access/edit/update it within processor.php using the below:
$.ds.data();
Fingers crossed that I can put it all together working the way I want - works so far just using test data above, still - if anyone has a better way, best let me know :)
Related
I have many dropdown lists which I created and work properly .When I click on its list title element (here on City ) it opens or shows its dropdown menu below .
Below is an illustration to let you know how all my dropdown list are made .
<div class="dropdown-container">
<div class="title">City </div>
<ul class="dropdown-menu" >
<li class="glist_item">Calgary</li>
<li class="glist_item">Miisssauga</li>
<li class="glist_item">Winnipeg</li>
<li class="glist_item">Vancouver</li>
<li class="glist_item">Surrey</li>
</ul>
</div>
My problem is how to save the state (opened or closed) of each dropdown list after the page reloads so that those who were opened or closed keep their respectives state before reload.
NB: I tried localStorage or sessionStorage before but these cannot store complex data or data with many records since the number of list is undefined .
So I need a persistent data storage capability as well as an ability to store data like array does .
CAN YOU HELP ME ?
You can do it in this way. Just create an array includes information of lists states.
let states = {
list1: "opened",
list2: "opened",
list3: "closed",
list4: "opened",
list5: "opened",
}
Here, I think you can change listx to list id.
You can save this to localStorage by converting it to string.
Then, you can get that string from localStorage and parse it to js object and do what you are going to do.
Title isn't that clear, so let me see if I can explain what I'm doing.
I'm listing off users' posts, and have a like/comment button with those posts.
What I need to do, is capture when the like button is clicked (<span> tags), and then grab the post id from the hidden input field, and use that to post to the PHP script.
The PHP is doing all of the checking for if they're friends, privacy level is correct, etc. before actually submitting the like to the database, but I am currently just having the javascript/jquery be generated when the post is shown (naming each js variable/DOM element according to post id), but that's not very efficient and looks messy when viewing the source (But, it's the only way I can get it to work).
I want to be able to use an external javascript file to check when just the like button is clicked, and know what post that is being liked, and work that way.
I've been looking into this for quite some time, and it's to my understanding that this might work, but I have had no luck. I'm generating multiple posts on one page using foreach() loop, so the names/ids/classes of the elements are the same.
For a little better understanding, here's an example of what a post might look like:
<div class="feedPost">
<img src="#" class="feedProfile"/>
FirstName LastName
<div class="feedPostBody">Hello, world!</div>
<input type="hidden" value="24772" name="feedPostID">
<span class="feedLikeButton">Like</span> | Comment | 2 mins ago
</div>
and, using javascript/jquery, I want to be able to do something like this in an external js file:
$('.feedLikeButton').on('click',function(){
var post_id = 0; //I need to get the ID from the post that the like button is related to.
//If I just did $('.feedPostID').val() it wouldn't work
$.post("https://mysite/path/to/like.php", {post: post_id}).done(function(data){
if(data == "success"){
//This will set text from "Like" to "Unlike"
//Again, I can't just do $('.feedLikeButton') to access
//I guess I could do this.innerHTML? Would still need to access feed post id
} else {
//Probably will just flash error to user if error, or something similar
}
});
});
You should get the like button
var likeButton = $(this);
Then get it's container
var container = likeButton.parent();
Then find the hidden field
var idInput = container.find('[name="feedPostID"]');
Then get it's value:
var id = idInput.val();
With all these references you can do whatever you want.
I try to learn the Intel Appframework UI.
I want to build a simple offline app with just two panels.
One panel contains a list with items (links), the second panel should display details to the selected item. The details in the second panel should be filled with javascript.
How do I pass data (for example a numeric item_id) to the second panel, so that my javascript can access it and fill it into the details page?
Can I use a part of the url of the links in the list, like this:
<li>
Item 3
</li>
If yes, how do I get the information back in the details page? Or do I need to use javacript-links?
In the intel appframework forum is an answer to my question:
https://forums.html5dev-software.intel.com/viewtopic.php?f=26&t=4478
So the solution is to use urls like like this:
<li>
Item 3
</li>
We than attach a handler to the target panel, which gets the url from the browser. The framework has set the url to the new value when the callback is called:
$("#detailpanel").bind("loadpanel",function(evt){
//url would be #detailpanel/N
params = document.location.hash.split('/');
if(params.length > 1){
showDetails(params[1]);
}
else {
console.log('on_load_detailpanel: detailnr missing');
}
})
I'm not an Appframework expert, but here's the simplest solution I came up with:
Since you're on a single-page app, you can store the currently selected item in a global data structure:
<script type="text/javascript">
var dialogData = {
"currentItemNo": -1,
// possibly other dialog data
};
</script>
Then in your HTML you can set it like this:
<li>
Item 3
<li>
and access it when the user navigates to the page:
<script type="text/javascript">
$("#detailpanel").bind("loadpanel", function () {
console.log("You clicked " + dialogData.currentItemNo);
});
</script>
Note that both the click handler and AF's anchor handler get called (the click handler first).
In case your list is generated from a template you might want to use a more elegant solution to access the current item number:
<li>
Item 3
<li>
I am a predominantly PHP developer. I realize in this day and age specialization in one scripting language doesn't cut it, but the fact remains that my skills at JavaScript and jQuery are pretty green. I am a novice at best. I can create my own code but Cross Browser compatibility remains a huge issue with my work in JavaScript.
Anyway, I have a script that filters products according to categories/subcategories. This is how it works: you select a category and the javascript in the background does its thing to filter the subcategories so that the options displayed are the ones pertaining to the parent category- a combination of these two filters the product line.
Here is my code:
function scategories(){
//get the category option value from the category drop down bar
var cat = (document.getElementById('categories').value);
//get all the options from the subcategory drop down bar
var subcat = document.getElementsByClassName('subcategories');
var n=0;
//if the category bar option is set to 0 display everything
if(Number(cat)==0){
Show();
}
//filter the subcategories
while(subcat.item(n)){
//if there is no match b/w the subcategories option and the categories id FILTER
if(Number((subcat.item(n).value).split('|')[1]) != Number(cat) && Number(subcat.item(n).value) != 0){
document.getElementsByClassName('subcategories')
.item(n)
.style
.display="none";
}else{
//else display the subcategory
document.getElementsByClassName('subcategories')
.item(n)
.style
.display="list-item";
}
n++;
}
}
This code is pretty self explanatory I would say. I also have a shiftfocus function that shifts the focus from the current option selected in the subcategory to the default one which is 'none' whenever a new category is picked. This basically resets the subcategory.. here's the code:
function shiftfocus(){
document.getElementsByClassName('subcategories')
.item(0)
.removeAttribute("selected");
document.getElementsByClassName('subcategories')
.item(0)
.setAttribute("selected","selected");
}
Shiftfocus is called onChange and scategories is called onClick.
Problem 1:
1) Firefox: Shiftfocus doesn't shift the focus to the default option even though I can see it adds the 'selected' attribute.
2) Safari: Does not work at all.
EDIT: Problem 2 was the product of a careless mistake. I left open an anchor tag which was
creating havoc in IE. Should have double checked before bothering you
guys. Sorry. Problem 1 still persists.
Problem 2:
I understand none of us developers particularly like internet explorer. But I am willing to believe I have made a mistake here. I have some jQuery that fetches data from a script in another file via the native POST function and appends it to a table with the id "content". This works fine on every browser, except IE. If I try going back to IE 7,8 compatibility mode the results are a little better (the data shows up broken in pieces though) and in IE9 compatibility mode nothing is appended at all! Here's the code:
$.post("bagcontents.php", {
"Bid": $(this).attr('bid')
},
function(data){
$("#content").empty().append(data);
roundNumber();
$('#processorder_hidden').attr('value',currentBid);
});
//append here
<div id="contents" style="overflow:auto;height:345px;padding-right:5px;">
<form name="bag_contents" id="bag_contents" method="post" action="<?php _page ;?>">
<table id="content">
</table>
<input type="hidden" id="bag_contents_hidden" name="bag_contents_hidden" value="1" />
</form>
</div>
Any help will be appreciated. I tried outputting the fetched results with alert, alert(data), and the script is fetching everything just fine. Its the just the append part that fails :|
Here are some suggestions and hope you find them somewhat useful.
Problem: 1
Instead of having the shiftfocus() set the to a specific value, have you tried using .val('') just to clear it out. I can imagine that this will default to the first option.
Problem: 2
This will be hard to debug without knowing what data is coming back from the server. Might be bad formatting or some syntax error on the rendered output.
I am trying to enhance my page with a jquery right mouse menu, but am having trouble building the correct structures to populate it easily.
Currently my page contains (among other things) a list of items for the user to review. (an html table) Based on the users role, and the current state and context of the row, the user may take one of various actions on each row of data. (approve, reject, refer it to someone else, ect.) My ASP.Net page handles this by setting the visibility of an imagebutton within the row to true, if the option is available. I can control the Cssclass of each button, and am setting the class of for example the "approve" button to “approvebtn”.
Now I want to enhance my site with a right menu.
I am extending my site with Cory S.N. LaViska’s jQuery Context Menu Plugin -
http://abeautifulsite.net/notebook/80
This plugin allows the default right mouse behavior for any elelement to be overridden with a user controlled context menu. The menu is inserted into your page as an unordered list and becomes visible when it is needed.
<ul id="rightMenu" class="contextMenu">
<li class="details">Details </li>
<li class="addnote">AddNote </li>
<li class="listnote">ShowNotes </li>
<li class="approve">Approve </li>
<li class="reject">Reject </li>
<li class="release">Release </li>
<li class="takeover">Takeover </li>
</ul>
Your app gets a callback when something on the right menu is clicked, and you can interrogate the action (the bogus href element) to see which item it was.
I really like this menu because it is simple to use and is completely CSS styled.
However, I need to do something that this plugin does not nativly seem to support. I need to change which items are available on the menu from row to row. Basically if an Imagebutton (for say approve) is avaiable in the row, then its corrisponding menu item should exist as well.
I was able to gain access to the menu just before it is displayed by altering the plugin slightly, to call my function right before the menu is displayed.
This works, but the logic I had to write seems so brute force, that there must be a better way….
In my callback:
function jimsbuggeredfunction(menu,el)
"el" is the element that was right clicked on (usually a table cell), and "menu" is the menu that this right click is bound to. (so I should be using that name and not hardcoding to #rightMenu')
So, the “if” line finds out if the table row containing the element that was “right clicked” contains a specific button (by its class name) if it does the menu item is enabled, otherwise it is disabled. This process continues for every menu item that I want to be flexable row-to-row.
function jimsbuggeredfunction(menu,el) {
if($(el).parents("tr:eq(0)").find('.approvebtn').length > 0)
$('#rightMenu').enableContextMenuItems('#approve');
else
$('#rightMenu').disableContextMenuItems('#approve');
if($(el).parents("tr:eq(0)").find('.rejectbtn').length > 0)
$('#rightMenu').enableContextMenuItems('#reject');
else
$('#rightMenu').disableContextMenuItems('#reject');
if($(el).parents("tr:eq(0)").find('.releasebtn').length > 0)
$('#rightMenu').enableContextMenuItems('#release');
else
$('#rightMenu').disableContextMenuItems('#release');
if($(el).parents("tr:eq(0)").find('.takeoverbtn').length > 0)
$('#rightMenu').enableContextMenuItems('#takeover');
else
$('#rightMenu').disableContextMenuItems('#takeover');
if($(el).parents("tr:eq(0)").find('.revertbtn').length > 0)
$('#rightMenu').enableContextMenuItems('#revert');
else
$('#rightMenu').disableContextMenuItems('#revert');
if($(el).parents("tr:eq(0)").find('.removebtn').length > 0)
$('#rightMenu').enableContextMenuItems('#remove');
else
$('#rightMenu').disableContextMenuItems('#remove');
if($(el).parents("tr:eq(0)").find('.addnotebtn').length > 0)
$('#rightMenu').enableContextMenuItems('#addnote');
else
$('#rightMenu').disableContextMenuItems('#addnote');
if($(el).parents("tr:eq(0)").find('.listnotebtn').length > 0)
$('#rightMenu').enableContextMenuItems('#listnote');
else
$('#rightMenu').disableContextMenuItems('#listnote');
};
There must be a better way to set this up, so that it also just ignores menu items that I want to display all of the time) but it is escaping me at the moment. Is there a better way to accomplish this?
Thanks,
Jim
I would find some way to create a mapping between the two IDs and some more systematic way of finding the relevant button. For example, if the button always belongs inside a certain cell that has a class, let's say "buttonclass", then something like this should work:
var mapping = {
takeoverbtn: '#takeover',
listnotebtn: '#listnote'
// ...
};
function jimsbuggeredfunction(menu,el) {
var buttontype = $(el).parents("tr:eq(0)").find('.buttonclass').children().attr("class");
$('#rightMenu').disableContextMenuItems(mapping[buttontype]);
}
My jQuery is a little rusty, there's probably a cleaner way of retrieving the buttontype, but that general idea ought to work.