JQuery Load Page into Div ... How to access external div with jquery - javascript

I am loading a page into a div like this:
<script type="text/javascript">
$(document).ready(function(){
$("#siteloader").html('<object data="http://mysite/form1.php" />');
$( "#myform" ).submit(function( event ) {
alert( "Handler for .submit() called." );
event.preventDefault();
});
});
</script>
I can see with firefox that the page loaded is on a frame.
My question is, how can I access anything on the loaded page with jquery ?

You can try using jQuery .load() to do the same thing but only return the element that you need and not withing a frame. Jquery .load But to answer your question try using the .contents() to get the information you need. jQuery .contents
$('#siteloader').load("mysite/form1.php")
.success(function(){
$( "#myform" ).submit(function( event ) {
alert( "Handler for .submit() called." );
event.preventDefault();
});
})
EDIT: added code

Related

how to make sure the page is loading only after the jquery is loaded

I have a jsp page with jquery-ui somehow it's taking time to load .
I have hide the dom and onload function I am writing the following code
setInterval(function(){
if(typeof jQuery.ui !=undefined )
{
$(document.body).css("visibility", "visible");
}
},5000)
I don't want to run the function once condition get true , how to achieve it
Write your all code inside the:
$( document ).ready(function() {
console.log( "ready!" ); //Here you can put all the code
});
Once you DOM(Document object model) is ready then your js code will run, which is written inside the document ready function.
Put your code inside a $( document ).ready() block. As shown below.
$( document ).ready(function() {
console.log( "ready!" );
});
OR shorthand for $( document ).ready()
$(function() {
console.log( "ready!" );
});
You may refer to this documentation for more information. https://learn.jquery.com/using-jquery-core/document-ready/

load external file into page id in jquery mobile

i have an external file profile.php, i want to load it into a sub page id profile after clicking a link.. i have tried the code below but i did not see any been displayed after the click event, the clicked event is triggered because i have tested it alert , there is no error in console i think i'm missing something please help out. thanks
$(document).on("click", "#profilel",function(){
$( ":mobile-pagecontainer" ).pagecontainer( "load", "profile.php" )
});
Try this one
$(document).on("click", "#profile",function(){
$( ":mobile-pagecontainer" ).pagecontainer( "load", "profile.php" )
});
or
$("#profilel").click(function(){
$.get("profile.php")
.done(function(data){
$( ":mobile-pagecontainer" ).html(data);
});
});

.click event don't work on a certain div ID conflict?

I try to execute a function when I click on a specific div ID and nothing happens, help! Example:
$( "#jwplayer-1_wrapper" ).click(function() {
alert( "Handler Clicked" );
});
-> Full example here <-
Check this
http://jsfiddle.net/2mK7Z/22/
$(document).ready(function(event)
{
$('#jwplayer-1_wrapper').mousedown(function() {
alert('click detetced');
});
});
I think this is the problem you are experiencing: Track a click on a flash movie (object / embed) with jQuery
That is - the embedded flash object steals the click event, and jquery will never see it.
Do you create the element dynamically? It could be that the element doesn't exist at document ready. Try:
$("body").on("click", "#jwplayer-1_wrapper", function() {
alert("Handler clicked");
})
Otherwise, check the ID and make sure it's correct.
You have to wait for the DOM to become ready. Use jQuery(document).ready
$(document).ready(function() {
$( "#jwplayer-1_wrapper" ).click(function() {
alert( "Handler Clicked" );
});
});

JQuery wrong script order?

I have this jquery script, and it does not work in head tag.
<script type="text/javascript">
$(window).load(function() {
$( "#target" ).submit(function( event ) {
alert( "Handler for .submit() called." );
event.preventDefault();
});
}
</script>
But if I put the code below the form it usually works.
I want to put it in a .js file. But does not work in the head tag, only if I include after the form.
It is possible to make this code work in head tag?
You should initialize jQuery like this instead:
$(document).ready(function() {
$( "#target" ).submit(function( event ) {
alert( "Handler for .submit() called." );
event.preventDefault();
});
});
Probably the form is not rendered before .load event is fired.
Check what window is, but you might want to write:
<script type="text/javascript">
$(document).ready(function() {
$( "#target" ).submit(function( event ) {
alert( "Handler for .submit() called." );
event.preventDefault();
});
});
</script>
Check this link
If you don't use the .ready approach, it is going to execute the code, search for #target and find nothing, because the render has not passed the object that you are targeting so it is not able to find it
Try this?
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$(document).on("submit", "#target", function(event) {
alert("Handler for .submit() called.");
event.preventDefault();
});
});
</script>

Alert on HTTP request

In jquery one can do an event like this:
$( "#target" ).click(function() {
alert( "Handler for .click() called." );
});
Is it possible to do this when a page is doing a HTTP request to a certain URL? Maybe with plain Javascript?
It shouldent matter what kind of request (ea AJAX or post or whatever)
$( "#target" ).???ON_HTTP_REQUEST???(function() {
alert( "Handler for .click() called." );
});
I Googled a LOT but there is nothing on this.
What you're looking for is probably $.ajaxStart, which fires whenever an ajax call starts up (POST and GET):
$( document ).ajaxStart(function() {
alert("Ajax started");
});
from the docs:
Whenever an Ajax request is about to be sent, jQuery checks whether
there are any other outstanding Ajax requests. If none are in
progress, jQuery triggers the ajaxStart event. Any and all handlers
that have been registered with the .ajaxStart() method are executed at
this time.
$( document ).ajaxSend(function( event, jqxhr, settings ) {
if ( settings.url == "ajax/test.html" ) {
alert( "loading ajax/test.html" );
}
});

Categories