I'm working on an app where they have gone with jquery data to pass variables to html
it works in one aspect of the site when the data attributes are attached to a tr tag. This code works
<tr class="js-instructions-row documents__table-row
<?=$ix.'row';?><?php //$ix==0 ? 'documents__table-row--active' : '' ?>"
data-product-title="<?= $sheet->name ?>"
data-instructions-image="<?= $serverpath.$thisImage ?>"
data-instructions-file="<?= $serverpath.'Instructions/'.$sheet->file ?>"
>
when I try to put those attributes on a select tag or option tag in another view, it doesn't come through. This code doesn't work.
<?php
foreach($instructions as $ix => $sheet) {
$thisImage = ($sheet->image?$sheet->image:'Image_holder_thumb.png');
?>
<option test="" data-product-title="<?= $sheet->name ?>" data-instructions-image="<?= Kohana::$config->load('aws.s3-baseurl-www-customercare').$thisImage ?>" data-instructions-file="<?= Kohana::$config->load('aws.s3-baseurl-www-customercare').'Instructions/'.$sheet->file ?>" value="<?=$sheet->id?>"><?=$sheet->name?></option>
<?php
}
?>
and offending javascript:
$('.js-product-selector').on('change',function(e){
var selected = $(this).find('option:selected');
console.log(selected.attr('value'))
console.log(selected.data('product-title'));
$(".documents__product-title").text(selected.data('product-title'));
$(".documents__preview img").attr('src',selected.data('instructions-image'));
$(".documents__download").attr('href',selected.data('instructions-file'));
});
value attribute comes through just fine in the log but data-product-title does not
here is how my view is called in the Controller.
$this->response->body(View::factory($this->folder."/instruction-sheets")->set('brands',ORM::factory('Brand')->with('Customercare_Instruction')->find_all())->set('postbrand',$brand));
The view that works is nested inside of a view that is called like this:
$this->page=View::factory($this->folder.'/index');
$this->page->breadcrumb = 'Instruction Sheets';
$this->page->content = View::factory($this->folder."/instruction-sheets")->set('brands',ORM::factory('Brand')->with('Customercare_Instruction')->find_all());
and the sub-view is called like this
<?= View::factory('customer-care/instruction-sheets-filtered')->set('instructions',$instructions)->render() ?>
I appreciate your input.
You wouldn't by any chance be styling your select element with something like Selectize or Select2, would you? That's probably what's stripping the data attributes from your options.
Related
First, please understand I have just begun to learn php, javascript and ajax in the past 10 days so I will need some hand-holding and step-by-step examples and guidance. I've carefully read the courses for those topics at w3schools and found them very helpful; as a result, I was able to write some basic code for my project by using their examples and other snippets I've found here and other sites.
This post is a little lengthy so I can explain my ultimate goal for this code and what I've already tried.
I have started writing a piece of very complex code that has multiple parts, but the final result will be a dropdown selection list with an image thumbnail button of the main_image of that page linked to an external URL which is dynamically created based on the user's dropdown list selection.
This is my project:
I am building a website with Joomla 3.x.x, Bootstrap 3 and j2store (with other components and modules) that features photos for sale as digital images and that can be applied to physical products (canvas prints, t-shirts, coffee mugs, etc). Those physical products exist on a 3rd party website (Zazzle) which are embedded into my private website with Zazzle's RSS feed and another 3rd party javascript code (to embed Zazzle RSS feed grid displays into my website).
The Zazzle API allows my users to choose any image from my private website and apply that image to any product available in Zazzle's marketplace.
My users would ultimately select a category of products from a dropdown list on my website and then click a button that would open a new window to connect to the Zazzle marketplace which would display a grid of relevant physical products featuring the image shown on the active page of my website where the user clicked the button.
For example, the user starts by looking at the page on my website with the main_image "Light Purple African Daisy", chooses a category of electronic products from a dropdown list and then clicks the "Design Your Own Gifts" button which opens a new window, connects to the Zazzle marketplace and displays a grid of electronic products showing the "Light Purple African Daisy" image on the user's chosen products.
The URL behind the "Design Your Own Gifts" button needs to be created dynamically with the selected value after the user chooses a category of products from a dropdown list on my website.
This is the Zazzle API I need to use:
https://www.zazzle.com/api/create/at-238500395169782226?rf=238500395169782226&ax=DesignBlast&sr=250508120301240636&cg= <DYNAMIC CATEGORY ID FROM DROPDOWN SELECTION LIST> &t__useQpc=false&ed=true&t__smart=false&continueUrl=https%3A%2F%2Fwww.zazzle.com%2Fcapturedimagesmaine&tc=&ic=&t_coverimage_iid= <URLENCODED DYNAMIC PATH OF ACTIVE PAGE MAIN_IMAGE>"
I have created 2 tables in mysql database that hold the Names, Category IDs and Department IDs for the products in my Zazzle marketplace. I am also getting the main_image path from my j2store productimages table.
The code I have been able to write so far accomplishes the following tasks:
Connect to the database
Choose Columns/Tables
GET Data from Columns/Tables
Create HTML Form to Display Result of MYSQL Query
Create Dropdown Selection List of Query Results
Echo encoded URL with Zazzle API concatenated with Parameters/Dynamic Values
This is my code so far:
<div class="form-group" style="margin: 30px 10%;">
<h3>Create Zazzle Products</h3><p><h4>Select a Template Category</h4>
<form name="create-zproducts" id="create-zproducts" action="create-zproduct.php" method="POST">
<?php
//connection
$con = mysqli_connect('localhost', 'user', 'password', 'database');
if (!$con) {
die('Could not connect: ' . mysqli_error($con));
}
$sql="SELECT * FROM david_cim_template_categories, david_j2store_productimages";
$cg = $_GET['cim_template_cg'];
$coverimage_iid = $_GET['main_image'];
$result = mysqli_query($con,$sql);
?>
<select name="selectZcategories" id="selectZcategories">
<?php
while($row = mysqli_fetch_array($result)) {
echo '<option value="'.$row['cim_template_cg'].':'.$row['cim_template_cgname']'">'.$row['cim_template_cgname'].'</option>';
}
?>
</select>
<button onclick="ajaxFunction();">Submit</button><br /><br />
<?php
<script>
function ajaxFunction() {
var selectedData=$("#selectZcategories option:selected").val();
$.ajax({
type : "POST",
url: "select_zproduct.php",
data: { selection : selectedData },
success: function (html) {
//Success handling
}
})
}
</script>
?>
<?php
echo $ZAPI = "https://www.zazzle.com/api/create/at-238500395169782226?rf=238500395169782226&ax=DesignBlast&sr=250508120301240636&cg=";
echo $cg = ['cim_template_cg'];
echo $ZPARAM = "&t__useQpc=false&ed=true&t__smart=false&continueUrl=https%3A%2F%2Fwww.zazzle.com%2Fcapturedimagesmaine&tc=&ic=&t_coverimage_iid=https%3A%2F%2Fwww.capturedimagesofmaine.com%2Fimages%2Fproducts%2Foriginal%2F";
echo $coverimage_iid = ['main_image'];
echo $product_text = "&t_text1_txt=Welcome";
?>
</form>
</div>
// new file (select_zproduct.php) added to same path as create_zproduct.php
// contents of select_zproduct.php below:
<?php
if( isset($_POST['selection']) )
{
$selecterData=$_POST['selection'];
$selecterArrayData=explode(':', $selecterData);
$cg=$selecterArrayData[0];
$coverimage_iid=$selecterArrayData[1];
$url='https://www.zazzle.com/api/create/at-238500395169782226?rf=238500395169782226&ax=DesignBlast&sr=250508120301240636&cg='.$cg.'&t__useQpc=false&ed=true&t__smart=false&continueUrl=https%3A%2F%2Fwww.zazzle.com%2Fcapturedimagesmaine&tc=&ic=&t_coverimage_iid='.$coverimage_iid.'';
?>
<script>
window.location.href=<?php echo $url; ?>;
</script>
<?php
}
?>
The code above is just the beginning of what I've been able to write by myself so far.
My obstacle at the moment is not being able to make the " cg= " parameter display the numeric value of $cg= which was selected by the user from the dropdown list. The current code returns the word "Array" in the URL instead of the selected value. (eg. cg=Array instead of cg=196215449301144739)
I believe I need to use AJAX and Javascript to accomplish this action but I don't know enough to write it by myself yet.
The Code I Need to Write will accomplish the following tasks:
Assign proper $variables to URL fragments ($ZAPI, $cg, etc) to be used for concatenation
Assign proper $variables to database dropdown SELECTION Result to be used in the URL above
Concatenate all $variables
Parse all $variables
Embed final encoded URL into button
Use thumbnail of active page main_image as button image src
What I need to know right now is how do I insert the numeric value of 'cim_template_cg' into the " cg= " parameter in the final URL so the final URL will output " &cg=196215449301144739 " when the user selects the 'cim_template_cgname' associated with that cg=.
Once I see the solution I can apply it to the other dynamic values I need to create. I've only written one javascript code with help from a snippet so any AJAX or Javascript code that needs to be written will need to be shown to me in an example and describing related files, please.
Thanks for your help in advance!
So if I understood your question properly, you have the necessary data to achieve this, i.e. you have the URL path and ID from the database, as well as the URL string, which needs these database values dynamically added upon selection?
And to answer one of your questions, yes this can be done via AJAX if you wish for the PHP logic to be handled in a seperate file.
What you could do, is concatenate your URL path and ID from the database with a seperator value that you could perform an explode(); on to get the values.
so, your <select> would look something like this instead:
<select name="selectZcategories" id="zCategories">
<?php
while($row = mysqli_fetch_array($result)) {
echo '<option value="'.$row['cim_template_cg'].':'.$row['cim_template_cgname'].'">'.$row['cim_template_cgname'].'</option>';
}
?>
</select>
Now to the AJAX function. Personally, I use the jQuery library, simply because it makes things easy and simple. It simplifies a lot of the code, so I am going to go by the jQuery standards in my AJAX example. If you wish to use jQuery AJAX to achieve the same results, you will need to install jQuery into a library that you include like any other normal JS/CSS file etc.
function ajaxFunction() {
var selectedData=$("#zCategories option:selected").val();
$.ajax({
type : "POST",
url: "/path/to/file.php",
data: { selection : selectedData },
success: function (html) {
//Success handling
}
})
}
What this achieves, is that the function will take the selected value of the <select> and parse the data to another file using the POST method. You are able to do a lot of things in the success function if you so desire, but for our purpose, I'll simply perform the redirect in the PHP file.
When the data has been parsed to the other file, you then perform an explode(); on the value to split it up into our two variables that we will parse along in our URL.
The PHP file could look something like this:
<?php
if( isset($_POST['selection']) )
{
$selecterData=$_POST['selection'];
$selecterArrayData=explode(':', $selecterData);
$categoryID=$selecterArrayData[0];
$imagePath=$selecterArrayData[1];
$url='https://www.zazzle.com/api/create/at-238500395169782226?rf=238500395169782226&ax=DesignBlast&sr=250508120301240636&cg='.$categoryID.'&t__useQpc=false&ed=true&t__smart=false&continueUrl=https%3A%2F%2Fwww.zazzle.com%2Fcapturedimagesmaine&tc=&ic=&t_coverimage_iid='.$imagePath.'';
?>
<script>
window.location.href=<?php echo $url; ?>;
</script>
<?php
}
?>
How you call the AJAX function initially is up to you. It could be via a button for instance.
<button onclick="ajaxFunction();">Submit</button>
Hope this helped, or pointed you towards the right direction.
For tests as per request by your comment,
Ajax for test:
function ajaxFunction() {
var selectedData=$("#zCategories option:selected").val();
$.ajax({
type : "POST",
url: "/path/to/file.php",
data: { selection : selectedData },
success: function (html) {
//Success handling
alert(html);
}
})
}
PHP:
<?php
if( isset($_POST['selection']) )
{
$selecterData=$_POST['selection'];
$selecterArrayData=explode(':', $selecterData);
$categoryID=$selecterArrayData[0];
$imagePath=$selecterArrayData[1];
$url='https://www.zazzle.com/api/create/at-238500395169782226?rf=238500395169782226&ax=DesignBlast&sr=250508120301240636&cg='.$categoryID.'&t__useQpc=false&ed=true&t__smart=false&continueUrl=https%3A%2F%2Fwww.zazzle.com%2Fcapturedimagesmaine&tc=&ic=&t_coverimage_iid='.$imagePath.'';
echo 'cg: '.$categoryID.' img path: '.$imagePath;
?>
<script>
//window.location.href=<?php echo $url; ?>;
</script>
<?php
}
?>
I contacted the developer of J2Store for help with getting the main_image value from the active J2Store product page and embedding my final API URL into my J2Store product pages so he rewrote my code to integrate error-free with both Joomla and J2Store, as follows:
<?php
/**
* #package J2Store
* #copyright Copyright (c)2014-17 Ramesh Elamathi / J2Store.org
* #license GNU GPL v3 or later
*
* Bootstrap 2 layout of product detail
*/
// No direct access
defined('_JEXEC') or die;
$db = JFactory::getDbo();
$query = $db->getQuery(true)->select('*')->from('#__cim_template_categories');
$db->setQuery($query);
$cg_values = $db->loadObjectList();
$image_path = JUri::root();
$main_image = $image_path.$this->product->main_image;
//$zazzle_api = 'https://www.zazzle.com/api/create/at-238500395169782226';
$zazzle_api = 'https://www.zazzle.com/api/create/at-238500395169782226';
?>
<?php if(count($cg_values)): ?>
<div class="cg_values">
<form method="get" class="zazzle_api_form" action="<?php echo $zazzle_api; ?>">
<select name="cg" class="cg">
<?php foreach($cg_values as $cg_value): ?>
<option value="<?php echo $cg_value->cim_template_cg; ?>">
<?php echo $cg_value->cim_template_cgname; ?>
</option>
<?php endforeach; ?>
</select>
<input type="hidden" name="rf" value="238500395169782226" />
<input type="hidden" name="ax" value="DesignBlast" />
<input type="hidden" name="sr" value="250508120301240636" />
<input type="hidden" name="t__useQpc" value="false" />
<input type="hidden" name="ed" value="true" />
<input type="hidden" name="t__smart" value="false" />
<input type="hidden" name="continueUrl" value="<?php echo urlencode('https://www.zazzle.com?www.capturedimagesmaine.com'); ?>" />
<input type="hidden" name="tc" value="" />
<input type="hidden" name="ic" value="" />
<input type="hidden" name="t_text1_txt" value="" />
<input type="hidden" name="t_coverimage_iid" value="<?php echo $main_image; ?>"
/>
<input class="btn btn-primary" type="submit" value="Create Your Own Custom Gifts"
/>
</form>
</div>
<?php endif; ?>
In a php file I have tags with dynamic id's.
Example:
<ul id="<?php echo 'ul_'.$xx; ?>">
<li id="test_li">...</li>
</ul>
In a separate JavaScript file I am wanting to use the load function and target that div.
$('<?php echo 'ul_'.$xx; ?>').load('../includes/myphpfile.inc.php #test_li');
My question is, how could I load that php within a JavaScript file?
Notes:- The reason I have it set up this way is due to looping multiple ul's. I just want my ajax file to refresh the li's within the specific ul I am inside of.
Edit: If I use classes instead of Id's it adds my newly inserted rows into all of the ul's with the same class. If I use a plain Id it only works on the first ul. Further explaining why I need to target the way I am.
Unable to find a solution using the path I was on, I looked for alternate methods. Worked out I could add the event in the php file on the submit form button click.
The reason I wasn't using this method at first was because the code was running before it submitted to the DB and therefore was always behind in relation to the new data being submitted.
To my surprise I fixed this by just duplicating the line of code.
<script>
$("<?php echo '#enter_submit_button'.$linkid ?>").click(function(){
/*1*/
$('#<?php echo 'ul__'.$linkid; ?>').load('../includes/pursuit.inc.php <?php echo '#li__'.$linkid; ?>');
$("<?php echo '#insert_new'.$linkid; ?>").fadeOut();
/*2 with delay*/
$('#<?php echo 'ul__'.$linkid; ?>').delay( 800 ).load('../includes/pursuit.inc.php <?php echo '#li__'.$linkid; ?>');
});
</script>
I honestly couldn't say exactly why this works but the logic behind trying the method came from hoping that the double load would pick up the latest submission.
The simplest answer would be to put your JavaScript code into the PHP file inside
<script></script> tags, i.e, just before closing your <body> tag, do this:
<script type="text/javascript">
$('<?php echo 'ul_'.$xx; ?>').load('../includes/myphpfile.inc.php #test_li');
</script>
But if you must use an external js file, then you could do this:
Create a (.php) file and write:
<?php
header("Content-type: application/javascript");
?>
// your js code with php inside (as you would do in HTML)
var othervar='<?php echo $phpVar; ?>';
//<?php //some php ;?>
Then, in your main (html/php) file, put in:
<script src='myjs.php' type='application/javascript'></script>
Hope that solves it.
I have a 'query builder' page (querybuilder.php) that allows users to build a SQL query and then execute it. All of this works fine.
The parameters of the query are POSTED to another PHP page (queryresults.php) that runs a stored proc and then loops through the results to create a table that is inserted into querybuilder.php. The loop includes a checkbox on each row with the value set to the ID of each record being output.
Queryresults.php (the innerHTML page) also has some dropdowns to allow the user to perform certain actions on the rows that have been 'checked'. I've made a loop outside the Javascript to execute it once for each successive checkbox.
As I understand it - I cannot have script tags in the innerHTML page but I need to interact with the checkboxes that are only created, and assigned a value, when the innerHTML loads.
I've looked at a few workarounds including the following: http://24ways.org/2005/have-your-dom-and-script-it-too but none seem to work.
$checkboxes = isset($_POST['checkbox']) ? $_POST['checkbox'] : array();
foreach($checkboxes as $value) {
echo "
<script>
$('#doAction').on('click', function() {
var id = ".$value.";
var u = document.getElementById('user').value;
$.ajax({
type: \"POST\",
url: \"storedprocs.php\",
data: { id: id, u: user }
})
.done(function(msg) {
document.getElementById('done').innerHTML=msg;
});
});
</script>";
}
The final HTML coming from the innerHTML page looks like this:
echo "
<div class="row">
<div class="col-md-6">
<select id="user" class="input-sm">
<option value="1">User 1</option>
<option value="2">User 2</option>
<option value="3">User 3</option>
</select>
</div>
<div class="col-md-3">
<button class="btn" id="doAction" data-stmt="false">Submit</button>
</div>
</div>
<div class="row">
<div class="leTable">
<table class="table-hover table-responsive">
<tr class="heading">';
echo $tableheaders;
echo '</tr>';
foreach($result as $row) {
echo '<tr>
<td><input type="checkbox" name="chkbox" id="idChkBox">'.$row[0].'</td>';
for ($x=1; $x<sizeof($row); $x++) {
echo '<td>'.$row[$x].'</td>';
}
echo '</tr>';
}
echo '</table>';
echo '</div></div>';
To compound the problem, the element with id=user that the second variable comes from is set by another completely separate innerHTML, so I don't know how to reference that either.
Real head-scratcher, I've googled extensively and trawled through StackExchange to no avail. Any help would be really appreciated!
Thanks!
I think your code could work if it didnt have so many syntax errors. It's document.getElementById, not document.getElementbyId. Beside that you should also end a variable declaration with ;
It all depends on the final rendered page though. We dont know what the final php output is.
I strongly advice you to use a external JavaScript file. Inline JS is bad.
I have created a Magento site that has Japanese and English store. For both of these stores, I have almost the same products. I just added additional attributes to add the english texts where necessary such as the name. So for example, in my Japanese store, the product's name is "靴" then in English store it's "Shoes". Given this, I have to make adjustments to my url and breadcrumbs to accommodate both languages.
Anyway, I added a currency selector for my English store which works perfectly. The only problem I'm having with it is that it reloads my page completely and the changes I made in the url and breadcrumbs disappear and goes back to default. My url and breadcrumbs should look like this in the English store:
url: http://mywebsite.com/mycategory/shoes.html?cat=mycategory&prod=shoes
breadcrumbs: Home > My Category > Shoes
But whenever I try to change the currency, it reloads my page and I end up with this url and breadcrumb:
url: http://mywebsite.com/mycategory/shoes.html
breadcrumbs: Home > My Category > 靴
The code for my currency dropdown looks like so:
<?php $_product = Mage::registry('current_product');
$root = Mage::app()->getStore()->getRootCategoryId();
//UPDATE:
$currency = Mage::app()->getRequest()->getParam('currency');
Mage::app()->getStore()->setCurrentCurrencyCode($currency);
//if I try to echo these two, it both returns the correct current currency
$cats = $_product->getCategoryCollection()
->addAttributeToSelect('name')
->addAttributeToFilter('parent_id', $root);
foreach($cats as $_cat):
$cat_name = $_cat->getName();
endforeach;
//UPDATE:
$productUrl = $_product->getProductUrl."?cat=".urlencode($cat_name)."&prodname=".urlencode($_product->getName_en());
if($this->getCurrencyCount() > 1): ?>
<label for="custom-currency-selector"><?php echo $this->__('Select Currency:') ?></label>
//UPDATE: changed window.location.href to setLocation
<select onchange="setLocation('<?php echo $productUrl ?>' + '¤cy=' + this.value") name="custom-currency-selector" id="custom-currency-selector">
<?php foreach ($this->getCurrencies() as $_code => $_name): ?>
//UPDATE: option value
//if I echo $this->getCurrentCurrencyCode(), its value is different from the current. It returns the previously selected currency
<option value="<?php echo $_code; ?>"
<?php if($_code == $this->getCurrentCurrencyCode()): ?>
selected="SELECTED"
<?php endif; ?>>
<?php echo $_code ?>
</option>
<?php endforeach; ?>
</select>
<?php endif; ?>
I tried changing the onchange event value to window.location.href=this.value+'' but that isn't working at all. My url is not retained. So my question is, how can I change the currency while retaining the changes I created for my url and breadcrumbs?
Update:
As per Natalie's suggestion, I've changed $this->getSwitchCurrencyUrl($_code) to simply $_code and made some more change to my currency.phtml to accommodate my needs. I am now able to retain my url params and change the currency. The problem now is that even though I am able to set the currency programmatically, the select option and currency would not change immediately. For example if my current currency is $ and I try to change to JPY, what happens is it remains $ then for the second time, I select EUR, JPY currency is used instead then the next currency used would be EUR. Basically, my code seems to get the previously selected currency instead of the current one. Why is this happening and how can I fix this?
Are you using Magentos default language/store switcher? If you do, have you created different category names for the Japanese and the English store view? Because then this shouldn't be an issue, magento will save the language/store choice in cookie and then show the categories connected to that store.
Edit: I'm going to add this here instead because a comment is too short:
Sorry. I missed that you hade trouble with adding the params to the original value. You could do what I did when I wanted to change store view and currency on the same button click.
You can set the currency manually yourself instead. If you change the value of the currency dropdown to only contain the currency code like this:
<option value="<?php echo $_code?>" ...
And instead of going to this.value go to the following url on change
onchange="setLocation('?cat=mycategory&prod=shoes¤cy='+this.value)"
At the top of your header.phtml file add the following to get the currency param and set the new currency.
if($currency = Mage::app()->getRequest()->getParam('currency')){
Mage::app()->getStore()->setCurrentCurrencyCode($currency);
}
I haven't tested this exact code so I can't guarantee it will work perfectly. But I have myself done a version of it that works great.
I try to hide/show a combobox, I have 2 combobox and I want the second to be hidden until the first change.
<?php echo $this->Form->input('combobox1'); ?>
<?php echo $this->Form->input('combobox2'); ?>
So I think I need to do something like :
$this->Js->get('#idcombobox2')->effect('hide'); to hide the combobox when the page just load.
And something like :
$this->Js->get('#idcombo1')->event('change', $this->Js->get('#idcombobox2')->effect('show')); cause if the first change I want to show the second.
but this doesn't work.
thanks for your help.
are you including jquery or other framework in the view?
echo $this->Html->script('//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js');
and in case you're outputting it into the <head> with array('inline' => false), make sure to specify the script location in the layout:
echo $scripts_for_layout;
remember you also need to output the buffer in the view:
echo $this->Js->writeBuffer();
edit: the code that actually worked for me:
$event = $this->Js->get('#combo2')->effect('show');
$this->Js->get('#combo1')->event('change', $event);
edit 2: somehow i just got to hide the combo2 using a scriptBlock. so the whole code would go like this
$hide = $this->Js->get('#combo2')->effect('hide');
echo $this->Html->scriptBlock($this->Js->domReady($hide));
$show = $this->Js->get('#combo2')->effect('show');
$this->Js->get('#combo1')->event('change', $show);
echo $this->Js->writeBuffer(array('inline' => false));