having a few issues at the moment regarding updating the content of a div using ajax and php. I am trying to echo the price in the php script into to the div and it is not happening....maybe I'm missing something. This is a modified and simplified example of my problem.
HTML CODE:
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
function autoRefresh_div(){
$("#tester").load("getPriceTest.php");
}
setInterval('autoRefresh_div()', 1000);
</script>
<body>
<div id="tester">3.33</div>
</body>
</html>
PHP CODE:
<?php
echo "2.22";
?>
Put the function in without the ', or change it to:
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
function autoRefresh_div(){
$("#tester").load("getPriceTest.php");
}
setInterval(function(){
autoRefresh_div()
}, 1000);
</script>
<body>
<div id="tester">3.33</div>
</body>
</html>
Related
I want to make a button that gives a reminder (message) when pressed, but the button did not work.
the button's code is in the master page
(i wrote the remaining two pages in the comments because when I wrote in the post it gave an error)
here is my master.blade.php;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>E-Comm Project</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
</body>
<script>
$(document).ready(function())
{
$("button").click(function())
{
alert("button works correctly")
}
}
</script>
</html>
Add the following in your master.blade.php:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>E-Comm Project</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
#yield('content')
</body>
<script>
$(document).ready(function(){
$(document).on('click', 'button', function(event){
alert("button works correctly");
});
});
</script>
</html>
And the following in your login.blade.php
#extends('master')
#section('content')
<h1>Hello,world</h1>
<button class="btn btn-primary">Click</button>
#endsection
I think you need to add a reference to your content section in the master.blade.php. Something like below!
<body>
#yield('content')
</body>
And login.blade.php would be as below.
#section('content') <h1>Hello,world</h1> <button class="btn btn-primary">Click</button> #endsection
PS:https://laravel.com/docs/5.0/templates
Where is your #yeild() method on the main page. As the above comment mentioned.
We need more information about the issue.
I don't see any button element in the shared snippet.
I am following this site to create autocomplete textbox but the dropdown is not appearing below the texbox instead apearing on top-left of the browser.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="jquery/jquery.min.js"></script>
<link rel="stylesheet" href="jquery-ui/jquery-ui.min.css">
<script src="jquery-ui/jquery-ui.min.js"></script>
<script>
$(function() {
$("#skill_input").autocomplete({
source: "search.php",
});
});
</script>
</head>
<body>
<label>Your skills:</label>
<input type="text" id="skill_input" placeholder="Start Typin"/><br>
</body>
</html>
I think you need to add like the example with these scripts and css.
Looks like you are using different.
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- jQuery UI library -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
I try to set cookie with this action in a yii2 controller:
public function actionContact() {
$cookie = new Cookie([
'name' => 'test_name',
'value' => 'test_value'
]);
Yii::$app->getResponse()->getCookies()->add($cookie);
return $this->render('contact');
}
But it doesnt work like this. Meanwhile if I do it without rendering the contact view, it does work. It also works if I use
return $this->redirect('anothercontroller');
instead of
return $this->render('contact');
If I use it without layout ($this->layout = false) then it also works.
Is the html header in the layout file overwriting the previous info?
The skeleton of the layout file is this:
<?php
use yii\helpers\Url;
//etc...
AppAsset::register($this);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" type="image/x-icon" href="/img/logo4.xcf" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="format-detection" content="telephone=no">
<title>Title</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages': ['corechart']});
google.charts.load('current', {'packages':['gauge']});
google.charts.load('current', {'packages': ['geochart'],
'mapsApiKey': 'AIzaSyDW77Ajhkkj0-c70o5lXawp89Sfj81TI'
});
</script>
<?= Html::csrfMetaTags() ?>
<?php $this->head() ?>
</head>
<body>
<?php $this->beginBody() ?>
<?= $content ?>
<?php $this->endBody() ?>
</body>
</html>
<?php $this->endPage() ?>
Is there any workaround?
Thanks for your time!
I try to include Angularjs in Laravel but i don't know what mistake i made i got error
Use of undefined constant name - assumed 'name'
myHead.blad.php
<title>Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="controllers/homeController.js"></script>
<script type="text/javascript" src="controllers/aboutController.js"></script>
myWelcome.blade.php
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<?php echo View::make('layouts/head'); ?>
</head>
<body>
<?php echo View::make('layouts/header'); ?>
<div ng-controller="HelloController">Hi {{name}} welcome to AngularJS Tutorial Series</div>
<button class="btn" name="test" value="test">Test</button>
</body>
<?php echo View::make('layouts/footer'); ?>
</html>
Hellocontroller.js
MyApp.controller('HelloController', hello);
function hello($scope)
{
$scope.name = "Test";
}
Please tell me how to configure Angularjs in Laravel
interpolated expression need to change if you want to work with laravel because laravel and angular js both use same {{}} interpolation symbol for expression exicuition
Add the code where you define your app
var MyApp = angular.module('MyApp', [])
MyApp.config(function($interpolateProvider) {
$interpolateProvider.startSymbol('<%');
$interpolateProvider.endSymbol('%>');
});
myWelcome.blade.php
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<?php echo View::make('layouts/head'); ?>
</head>
<body>
<?php echo View::make('layouts/header'); ?>
<div ng-controller="HelloController">Hi <%name%> welcome to AngularJS Tutorial Series</div>
<button class="btn" name="test" value="test">Test</button>
</body>
<?php echo View::make('layouts/footer'); ?>
</html>
Kindly Check into your code the issue persist with injection due to which your code was not working, it's working with your code, please have a look
(function(angular) {
'use strict';
var myApp = angular.module('MyApp', []);
myApp.controller('HelloController', function($scope) {
$scope.name = 'Test';
});
})(window.angular);
https://plnkr.co/edit/30nM20o7MHrxPifVu9Ig?p=preview
So I have two iframes in page
<div id="ch">
<iframe name="users" width="220" height="510" align="left" src='messages/users.php' id="userch" ></iframe>
<iframe name="text" width="450" height="405" src='messages/text.php'></iframe>
</div>
So I have variables in first iframe and I need to sent them into second iframe. I tried to use method GET. But any method that will work is good.
so first iframe
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<meta content="10; url=users.php" HTTP-EQUIV=Refresh>
<meta content="utf-8" http-equiv="encoding">
<link href="../css/chat.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../js/jquery-2.1.3.js"></script>
<script type="text/javascript" src="../js/ch_users.js"></script>
</head>
<body >
<div class="ess_contact">
<div>
</body>
</HTML>
2-nd iframe
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<meta content="utf-8" http-equiv="encoding">
<meta content="5; url=text.php?active=<?=$active;?>" HTTP-EQUIV=Refresh>
</head>
<body onload="scroll(0,100)" link="blue" alink="blue" vlink="blue">
<font size=3 face="Georgia">
<?php
if (isset($_GET['active']))
{
$active=$_GET['active'];
echo $active;
}
?>
</body>
</html>
and js file
jQuery.noConflict();
jQuery(document).ready(function($) {
$(document).on('click','.ess_contact', function () {
var active = this.id;
$.get( "text.php", { active: active} );
});
});
Since you are already using PHP, you can start a session using session_start() and pass all your data through session variables.
Set:
$_SESSION['myvar']="the data";
Read:
if(isset($_SESSION['myvar'])){
echo $_SESSION['myvar'];
}
Using the above, you can use GET or POST to transfer data across php pages. Unless you really have the restriction to use JQuery.
I tried transferring data between iframes, and this is how I did it.
Main.html
<html>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<body>
<h2>Iframe data test</h2><br/>
<h2>Iframe 1</h2>
<iframe src="f1.html" id="frame1"></iframe>
<br/>
<br/>
<h2>Iframe 2</h2>
<iframe src="f2.html" id="frame2"></iframe>
</body>
</html>
f1.html
<html>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<body>
<h2>Iframe 1 here</h2><br/>
<input type="text" id="mydata"/><br/>
<input type="button" id="send" value="send data"/>
</body>
<script>
$(document).ready(function(){
$("#send").click(function(){
parent.$("#frame2").contents().find("#target").html($("#mydata").val());
});
});
</script>
</html>
f2.html
<html>
<body>
<h2>Iframe 2 here</h2><br/>
<div id="target"></div>
</body>
</html>
You see the two iframes on the Main page. Type anything in the textbox and click Send data, the contents of the textbox will be set in a div found in the second iframe.
Here i used AJAX. It's nearer to your code.
Here i created a jQuery.
This is the index.php file.
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.11.2.min.js"></script>
<script src="t.js"></script>
</head>
<body>
<h1>Below is iframe</h1>
<iframe name="users" width="220" height="510" align="left" src='2.php' id="userch" ></iframe>
<iframe name="text" width="450" height="405" src='3.php' class="f3"></iframe>
</body>
</html>
Here is frame 1. Name 2.php;
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.11.2.min.js"></script>
<script src="t.js"></script>
</head>
<body>
<h2>Hello Milan from frame 2</h2>
<h2>hello</h2>
<h2>world!</h2>
</body>
</html>
Here is frame 2. Name:3.php
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.11.2.min.js"></script>
<script src="t.js"></script>
</head>
<body>
<h2>Hello Milan from frame 3</h2>
<div class="msg"></div>
<?php
if(isset($_REQUEST['active']))
{
echo $_REQUEST['active'];
}
?>
</body>
</html>
And here is a jQuery named t.js.
function ifrm(){
$(document).ready(function (){
$("h2").click(function (){
var r=$(this).text();
$.ajax({url:"3.php",data:{active:r},success: function (data) {
parent.$('.f3').contents().find('.msg').html(data);
}});
});
});
}
ifrm();
Click on any text in 2.php file and you can see what's going on in 3.php.