I know there have been just too many questions so far asking about PHP and JS working together...I went through them, but I cannot find an elegant solution for my use case.
What I currently have is following PHP code in my webpage that fetches product info and shows it:
<?php
$p= new Product($prodId);
$p->getProductInfo();
//now show product info...
echo "<div>Product Name: ".$p['productName']."</div>";
echo "<div>Product Rating: ".$p['productRating']."</div>";
//etc...
?>
Now what I have been asked to do is instead of showing this data directly in the page, I should show it only when a button is clicked. And I should show it inside a bootbox modal dialog box
So I did:
<span id='prod-details'> View Product Details </span>
<input type='hidden' id ='prod-id' value='<?php echo $p['productId'];?>'>
And in my jquery file I have:
$('#prod-details').click(function(
var prodId = $('#prod-id').val();
productDetail = "Product Details for "+prodId;
//how do I get rest of product details from PHP object?
bootbox.alert(productDetail);
));
Any help is very much appreciated...I have been trying hard to make this work.
What I normally do is echo the information inside the bootbox modal div and just hide/show the bootbox modal div with an onClick function
you can either put it in your html file like this:
<script>
var productName = <?php echo $p['productName'];?>;
</script>
or exactly like you did with the product id, just put all the data you need inside the input div (or any oher div releated to that product)
<input type='hidden' id ='prod-id' value='<?php echo $p['productId'];?>' productName='<?php echo $p['productName'];?>'>
and then using jquery get that data like you got the id
var prodName = $('#prod-id').attr('productName');
Related
trying to understand.
I have a js code,
$(document).on('click','.plan_btn',function() {
$('.ui-dropdown').removeClass('active');
var tarifplanid=$(this).attr('data-tarifplanid');
$('.planid').text(tarifplanid);
$('.add_plan').addClass('show');
});
I have a php code, with button, where I pass attr.
<button type="button" class="ui-component ui-button plan_btn" data-tarifplanid="<?php echo($plan->plan_id)?>">Select</button>
So, by pressing Select button, I will have an planID, which is 2 or 3 stored in .JS
Then, as test, I have the following code:
<?php
$test = <<<EOD
<span class="planid"></span>
EOD;
echo $test;?>
Question is:
echo returns ID, 2 or 3, depends on which item I pressed "Select"
But, when I trying to add a link with $test, it will as <span class="planid"></span>
Why? I assume it should be https://localhost/2 but I have https://localhost/<span class="planid"></span>
Thank you!
I'm not a developer, just browsing and a learning a bit
I want to fetch some data (without reloading page) based on UserIds that are linked to a tags. I am not able to pass on UserID to jquery successfully and accurately. What it does is, just picks the last UserID and fetches it.
I have also tried to pass on variable throuh a-tag URL but could not get it accurately in jquery file. It fetches the data from already opened url, not the one being clicked right now.
HTML:
<?php foreach($Messagers as $Messagers1){ ?>
<form action="" method="post">
<input type="hidden" id="ANP" value="<?php echo ($Messagers1['UserID']*3);?>"></input>
<a class="LoadMsgsBtn">
Click to load data
</a>
</form>
<?php}?>
<div id="result">
<--The output will come here!-->
</div>
jquery:
$(document).ready(function(){
$(".LoadMsgsBtn").click(function LoadMsgsfunc(){
var ANP = $("input#ANP").val();
var Msg=6;
alert(ANP);
$("#result").load("LoadDB.php",{
ANP: ANP,
Msg: Msg
});
})
});
LoadDB.php:
<?php
$ID = $_POST['ANP'];
$Msg = $_POST['Msg'];
echo $ID . "\n";
echo $Msg;
I want to fetch data from database without reloading using UserID sent. $Messager is an array having multiple rows, there is a series of a-tags. clicking on any a-tag sents corresponding UserID to jquery code
Classic issue of multiple element selection. It's a bit tricky when you are using loops and jquery selectors ;) Check out the following code. It should work like butter B)
<?php foreach($Messagers as $Messagers1){ ?>
<form action="" method="post">
<a class="LoadMsgsBtn" href="javascript:void(0)" onclick="featchData('<?php echo ($Messagers1['UserID']*3);?>')">
Click to load data
</a>
</form>
<?php}?>
<div id="result">
<--The output will come here!-->
</div>
Javascript
function featchData(userId)
{
console.log(userId);
//if you get the id, write in the rest of the code here ;)
}
I am new to this forum. I have been developing a interface and have got stuck with PHP and Javascript.
My Site has 3 Buttons
<button id="ProjectSource" class="testbutton" onClick="AddNewProject(this.id);">Project Source</button>
<button id="SelfCons" class="testbutton" onclick="AddNewProject(this.id)">Self Cons</button>
<button id="Currency" class="testbutton" onclick="AddNewProject(this.id)">Currency</button>
These buttons are sent to a Javascript function on the same page which will store the button ID in a variable, which is later used in another PHP.
Now I have an Select Box in the same page and I get the data from the database using PHP.
<select size="10" id="Database" onClick="ClearAdd()" >
<?php
while($row = mysql_fetch_assoc($get))
{
?>
<option value = "<?php echo($row['ProjectSource'])?>" >
<?php echo($row['ProjectSource']) ?>
</option>
<?php
}
?>
</select>
My First Problem is
If you see I am currently using $row['ProjectSource']), But what I need is the ID of the buttons which corresponds to the field name in the database.
My Second Problem is
The Select functions loads when the page loads, I want that to refresh when I click on any buttons.
Thanks in Advance for your help!
use mysql fetch query
For example:
while ($row = mysql_fetch_assoc($query)){
$id = $row['id'];
}
For your second Problem you should implement ajax. Either using javascript or jquery.
Regarding first problem it is not clear What are the field names and how button Id is implemented? It would be better if you post some code
Can you implement some kind of mapping of your fieldName to your buttonId using associative array? like array("fieldName1"=>"id1",....)
So I'm creating a code portfolio based upon what's in my svn repo.
I'm currently set up like this:
PHP loops through my JSON and creates these little menus for each file in each project. Here's some (very poorly structured) code showing how I generate each of these:
<form action = "" method = 'post'><select name = "s2" id = "s2"> <?php
foreach($proj2->item_vers as $ver)
{
?>
<option value = <?php
$base_str = (string)$ver->revision;
$full_str = "\"".$base_str."\"";
echo($full_str); ?> > <?php
echo($base_str); ?> </option>
<?php
} ?> </select><input type = 'submit'/></form>
<a href = <?php
if (isset($_POST['2']))
{
$rev2 = $_POST['s2'];
}
else
$rev2 = "";
$full_url = "https://myrepo".
$proj2->name."?p=".$rev2;
$ret_url = "\"".$full_url."\"";
echo($ret_url); ?> > Code </a></td>
So I have a form, select, option. The select will post the selected version from the drop down. Then I have a hyperlink which forms the correct url based upon the posted version number. This hyperlink will need to be replaced with an iframe. For the sake of simplicity, lets say that each project has its own iframe which is updated with appropriate project file any time you click one of the submit buttons.
So like this:
I'm looking for the simplest way to set this up to work asynchronously.
My thoughts:
I've already set up an asynchronous comment system using jQuery. The difference was that I only had three little inputs and a button to submit the comment. This just seems like it will be much more complicated as the code I posted above will loop through about 100 times. I cant just hard code a different id to every single submit button and write 100 different .js scripts to operate when each individual button is clicked.
OK, so im going to simplify your form generation code to make this clearer. I am including the outer loop you dont show:
<div id="forms-holder">
<!--this is the outer loop-->
<?php foreach ($projects as $project):?>
<!-- remove any ids in the loop, they can not be duplicated-->
<form action="" class="projectform">
<!-- add name to data attribute for easy retrieval by js-->
<select name="s2" data-projectname="<?php echo $project->name;?>">
<?php foreach ($project->item_vers as $ver):?>
<option value="<?php echo'"'. $ver->revision .'"';?>"><?php echo $ver->revision;?></option>
<?php endforeach;?>
</select>
<input type = 'submit'/>
<form>
<?php endforeach;?>
</div>
<iframe src="" frameborder="0" id="myiframe"></iframe>
<script type="text/javascript">
$(function(){
//when any form is submitted
$('.projectform').submit(function(ev){
ev.preventDefault();
//grab revision and project name
var revision = $(this).find('select').val();
var projname = $(this).find('select').attr('data-projectname');
//generate the url
var iframeurl = "https://myrepo"+projname+"?p="+revision;
//set the iframes url
$('#myiframe').attr('src', iframeurl);
})
});
</script>
I am viewing the content of mysql inbox_messages table and view every message as link to reply the message or delete . so i have to send the message id with the link to specify the message in the editing page the code was
<a href="sompage.php?m_id=<? echo $m_id; ?>" >
and it's working.
But when I tried to make it with javascript to make the reply like chat box i dont know how to send the message id while opening and to get the id with php and i am opening the message in a div with this code
<a href = "javascript:void(0)"
class="display"
onclick = "document.getElementById('responsecontainer').style.display='block';document.getElementById('fade').style.display='block'"
style="font-weight:normal;">
<a href="sompage.php?m_id=<? echo $m_id; ?>" >
can be replaced by appending ?m_id= and a variable equal to whatever $m_id is.
Example:
var m_id = <?php $M_id ?>;
var yourLink = document.getElementById("replyLink");
yourLink.href = yourLink.href+"?m_id="+m_id;
That said, getting $m_id into the javascript without inline PHP in a synchronous manner would probably require the use of GET parameters, which is another topic, so I'll just give you a helpful link to get started:
http://javascriptproductivity.blogspot.com/2013/02/get-url-variables-with-javascript.html