I have the following code that works in conjunction with a "value" that is given from data inputted into an input box.
How would I alter this code to just send the data - product_details['id'] without the need for input data?
Example jQuery Code:
$('body').on("click", "#product_change_set_order_btn", function (e) {
e.preventDefault();
var box = $("#product_set_order_box");
var id = box.data("id");
var url = box.data("url");
var data_array = {
id : id,
new_sort : box.val(),
};
if($.trim(box.val()) != "")
{
ajaxCall(url, data_array, null, "product_set_order");
alert("Your Sort Order Has Been Set");
}
});
HTML Button:
Delete <?php echo $product_details['name']; ?>
$('body').on("click", "#product_change_set_order_btn", function (e) {
e.preventDefault();
var box = $("#product_set_order_box");
var id = box.data("id");
var url = box.data("url");
var data_array = {
id : id,
new_sort : box.val(),
};
ajaxCall(url, data_array, null, "product_set_order");
alert("Your Sort Order Has Been Set");
});
Related
I have a question that I am designing a webpage to process database. So the idea is,
I have a dropdown
When user click on of the options,
Directly open a new window containing another webpage
On the new page, getting the value from the dropdown on the new page for the database monitoring with $_POST
The problem is, When I click the option, it redirects to that new page but not in the form of a new window.
And how do I send the selected value to be used on the new page with
$newVal = strval($_POST['PROJECT_NAME']);
My code is,
<script>
$(function(){
$('#cd-dropdown').bind('change', function () {
var url = $(this).val(); // get selected value
if (url) { // require a URL
window.location = "monitorIndex.php"; // redirect
}
return false;
});
});
</script>
And the markups:
$projectParse = oci_parse($conn, 'SELECT DISTINCT PROJECT_NAME FROM MASTER_DRAWING '
. 'ORDER BY PROJECT_NAME ASC');
oci_execute($projectParse);
echo '<select name="cd-dropdown "id="cd-dropdown" class="cd-select">';
echo '<OPTION VALUE="">PROJECT SELECT</OPTION>';
while($row = oci_fetch_array($projectParse,OCI_ASSOC)){
$projectName = $row ['PROJECT_NAME'];
echo "<OPTION VALUE='$projectName'>$projectName</OPTION>";
}
echo '</select>';
Try this one.
$('#cd-dropdown').change(function(){
var id = $(this).val();
window.location = 'monitorIndex.php?id=' + id;
});
Try the below code
$('#cd-dropdown').change(function(){
var id = $(this).val();
$.ajax({
type: "POST",
url: "monitorIndex.php",
data: { PROJECT_NAME: id }
})
.done(function( msg ) {
var myWindow = window.open("", "MsgWindow", "width=800, height=800");
myWindow.document.write(msg );
});
});
This method should take you to new window with ProjectName in URL.
$('#dropdown').change(function(){
var id = $(this).val();
window.open ('monitorIndex.php?id=' + id ,'_blank');
});
Or another way is if you are using HTML5 , you can use local storage,
You can basically keep the value on client side localstorage and can access it on any other page.
// Store
localStorage.setItem("projectname", "abc");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("projectname");
I'm using phpGrid library based on jqgrid and I have this function:
onSelectRow: function(id){
var grid = $(this);
if(id && id!==lastSel){
grid.restoreRow(lastSel);
lastSel = id;
var rd = jQuery("#php_temp_det_vo").jqGrid("getCell", id, "status");
if(rd == 1){
alert("Data cannot be changed");
$("#'. $this->jq_gridName .'").trigger("reloadGrid");
}
else{
$(function(){ $("#begin_km").val("123"); });
}
}
grid.editRow(id, true,oneditfunc,"","","",aftersavefunc);
}
I need to dynamically give default value to one column called begin_km depends on some function that I will generate later. I wanted to try $(function(){ $("#begin_km").val("123"); }); first without that function I mentioned, but it doesn't work whereas it works on a simple html page:
the ajax
$(function(){ $("#aaa").val("123"); });
the html
<input type="text" id="aaa" />
What is the problem and how can I fix it?
EDITED:
Here's a slice of my jqgrid column model *refering to begin_id as column ID
<script type="text/javascript">
...
colModel:[{"name":"id","id":"id","index":"id","hidden":true},
{"name":"begin_km","id":"begin_km","index":"begin_km","hidden":false,"align":"right"},
...
</script>
You can set the cell values using setCell
onSelectRow: function(id){
var grid = $(this);
if(id && id!==lastSel){
grid.restoreRow(lastSel);
lastSel = id;
var rd = jQuery("#php_temp_det_vo").jqGrid("getCell", id, "status");
if(rd == 1){
alert("Data cannot be changed");
$("#'. $this->jq_gridName .'").trigger("reloadGrid");
}
else{
grid.jqGrid('setCell', id, 'begin_km', "123");
}
}
grid.editRow(id, true,oneditfunc,"","","",aftersavefunc);
}
I want to replace username string in id of "indirect" class with username specified by users in jquery dialog input field.Problem is i cant use this.id = this.id.replace('username', myvalue) coz $this will refer to the input element inside of jquery dialog ui.... Please help me to sort this out by any other method
<img src="images/AOL_button.png" id='http://openid.aol.com/username' class="indirect" />
<img src="images/google_button.png" id='https://www.username.google.com/accounts/o8/id' class="direct"/>
================================================================================
$(.indirect).click(function(){
$("#dialog").dialog({
buttons: {
"OK": function() {
if($('#username').val() == '') {
$('#username').focus();
} else {
var myvalue= $("#username").val();
var provider_url_post= // replace "username" in google id with myvalue
alert(provider_url_post);
})
You've got a bunch of syntax errors in your JS, but assuming those don't exist in your actual code:
$('.indirect').click(function() {
var self = this;
$("#dialog").dialog({
buttons: {
"OK": function() {
if (!$('#username').val()) { // just check the truthiness
$('#username').focus();
} else {
var myvalue = $("#username").val();
self.id = self.id.replace('username', myvalue);
}
}
}
});
});
I have a form that uses the jQuery UI autocomplete function on two elements, and also has the ability to clone itself using the SheepIt! plugin.
Both elements are text inputs. Once a a value is selected from the first autocomplete (continents), the values of the second autocomplete (countries) are populated with options dependent on the first selection.
My problem is, when clones are made, if the user selects an option from the first autocomplete (continent), it changes the first input values on all clones. This is not happening for the second input (country).
What am I missing?
Note: the #index# in the form id and name is not CFML. I am using PHP, and the hash tags are part of the SheepIt! clone plugin.
Javascript:
<script src="../../scripts/jquery-1.6.4.js"></script>
<script src="../../scripts/jqueryui/ui/jquery.ui.core.js"></script>
<script src="../../scripts/jquery.ui.widget.js"></script>
<script src="../../scripts/jquery.ui.position.js"></script>
<script src="../../scripts/jquery.ui.autocomplete.js"></script>
<script src="../../scripts/jquery.sheepIt.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
function ord(chr) {
return chr.charCodeAt(0);
}
function chr(num) {
return String.fromCharCode(num);
}
function quote(str) {
return '"' + escape(str.replace('"', "'")) + '"';
}
String.prototype.titleCase = function () {
var chars = [" ", "-"];
var ths = String(this).toLowerCase();
for (j in chars){
var car = chars[j];
var str = "";
var words = ths.split(car);
for(i in words){
str += car + words[i].substr(0,1).toUpperCase() + words[i].substr(1);
}
ths = str.substr(1);
}
return ths;
}
function incrementTerm(term) {
for (var i = term.length - 1; i >= 0; i--){
var code = term.charCodeAt(i);
if (code < ord('Z'))
return term.substring(0, i) + chr(code + 1);
}
return '{}'
}
function parseLineSeperated(data){
data = data.split("\n");
data.pop(); // Trim blank element after ending newline
var out = []
for (i in data){
out.push(data[i].titleCase());
}
return out;
}
function loadcontinent(request, response) {
var startTerm = request.term.toUpperCase();
var endTerm = incrementTerm(startTerm);
$.ajax({
url: '/db/continent.php?startkey='+startTerm+'&endkey='+endTerm,
success: function(data) {
var items = parseLineSeperated(data);
response(items);
},
error: function(req, str, exc) {
alert(str);
}
});
}
function loadcountry(request, response) {
var startTerm = request.term.toUpperCase();
var endTerm = incrementTerm(startTerm);
var continent = $('.continent_autocomplete').val().toUpperCase();
$.ajax({
url: '/db/country.php?key=' + continent,
success: function(data) {
var items = parseLineSeperated(data);
response(items);
},
error: function(req, str, exc) {
alert(str);
}
});
}
$('#location_container_add').live('click', function() {
$("input.continent_autocomplete").autocomplete(continent_autocomplete);
$("input.continent_autocomplete").keyup(continent_autocomplete_keyup);
$("input.country_autocomplete").autocomplete(country_autocomplete);
$("input.country_autocomplete").keyup(country_autocomplete_keyup);
$('input.country_autocomplete').focus(country_autocomplete_focus);
});
var location_container = $('#location_container').sheepIt({
separator: '',
allowRemoveLast: true,
allowRemoveCurrent: false,
allowRemoveAll: false,
allowAdd: true,
allowAddN: false,
maxFormsCount: 10,
minFormsCount: 1,
iniFormsCount: 1
});
var continent_autocomplete = {
source: loadcontinent,
select: function(event, ui){
$("input.continent_autocomplete").val(ui.item.value);
}
}
var continent_autocomplete_keyup = function (event){
var code = (event.keyCode ? event.keyCode : event.which);
event.target.value = event.target.value.titleCase();
}
var country_autocomplete = {
source: loadcountry,
}
var country_autocomplete_keyup = function (event){
event.target.value = event.target.value.titleCase();
}
var country_autocomplete_focus = function(){
if ($(this).val().length == 0) {
$(this).autocomplete("search", " ");
}
}
$("input.continent_autocomplete").autocomplete(continent_autocomplete);
$("input.continent_autocomplete").keyup(continent_autocomplete_keyup);
$("input.country_autocomplete").autocomplete(country_autocomplete);
$("input.country_autocomplete").keyup(country_autocomplete_keyup);
$('input.country_autocomplete').focus(country_autocomplete_focus);
});
</script>
HTML:
<div id="location_container">
<div id="location_container_template" class="location_container">
<div id="continent_name">
<label> Continent Name:</label>
<input type="text" id="continent_name_#index#" name="continent_name_#index#" class="continent_autocomplete" />
</div>
<div id="country">
<label> Country:</label>
<input type="text" id="country_autocomplete_#index#" name="country_autocomplete_#index#" class="country_autocomplete" />
</div>
</div>
</div>
select: function(event, ui){
$("input.continent_autocomplete").val(ui.item.value);
}
That code says explicitly to set the value of every <input> with class "continent_autocomplete" to the selected value.
You probably want something like
$(this).val(ui.item.value);
but it depends on how your autocomplete code works.
This line: $("input.continent_autocomplete").val(ui.item.value); is updating all inputs with class continent_autocomplete.
UPDATE:
From jQueryUI Autocomplete Doc:select:
Triggered when an item is selected from the menu; ui.item refers to
the selected item. The default action of select is to replace the text
field's value with the value of the selected item. Canceling this
event prevents the value from being updated, but does not prevent the
menu from closing.
You shouldn't need the select bit at all, it looks like you're simply trying to achieve the default action.
One page I have articles with prices. I would like to do administration. When I am administrator and I would click on price input field text would show.
My code for this:
$('#priceBig').click(function() {
var originalelement = this;
var dishID = this.id;
var currentText = $.trim($(this).text())
$(this).hide().before('<input class="input" id="'+dishID+'" style="padding:3px; text-align:left; font-size:17px; width:50px;" type="text" value="'+currentText+'"/>');
$('.input').live('change', function() {
var picaID = this.id;
var price = $(this).val();
var thisparam = this;
$.post('<?= site_url('dish/changePicaBigPrice') ?>',{ picaID : picaID, price:price},
function(data) {
$(thisparam).remove();
$(originalelement).text(price).fadeIn(1000);
},'text');
});
});
But this doesn't work because jQuery store all originalelement objects and every change of price change all originalelements which were clicked before...
I hope I was clear what I want to do.
I would like to click on price, change and one I go on other price
I believe my old answer won't work.
New tactics - save the old ID in an attribute on the new input you create, and use it in the success handler.
$('#priceBig').click(function() {
var currentText = $.trim($(this).text())
var input = $('<input />')
.addClass('input')
.attr('type', 'text')
.attr('orig-id', $(this).attr('id'))
.val(currentText)
.bind('change', function () {
var t = $(this);
var price = t.val();
var origID = t.attr('orig-id');
$.post('<?= site_url('dish/changePicaBigPrice') ?>',{ picaID : origID, price:price},
function(data) {
t.remove();
$('#' + origID).text(price).fadeIn(1000);
},'text');
});
$(this).hide().before(input);
});
EDIT: fixed typo in var origID = t.attr('orid-id');
EDIT: change picaID to origID in the $.post parameters