jQuery inside the HighSlide iframe doesn't work - javascript

simple jQuery doesn't work inside the HighSlide iFrame popup....
Ok... here is exactly what i have:
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="http://cdn.example.com/plugins/highslide/highslide.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="http://cdn.example.com/plugins/highslide/highslide-ie6.css" />
<![endif]-->
<script async src='//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
</head>
<body>
update
<script type="text/javascript" src="http://cdn.example.com/plugins/highslide/highslide-full.js"></script>
<script type="text/javascript" src="http://cdn.example.com/plugins/highslide/highslide.config.js" charset="utf-8"></script>
</body>
</html>
and here is the code of update.php
<?php
echo "<head>";
echo "<script async src='//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>";
echo "</head>";
echo "<body>";
?>
<script>
$(document).ready( function(){
$('#isMain').click( function(){
if(this.checked){
$('#subCats').hide();
}else{
$('#subCats').show();
}
});
});
</script>
<?php
echo "<form action='' method='post' role='form'>";
echo "<input type='checkbox' name='isMain' id='isMain'> Is Main Category?<br>";
echo "<select name='subCats' id='subCats'>";
echo "<option value='noway'>--SELECT--</option>";
echo "<option value='1'>Games</option>";
echo "<option value='2'>Music</option>";
echo "</select>";
echo "</form>";
echo "</body>";
?>
But the jQuery Hide Show sometime works fine and sometime doesn't work... what is the exactly issue here ???

jQuery (or any other JavaScript) works in a page that is opened using Highslide iframe objectType popup - objectType: 'iframe' - since the iframe popup opens the linked page exactly as you have coded it.
Demo using your code: http://jsfiddle.net/roadrash/rX4Bc/
The page used in the iframe popup: http://jsfiddle.net/roadrash/UWq3c/

Related

How to enable multi coloumn filter for dataTables?

I am new to dataTable customization, for multi-column search(through input text box) I referred this: https://datatables.net/examples/api/multi_filter.html.
And copy pasted the javascript mentioned. over that link. Is that enough?
PS: also I included the files mentioned, is there any order needed of adding those files?
as I have many other jQuery files in my pages (for bootstrap and other functions), I have included all dataTables files.
<script src=" https://code.jquery.com/jquery-1.12.4.js"></script><script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="<?php echo base_url() ?>plugins/jquery-datatable/jquery.dataTables.js"></script>
<script src="<?php echo base_url() ?>plugins/jquery-datatable/skin/bootstrap/js/dataTables.bootstrap.js"></script>
<script src="<?php echo base_url() ?>plugins/jquery-datatable/extensions/export/dataTables.buttons.min.js"></script>
<script src="<?php echo base_url() ?>plugins/jquery-datatable/extensions/export/buttons.flash.min.js"></script>
<script src="<?php echo base_url() ?>plugins/jquery-datatable/extensions/export/jszip.min.js"></script>
<script src="<?php echo base_url() ?>plugins/jquery-datatable/extensions/export/pdfmake.min.js"></script>
<script src="<?php echo base_url() ?>plugins/jquery-datatable/extensions/export/vfs_fonts.js"></script>
<script src="<?php echo base_url() ?>plugins/jquery-datatable/extensions/export/buttons.html5.min.js"></script>
<script src="<?php echo base_url() ?>plugins/jquery-datatable/extensions/export/buttons.print.min.js"></script>
Image for refrenceclick here
Without seeing your code, it's hard to say what's wrong. The example you gave is a good one, and here is another live enter link description here - the code is below. Hopefully those will get you going.
$(document).ready(function() {
$('#example thead th').each( function () {
var title = $(this).text();
$(this).html( '<input type="text" placeholder='+title+' />' );
} );
var table = $('#example').DataTable({
scrollX: true
});
table.columns().every( function () {
var that = this;
$( 'input', this.header() ).on( 'keyup change', function () {
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();
}
} );
} );
} );

combine php code with jquery/javascript

