My goal is to pass a jQuery script through a model with CodeIgneter.
This is the view where I linked the jquery.js file
<footer>
<p>© Company 2014</p>
</footer>
<script src="<?php echo base_url('assets/js/jquery.js');?>"> </script>
</div> <!-- /container -->
This is the model jquery
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Jquery extends CI_Model {
public function test(){
return
'<script>
$(document).ready(function() {
$("#submitForm").click(function(){
alert("test");
});
});
</script>';
}
}
In the controller I passed the script as following:
$this->load->model('jquery');
$data['testjs'] = $this->jquery->test();
$this->load->view('login/content',$data);
In the content view I echo the script:
...echo $testjs...
Unfortunately the script does not work as expected.
you need to include jquery library. Add this in your header view
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
and then this code in somewhere in view or header view
jQuery(document).ready(function() {
jQuery("#submitForm").click(function(){
alert("this is working file ");
});
});
you can use Dom crawler for that if you want to send html and jquery data pass through controller
https://github.com/dimabdc/PHP-Fast-Simple-HTML-DOM-Parser
or else you can set in header view file as above answer given
Related
I have the following code...
PHP/HTML
<?php
if (isset($sent_notification)) {
echo "
<div id='notifyy'>
Your message has been sent!
</div>
<script>
document.getElementById('message-header').scrollIntoView();
</script>
";
}
?>
JavaScript:
<script type='text/javascript'>
$( '#notifyy' ).show(function(){
$(this).fadeOut(5000);
});
</script>
This is for a function which sends an email. $sent_notification is set to one if the email sends, which is why I can't just use a GET variable in the form to trigger the JS. However, using the exact same script on the same page with a GET variable in place of $sent_notification, the DIV fades out nicely. Why is the email notification DIV failing to fadeout?
What about putting it into a document ready function?
and chain the show and fadeout function?
$("#test").show().fadeOut(5000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="test">Fade element</div>
I am trying to load a table dynamically in a div in a php page. I want to load the tables using buttons or links on the same page.
I tried this:
<button id="fcluns" type="button" onclick="loadpage(this.id)">FC LUNs</button>
<div id="Table"></div>
<script type="text/javascript">
function loadpage(clicked_id){
if (clicked_id =="fcluns"){
$("Table").html('loadingImage.gif').load('getfcLuns.php?name=<?php $Host=$_GET['name']; echo $Host;?>');
}
}
</script>
i am generating the table from a php page getfcLuns.php where mysql queries are executed to get the details from database. And i am getting the $host in this php and passing it to the helper php to generate the table.
Any other efficient way is welcome. But I want to keep the page php based only.
<script src="ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"; type="text/javascript"> </script>
<button id="fcluns" type="button" onclick="loadpage(this.id)">FC LUNs</button>
<div id="Table"></div>
<script type="text/javascript">
function loadpage(clicked_id){
if (clicked_id =="fcluns"){
$("Table").load("getfcLuns.php?name=<?php $Host=$_GET['name']; echo $Host; ?>");
}
}
</script>
This above script Worked.
Try
$("#Table").css({'background-image':'loadingImage.gif'}).load(
'getfcLuns.php?name=<?php echo $_GET[name];?>',
function() {
$(this).css({'background-image':'none'});
}
);
Read the Documentation http://api.jquery.com/load/
I have a hello.php file that has some basic html in it. I am using ajax to retrieve data from another.php file. jQuery script posts data to another.php and put the callback data to div.
The problem is that the callback data from .post contains everything in the hello.php plus the actual callback data (check below). I've shortened the files (containing DB-connections for instance) from the actual ones, but the effect is the same whether I use the actual ones or these stubs. This was working just fine before, but was broken when I created a login action to the site. Only includes are objects of different classes that dont work with the posting and there is no reference to include the hello.php file.
Has anyone encounter a problem similar to this?
hello.php
<html>
<head>scripts etc..</head>
<body>
<h1>Hello</h1>
<button id="dataButton" value="GetData">Get Data</button>
<div id="cb">Callback data here</div>
</body>
</html>
another.php
<?php
echo "world!";
?>
jQuery script
<script>
function getWorld() {
$.post("another.php", function(data) {
$("#cb").html(data);
// alert(data); this also contains all of the data in This page
});
}
</script>
js function
<script>
$(document).ready(function() {
$("#dataButton").click(function() {
getWorld();
});
});
</script>
This will output the following html page source:
<html>
<head>scripts etc..</head>
<body>
<h1>Hello</h1>
<button id="dataButton" value="GetData">Get Data</button>
<div id="cb">
<html>
<head>scripts etc..</head>
<body>
<h1>Hello</h1>
<button id="dataButton" value="GetData">Get Data</button>
<div id="cb">Callback data here</div>
</body>
</html>
<script>
$(document).ready(function() {
$("#dataButton").click(function() {
getWorld();
});
});
</script>
<script>
function getWorld() {
$.post("another.php", function(data) {
$("#cb").html(data);
// alert(data); this also contains all of the data in This page
});
}
</script>
world! // <-- This gets back from server.
<script>
$(document).ready(function() {
$("#dataButton").click(function() {
getWorld();
});
});
</script>
<script>
function getWorld() {
$.post("another.php", function(data) {
$("#cb").html(data);
// alert(data); this also contains all of the data in This page
});
}
</script>
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 am trying to make a div where I include PHP web pages into it, however when I click any link inside the div, it loads in new window.
Does anyone know how to solve this problem?
I also tried using an iframe instead of a div but it caused other problems.
HTML code:
<div id="cover5">
<div id="warning">
<?php include 'SignIn.php'; ?>
<p align="center">
Home
</p>
</div>
</div>
JS code:
function cover5() {
var cover = document.getElementById('cover5');
if (vis) {
vis = 0;
cover.style.display='block';
}
else {
vis = 1;
cover.style.display='none';
}
}
You have to make a distinction bitween the client-side and the server-side of a Web application.
<?php include 'SignIn.php'; ?> is a server-side command, because of the <?php ?>, which means that the user will never see that line exactly.
If your SignIn.php file contains for example my link, the user will only get the ouput of that inclusion, i.e.
<div id="warning">
<a href="go-there.php">my link</a
</div>
When the user clicks on the link, his browser will load it as if this <a /> would have been hard written within your HTML code directly, and then open it in a new window.
I don't no how to do it using native JS, but with jQuery, you can try something like this:
$(function() {
$("#warning a").each(function() {
$("#warning").load($(this).attr("href"));
});
});
To render html from a specific link within an element on the page you need to run an ajax GET call, and load the html. Then insert the response in your div.
using jQuery:
$("a").click(function(){ //calls function when anchor is clicked
var link = $(this).prop("src"); //finds the link from the anchor
$.get(link,function(data, status, xhr){ //makes an ajax call to the page
$("#myDiv").html(data); //replaces the html of #myDiv with the returned page
});
});
Hope that helps
HTML CODE :
<div id="cover5">
<div id="links">
<p align="center">
Home
</p>
</div>
<div id="warning">
<?php include 'SignIn.php'; ?>
</div>
</div>
and JS code:
function cover5() {
var cover = document.getElementById('warning');
if (vis) {
vis = 0;
cover.style.display='block';
}
else {
vis = 1;
cover.style.display='none';
}
}
Whenever an user click on the link in "links" div it will call JS function "cover5()"
You can use jQuery or ajax to pop-up "warning" div
In your code you added the links to the worning div so as when in second time ti will hide all the links form there.