OK so I am using $_POST to submit a form in jquery mobile and it works like this:
if($_POST['i']){?>
<div id="info"></div>
<script>
$( "#info" ).load( "file.php?&information=<?=$_POST['i']?>");
</script>
<?}?>
file.php has something like this:
info 1
info 2
<div data-role="panel" id="panel1" data-display="overlay" data-position-fixed="true" class="panels">
Text 1
</div>
<div data-role="panel" id="panel2" data-display="overlay" data-position-fixed="true" class="panels">
Text 2
</div>
I want to load file.php to fill #info. Then I want to keep the links in that div and move the panels to after the footer of the containing page (#footer). My problem is that when I try to add something after the load like this:
<script>
$( "#info" ).load( "file.php?i=<?=$_POST['i']?>");
$("#footer").after(".panels");
</script>
Nothing appends. I can append other things after the footer like:
$("#footer").after("TEST");
So I guess the problem is that anything inside the loaded div is unavailable. How do I get at it?
You could try this
<script>
$( "#info" ).load( "file.php?i=<?=$_POST['i']?>", function() {
var p = $("#info").find( ".panels" ).detach();
$( "#footer" ).after(p);
});
</script>
Related
I have a bit of an issue. I am trying to do a while loop in a database which will load information about each person. In the field I want it to load a contact form but hide it on initial load. I have this working My problem is when I go to click the button it displays all the Div's when I only want it to display that div the button was clicked on. Below is just a simple example
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<?php
$x = 1;
while($x <= 5) {
echo '<div class ="Test_name">Hello World</div> <br>
<a href = "#" class = "Click_ME" > Click to show</a>';
$x++;
}
?>
<script>
$( document ).ready(function() {
$( ".Test_name" ).hide();
$('.Click_ME').html('TEST');
$( ".Click_ME" ).click(function() {
$( ".Test_name" ).show();
});
});
</script>
The jquery selector should be point to the respective div on click of button.
Inside click event using $(".Click_ME").index(this) we can able to find index of clicked button's index and using it div can show using $( ".Test_name" ).eq($(".Click_ME").index(this)).show();.
Please check below snippet.
$( document ).ready(function() {
$( ".Test_name" ).hide();
$( ".Click_ME" ).on('click',function() {
//$(".Click_ME").index(this) will find the index of clicked button and based on that index div can show/hide.
$( ".Test_name" ).eq($(".Click_ME").index(this)).show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class ="Test_name">Hello World</div> <br>
<a href = "#" class = "Click_ME" > Click to show</a>
<br/>
<br/>
<div class ="Test_name">Hello World</div> <br>
<a href = "#" class = "Click_ME" > Click to show</a>
folow this simple steps.
In the div include the style display:none
<div style='display:none'>
// you all php data here
</div>
on click remove the style
$( ".Click_ME" ).click(function() {
$(".Test_name").css('display','block');
});
replace $( ".Test_name" ).show(); with $(this).prevAll('.Test_name').first();
Hey folks I have content being displayed on a page by using jQuery and Ajax to query my php page. On click I check for all elements with the class edit. I am trying to then grab the unique id of the link that was chosen. I know it should be this.id but it returns nothing. Does anyone have any insight on how to dynamically check the clicked link and get a stored value in any way?
The bellow works for getting a link clicked. but cannot get the id still.
$("body").on("click", ".edit", function(){
var id = this.id;
alert($(this).val());
});
Here is the HTML that is being put on the page via Ajax
<div class="row">
<div class="small-2 large-2 columns">3</div>
<div class="small-10 large-6 columns">Andrew</div>
<div class="small-6 large-2 columns">2013-08-12</div>
<div class="small-6 large-2 columns edit"> Edit </div>
</div>
Solved solution was to use '.edit > a' as the selector. I had edit as the class of the div, not the anchor tag. Thanks for all the help folks!
The sample HTML helped:
You need to select the anchor within the .edit div.
$("body").on("click", ".edit > a", function () {
var id = this.id;
alert(id);
});
JSFiddle: http://jsfiddle.net/QckbT/
Does this works ?
$("a.edit").on("click", function(){
alert($(this).val());
});
alert($(this).val());
relate to body, not to #id.
I am a newbie on AJAX, I have a link that loads table.php. Then it writes the code to the index.php. In that code, I have another link to
show the info.php. Is it possible to do this?
<!--This is index.php-->
<div id="link">my Info</div><!--it works here-->
<div id="link">My Table</div>
<div id="table"></div>
<div id="info"></div>
<!--My javascript-->
<script type="text/javascript">
$(document).ready(function() {
$('#link a').click(function(){
var page = $(this).attr('href');
if(page =='table')
$('#table').load('table.php');
else if(page =='info')
$('#info').load('info.php');
return false;
})
});
</script>
<!--This is table.php-->
<div id="link">my Info</div><!--it doesn't works here-->
<!--This is info.php-->
<h1>My info</h1>
Your three <div> (as pointed out by #scragar) have the same id link, most probably causing the issue. Make it a class like that :
<div class="link">
And in your JS :
$('.link a')
EDIT : As noted by dbf, you must as well declare your handler with live() or on() instead of click() :
$('.link a').live('click', function(){ ... });
in order for it to be binded after table.php is loaded in the page. ( http://api.jquery.com/live/ )
i have some trouble here...
lets say i have a element like this...
bootstrap(document).ready(function() {
bootstrap('#popinquiry').popover({trigger:'hover'});
});
i using noConflict on my source code.. and then i have a element like this..
<a href='#' id='popinquiry' rel='popover' title='Popover Title'>heree</a>
and after i load the page.. the popover was shown, but the trigger i set above doesnt work.. so i must click the "heree" first too show my popover.. but when i write the trigger direct on 'popinquiry'
<a href='#' id='popinquiry' rel='popover' data-trigger='hover' title='Popover Title'>heree</a>
The option worked.. can you help me?? the problem is all off popover options parameter
your javascript:
<script>
$(function ()
{ $('#popinquiry').popover();
});
</script>
your html :
<div class="well">
hover for popover
</div>
try this code; I hope it will solve your problem:
JavaScript:
<script type="text/javascript">
$(function () {
$(".btn").popover({
trigger: 'hover',
placement : 'bottom'
});
});
</script>
HTML:
Popover
Further you can checkout this page for more working examples - http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-popovers.php
I would like to know if there is a way to be able to click a Link on the navigational Div tag and have it display on the content Div like if i had
<div id="nav">
a link </div>
<div id="content>show the stuff</div>
From the comments below - the OP stated the following :
I am trying to redo a website but my imagagination is getting the better of me. If I have three links like home, about author, and about our mission. I would like to be able to click about author and in the main_content div tag show the html file aboutauthor.html
Alt 1: Use jquery tabs:
See demo and code here: http://jqueryui.com/demos/tabs/
Alt 2: Hide/show div in same html file:
HTML:
<div id="nav">
Show content 1
Show content 2
Show content 3
</div>
<div id="content1" class="toggle" style="display:none">show the stuff1</div>
<div id="content2" class="toggle" style="display:none">show the stuff2</div>
<div id="content3" class="toggle" style="display:none">show the stuff3</div>
jQuery:
$("#nav a").click(function(e){
e.preventDefault();
$(".toggle").hide();
var toShow = $(this).attr('href');
$(toShow).show();
});
Demo: http://jsfiddle.net/5NEu3/3/
Alt 3: Load from server ondemand:
To load html into your main div you should use: http://api.jquery.com/load/
Follow examples on that site. And be aware that the html side you are loading must be in same domain as you are hosting the new page.
Html
Show content 1
Show content 2
jQuery
$("#nav a").click(function(e){
e.preventDefault();
$('#maindiv').load($(this).attr("href"));
});
Using jQuery, you could do something like this.
This will open the site <a href="example.html"> and put it inside of the <div id="content"> when you click it, and then disable changing the whole site.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('#nav a').click(function(e) {
e.preventDefault();
$('#content').load($(this).attr('href'));
});
});
</script>
<div id="nav">
Some page
Some other page
My page
</div>
<div id="content">
show the stuff
</div>
Something like this:
function setContent(div, content)
{
getElementById(div).innerHtml = content;
return false; // return false to ignore the click
}
a link
to show a hidden div (i think this is what you wanted)
the javascript (using jQuery)
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#showdiv").click(function () {
$("#hiddendiv").show();
});
});
<script>
the html
Show the Div
<div id="hiddendiv" style="display:none;">Content here</div>
you can see it in action here