This is div which loads elements at rum time.
<div class="name" id="projct_name"></div>
after loading elements its becomes:-
<div id="projct_name" class="name">
<div>
<span >Proof testers</span>
</div>
</div>
I want the value of span.
$(document).ready(function() {
var prodct_name=$('#projct_name').find('div').find('span').html();
alert(prodct_name);
});
Each time page load get the alert null value because elements loads after alert.
I want to delay my js code so that all elements of page loads before my code run. It can be possible??
Try the below code:-
function pageLoadCompelet(){
var prodct_name=$('#projct_name').find('div').find('span').html();
alert(prodct_name);
}
And call this function on window.onload :-
window.onload=pageLoadCompelet;
I think Jquery Initialize will solve your issue.
Step 1: Insert this in the head-section of your page:
<script src="https://raw.githubusercontent.com/AdamPietrasiak/jquery.initialize/master/jquery.initialize.js"></script>
Step 2: Place the following javascript below or above the other code you already tried:
$("#projct_name span").initialize( function(){
alert($(this).html());
});
The plugin uses MutationObserver which is a really robust way of handling DOM changes.
Related
Hopefully I can explain my question correctly, so sorry in advance for any wrong use of jargon or other:
Is it possible to access with javascript the original markup as viewed in the source code rather then the code from the DOM after it has been 'modified'
Let's say an element #div1 has the actual text that will be used in another element with id #div2, in the source code the text will be visible in #div1 but in the DOM while inspecting #div1 will be empty and #div2 will have that text,
I know it would be a matter of the order of loading the scripts, but I was hoping there could be another way.
Hopefully this makes some sense.
Yep, the simpliest way to access original html is to place your js code before any other scripts (or place only libs like jquery before).
The second opportunity is to load document again with ajax, parse and get what you want. Here is code example:
<div id="div1">
Hello
</div>
<div id="div2">
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$('#div2').html($('#div1').html())
$('#div1').html('')
</script>
<script>
alert($('#div1').html())
// ajax get
// empty string in get request means current location
$.get("", function (html) {
var el = $(html).filter('#div1');
alert(el.html())
});
</script>
PHPstorm spoiled my files just now, so I have to rework everything. And for some reason I can't get this working - click event just don't happen at all, neither with $("body"). It does work with $(document).on(...) though.
(script is inside head and script tags)
$("#cover").on('click',function(e) {
$(e.target).removeClass("no");
$(e.target).addClass("yes");
});
<body>
<div id="button"></div>
<div id="cover">
<div class="rows" id="row1"></div>
<div class="rows" id="row2"></div>
<div class="rows" id="row3"></div>
<div class="rows" id="row4"></div>
<div class="rows" id="row5"></div>
<div class="rows" id="row6"></div>
</div>
</body>
Code is executed in the order in which it's found on the page. So this:
$("#cover")
Needs to be executed after this is added to the page:
<div id="cover">
Otherwise that element won't be found by that selector, because it doesn't exist yet.
One approach is to move the JavaScript code to the bottom of the page. (Or at least to after the target element exists.) Another is to wrap it in the jQuery function which will attach it to the document's ready event:
$(function () {
// add your code here
// this will execute after the DOM is completely loaded
});
Try doing this. It will execute once your DOM is ready.
$(function(){
$("#cover").on('click',function(e) {
$(e.target).removeClass("no");
$(e.target).addClass("yes");
});
});
You could try reverting your changes in PHPStorm by right-clicking the folder, navigating to Local History -> Show History -> right click file(s)/folder(s) and select Revert Changes.
If that doesn't work do the following:
Move your javascript to the bottom of the page
Wrap the click with $(document).ready(...)
For debugging purposes do console.log($("#cover")); as your first line before binding a click event to see if jQuery object length is 1 or 0. If 1 the element is matched and found, if 0 then element doesn't exist or no match found.
my concept is to load html file from one to another one. The image below could explain better.For example, I have no1.html, no2.html,no3.html, no4.html ... and they share one JavaScript file, all html files have its own contents.
first HTML file no1.html loads no2.html, my javascript is for no1.html like, $('#element').load('no2.html #content'); then no2.html js is like $('#element').load('no3.html #content');
if all files just share one javascript file is unable to load html pages continuously, is there a way to make html loads another html continuously ?
I guess what you would like to do is something like this:
my.js
$(function() {
// delegate click event to ajax content
$("body").on("click",".load_button",function() {
$(this).hide(); // hide this button
var area_name = $(this).data("area");
var next_file = $(this).data("next");
$("#"+area_name).load(next_file);
});
});
no1.html
<script src="my.js"></script>
This is No.1
.....
<div id="area_2">no2 will be here</div>
<div class="load_button" data-area="area_2" data-next="no2.html">Click</div>
no2.html
This is No.2
.....
<div id="area_3">no3 will be here</div>
<div class="load_button" data-area="area_3" data-next="no3.html">Click</div>
no3.html
This is No.3
.....
<div id="area_4">no4 will be here</div>
<div class="load_button" data-area="area_4" data-next="no4.html">Click</div>
In this example, my.js is included only once in no1.html.
Hope this helps.
1.You are trying to load the content of the html file in single element.
You might want to use a callback function
$('#element').load('no3.html #content' ,function(){
// Loading done.. what next?
})
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.
I have this code :
HTML
Show Agency
<div id="invisibleDiv">
<script src="http://platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/CompanyProfile" data-id="1035" data-format="inline" data-related="false"></script>
</div>
jQuery
$("#showDiv").click(function () {
$("#invisibleDiv").show();
});
CSS
#invisibleDiv
{
display:none;
}
When I load the page, I see the scripts loaded from external source, also if the div is hidden. The scripts call with some API and generate HTML/Javascript.
Well, what I'm looking for is to force the script to be unloaded if the parent is hidden; than, when I'll show it (through the link), load the script inside the div.
How can I do it? I'll avoid AJAX.
UPDATED:
DEMO: http://jsfiddle.net/HqeD2/
Show Agency
<div id="invisibleDiv">
<script type="IN/CompanyProfile" data-id="1035" data-format="inline" data-related="false"></script>
</div>
$(function() {
$("#showDiv").click(function() {
$.getScript("http://platform.linkedin.com/in.js");
});
});
If I understand it correctly, you just want to delay the running of arbitrary scripts that are provided by the third party? Would something like this work?
<div id="invisibleDiv" style="display:none">Please wait while we load some stuff from Facebook...</div>
$("#showDiv").click(function(){
$("#invisibleDiv").show().load("http://facebook.com/whatever/andStuff");
});
Has the downside that you can't pre-fetch the HTML content, but I don't see any other way.
EDIT: ok, it looks like you edited the question whle I was typing this up... so YOU control the content of invisibleDiv, but you want to delay the loading of in.js? try this...
$("#showDiv").click(function(){
$("#pleaseWaitDiv").show();
$.getScript("http://platform.linkedin.com/in.js", function(){
$("#pleaseWaitDiv").hide();
$("#invisibleDiv").show();
});
});
Again, you have to make the user wait while the script downloads, hence my addition of pleaseWaitDiv
More edit:
New up a script node and append it.
var scriptNode = $("<script></script>")
.attr("type","IN/CompanyProfile")
.attr("data-id","1035")
.attr("data-format","inline")
.attr("data-related","false");
$("#invisibleDiv").append(scriptNode);
$.getScript("http://platform.linkedin.com/in.js", function(){
$("#pleaseWaitDiv").hide();
$("#invisibleDiv").show();
});
You can bind it to your showDiv click function, inline scripts are processed right away...the only other thing I can think of is to have the script be loaded via ajax which you don't want.
Try this :
http://jsfiddle.net/sXJa6/6/