Execute PHP script inside JavaScript - javascript

This is my PHP page:
<div class="whomfollow">
<div class="umayknow">People you may know</div>
<ul>
<?php
$result = $linkID1->query("select ud.UserID,ud.Name,ud.Company,ud.Designation,ud.UserType,up.ProfilePic from user_details ud join user_picture up on ud.UserID=up.UserID where ud.UserID!='$UserID' ORDER BY RAND() LIMIT 20")
or
die(mysqli_error());
while($row = mysqli_fetch_array($result))
{
$UT1='';
if($row['UserType']=='A')
{
$UT1='Advertiser';
}
else if($row['UserType']=='P')
{
$UT1='Publisher';
}
?>
<li class="postimage followimgconnections">
<div class="pull-left"><?php echo "<img src=profile_pic/".$row['ProfilePic']." />"; ?></div>
<div class="pull-left followboxcontent">
<div><b><?php echo $row['Name']; ?></b></div>
<div><a class="followsmall_content" href="#"><?php echo $UT1." - ".$row['Designation']." - ".$row['Company']; ?></a></div>
<div class="followbtn"><button id="myBtn" onClick="connect(<?php echo $row[UserID]; ?>)">Connect</button></div>
</div>
</li>
<?php
}
?>
</ul>
</div>
<div class="clear"></div>
</div>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<p class="popupheading">Invitation Sent</p>
<p class="popupcontent">Your invitation is on its way.</p>
<div class="invidone">Done</div>
</div>
</div>
<script>
function connect(num) {
var x = document.getElementById('myBtn');
<?php
$ID=num;
$stts='IS'; //Invitation Sent
$stmt = $linkID1->prepare("insert into user_connections set MyUserID=?, MyFriendsUserID=?, cstatus=?");
$stmt->bind_param("sss", $UserID,$ID,$stts);
$stmt->execute();
$stmt->close();
?>
modal.style.display = "block";
}
</script>
Now as soon as the page is loaded, the PHP part inside the JavaScript is executed automatically, I want to run that PHP part when the JavaScript is called. If it's not possible to do it this way, then is there another way?

<script>
function connect(num) {
var x = document.getElementById('myBtn');
$.post('/Script.php', {id: num});
modal.style.display = "block";
}
Script.php:
$ID=$_POST['id'];
$stts='IS'; //Invitation Sent
$stmt = $linkID1->prepare("insert into user_connections set MyUserID=?, MyFriendsUserID=?, cstatus=?");
$stmt->bind_param("sss", $UserID,$ID,$stts);
$stmt->execute();
$stmt->close();

Thanks guys, used AJAX and solved the problem.
function connect(num) {
var x = document.getElementById('myBtn');
$.ajax({
type: "POST",
url: "request-connect.php?id="+num
})
modal.style.display = "block";
}

Related

How to define an id (single id) into modal dialog box?