I have php code and jQuery/javascript. I want to make visitor counter using jQuery and php code.
Here is the php code :
<?php
$handle = fopen("counter.txt", "r");
if(!$handle){
echo "could not open the file" ;
} else {
$counter = (int ) fread($handle,20);
fclose ($handle);
$counter++;
//echo $counter;
$handle = fopen("counter.txt", "w" );
fwrite($handle,$counter) ;
fclose ($handle) ;
}
?>
and this is jQuery/javascript code :
<html>
<head>
<title>jQuery Hello World</title>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/jquery.counter.js"></script>
<link href="js/jquery.counter-analog.css" rel="stylesheet">
</head>
<body>
<span id="custom"></span>
<script>
$('#custom').addClass('counter-analog').counter({
//direction: 'up',
interval: '1',
format: '99999'
//stop: '2012'
});
</script>
</body>
</html>
How can I combine the jQuery/javascript code into php code? This is my first time for using jQuery, and I still don't understand to use jQuery. So I need your help. :D Thank you.
This is the result:
I want to add "50" into the jQuery "00000", so the result is "00050"
You simply need to echo the counter value in the span element.
So assuming your PHP code is at the top of the file, it should look like this.
<?php
$handle = fopen("counter.txt", "r");
if(!$handle){
echo "could not open the file" ;
} else {
$counter = (int ) fread($handle,20);
fclose ($handle);
$counter++;
//echo $counter;
$handle = fopen("counter.txt", "w" );
fwrite($handle,$counter) ;
fclose ($handle) ;
}
?>
<html>
<head>
<title>jQuery Hello World</title>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/jquery.counter.js"></script>
<link href="js/jquery.counter-analog.css" rel="stylesheet">
</head>
<body>
<span id="custom"><?php echo $counter; ?></span>
<script>
$('#custom').addClass('counter-analog').counter({
//direction: 'up',
interval: '1',
format: '99999'
//stop: '2012'
});
</script>
</body>
</html>

open a link in a different tab

