<span name = "menu">
<!-- javascript here -->
<!-- content called via ajax -->
</span>
<span name = "content">
<!-- content called via ajax -->
<!-- changed by buttons from the menu-->
</span>
Does anyone know how to display contents in the content span using ajax generated menu from the menu span? If I'm not wrong, selecting a span can only happen within the same span. Is there something like parentpage.span like mysql?
If I've understood your question correctly, you can access the span as you have it currently using document.getElementsByName("content"). However, it would probably be easier to give the span an id, then do something like this in your AJAX success function:
document.getElementById("spanID").innerHTML = ajaxResponse.responseText;
It's a better idea to give those span's ID that you can hook into:
<span name="menu" id="menu">
<!-- Content called via Ajax -->
</span>
Then you could use
var div = document.getElementById('menu');
alert(div.name);
I would suggest against having JS code run inside the element because IE can puke all over that.
Related
I am always leery of asking dumb questions here but I need to move on and create a few more active pages but this is a lingering issue in my way ...The chtml in razor contains a switch ,,, in one of the cases there's three if statements.. THIS IS JUST ONE OF THEM depending on the if statements a different string in viewdata is to be fed into a div and the div class "hidden" is removed and the supplied text displayed....
I have over the past few hours regained my briefly lost ability to remove that hidden class (I hate css) but I have never been able to update the content of the div.
PLEASE Advise Thank you !!
<div id="divUnUsableEvent" class="hidden">
<div class="row clearfix">
<div class="col-md-1"></div>
<div id="systemExceptionLbl" style="font-size: 2em; color: red;"
class="text-danger:focus">
Please contact IS support
</div>
</div>
</div>
//alphascores Not present AND BetaSCores Not Present Ready for xxxxx //alphascores Not present AND BetaSCores Not Present Ready for xxxxx Scoring
if (!Convert.ToBoolean(#ViewData["alphaPresent"])
&& !Convert.ToBoolean(#ViewData["betaPresent"]))
{
<script type="text/javascript">
$(function() {
$('#UnUseableEvent').addClass("hidden");
var txtMsg = #Html.Raw(Json.Encode(ViewData["beforeAlpha"]));
$('#divUnUsableEvent').removeClass("hidden");
$('#systemExceptionLbl').removeClass("hidden");
$('#systemExceptionLbl').innerText = txtMsg;
});
</script>
<a id="XXXReScoreEvent"
href="#Url.Action("Readyforxxxxxx", "Exception", new { Id = (int)#ViewData["Id"] })"
class="btn btn-primary btn-default btn-too-large pull-left margin"
aria-label="XXXReScoreEvent">
<span class="glyphicon glyphicon-edit" aria-hidden="true"></span> Ready for xxxxxx Scoring
</a>
}
break;
I know its hitting the javascript, as that html element (a button) named '#UnUseableEvent' is correctly being hidden in this case. I of course would want the javascript out of this html page and just have function calls in the razor but baby steps
Specifically regarding the ('#systemExceptionLbl').innerText = txtMsg; I have tried
.text
.value
.innerHTML
all to no avail. I can see the correctly formatted Json.Encoded text reach the variable txtMsg, but again I cant get it into the div ..
I am having success now with displaying the div (remove class hidden) I was attempting to affect the wrong div name and the line removing the hidden class from the element $('#systemExceptionLbl') is not needed.
I even tried to skip the JQuery reference and go old school document.getElementById('systemExceptionLbl').innerHTML = txtMsg;
Ever tried :
$('#systemExceptionLbl').text( txtMsg );
or
$('#systemExceptionLbl').html( txtMsg );
as innerText is not a jquery function. Instead use .html() or .text() to insert data into it
I have a web page, I need part of the content separated to an individual page, but not use iframe. Just like to know if it is possible use div instead of iframe and works as it in the same page(With js base code or php code is cool).
I'd need the whole content of <div class="row-fluid">..</div> to be an individual html, but not use iframe, I will need a div instead of iframe, and make it works like just as in one page.
With PHP you can include a page inside your code inside a specific division.
for example inside index.php:
<div>
<?php include('page2.php'); ?>
</div>
and inside page2.php you have:
<span>Hello World</span>
The result would be:
<div>
<span>Hello World</span>
</div>
If what you want to achieve needs to be in the front-end as the user navigates through your site; that is after a click is made to an element and you don't want to change to another page, then AJAX is your option. this example is with Jquery:
$('.clickme').click(function(){
$.ajax({
url:'page2.php'
success:function(msg){
$('#insert_div').html(msg)
}
});
});
HTML:
<span class="clickme">Get Page 2</span>
<div id="insert_div">
<!-- Page 2 will be inserted here -->
</div>
Another solution is Jquery load() as many have posted:
$('.clickme').click(function(){
$('#insert_div').load("page2.php");
});
You can use the jQuery load() method to load the content when the corresponding link is clicked. you can also use this without event clicked with animation.
Currently have my page setup as:
<body id="some-id">
<div class="some-class">
</div>
<!-- some-class -->
</body>
I've tried using append and before, however, it's not quite doing what I want to do.
I'm trying to add a div with id inserted-div like this:
<body id="some-id">
<div id="inserted-div">
<div class="some-class">
</div>
<!-- some-class -->
</div>
<!-- inserted div -->
</body>
Each time I use something, for example: $('body').appendto("<div id='inserted-div'>"); it either won't insert or it will insert the </div> after the inserted <div> rather than placing the </div> before the closing body. Tried prepend and prependto but no luck.
You are looking for wrap method.
$('.some-class').wrap('<div id="inserted-div"></div')
$('body').prepend -- will add a div as the first child of the body.
$('body').append -- will add a div as the last child of the body.
But in your case you want the inserted-div as a wrapper for an already existing div.
Check Fiddle
To target just the first instance you can either use
$('.some-class').first() or $('.some-class:eq(0)')
If you want to wrap something around the entire body content, try:
$("body > *").wrapAll("<div id='inserted-div'/>");
If you want to wrap around the first DIV in the body:
$("body > div:eq(0)").wrap("<div id='inserted-div'/>");
I have implemented jQuery masonry to our site and it works great. Our site is dynamic and users must be able to add/remove masonry box's. The site has an add example but no remove example. Our db is queried returning x number of items. Looping through they are loaded and displayed. Here's a code sample: (we are use F3 framework and the F3:repeat is it's looping mechanism.).
<div id="container" class="transitions-enabled clearfix" style="clear:both;">
<F3:repeat group="{{#productItems}}" value="{{#item}}">
<div id="{{#item.itemId}}">
<div class="box">
<div class="view"> <!-- for css -->
<a onclick='quickRemove("{{#item.itemId}}")>
<img src="{{#item.pic}}" />
</a>
</div>
<p>
{{#item.title}}
</p>
</div>
</div>
</F3:repeat>
</div>
In the javascript code the item id number is unique and is passed into the function. It's also the div id# to distinguish each box. I've tried various combinations and methods but can't seem to get this to work.
function quickRemove(item){
var obj = $('#'+item+'').html(); // item is the product id# but also the div id#
$('#container').masonry('remove',obj);
$('#container').masonry('reloadItems');
$('#container').masonry('reload');
}
Has anyone out there successfully removed an item and how did you do it?
Thx.
Currently you appear to be passing a string full of html to the masonry remove method. Pass it the actual jQuery wrapped element by not including .html()
function quickRemove(item){
var obj = $('#'+item+''); // item is the product id# but also the div id#
$('#container').masonry('remove',obj);
$('#container').masonry('reloadItems');
$('#container').masonry('reload');
}
i have uibinder html element like below
<g:HTMLPanel>
<div class='thumbnailWrapper'>
<ul>
<li>
<a href='#'><img src='41546-140.jpg' /></a>
<div class='caption'>
<p class='captionInside'>testing javascript</p>
</div>
</li>
<div class='clear'></div><!-- clear the float -->
</ul><!-- end unordered list -->
</div><!-- end spolightWrapper div -->
<script>
jQ_Zoom();
</script>
</g:HTMLPanel>
my javascript have no problem executed in firefox,ie. but in safari/
chrome, the javascript is not call. have a look at my uploaded sample
at http://bit.ly/ayuFc1 . try open with firefox and compared with
chrome/safari
my javascript
function jQ_Zoom(){
alert('yoyo');
alert($('.thumbnailWrapper ul li').find('img').height());
}
It looks like you are putting the <script> tag directly in your UiBinder xml, that doesn't look right. I think the correct solution is either:
Wrap the Javascript function in a JSNI call.
Make your Javascript <script> call in your HTML file (outside of the UiBinder).
The first option is the preferred method of integrating native Javascript with GWT.