This is my index.html page where am trying to implement a simple AJAX when clicked on anchor tag the text will be passed to PHP data.php page and that page will display the page being clicked. Yes, the code is working, but when I first click on the link nothing is displayed and from the second time it stars working. Where is the problem actually?
This is my script
<script>
$(document).click(function(){
$("a").click(function(){
//when clicked our ajax will work
$.get('data.php',{'page':$(this).text()},function(data){
$('#result').html(data);
});
});
});
</script>
And this is my PHP for the AJAX
<?php
$anchortext=$_GET['page'];
if(isset($anchortext))
{
echo 'this is a'.$anchortext;
}
?>
You misplaced $(document).click(..) for $(document).ready(....), so only after the first click the click handler is registered to the a element
$(document).ready(function(){
$("a").click(function(){
//when clicked our ajax will work
$.get('data.php',{'page':$(this).text()},function(data){
$('#result').html(data);
});
});
});
Use $(document).ready instead of $(document).click.
Related
I have the following href link
Click Here to View data
and the pop is showing on page reload, but I want to show it only on click.
$('.modal-ajax').modal();
Now the page is redirect into url. I want to show the pop up
I didnt wrote any js code. i tried this now
$('a').click( function(e) {
e.preventDefault();
$('.modal-ajax').modal();
return true;
} );
but it raises $('.modal-ajax').modal(); is not a function error
You could simply put a comment on the javascript code that trigger the modal :
// $('.modal-ajax').modal();
Then add a click event listener for the element you wish to be clicked :
$('a.modal-ajax').click(function(event) {
event.preventDefault();
$('.modal-ajax').modal();
});
Please try this
Click Here to View data
$('.modal-ajax').on('click', function() {
var url = $(this).attr('data-id');
//place this value wherever you want in modal.
$('#openModal').show();
});
I have the page (index.php) that contain one link with id="t1" and one div id="container".
<a id="t1" title="Users" href="utenti.php">Users</a>
<div id="container">
<!--Where does the contained-->
</div>
When I click the link I get a built-in external page (utenti.php)
This is code of Ajax:
$(document).ready(function(){
$("#t1").click(function(){
//$("#container").hide();
$("#container").load($(this).attr("href"), function(){
$("#container").show();
event.preventDefault();
});
return false;
});
});
and so far all is well, but if I click a link in the page that is included (utenti.php) the page is not incorporated in the same div but is opened in a direct manner.
I tried to put in the file .JS the code Ajax, to recognize the ID of the links transforming into:
$(document).ready(function(){
$("#t1").click(function(){
//$("#container").hide();
$("#container").load($(this).attr("href"), function(){
$("#container").show();
event.preventDefault();
});
return false;
});
$("#click").click(function(){
//$("#container").hide();
$("#container").load($(this).attr("href"), function(){
$("#container").show();
event.preventDefault();
});
return false;
});
});
Where #click is id of the link contained in the page Utenti.php,but even so
I do not incorporate the page in the div.
I also tried to include directly the page with the script inside the page utenti.php but I recognize the first link (which is fine) but everyone else does!(not all other!)
If I understand correctly this system does not include actually the page as would the classic include of PHP.
He gives him also the values already included in the index is more a kind of visualization,only that I haven't understand how to pass the value of the links contained in utenti.php inside the main page index.php.
It should be
$(document).on("click","#t1",function(e){
e.preventDefault();
var href = $(this).attr("href");
$("#container").load(href);
});
If you want links on the page that is opened in the div to also be targeted to the div you can try a delegated click handler on the div itself.
$(document).ready(function () {
$("#t1").click(openLinksInDiv);
$("#container").on("click", "a", openLinksInDiv);
function openLinksInDiv(event) {
//$("#container").hide();
$("#container").load($(this).attr("href"), function () {
$("#container").show();
});
event.preventDefault();
}
});
Demo: http://jsfiddle.net/AN56C/
Or if you want all links on the page to open in that div, use:
$(document).on("click", "a", openLinksInDiv);
Noting that loading pages via Ajax won't work for any and all pages from external domains, but will work for pages from your own domain.
This whole thing seems to be the perfect case for an iframe rather than a div, in which case you could have links to external domains.
I have a form which action is set to a link , http://website.co.za/blablabla
and I have a js script to auto submit it on page load and NOT redirect it to the form action url.
but it doesnt work , pls help.
My Code:
The following code will make it auto submit on page load BUT it loads the page to the form action URL and it should not redirect.
<script>
$(function(){
$("#myform2").submit();
});
</script>
$(function(){
$.post($("#myform2").attr("action"), $("#myform2").serialize());
});
You opened a parenthesis, so close it.
$(function(){
$("#myform2").submit(function(e){
e.preventDefault();
});
});
My End goal is to have ajax displayed content be clickable to shove whatever it's value is into a text box.
Right now I have the ajax loading but when I click on it, it doesn't work. As of now I have jquery assigned the 'a' tag so when it's clicked it puts the static text "works" in the textarea with the id=email-body.
$(document).ready(function() {
// Expand Panel
$('a').click(function(){
$('#email-body').val($('#email-body').val()+'works');
});
});
This works just fine for a tags that aren't part of the ajax content but it doesn't work for the ajax content. Is there a special pull system I should use to have jquery effect ajax content?
Also static text and clicking on an a tag isn't really want I want.
Right now my ajax is doing the following:
foreach($search_found as $search_row){
$hint=$hint . '<a>'.ucwords($search_row['email_module_name']).'</a>';
}
echo $hint;
Is there a way I can have it be:
AJAX:
<div class="module" value="'.ucwords($search_row['email_module_name']).'">
'.ucwords($search_row['email_module_name']).'
</div>
JQUERY:
$(document).ready(function() {
// Expand Panel
$('.module').click(function(){
$('#email-body').val($('#email-body').val()+'$this->value');
});
});
What you want is to delegate the events, to do this you can use .on()
$(document).ready(function() {
// Expand Panel
$(documnet).on('click', 'a', function(){
$('#email-body').val($('#email-body').val()+'works');
});
});
You need to use the .on function:
$('div').on('click', '.module', function(){
$('#email-body').val($('#email-body').val()+'$this->value');
});
This allows the 'click' function to attach to the elements that are brought in via ajax.
You can use .on() to bind an event to current and future elements.
$(document).on("click", "a", function(){
$('#email-body').val($('#email-body').val()+'works');
});
Or,
$(document).on("click", ".module", function(){
$('#email-body').val($('#email-body').val()+'$this->value');
});
$('.module').live('click', function(){
$('#email-body').val($('#email-body').val()+'$this->value');
});
I figured it out and came back on to see someone posted .on
I tried this and it did not work. What did work was .live
How to open javascript or jquery popup to display target url in same page
either using jquery or javascript
can anyone please provide me with a link i have searched on google but was unable to found a valuable thing
Here's some markup..
Some Site Link
<div id="popup"> This is the popup text pre $.load() </div>
Here's some code...
$('#popup').dialog({
autoOpen: false,
modal: true
});
$('a').on('click', function(e){
e.preventDefault();
$('#popup').load($(this).prop('href'), function(){
$('#popup').dialog('open');
});
});
Just use following things
<script>
$("#target").load("your link");
</script>
lets say you already make the popup appear on click of a link or a button so call a function on onClick event and pass the target url as a parameter. the in that function you can use alert like
alert(url);
and then use
window.location = url;
to redirect the page.
I have implemented highslide js and it is working fine...
Thanks fellows