This concerns a table where I show 5 rows at a time.
The follow code is working 100 percent perfect in firefox. But in ie8,
only the top row can be clicked for the editdiv to show. Whereas, in firefox
I can click on any of the five rows and the editdiv loads as expected.
Line in php file that calls the function:
echo "<td><a id=\"editjq\" href=\"#\" vid='".$vid."' t1='".$db->hscadd($t1)."' page='".$page."' flag='1')\"> [edit ] </a></td>";
The function:
$(document).ready(function() {
$('a#editjq').click(function() {
var petid = $(this).attr('vid');
var t1 = $(this).attr('t1');
var page = $(this).attr('page');
var flag = $(this).attr('flag');
$("#petdiv").hide();
$.post("edit_lookup.php", {
petid : petid,
t1 : t1,
page : page
}, function(data){
if (data.length>0){
$("#editdiv").html(data);
}
});
$(this).unbind();
return false;
});
});
Are you producing five rows which each have an anchor with the same id attribute? If so, that's your problem. It is syntactically illegal to have more than one element with the same id. Instead of id="editjq" use class="editjq" and $('a.editjq').click(...).
You could put this piece of jquery plugin code in your page script (just make sure that it comes after the jquery.min.js script tag);
(function($){
var store = {};
$.fn.extend({
collection : function(action, name, value) {
var $this = this;
var generate = function(){
return "COLLECTION" + parseInt((Math.random() * 100000), 16);
}
var item_id;
var methods = {
put: function(){
item_id = $this.attr("id");
if(store[item_id]){
store[item_id][name] = value;
} else {
while(store[item_id] && $(item_id).length > 0){
item_id = generate();
}
$this.attr("id", item_id);
store[item_id] = {};
store[item_id][name] = value;
}
return $this;
},
get: function(){
item_id = $this.attr("id");
if(store[item_id] && store[item_id][name]){
return store[item_id][name];
}
else{
return null;
}
},
remove: function(){
item_id = $this.attr("id");
if(store[item_id]){
store[item_id][name] = null;
}
return $this;
}
}
if(methods[action]){
return methods[action]();
} else{
return alert(store.text.length);
}
return $this;
}
});
})(jQuery);
It can be used as follows:
store a data value
$(*selector*).collection("put", *DataName*, *DataValue*);
retreive a data value
var referencing_variable = $(*selector*).collection("get", *DataName*);
delete a data value
$(*selector*).collection("remove", *DataName*);
This is a cross browser solution. Though i have only tested it with Jquery 1.5.1
Related
$(document).ready(function() {
var taskList = $("#tasklist").DataTable({
"bProcessing" : true,
"bServerSide" : true,
"sAjaxSource" : 'response.php'
});
$(".search-select").on('change', function() {
var i = $(this).attr('data-column');
var f = $(this).val();
taskList.columns(i).search(f).draw();
});
$(".search-text").on('keyup', function() {
var i = $(this).attr('data-column');
var f = $(this).val();
taskList.columns(i).search(f).draw();
});
});
this is the script i have written and except filtering everything is working.
I don't know in which variable or object I can get the searched row and value.
I have tried : $_REQUEST['columns'][0]['search']['value']
but it is not in the $_REQUEST object.
What should I try now?
If you have Chrome / FF or other browsers developer tools, go to the Network tab and inspect the requests! It could not be more easy. You will see something like
response.php
?sEcho=1
&iColumns=6
&sColumns=%2C%2C%2C%2C%2C
&iDisplayStart=0
&iDisplayLength=10
//>> this section repeats itself for every column, mDataProp_1, mDataProp_2 etc
&mDataProp_0=0
&sSearch_0=
&bRegex_0=false
&bSearchable_0=true
&bSortable_0=true
//<<<
&sSearch=
&bRegex=false
&iSortCol_0=0
&sSortDir_0=asc
&iSortingCols=1
&_=1513773711430
So you get the search term for a columns(i).search(f).draw() serverside by
$columnCount = $_GET['iColumns'];
$searchColumn = -1;
$searchTerm = '';
for ($i=0; $<$columnCount; $i++) {
if (isset($_GET['sSearch_'.$i]) && $_GET['sSearch_'.$i] != '') {
$searchColumn = $i; //i
$searchTerm = $_GET['sSearch_'.$i]; //f
}
}
Try the following code
$searchValue = $_REQUEST['search']['value']
Hello there
I am developing a jQuery plugin that loads files through ajax. When user clicks on a button which is:
<button class='btn btn-info' data-load="ajax" data-file="ajax/login.html" >Login</button>
When user clicks on button it generates following url:
http://localhost//plugins/ajaxLoad/index.html#ajax/Login
I want to change it to
http://localhost//plugins/ajaxLoad/index.html/ajax/Login
My javascript is:
(function ($) {
$.fn.ajaxLoad = function (options) {
var settings = $.extend({
fileUrl : 'null',
loadOn : '.em'
}, options);
$('[data-load="ajax"]').each(function(index, el) {
$(this).click(function () {
var file = $(this).attr('data-file');
var loadOn = $(this).attr('data-load-on');
var permission = $(this).attr("data-ask-permission");
settings.fileUrl = file;
settings.loadOn = loadOn;
if (permission == 'yes') {
var ask = confirm("Do you want to load file");
if (ask == true) {
$.fn.loadFile();
}
}else {
$.fn.loadFile();
}
});
});
$.fn.loadFile = function () {
// setting location;
var a = settings.fileUrl.split(".");
location.hash = a[0];
$.post(settings.fileUrl, function(response) {
$(settings.loadOn).html(response);
});
}
}
}(jQuery))
Can anyone tell me how to change url in jquery and Javascript.
You need to use history.pushstate() to do this.
var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");
Have a look at this article on MDN for more details
https://developer.mozilla.org/en-US/docs/Web/API/History_API#The_pushState()_method
This article gives some nice jQuery examples.
https://rosspenman.com/pushstate-jquery
Added another attribute title to button
<button data-title="login" class='btn btn-info' data-load="ajax" data-file="ajax/login.html" >Login</button>
In Js (after $(this).click line):
var title = $(this).attr('data-title');
settings.title = title
Just replace
location.hash = a[0];
With
history.pushState('','',"?"+settings.title);
Change
location.hash = a[0];
to:
location.pathname += '/' + a[0];
Just replace the hash with a blank using .replace()
Example .
settings.fileUrl.replace('.' , ' ');
Updated above also
UPDATE :
Don't hash the URL
Example :
$.fn.loadFile = function () {
// setting location;
var a = settings.fileUrl.replace("." , "/");
location.href = a;
$.post(settings.fileUrl, function(response) {
$(settings.loadOn).html(response);
});
}
}
I am fetching html from a website. I want to get specific html from that page not all how to get that? I have tried following;
before appending data to target below
container.html(data);
I want to do like data.find('.site-header').html(); and then do container.html(data);
How can I achieve that?
DEMO
HTML
<div id="target"></div>
Script
$(function () {
var container = $('#target');
var url = 'http://aamirshahzad.net';
$.getJSON("http://query.yahooapis.com/v1/public/yql?" +
"q=select%20*%20from%20html%20where%20url%3D%22" + encodeURIComponent(url) +
"%22&format=xml'&callback=?",
function (data) {
if (data.results[0]) {
var data = filterData(data.results[0]);
container.html(data);
} else {
var errormsg = '<p>Error: could not load the page.</p>';
container.html(errormsg).focus().effect('highlight', {
color: '#c00'
}, 1000);
}
});
});
function filterData(data) {
// filter all the nasties out
// no body tags
data = data.replace(/<?\/body[^>]*>/g, '');
// no linebreaks
data = data.replace(/[\r|\n]+/g, '');
// no comments
data = data.replace(/<--[\S\s]*?-->/g, '');
// no noscript blocks
data = data.replace(/<noscript[^>]*>[\S\s]*?<\/noscript>/g, '');
// no script blocks
data = data.replace(/<script[^>]*>[\S\s]*?<\/script>/g, '');
// no self closing scripts
data = data.replace(/<script.*\/>/, '');
// [... add as needed ...]
return data;
}
Quite simply;
container.html($(data).find('.site-header'));
Add this line after container.html(data);:
container.html(container.find(".site-header"));
Here is your updated JSFiddle
I've seen the other questions on this topics, but i can't spot the error in my code.
$('#submit_bulk').on('click',function(e){
var action = $('select[name="bulk_action"]'),
targets = $('table tr td:first-child :checkbox:checked');
if(action=='invalid' || targets.length == 0){
sk.alert('Nothing to do','warning');
return false;
}else{
$(this).html('Working....');
var fData = {
action: action,
mixtapes: '',
singles: ''
};
$.each(targets,function(i,v){
if($(this).data('type') == 'mixtape'){
fData.mixtapes += $(this).data('id')+',';
}else{
fData.singles += $(this).data('id')+',';
}
});
fData = $.param(fData);
console.log(fData); //i get no output here. is fData null?
$.post(window.location.origin+'/adminAPI/bulk_action',fData,function(data){
var data = JSON.parse(data);
if(data.error==0){
sk.alert('Your changes were saved','success');
//update view here.
}else{
sk.alert(data.message,'error');
}
});
$(this).html('go');
}
});
Word to the wise. make sure you are not passing a jQuery selector as a value into your form data.
the offending line was:
var action = $('select[name="bulk_action"]')
should have been:
var action = $('select[name="bulk_action"]').val()
I will start off by saying I am new to Javascript and JQuery. What I want to accomplish is have a submit button on an HTML page that will call the dbQuery function in my .js file that will print the value of variables to the screen and then add them into a MySQL database.
I need to use the JavaScript variable selectedVisibleValue that is defined in my first function dbQuery The reason I want to do this is because I have four drop downs, three of which are hidden drop downs that are only shown depending on the first non hidden dropdown, only one of the hidden drop downs is ever visible.
I want to work with these variables in my PHP page formPage to do the Database functions. My code is below I want to add the testing1 function into the dbQuery function.
I have tried just copying and pasting it into the dbQuery function but it does not work. I am not trying to work with the selectedVisibleValue in the code below. I am just trying to do some testing with some bogus variables.
var dbQuery = function(){
var description = document.getElementById("jobDescription").value;
var selectedEquip = document.getElementById("equipmentList");
var selectedEquip1 = selectedEquip.options[selectedEquip.selectedIndex].text;
var selectedVisibleValue = $(".unitDropDowns select:visible").val();
document.getElementById("descriptionSummary").innerHTML = "<h3>Description</h3>" + "<p>" + description + "</p>";
document.getElementById("equipmentRan").innerHTML = "<h3>Equipment Ran </h3>" + "<p>" + selectedEquip1 + "</p>" + "<h3>Unit Number</h3>" + "<p>" + selectedVisibleValue + "</p>";
document.getElementById("equipmentRan").style.display = "block";
document.getElementById("descriptionSummary").style.display = "block";
}
var testing1 = function() {
$.get(
"formPage.php",
{paramOne : 123, paramX : 'abc'},
function(data) {
document.getElementById("equipmentRan").innerHTML = ('page content: ' + data);
}
);
}
//cache references to static elements
var jobDescription = $('#jobDescription')
, selectedEquip = $('#equipmentList')
, descriptionSummary = $('#descriptionSummary')
, equipmentRan = $('#equipmentRan')
;
function dbQuery(){
//gather params
var params = {
jobDescription : jobDescription.val(),
selectedEquip1 : selectedEquip.val(),
selectedVisibleValue = $(".unitDropDowns select:visible").val()
}
//show summary
descriptionSummary.html('<h3>Description</h3><p>'+description+'</p></h3>').show();
equipmentRan.html('<h3>Equipment Ran</h3><p>'+selectedEquip1+'</p><h3>Unit Number</h3><p>'+selectedVisibleValue+'</p>').show();
//do a get
$.get('formPage.php',params,function(data) {
equipmentRan.html('page content: ' + data);
}
}
jsFiddle DEMO
Passing variables between functions might come in useful for your project.
HTML:
<div id="theBox"></div>
<button>Press Me</button>
JS
$(document).ready(function() {
// This is some other Do More function, defined prior to the next variable function.
// This is your .get() request.
function doMore(target){
// For the incomming targer, add a class style of a larger font.
$(target).css('font-size', 30);
}
// The main function.
var dbQuery = function() {
// Show dynamic text on the HTML page.
var extra = $('#theBox').html('Dynamic Text Results');
// Run some other function, also... send the private variable in use.
doMore(extra);
};
// The submit button.
$('button').on('click', function() {
// Start the function.
dbQuery();
});
});
Here is the working code:
function dbQuery() {
window.description = document.getElementById("jobDescription").value;
var selectedEquip = document.getElementById("equipmentList");
window.selectedEquip1 = selectedEquip.options[selectedEquip.selectedIndex].text;
window.selectedVisibleValue = $(".unitDropDowns select:visible").val();
testing1();
}
function testing1() {
$(document).ready(function() {
$.get(
"formPage.php",
{paramOne : window.selectedVisibleValue, paramX : window.description, paramY : window.selectedEquip1},
function(data) {
document.getElementById("equipmentRan").innerHTML = (data);
}
);
});
}