Mouse Over in a django template - python

I have a CSS element thats been declared something like :
span.green_box {width:5px, height:7px ....and other specifications.}
I really dont know any CSS and its not my code. However I do understand that what it does is that it is creating a green coloured box of the given dimensions.
Now in my Django-template I want to display a text on mouseover on this green_box. Just displaying a text would not have been a problem because its done something like this in my django template :
<span class="green_box" title="I am green."></span>
And this works. But I have to refactor it to display something like I am Green and today is 28-6-2013
So for this I have a custom tag, get_todays_date that returns the current date as a string.
And I want to do something like,
<span class="green_box" onmouseover="I am Green and today is %s" % {{get_todays_date}}></span>
My intention is to reproduce the value returned by get_todays_date into %s. I wrote it to describe the structure. This obviously doesn't work. I've looked over on other similar questions but their solution don't work. Most are for mouse over on an image, and a predefined text. So how can I display the text including the value returned by get_todays_date on mouseover on the green_box?

There is no string formatting in django templates as there is in python. There is also a template tag which is able to retrieve todays date (https://docs.djangoproject.com/en/dev/ref/templates/builtins/#now). Hope this leads into the right direction.
You could try something like this:
<span class="green_box" onmouseover="I am Green and today is {% now "d-n-Y" %}">

Related

Django - How to make anchors change HTML list

I have the following snippet of HTML:
On my django webpage, i get a list that looks as follows:
Each "Part" anchor corresponds with a Part object in Python. Now, I'd like to make it so that when the user clicks on "Part_2", the datapoints of that Part are shown just below it.
On the image, the datapoints of the first part are shown within the nested list. I hard coded this. I looked into calling a python function with an argument from the template, but that is not possible.
What would be an easy way to make this happen?
You can achieve this on the client side. First, create a detail element in your HTML and put a summary and the tags that you need (in this case, I'll be using a <p></p>) as childs:
<details>
<summary>Part 1</summary>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>
What's inside the summary tag will represents the title and below that goes the hidden text that can be accessed by clicking in the arrow on the side of the title.
Then, make sure you filter in your function in views.py the parts by part_1 and part_2 and then pass them into your context. Lastly, render the items like this:
<details>
<summary>Part 1</summary>
{% for part in part_1 %}
<p> {{ part.tag }}</p>
{% endfor %}
</details>

How to fix a changing xPath in search box (doesn't contain text)

Basically I want to input invoices in Xero software for my job. The process is very simple, I have some values that I need to input in some slots. I have a big problem however. The xpath is dynamic (changes every time you refresh).
Basically it changes from something like this:
//*[#id="PaidToName_12ddc347c7bc4f5aa84c452f55660690_value"]
To something like this:
//*[#id="PaidToName_4fea44e4f8a844b4b630b4bf149490d8_value"]
So the numbers keep on changing.
I have tried a starts-with function however I am pretty sure that there are two XPATHs that starts with PaidToName or end with value, therefore this doesn't seem like a solution as I get this error message:
selenium.common.exceptions.ElementNotInteractableException: Message: element not interactable
The other thing to note is that I see many elements that have the "input type hidden" in the HTML code which I am pretty sure play a role with that. Please let me know if there is anything I can do to help.
This is the code I have tried that doesn't work.
button = driver.find_element_by_xpath("//*[starts-with(#id,'PaidToName')]")
button.send_keys('lol')
This is the HTML code I am trying to retrieve
<input type="text" size="24" autocomplete="off" id="PaidToName_4fea44e4f8a844b4b630b4bf149490d8_value" name="PaidToName_4fea44e4f8a844b4b630b4bf149490d8_value" class="x-form-text x-form-field autocompleter x-form-focus" tabindex="10" style="width: 129px;">
You can use xpath with id and class combination, try this :
button = driver.find_element_by_xpath("//*[contains(#id,'PaidToName') and contains(#class,'x-form-text')]")
button.send_keys('lol')
Try below given locator.
driver.find_element_by_xpath("//input[contains(#id,'PaidToName') AND contains(#class,'x-form-text')]")

How do I extract text between two objects using XPath?

I'm using XPath to extract different web elements on a webpage, but have his a roadblock on one particular object that is sitting between two objects, but doesn't have a closing object behind it for a while.
I've been able to successfully extract other elements from the webpage, but don't know how to proceed at this point.
Here is a copy of what the HTML looks like from the Inspector:
<body>
<table>
<tbody>
<tr>
<td id="left_column">
<div id="top">
<h1></h1>
#SOME TEXT
<div>
<table>
.......
</table>
</div>
</div>
</td>
</tr>
Any suggestions would be greatly appreciated! Thank you!
Here is a thought that I hope will help, but with out seeing the entire HTML I can't give more then just an idea. I have more experience with Selenium in java, so I am not 100% sure that python will have the same functionality but I imagine it does.
You should be able to get the text from any WebElement. In Java it would look something like this, but I imagine it should be too hard to change it to python
WebElement top = driver.findElement(By.xpath("//div[#id='top']"));
String topString = top.getText();
If in your case your getting more then just the "#SomeText" you would need to remove the text from the other elements that you don't want. Something like:
WebElement topH1 = top.findElement(By.xpath("./h1"));
WebElement topInsideDiv = top.findElement(By.xpath("./div"));
String topHString = topH1.getText();
String topInsideDivString = topTable.getText();
//since you know that the H1 string would come first and the inside div
//would come after you could take the substring of the topString
String result = topString.subString(topHString.length,
topString.length - topInsideDivString.length);
This is really just an idea on how you could do it. The way that you determine the part of the string that you would be interested in might need to be more complex. It could be that you just cycle through the strings to determine where you need to break apart the entire string to get what you want. If there is text before the tag you would need to be more complex about your solution, perhaps by searching for the text and discounting anything you find before it, but without that information I cant really help out more then this.

how to pass value into html form in Bottle?

I’m novice to python and Bottle but I’m trying to develop a simple web application which will inventory items in boxes that company receives.
Using Bottle I was able to create a form which has 2 text boxes and one ‘Save’ button. I scan box ID and it get into text box1. Then I scan item ID and it get into text box2. Then I click on Save button.
It works … but after I click on ‘Save’ the form get reloaded i.e. it open blank page and I have to move back page, delete the content from text box1 and do it again until I switch to the next Box which will start with empty box1 and box2
My request: I want that every time I click on ‘Save’ button it submitted data into my database but the form stay intact i.e. not reloaded and the content of text box1 get empty. Then I could just scan next item and so on until I complete all items.
Could please someone help me with that?
Here’s how my code look for now in Bottle template:
<form action="/accession" method="GET">
Scan Box: <input type="text" size="18" name="package"> &nbsp &nbsp &nbsp
Scan Item: <input type="text" size="13" name="sample">
<input type="submit" name="save" value="Save" >
**
I slightly changed the form and now it behaves differently i.e. when I click on "Save" it stays on the same page ( which is OK ) but it empties the content of both text boxes.
I need that only one text box be cleared but another one keep the content. How could I do it?
Thanks
**
I noticed that I could use 'value' attribute with "text" box .. like this:
Scan Box: <input type="text" value="123" name="package">
In my case the value "123" should be dynamic. I do have the value in my python script that I want to replace with "123" but I don't know how to pass it into the form.
Could someone help me?
thanks
You should use a template. Here are the docs for Bottle's built-in templating; I happen to prefer Jinja2 but you can decide which to use once you've mastered the concept.
Basically, you'll create a template file that is the html you want to return. It will include something like this:
Scan Box: <input type="text" value="{package}" name="package">
And your Bottle function (which you haven't posted, so I'm making a guess here) will look something like this:
#route('/myform')
def submit():
the_package = zzz # get the value however your application chooses
return template('form1', package=the_package) # your template file is form1.tpl
The value of the_package will automatically be substituted where {package} appears in your template file.
Please try the template examples in the Bottle documentation and let us know if you have any more questions.

Django Images Display

Ok, now I know how to display images on ONE /myurl/ in Django as a list (YEAH!)
But how can I display ONE Image per url with a button to click to the next image etc.
So basically I would want to come to the first /urlstart/:
text and a next button.
brings user to e.g. /urlstart/1
There the first image of a List is displayed and below that a button.
That brings user to /urlstart/2
Here the next image of a list is displayed.
etc.
How does the url.py regex part have to look like so this is possible?
How does the view has to be tweaked to get 1 List of Images but multiple urls?
And finally if anybody has implemented this with a down loadable and installable module/library, like e.g. photologue (which unfortunately did not work for me) or any better idea than that I would be really happy to get some insights on how to make this fast and efficient.
Thanks so much to everybody who takes the time to answer!
URL regex could look something like this:
url(r'^urlstart/(?P<image_id>\d*)/?$', 'urlstart', name='urlstart')
View code could look something like this:
def urlstart(request, image_id=0):
if image_id == 0:
image = None
else:
image = get_object_or_404(Image, image_id)
next_image = image_id + 1
return render_to_response('template.html', locals(), context_instance=RequestContext(request)
Template code:
{% if image %}
<img src={{ image.url }}>
Next
{% else %}
Put your text here. See first image by clicking here
{% endif %}
Obviously this is simplified. For example, you may want to check to see if there is an image to come next.
Hope this helps.
Take a look at Pagination which will provide you with Next/Previous links, etc.
Also, it would probably be a good idea to use permalinks and pass the next/previous image in from the view instead of hard-coding the URL into the template.

Categories