I am trying to update the HTML content inside div using jquery HTML function.
<div id="test"></div>
.
.
.
<div id = "test" style="display:none"></div>'
When I am updating the content.
(#test).html(result)
I need to update both the div .How can I achieve this.
Thanks
ID must be unique, you should use class instead
<div class="test" id="test1"></div>
<div class="test" id="test2"></div>
$('div.test')
.html('<p>All new content.You want!</p>');
Id must be unique in HTML, you should use class instead
HTML:
<div class="test"></div>
.
.
.
<div class= "test" style="display:none"></div>'
JavaScript:
$(".test").html(result)
Use class instead of ids and try this
$('.test').html(result)
Try this
$('div').html(result);
or
Instead of id you can use class.
$("div.class_name").html(res);
I assume your html code are:
<div id="#test">xxxx</div><div id="test">cccc</div>
then if you call $("#test"); these will return array with 2 length; so, you had to call each array to update all. I asumme you will update with value 'ddd' to both of #test, then
for(i=0;i<$('#test').length;i++){
$('#test')[i].html('ddd');
}
Related
There is the structure like:
<div class="parent">
<div>
<div class="fieldRow">...</div>
</div>
<div>
<div class="fieldRow">
<div class="CheckBox">
</div>
</div>
<div>
<div class="fieldRow">...</div>
</div>
<div>
<div class="fieldRow">...</div>
</div>
</div>
In my script I am writing a loop for each of the 4 div's under div[#class='parent'] and aiming to click the checkbox if there is, i.e.
members = page.all(:xpath, '//div[#class='parent'])
members.each do |a|
if **page.has_xpath?(a).find(:xpath, "div[#class='fieldRow']/div[#class='CheckBox']")**
a.find(:xpath, "div[#class='fieldRow']/div[#class='CheckBox']").click
end
end
However I can't look for the correct usage of has_xpath? with xpath including variable.
Please advice? Thank you!
has_xpath? takes an XPath expression (not an element) and returns a boolean (true/false) based on whether there are any elements that match that expression within the current scope - http://www.rubydoc.info/gems/capybara/Capybara/Node/Matchers#has_xpath%3F-instance_method. Since it returns true/false you can't then call find on it. For the example you posted there's no need for XPath or checking for the existence of the elements, just find all the matching elements and call click on them. Something like
page.all('div.parent div.fieldRow div.Checkbox').each { |cb| cb.click }
or
page.all('div.parent div.Checkbox').each { |cb| cb.click }
if the fieldRow class isn't something you really need to check.
Note: this assumes clicking the elements doesn't invalidate any of the other matched elements/change the page.
If you REALLY need to do it with the whole members and looping on them , using XPath, and checking for presence then it would be something like
members = page.all(:xpath, './/div[#class='parent'])
members.each do |a|
if a.has_xpath?(:xpath, ".//div[#class='fieldRow']/div[#class='CheckBox']")
a.find(:xpath, ".//div[#class='fieldRow']/div[#class='CheckBox']").click
end
end
Note: the .// at the beginning of the XPath expressions is needed for scoping to work correctly - see https://github.com/teamcapybara/capybara#beware-the-xpath--trap - which is an issue using CSS selectors doesn't have, so you should really prefer CSS selectors whenever possible.
I've got problem with this line:
<div class="TrescPotwierdzTresc">#Model.Article</div>
The problem is with "br" tag inside #Model.Article wont work. I can see this tag after page load, but text is still in the same line. WHen i do something like this:
<div class="TrescPotwierdzTresc">#Model.Tresc br #Model.Tresc</div>
The br tag between "#Model.Tresc" elements work fine. Do You have any idea why is that happening ?
Try this:
<div class="TrescPotwierdzTresc">#Html.Raw(Model.Article)</div>
Html.Raw returns markup that is not HTML encoded.
I am working with mvc4 and displaying data from my model in to cshtml views.
When setting data in to the markup, I adding it in to div tags.
Is there a way in mvc that if the model property is not set, dont display the div?
Sample of my markup
<div class="myclass"> #Model.Text </div>
You can test for a value being set like so:
#if (!string.IsNullOrEmpty(Model.Text))
{
<div class="myclass"> #Model.Text </div>
}
Update: If you want to incorporate the logic for whether or not to render an element based on its value, you could create a Custom HTML Helper method.
How about wrapping it in a null check
#{
if (#Model.Text != null)
{
<div class="myclass"> #Model.Text </div>
}
}
I have a view with a bunch of elements in it.One of them (a div) is shown depending of a value that changes inside a select_tag (also within the same page).
I'm getting the selected ID from the select_tag element
$('#some_id').on('change',function(){
//$(this).val()
})
but then just don't know how to fetch the object and check for one of its properties and that way know if I should show the div or not?.
I thought of sending that id to the server...do whatever I need over there and then come back to the view and try something like this
<% if some_condition %>
<div>
...
</div>
<% end %>
This (of course) might not be the way.I'd be glad to understand how this happens
You way of doing it after getting some data from the server onChange of the select would work. You might also consider this approach.
But if you could pre-populate the divs and add a class or some other attribute it with which you could relate to the chosen option in the select field, then you can prevent the server call entirely.
<div class="opt1Val selectOptsDiv"> </div>
<div class="opt2Val selectOptsDiv"> </div>
<div class="opt3Val selectOptsDiv"> </div>
hide all these divs initially with css display: none;.
$('#some_id').on('change',function(){
var selectedOptionVal = $(this).find("option:selected).val();
$("." + selectedOptionVal).show();
})
But I guess you would be able to do this if the showing and hiding of the div's depend only on the selected option value and do not have to go through some other processing at the server end.
Is there a way in Grails to do conditionals inline on an HTML attribute, for example:
<div class="${if(sec.isLoggedIn()) loggedInClass}">
I'm trying to add a class to certain elements if the user is logged in.
This might work for you:
<div class="${(sec.isLoggedIn()?loggedInClass:null)}">
Or Try this:
<div class="${(sec.isLoggedIn()?'loggedInClass':'null')}">
You can do:
<div class="${sec.loggedIn ? 'loggedInClass' : ''}">