pass js variable to external php page - javascript

i have a file main.js where every step pass selected variable to php page, i need pass some variable to another one php page.
this is piece of code of main.js, i tryed to get 'optionsContent' variable and put in a index.php page in a 'div id="rip" with 'document.getElementById("rip").innerHTML = optionsContent;' but tryed to pass this variable with 'href' in new.php page and not work
if( selectedOptions.length == 0 ) {
optionsContent = '<li><p style="color:#FF0000">Nessuna Riparazione Selezionata</p></li>';
} else {
selectedOptions.each(function(){
optionsContent +='<li><p>RIPARAZIONE '+$(this).find('.searchText1').text()+'</p>'+' - '+'<p style="color:#0012ff">' +$(this).find('.price').text()+'</p></li>';
//optionsContent +='<li><p>'+$(this).find('p').text()+'</p></li>';
//document.getElementById("new").innerHTML = optionsContent;
document.getElementById("rip").innerHTML = optionsContent;
});
}
self.summary.find('.summary-accessories').children('li').remove().end().append($(optionsContent));
}
});
index.php page
<div id="rip">** HERE GET 'optionsContent' VAR CORRECTLY **</div>
<li class="next nav-item">
<ul>
<li class="visible">Modello</li>
<li>Colore</li>
<li>Riparazione</li>
<li>Sommario</li>
<li class="buy">Prenota</li>
</ul>
</li>
in new.php page
<?php
$riparation = $_GET['riparation'];
?>
<input name="riparation"><?php echo $riparation; ?></input>
but doesnt work
any help?

You can use cookies or data storage API for saving data between pages.
index.html:
<?php
// set the cookies:
setcookie("riparation", "myDataFromApp");
// Render the page:
echo "<h1>This works!</h1>"
?>
Another page (jQuery cookie plugin required):
var riparation = $.cookie("riparation"); // riparation = "myDataFromApp"

Related

Create a clickable list in HTML using JSON data with Javascript

