Javascript: Tabs in an searchsystem? - javascript

Well I need a bit help here, i just dont get how i can manage to make that script dynamic.
I like to press one continent, and it opens the correct land - then from the land it should open the correct region -> And from there it should open the correct city.
Also it shouldn't try to open one, if this continent/land/region has no child-> no another tab.
Its my part of an search engine. The Php and HTML doesent need to be shown here, it works right.
I like to make an Tab system with that i could close every box, beside the first one.
That should be the box that contains the continents.
From there you select one point from that box, in example Europa. Then the box that contains the lands from Europa should be visible. Then you can again select the next step, here in example you select now in the second box Europa->Spain Then it should open the box with the content of spain and so on.
$(document).ready(function(){
$('#select_land_1').click(function(){
$('.box_land').hide();
$('.box_region').hide();
$('.box_city').hide();
$('#land_1').show();
$('#select_region_12').click(function(){
$('#region_12').show();
$('#select_city_34').click(function(){
$('#city_34').show();
});
$('#select_city_35').click(function(){
$('#city_35').show();
});
});
});
The Css looks like that :
http://img641.imageshack.us/img641/1479/bildnr1error.jpg
Thank you very much for your help :)

This:
$('.box_land'+'#land_1').show();
is weird and almost certainly not what you want. You didn't post any HTML, but perhaps you want just:
$('#land_1').show();
Same for the other one.

Related

How to get updated DOM after using checkboxes?

I know that the title of asking is quite vague. But let's check this page:
https://www.cleaneye.go.kr/user/gongsiCompare.do
So this is one of public data page in Korea which has a data I need in my research.
As you can see, it has some checkbox in ul, and if you check one of the box in left one, the list of checkbox on its right would come up.
So I made a code to check every combinations, and I'll show you the one which cause the problem.
from selenium import webdriver
driver = webdriver.Chrome(CHROMEDRIVER_LOCATION)
driver.get('https://www.cleaneye.go.kr/user/gongsiCompare.do')
in_type = driver.find_elements_by_xpath("//div[#id='divPcomp']/ul/li")
for in_t in in_type:
in_t.find_element_by_xpath("./label/input").click()
region_type = driver.find_elements_by_xpath("//div[#id='divSido']/ul/li")
for r_t in region_type:
r_t.find_element_by_xpath("./label/input").click()
The problem is, when the code execute
r_t.find_element_by_xpath("./label/input").click()
it gives ElementNotInteractableException error, maybe cuz DOM didn't revised after it clicked the checkbox in
in_t.find_element_by_xpath("./label/input").click()
So I've searched how to solve this problem, and most of answers were about using implicit/explicit wait. Before I do that, I put time.wait(30) between click()s, and still it didn't work. So just waiting might not be the solution for this.
As you can see, if you refresh it, the whole page would be reset so... that is not the answer for this as well.
Is there any great solution, or any walk-around it, please enlighten me.
Otherwise, I'll just use mouseclick and keyboard inputting 'tab' haha...
Thanks for your attention to this problem!
your locator is not unique, it finds element that is not visible on screen use :
region_type = driver.find_elements_by_xpath("//div[#id='divSido']/ul/li[#class='rowon']")

Display search results inside div and add new results

I've been looking for a good how to on this topic for the last 4 days and could not find any. Even worse; I'm not able to think of a good description of what I'm trying to achieve.
For example Dropbox has the functionality of what I would like to implement on my own website. If you login into dropbox you can upload files. When you upload files one by one the UI stacks the results (filename, location, etc.) into a div element. There are other websites who also do this; Namecheap, for example, when you search for a domain and click add to cart you see the domain show up on the right side, where you have the option to delete it.
What I would like to do:
Have a page with a search box that queries my database for objects and displays the results into a div element below. Everytime the user does a new search the results in that div element will change. But if the user clicks on the 'add to' button the object must move from the search_results div element to another div element on the same page where all the previous selected elements are also listed. The user is then able to delete the object from the list or alter the values of the object such as the amount.
Like I said; I've been pulling my hair out because I cannot find it... I'm feeling really stupid right now :( Does anybody know what the technicall name of such a functionality is?
EDIT
The comment below from Quasimodo's clone and yuriy636 pushed me in the right direction. After searching with there terminology I've found this page:
https://cartjs.org/
The second example is exactly what I was looking for. However I'm not able to upvote a comment but I do like to give credits to both for helping me out!
Your question is quite vague but I think what I've done below can at least nudge you in the right direction.
Let's say you have something like this - a div to hold your search results, each of which is it's own div with class result, and a separate div to hold the 'moved' ones:
<div id="searchResults">
<div class="result">This is one search result.</div>
<div class="result">This is another result.</div>
</div>
<div id="chosenResults"></div>
Now, we can use JQuery to put in the "move" functionality:
$(document).ready(function() { //On page load
$('.result').click(function() { //When element with class "result" is clicked
$(this).detach().appendTo('#chosenResults'); //Remove it form the results list, add it to the other
});
});
Here it is in action: http://codepen.io/anon/pen/GqBxEp
I'm not sure where you're at in regards to the actual data retrieval, etc, however I figured knocking out the front-end as I have above may be useful for you.
I've heard the term infinite list and infinite scroll, Wikipedia uses 'lazy or delayed evaluation': https://en.wikipedia.org/wiki/Lazy_evaluation#Delayed_evaluation

How to set an element to a default condition (hide ()) and when clicked (show())

Say I have a left-side chat bar with chat users. Each user has their image (much like Facebook's chat)and is clickable to open a chat box to start chatting away.
Here's my code:
$('.msg_wrap').hide();
$('.msg_box').hide();
$('.chat_user').click(function() {
$('.msg_wrap').show();
$('.msg_box').show();
}
I know this is wrong but what I want to do here is when the page loads for the first time, all the chatboxes to be hidden (hide ()). It is not until I click on a chat user (.chat_user) that a pop up/chat box appears (show()). How do I fix this code? Do I have to create a function?
A quick thought on a solution.
First. Set the elements ('.msg_wrap') and ('.msg_box') to hidden in your html and kill your first two lines of code. I am not sure what those elements specifically are, but, for example, if they were div tags it would look something like:
<div hidden class="msg_wrap">
Second. I am not sure if you are saying that the code currently isn't working on page load. It looks like you are missing a ) at the end and also you can update to the following so that it gets executed on page load.
$(function(){
$('.chat_user').click(function() {
$('.msg_wrap').show();
$('.msg_box').show();
});
});
This is jquery shorthand for $( document ).ready().
Also, if you want the msg_wrap and msg_box elements to toggle between being hidden and shown you can use the toggle() method instead of show().

Hide span with jquery is not working

I have a sharepoint webpart that shows some information from some lists, the lists are security trimmed, so if the user does not have permission to that list, it will show access denied. Which is fine.
I want to hide that part of the page.
I found how to solve it here:
http://www.timferro.com/wordpress/archives/227
This is the code I have:
<script src="/_layouts/Scripts/jquery1.8.1.min.js"></script><script language="javascript">
$("span:contains('Error')").hide();
$("div:contains('Access denied'):not(:has(div))").hide();</script>
And this is the screenshot that shows what I need to hide.
1
Better pic here
Update:
when I hide it, now sharepoint its showing me a blue line that I want to get rid off, but If I hide the blue line only, then a strange space will be between webparts, I think the best is to hide that TD that contains the rest of the things? How can I hide that?
Please see new screeenshot
looks like you forgot to put it inside the jQuery ready function:
$(function(){
$("span:contains('Error')").hide();
$("div:contains('Access denied'):not(:has(div))").hide();
});
Try below,
$(".UserGeneric span.ms-bold:contains('Error')").hide();
or If you want to hide the whole error then
$(".UserGeneric span.ms-bold:contains('Error')").parent().hide();

Input Box Option Drop Down

I'm looking at creating something like this:
http://konigi.com/interface/kontain-search
alt text http://s3.amazonaws.com/konigi/interface/kontain-search-2.png
I don't suppose anyone has any resources which could guide me? I know I'm not giving much information but I wouldn't know where to start looking.
Cheers!
EDIT Sorry, I meant just the drop down / input box, nothing else on that site.
EDIT AGAIN The drop down list is inside of the input box, hence why I was wondering.
It may be something similar to these examples but with only one main item. and manipulate with jquery each "li" and that action taken
example 1 |
example 2 |
example 3 |
example 4
edition answer: this is done with css.
is all contained in a div -> input + menu.
for the input is removed border styles and background color is the same as the container div.
Well, you put part of the search form in a hidden div and pop it up when the user clicks or hovers on some other element, either inside or outside the form. Use CSS as needed to position the div. Not really sure what problems you could possibly have with something like this.
Maybe you can be more specific and break this problem down in several more focused questions?
I did not drill into the site, but from a logical standpoint, perhaps the search box AND the dropdown are "inside" another element (div?) that forms the complex control...and just formated(CSS)/actions(jQuery) placed on those.
<div id="searchDiv">
<div id="searchText"></div>
<div id="searchDropdown"></div>
<div id="searchButton"><div>
</div>
Easy enough to set somthing like that up.
I think what's going on there isn't that the dropdown is inside an input box, but rather that the input box chrome is hidden and it's placed inside an input-looking div along with the dropdown.

Categories