I have a button that allows authentication from twitter, everything works properly, but the only issue is that i wish to open the login-twitter.php page on a different tab, i tried using window.open in place of header but it didn't work. can anyone tell how it can be done
<?php
ob_start();
session_start();
if (isset($_SESSION['id'])) {
header("location: u_tasks.php");
}
if (array_key_exists("login", $_GET))
{
$oauth_provider = $_GET['oauth_provider'];
if ($oauth_provider == 'twitter')
{
header("Location: login-twitter.php");
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<?
echo "<div class='col-md-9'>";
echo "<a href='?login&oauth_provider=twitter'><button style='background-color:#1dcaff; border-color:#1dcaff; color:white; height:30px; border-radius:10px;'>Go To Twitter</button></a>";
echo "</div>";
?>
</body>
</html>
i think it is helpful to you.
<button style='background-color:#1dcaff; border-color:#1dcaff; color:white; height:30px; border-radius:10px;'>Go To Twitter</button>
using header("Location:..."); can only do redirects. As far as I know, you'll have to do some amount of javascript or html to achieve your goal. Another problem is that browsers like to block automatically opened popups because 99% of the time automatic popups are used only by spammers. However, I'll show you a way to attempt to do this anyways:
<?php
$usingTwitter=0;
ob_start();
session_start();
if (isset($_SESSION['id'])) {
header("location: u_tasks.php");
}
if (array_key_exists("login", $_GET))
{
$oauth_provider = $_GET['oauth_provider'];
if ($oauth_provider == 'twitter')
{
$usingTwitter=1;
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<script>
<?php
if($usingTwitter){
echo "window.open('login-twitter.php');";
}
?>
<script>
</head>
<body>
<?
echo "<div class='col-md-9'>";
echo "<a href='?login&oauth_provider=twitter'><button style='background-color:#1dcaff; border-color:#1dcaff; color:white; height:30px; border-radius:10px;'>Go To Twitter</button></a>";
echo "</div>";
?>
</body>
</html>
Make sure you turn off popup blocking in your browser for this to work though!

How can I call a javascript function located in my html file from my php file?

In my index.html I have:
<head>
<link rel="stylesheet" href="css/messi.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/messi.min.js"></script>
<script type="text/javascript">
function failureFunction(){
new Messi('There was an error sending your message.', {title: 'Failure'});
};
function successFunction(){
new Messi('Success sending email', {title: 'Success'});
};
</script>
</head>
<body>
<form class="form" id="form1" method="post" action="contactengine.php">
...
</form>
</body>
And then in my contactengine.php I have:
$success = mail($EmailTo, $Subject, $Body, $Headers);
// redirect to success page
if ($success){
echo "<script type='text/javascript'>successFunction();</script>";
print "<meta http-equiv=\"refresh\" content=\"0;URL=index.html\">";
}
else{
echo "<script type='text/javascript'>failureFunction();</script>";
print "<meta http-equiv=\"refresh\" content=\"0;URL=index.html\">";
}
My echo ... won't call the successFunction() though. I know the $success var is true because if I put an alert there it calls the alert and I know that my successFunction() works because I can call it from my index.html file with no problems. The messi library is located here for reference.
How can I correctly call the successFuntion() from my php file?
May be you can move your JS functions inside a javascript file and include that file in the PHP or HTML pages where you need to call those functions.
js/customMessi.js
function failureFunction(){
new Messi('There was an error sending your message.', {title: 'Failure'});
};
function successFunction(){
new Messi('Success sending email', {title: 'Success'});
};
and in your HTML file :
<head>
<link rel="stylesheet" href="css/messi.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"> </script>
<script src="js/messi.min.js"></script>
<script src="js/customMessi.js"></script>
</head>
<body>
<form class="form" id="form1" method="post" action="contactengine.php">
...
</form>
</body>
and in your contactengine.php file as well:
echo "<script type='text/javascript' src='js/customMessi.js'></script>";
...
$success = mail($EmailTo, $Subject, $Body, $Headers);
// redirect to success page
if ($success){
echo "<script type='text/javascript'>successFunction();</script>";
print "<meta http-equiv=\"refresh\" content=\"0;URL=index.html\">";
}
else{
echo "<script type='text/javascript'>failureFunction();</script>";
print "<meta http-equiv=\"refresh\" content=\"0;URL=index.html\">";
}

refreshing a <div> with ajax but passing along a counter variable

I have two .php files. The first one ajax_testing.php looks like this:
<!DOCTYPE html>
<html>
<?php
$index_local=1;
$_SESSION['global_index'] = $index_local;
?>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<div id="main">Who is batman? click count=<?echo $_SESSION['global_index'] ?>
<button id="detailed">LINK</button>
</div>
</body>
<script type="text/javascript" language="javascript">
$(document).ready(function() { /// Wait till page is loaded
$("button").click(function(){
<?php
$_SESSION['global_index']+=1;
?>
$('#main').load('property-detailed.php?global_index='
+ <?php echo $_SESSION['global_index']; ?>
+ ' #main', function() {});
});
}); //// End of Wait till page is loaded
</script>
</html>
Document number two is called property-detailed.php and looks like this:
<!DOCTYPE html>
<html>
<?php
$_SESSION['global_index'] = $_GET['global_index'];
?>
<head>
<script></script>
</head>
<body>
<div id="main">Who is batman? click count=<?php echo $_SESSION['global_index']; ?>
<button id="detailed">LINK</button>
</div>
</body>
<script type="text/javascript" language="javascript">
$(document).ready(function() { /// Wait til page is loaded
$("button").click(function(){
<?php
$_SESSION['global_index']+=1;
?>
$('#main').load('property-detailed.php?global_index='
+ <?echo $_SESSION['global_index'] ?>
+ ' #main', function() {});
});
}); //// End of Wait till page is loaded
</script>
</html>
I load the first page, and it has a variable, $global_index, that is set to 1 and a button with an ajax command to reload the div with the new information found on the second page.
My goal is to have the variable $global_index carry over and increment each time I press the button. Is this possible with only ajax being implemented? If so, is there a way to make it happen with only the first page? Otherwise would it just be easier to have my database keep track of this number and increment that?
In your ajax_testing.php:
<?php session_start(); ?>
<script type="text/javascript" src="jquery.js"></script>
<?php
$_SESSION['counter'] = 1;
$count = $_SESSION['counter'];
?>
<div id="main">Batman<?php echo $count; ?></div>
<button id="detailed">Link</button>
<script type="text/javascript">
$(document).ready(function(){
$(document).on('click','#detailed',function(){
var count = "<?php echo $count; ?>",
dataString = "counter=" + count;
$.ajax({
type: "POST",
url: "property-detaild.php",
data:dataString,
success:function(data){
$('#main').html(data);
console.log(data);
}
});
})
});
</script>
And in your property-detailed.php:
<?php
session_start();
$_SESSION['counter'] = $_SESSION['counter']+1;
echo $_SESSION['counter'];
?>

Categories