I'm using Jquery mobile, and I want to create a clickable view list in my panel. to look something like this...
<li><a href='#' onclick='getmoviepic_mobile(this) ;' > MovieTitle"</a>
</li>
MovieTitle is obtained from my MYSQL database array using json_encode($x) so when the user clicks on the title the function getmoviepic_mobile(this) is triggered.
My question is how to set up my javascript with json data to populate my html
page.
My HTML
<div data-role="panel" id="Panelcategory" >
<ul data-role="listview" data-inset="true" id="MovieTitle">
<li></li>
</ul>
</div >
PHP getcatagories2_mobile.php
<?php
include("includes/connection.php");
$q=$_POST['input'];
$resultActor = mysqli_query($con,"SELECT id,title,
plot,catagory,release_date,rated FROM ".TBL_DATA." WHERE catagory LIKE
'%".$q."%' ORDER BY title ");
while($rowMovie = mysqli_fetch_array($resultActor)) {
$x[]=$rowMovie['title'];
}
$jsonarray=json_encode($x);
echo $jsonarray;
?>
Javascript
function getcatagories(catagory){
var catagoryValue = $(catagory).text();
$.getJSON( "getcatagories2_mobile.php", {input:catagoryValue},
function(json) { this is the part I am stuck on
}
not sure even if my HTML is set up correctly maybe don't need the "li".
thanks guys
I would iterate through the JSON and add attributes by key. For example, you could query the list and add each value.
$("#MovieTitle").append("<li>" + json["category"] + "</li>")
And do so for each key-value pair you want to include.

How to store div content to DB?

In my project, sheet processing data will be append to a timeTagDiv div(just like A and B are talking, and the content will show in the dialog).The new message send to dialog will append to timeTagDiv div. After that I want the whole timeTagDiv html content stores in the DB with ajax. Next time, these dialogue content will show in the div, So I konw what is going on.
Here is my js code:
var newCnt="<span class='dlgRsp'><label id='dlgRspTime'></label> <label id='dlgCharge'></label> accept sheet</span><br />";
$('#timeTagDiv').append(newCnt);
//var tmTgDvHtml=$('#timeTagDiv').innerHTML;
var tmTgDvHtml=document.getElementById("timeTagDiv").innerHTML;
var slcId = 2;
$.ajax({
dataType:'json',
type:"POST",
url:"get_ajax_csc.php",
data: {slcId:slcId,htmlCnt:tmTgDvHtml},
success:function (data)
{}
});
Here is my html code:
<div class="timeTag" id="timeTagDiv">
<span class="dlgDate" id="firDlgDate"></span><br />
<span class="dlgStTrl"><label id="dlgTime1"></label> <label id="dlgPrpsr"></label> create new sheet</span><br />
<div id="dlgDiv1"></div><br />
</div>
Here is get_ajax_csc.php code:
<?php
include ("DB.php");
if(isset($_POST['htmlCnt']))
{
$sql="update IDC SET shProcess='".$_POST['htmlCnt']."' where id='".$_POST['slcId']."';";
$sel = $conn->exec($sql);
}
?>
But unfortnately, these date of timeTagDiv can not be updated. I have tested that tmTgDvHtml=document.getElementById("timeTagDiv").innerHTML can get the div html content.But i have no idea about that. Who can help me ?
The div contect of htmlCnt should be formatted by stripslashes()
$htcnt=stripslashes(".$_POST['htmlCnt'].");
It works fine.

Hover Event in Javascript/PHP/Codeigniter

To give some Background information: I've got a php-function "showSystems" which extracts data from our CMDB and shows it in a Dropdown generated by the Codeigniter form helper "form_dropdown". So the dropdown contains the names of all our servers and when clicking on one, some other unrelevant functions show different kinds of information about that particular system.
What I want to achieve now is, when hovering over a system listed in the dropdown, that the description of that system is shown in a label under the list. When nothing is hovered, the label is hidden.
Something like:
Dropdown:
Server1
Server2 <-- hover over this
Server3
Label --> shows Description of Server2
How can I handle the mosehover-event in this generated dropdown using php/javascript?
Edit: So I give some more background-information, as it seems to have something to do with my technical setup.
The function, which produces the dropdown with the received data is written in a model of Codeigniter:
<?php
echo '<select class="minipanel" id="selectminipanel" size="25" style="width: 100%" onchange="window.location = \''.site_url(CONTROLLER.'/showItem').'/\' + this.value;">';
foreach($tmp as $key => $value):
if ($active == $key){
echo '<option onmouseover="displayDescription(this)" onmouseout="hideLabel()" value="'.$key.'" server-description="'.$value[1].'" selected>'.$value[0].'</option>';
} else {
echo '<option onmouseover="displayDescription(this)" onmouseout="hideLabel()" value="'.$key.'" server-description="'.$value[1].'">'.$value[0].'</option>';
}
endforeach;
echo '</select>';
?>
The modul is loaded in a template via a view(which loads the model). The label is defined right after the codeigniter call:
<?php $this->load->view("V".$this->name."/vMinipanel"); ?>
<label id="description"></label>
The script is also written in this template's head section:
<script language="JavaScript">
function displayDescription($ele) {
var server_data = ele.server-description;
document.getElementById('description').innerHTML = server_data;
}
function hideLabel() {
document.getElementById('description').innerHTML ='';
}
</script>
So, why are the functions displayDescription and hideLabel not called?
Please check and run below code:
server 1<br>
server 2<br>
server 3
If you are using bootstrap
server 1
server 2
server 3
just these lines of codes will work fine for you .
trigger an event on mouse over, and use the element's data-description to show the details:
<option onmouseover="displayDescription(this)" onmouseout="hideLabel()" data-server-description="your_description" id='1'>
Server1
</option>
<script>
function displayDescription(ele)
{
// You can use the data-server-description attribute to catch the description
var server_data = ele.data-server-description;
// you can also use the ID to fetch the description if not embadded in as an html attribute
var server_id = ele.id;
document.getElementById('your_label_id').innerHTML = server_data;
}
function hideLabel()
{
document.getElementById('your_label_id').innerHTML ='';
}
</script>

How to use javascript to change content value?

I am currently developing a system which user can only view the name with the start character.
Below is the example :
When I click on the "A" link, the below table will show the name which start from "A" and will not shows the rest of the records.
I am trying to use href to pass operation to my php but it is not flexible to do so. Therefore, I looking for javascript to help me go through this. What I want to do is the page will not refresh and will direct change the content when I click on the A~Z link.
This is my HTML code :
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
This is my php page which execute data from table :
$rsa = array();
$sqladded = false;
$appliedfilter = array();
if($_REQUEST['op'] = ''){
$record = 'A';
}
else{
$record = $_REQUEST['op'];
}
$stmt = $getuser->getuser($record);
if ($rs = $db->Execute($stmt))
{
$arrResult = array();
while($rsa = $rs->FetchRow())
{
array_push($arrResult, array(
"name" => $rsa['name'],
"mobile_no" => $rsa['mobile_no'],
"email" => $rsa['email'],
"address" => $rsa['address'],
"current_professional" => $rsa['current_professional'],
"others" => $rsa['others']
));
}
$tpl->display("alumni-listing.html");
}
And this is my SQL statement :
function getuser($record)
{
global $db;
$arrResult = array();
$stmt = "SELECT * FROM "._CONST_TBL_ALUMNI." WHERE name LIKE ".$record."%";
if($rs = $db->Execute($stmt))
{
$arrResult = $rs->GetArray();
}
return $arrResult;
}
Hope someone can help me.
Thanks in advanced.
Anyhow you have to use the calls to the PHP page.
If not then you can make a the 1st call load all data (A-Z) and then display the connects with just a click. But then your 1st call would be big and it will take time to load if data is greater.
You can use Ajax calls.
Structure your HTML as this way.
<li><a href="#" class='ajaxCaller>A</a></li>
<li><a href="#" class='ajaxCaller>B</a></li>
<li><a href="#" class='ajaxCaller>C</a></li>
<li><a href="#" class='ajaxCaller>D</a></li>
<li><a href="#" class='ajaxCaller>E</a></li>
<li><a href="#" class='ajaxCaller>F</a></li>
The Ajax calls should be
$('a.ajaxCaller').click(function(event){
event.preventDefault();
var x=$(this).text();
$.ajax({
url: "alumni-listing.php",
data: {op:x}
}).done(function() {
// You can have your code to set the returned page, to the specific div.
});
});
I have made lots of project like the one you ask. Learning to use jQuery a javascript framework would be the best solution to solve the task. jQuery made ajax process very simple using jQuery.post().
So the way I see it, your problem boils down to dynamically querying the database on a Dom-event (i.e, through javascript) and not navigating to a different page. Which is lucky, because AJAX was developed pretty much for this - smaller 'refreshes'.
Use JS to trigger a php request, and parse the return
Check out jQuery's Post. I am sure it can be accomplished without, so please edit the question if jQuery is a no-no. If you change your php page to just echo a JSON of the result, and call if from JS, you can parse the JSON and display it in the html page.
HTML
<li><a class="listing-filter" href="alumni-listing.php?op=a">A</a></li>
<li><a class="listing-filter" href="alumni-listing.php?op=b">B</a></li>
<li><a class="listing-filter" href="alumni-listing.php?op=c">C</a></li>
<li><a class="listing-filter" href="alumni-listing.php?op=d">D</a></li>
<li><a class="listing-filter" href="alumni-listing.php?op=e">E</a></li>
<li><a class="listing-filter" href="alumni-listing.php?op=f">F</a></li>
Javascript
$('.listing-filter').click(function (e) {
var $filter = $(e.currenttarget),
filterValue = $filter.html();
RefreshPageWithData(filterValue);
});
function RefreshPageWithData( filterBy ) {
var data = {
op: filterBy,
};
$.post(pathname-on-server.php, data, function (response) {
//Parse the response
var results = JSON.parse(response);
//Construct the DOM
var newHtml;
//Append it to existing element
$('#container').html(newHtml);
});
Please note that anything you echo in the php page is the response passed back to the JS callback. So, a simple idea might be to echo json_encode($arrResult). I suggest having one index.php that serves the file as you do above, and another that does similar tasks but echoes the retrieved data. This avoids a double-server request for the homepage.

how to disable href depending on session

i m stuck in a position where i cant find any solution
i have a link and button here is the code im saving the page in db so i cannot create a server control as it will not render it
<div id="DivCMS" runat="server"></div>// i use this in server side
//this code is saved in db table CMS_Pages//////begin
<a href="User/Register.aspx" id="alinkRegister" >
<img src="App_Themes/White/Images/getstarted.png" style="padding-left: 117px;" />
</a>
//this code is saved in db table CMS_Pages//////end
on page load i fill div with data from db
if (!IsPostBack){
var cp = new CMS_Pages();//Data Access block
cp.LoadByPrimaryKey(12);// load data
LiteralControl Ref = new LiteralControl(cp.PageHeader);
Page.Header.Controls.Add(Ref);
DivCMS.InnerHtml = cp.PageHtml;}
how can i disable href according to session in javascript ie
if (session["UserId"] !=null) then href=# <br>
else href="User/register.aspx"
You can just replace it to # if has a session
if (session["UserId"] != null)
{
cp.PageHtml=cp.PageHtml.Replace("User/Register.aspx","#");
}

Categories