<?php
....
$sql = "SELECT * FROM items ORDER BY item_id DESC";
$query = mysqli_query($con, $sql);
while ($row_item=mysqli_fetch_array($query)){
$id = $row_item['item_id'];
$title = $row_item['item_title'];
$image = $row_item['item_image'];
$trailer = $row_item['item_trailer'];
echo "
<div class='col-sm-3'>
<img src='item-images/$image' />
<p>$title</p>
<a href='' class='launch-modal' data-modal-id='modal-video'>Trailer</a>
<!--Modal-->
<div class='modal fade' id='modal-video' tabindex='-1' role='dialog'>
<div class='modal-dialog'>
<div class='modal-content'>
<div class='modal-header'>
<button type='button' class='close' data-dismiss='modal'>Close</button>
<h4 class='modal-title'>$title</h4>
</div>
<div class='modal-body'>
<div class='modal-video'>
<video id='video-frame' controls src='item-trailer/$trailer'></video>
</div>
</div>
</div>
</div>
</div>
</div> <!--.col-sm-3-->
";
?>
How can i make this $trailer launch inside modal dialog with it's own id?
i already try this but it's not working:
href='index.php?$id'
FYI: This is the old one which targeted to the other page without modal dialog:
echo "
href='trailer.php?single_id=$id'
";
<!--The Other Page-->
<?php
if(isset($_GET['single_id'])){
$item_id = $_GET['single_id'];
$get_item = "SELECT * FROM items WHERE item_id='$item_id'";
$run_item = mysqli_query($con, $get_item);
while ($row_item=mysqli_fetch_array($run_item)){
$theID = $row_item['item_id'];
$theTitle = $row_item['item_title'];
$theTrailer = $row_item['item_trailer'];
echo "
<video controls src='item-trailer/$theTrailer'></video>
<p>$theTitle</p>
";
}
}
?>
For more review, i give the javasript that execute the page:
$(function(){
// open the modal
$('.launch-modal').on('click', function(e){
e.preventDefault();
$( '#' + $(this).data('modal-id') ).modal();
}); // reload the modal contents when it is closed
$("#modal-video").on("hidden.bs.modal", function () {
var url = $('#video-frame').attr('src');
$('#video-frame').attr('src', '');
$('#video-frame').attr('src', url);
});
});

Updating database value with button

<?php
include ('session.php');
$connection = mysqli_connect("localhost", "root", "" , "log_database");
$question_id = rand(1,2);
$query = "SELECT * FROM questions WHERE id='$question_id' ";
$query_run = mysqli_query($connection,$query);
$query_row = mysqli_num_rows($query_run);
if ($query_row==1) {
foreach ($query_run as $row ) {
$option1 = $row['option1'];
$option2 = $row['option2'];
$money = $row['money'];
$option1_clicked = $row['option1_clicked'];
$option2_clicked = $row['option1_clicked'];
$id_question = $row['id'];
}
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Game</title>
<link rel="stylesheet" type="text/css" href="game.css"> </head>
<body>
<div id="content_div">
<img id="title_img" src="wealthypinguin.png">
</div>
<div id="question_div">
<span id="question">
<?php echo $username; ?>, <br> for <span id="money">€ <?php echo $money; ?></span>,
<br>would you rather...</span>
</div>
<div id="buttons_div">
<button onclick="addOption1()" id="button1">
<?php echo $option1; ?>
</button>
<br>
<button onclick="addOption2()" id="button2">
<?php echo $option2; ?>
</button>
<br>
<button id="button3">
Keep your money
</button>
</div>
</body>
<script>
function addOption1() {
<?php
$option1_clicked = $option1_clicked + 1;
$queryOption1 = "UPDATE `questions` SET `option1_clicked` = '$option1_clicked' WHERE id='$question_id'";
$query_run_option1 = mysqli_query($connection,$queryOption1);
?>
}
function addOption2() {
<?php
$option2_clicked = $option2_clicked + 1;
$queryOption2 = "UPDATE `questions` SET `option2_clicked` = '$option2_clicked' WHERE id='$question_id'";
$query_run_option2 = mysqli_query($connection,$queryOption2);
?>
}
</script>
</html>
What I want to achieve that when my button1 is clicked, my php variable $option1_clicked is raised by one and the new value is updated in my database.
When I click button2 the same result.
The problem is when I click one of them, the value is updated but it automatically updates both values($option1_clicked, $option2_clicked) to the same value.
So when option1_clicked goes from 6 to 7, option2_clicked gets also the value 7.
Ajax is the best way to do that.
Have a look to that:
https://www.w3schools.com/xml/ajax_intro.asp
You will be able to send a POST or GET query to a file (often a PHP file) without leave the current web page.
It's very useful, very plaisant for the users (You can create good and fluid User Interfaces), and quite simple.

Pop Up with <a href=#modal> in java script

i have code :
<div id="modal" style="display:none">
<?php $name = $_GET['name']; echo $name; ?>
</div>
$sql = mysql_query(SELECT * FROM data);
while($data = mysql_fecth_row($sql)){
echo "name;
}
this popup not show, but if I delete "?name=".$data[0]" this popup show but "$name" is empty.
how to this popup show and the "$data[0]" include in #modal..?
thanks
That's because, here is what a url should end with:
And you are making it:
file.php#id?parameter=value
And what you should have done is:
<div id="modal" style="display:none">
<?php
$sql = mysql_query(SELECT * FROM data);
$data = mysql_fecth_row($sql);
echo $data[0];
?>
</div>
name

Dynamically values parse to Popup Model Box from PHP Page

I was trying to parse the php data values which inside the while loop to the popup model .
Sample Code
<?php
include("connect.php");
$sql = 'SELECT id FROM products WHERE tag="mixed" ORDER BY id DESC LIMIT 5';
mysql_select_db('levels');
$retval = mysql_query( $sql, $db_server );
if(! $retval )
{
die('Could not get data: ' . mysql_error());
}
while($row = mysql_fetch_array($retval, MYSQL_ASSOC))
{
$id = $row['id'];
?>
<div onclick="showDialog('#dialog6');show_data();">
<div id="getid">
<?php echo $id; ?>
</div>
</div>
<?php
}
mysql_close($db_server);
?>
<script>
function showDialog(id){
var dialog = $(id).data('dialog');
dialog.open();
}
function show_data(){
var x = document.getElementById("getid").innerHTML;
document.getElementById("demo").innerHTML = x;
}
</script>
<!-- Popup Model -->
<div data-role="dialog" id="dialog6" >
<div id="demo"> </div>
</div>
Let's say if i have id => 1 to 10 , above code writing last 5 items from the table. which are 6 7 8 9 10 . ( it's working perfectly ) .
my requirement is to when i click the 7 it should parse 7 to the popup model. ( or let's say to the innerHTML of ).
it only parsing the first value ( 5 ) . to all onclick events when i click the each number.
PS : this is test using mysql not mysqli or pdo :) .
Thanks in Advance !
Try this. Hope it helps.
$sql = 'SELECT id FROM products WHERE tag="mixed" ORDER BY id DESC LIMIT 5';
mysql_select_db('levels');
$retval = mysql_query( $sql, $db_server );
if(! $retval )
{
die('Could not get data: ' . mysql_error());
}
while($row = mysql_fetch_array($retval, MYSQL_ASSOC))
{
$id = $row['id'];
?>
<div onclick="showDialog('#dialog6');show_data(<?php echo $id; ?>);"> <!-- Changed -->
<div id="getid<?php echo $id; ?>"> <!-- Changed -->
<?php echo $id; ?>
</div>
</div>
<?php
}
mysql_close($db_server);
?>
<script>
function showDialog(id){
var dialog = $(id).data('dialog');
dialog.open();
}
function show_data(y){ // Changed
var x = document.getElementById("getid"+y).innerHTML; // Changed
document.getElementById("demo").innerHTML = x;
}
</script>
<!-- Popup Model -->
<div data-role="dialog" id="dialog6" >
<div id="demo"> </div>
</div>
Try This One.
<?php
include("connect.php");
$sql = 'SELECT id FROM products WHERE tag="mixed" ORDER BY id DESC LIMIT 5';
mysql_select_db('levels');
$retval = mysql_query( $sql, $db_server );
if(! $retval )
{
die('Could not get data: ' . mysql_error());
}
while($row = mysql_fetch_array($retval, MYSQL_ASSOC))
{
$id = $row['id'];
?>
<div onclick="showDialog('#dialog6');show_data(<?php echo $id; ?>,'<?php echo $name; ?>','<?php echo $imgUrl; ?>');"> <!-- Changed -->
<div id="id<?php echo $id; ?>"> <!-- Changed -->
<?php echo $id; ?>
</div>
<div id="name<?php echo $name; ?>"> <!-- Changed -->
<?php echo $id; ?>
</div>
<div id="image<?php echo $id; ?>"> <!-- Changed -->
<img src="<?php echo $imgUrl; ?>" />
</div>
</div>
<?php
}
mysql_close($db_server);
?>
<script>
function showDialog(id){
var dialog = $(id).data('dialog');
dialog.open();
}
function show_data(id, name, imgUrl){ // Changed
document.getElementById("dispID").innerHTML = id;
document.getElementById("dispName").innerHTML = name;
document.getElementById("ImgDisplay").src = imgUrl;
}
</script>
<!-- Popup Model -->
<div data-role="dialog" id="dialog6" >
<div id="demo"> <!-- Changed -->
<div id="dispID"></div>
<div id="dispName"></div>
<div id="dispImg"><img id="ImgDisplay" src="" /></div>
</div>
</div>

how to use append in yii

I have created a form in yii and tried using the append method. In said form the user selects the items and enters the amount. If they click the button it will call the function. In output it shows "object text". How do I retrieve it?
<script type="text/javascript">
function myfunction ()
{
var newElem = document.createElement ("div");
newElem.innerHTML =document.createTextNode(amount);
newElem.style.color = "red";
var container = document.getElementById ("new");
container.appendChild (newElem);
}
</script>
<div class="form">
<?php $form=$this->beginWidget('CActiveForm', array(
'id'=>'travel1-form',
'enableClientValidation'=>true,
'clientOptions'=>array(
'validateOnSubmit'=>true,
),
)); ?>
<p class="note">Fields with <span class="required">*</span> are required.</p>
<div class="row">
<?php echo $form->labelEx($model,'name'); ?>
<?php echo $form->textField($model,'name',array('name'=>'name'),array('class'=>'addtocarts')); ?>
<?php echo $form->error($model,'name'); ?>
</div>
<div class="row">
<?php echo $form->labelEx($model,'Seattype'); ?>
<?php echo $form->dropDownList($model,'seattype',
array('S' => 'Sleeper', 'M' => 'Semi-sleeper','A'=>'Seater'),
array('empty' => '(Select Type)','name'=>'seattype'));?>
<?php echo $form->error($model,'seattype'); ?>
</div>
<div class="row">
<?php echo $form->labelEx($model,'amount'); ?>
<?php echo $form->textField($model,'amount',array('name'=>'amount')); ?>
<?php echo $form->error($model,'amount'); ?>
</div>
</div>
<?php echo CHtml::submitButton('Submit',array('name'=>'submit'))?>
<?php echo CHtml::htmlButton('AddtoCart',array('name'=>'addtocart','onclick'=>'myfunction();'))?>
<div id="new">
</div>
<?php $this->endWidget(); ?>
</div>
Please change your js function like below,
<script>
function myfunction ()
{
var container = document.getElementById ("new");
var newElem = document.createElement ("div");
newElem.innerHTML =$('#amount').val();
newElem.style.color = "red";
container.appendChild (newElem);
}
</script>
this amount textfield should include "id",
<div class="row">
<?php echo $form->labelEx($model,'amount'); ?>
<?php echo $form->textField($model,'amount',array('name'=>'amount','id'=>'amount')); ?>
<?php echo $form->error($model,'amount'); ?>
</div>
You need to get the amount from the textfield and then after creating the text node, append it to the newElem.
function myfunction() {
var amount = document.getElementById('amount').value; // amount value from textfield
var newElem = document.createElement("div");
newElem.appendChild(document.createTextNode(amount));
/* You can also use innerHTML instead of the above line like this newElem.innerHTML = amount; */
newElem.style.color = "red";
var container = document.getElementById("new");
container.appendChild(newElem);
}
<div id="new"></div>
<input type="text" id="amount" />
<button onclick="myfunction()">Click</button>

Categories