Hi all got a small problem accessing a looped php variable. My script loops through and uses x and y from a mysql database. It also loops the id out which I cannot get access to, it comes up as undefined. I am using a mouse out function to detect each separate div that has been looped and get specific id.
Help very much appreciated!
Javascript to get attributes ready for database manipulation:
$(this).mouseout(function() {
var stickytext_id = $(this).attr('textstickyid');//alerted out returns undefined.
});
Looped PHP to get attr form:
$get_textsticky_result=mysql_query($get_textsticky_query);
while($row=mysql_fetch_assoc($get_textsticky_result)){
$x = $row['textsticky_x'];
$y = $row['textsticky_y'];
echo '<div class="textsticky" style="position: absolute; left:'.$x.'px; top:'.$y.'px;" textstickyid="'.$row['textsticky_id'].'">
<div class="textstickyvalueholder"contentEditable="true">'. $row['textsticky_text'] .'
</div><button>Like</button></div>';
}
?>
Can get other looped vars e.g. $row['textsticky_text']; and x and y for position without issue, Is there a better way to do this? I have a feeling the inline style is affecting it but not sure....
Okay, I am just going to go out on a limb here and assume your initial selector is incorrect. $(this) is the window in typical code flow.
$(this).mouseout(function() {
var stickytext_id = $(this).attr('textstickyid');//alerted out returns undefined.
});
Should be:
$('div.textsticky').mouseout(function() {
var stickytext_id = $(this).attr('textstickyid');//alerted out returns undefined.
});
Also, as Kris mentioned in comments, instead of inventing tags use the data attribute which is a part of html5.
<div class="textsticky" data-textstickyid="blah" />
It can then be accessed via jQuery's data method.
http://jsfiddle.net/kQeaf/
And as long as we are offering advice, if you are in jQuery 1.7+ you should be using prop instead of attr for accessing properties (unless of course you decide to use the data method) just recommended.
Your selector on the mouseout event may be wrong: (depending on the context)
$(".textsticky").mouseout(function() {
var stickytext_id = $(this).attr('textstickyid');
});
Related
I had implemented multiple checkbox filtering for a job portal using jQuery where in I was calling a function every time a checkbox is checked and that function contained an ajax call which would send the request with the checked values and I would do the querying of database and return the result.
But one of the developers I meet told me you should not hit the database continuously for filtering, it should be done client-side.
He also suggested to use AngularJS or Knockout(js) for the purpose, as they work on content, whereas jQuery works on DOM elements.
But if it has to be done client-side, all of the data must be loaded at once during the first visit to the page, which in turn would slow down the page.
And I cannot use class on each element and show/hide them based on the checkbox ID or value something like that, because there are a lot of checkboxes, which I think will be hectic to handle.
How to achieve the desirable result with good performance?
I'm a Newbie to jQuery, so if I have gone wrong anywhere bear with me.
Below is the sample way in which I have actually done:
HTML:
<input type="checkbox" name="location[]" value="Bangalore" onclick="loadresult()">Bangalore
JS:
function loadresult() {
location array value accessed and passed to ajaxcall
//ajax call to processresult.php
Displaying the DB returned Data
}
PHP (processresult.php):
<?php
//dbconnection + querying db and returning result
?>
There is significant difference. Angular is a framework and jQuery is a library.
With jQuery it much simpler to modify DOM elements deal with events and do some more cool stuff. But you define how you deal with data on your own. You can easily move your data to Js object or array of objects and render this data to your DOM tree.
For example:
//let's presume that you are searching something
var someUsers = [{id: 1,name:'User 1'},{id: 2,name:'User 2'},{id: 1,name:'User 3'}];
var usersTemplate = _.template("<h1>User name: <%= user.name %></h1>");
var $container = $('#someRenderContainer');
someInputFeild.on('keypress', function(){
var searchText = someInputFeild.text();
var foundUsers = someUsers.filter(function(item, index){
item.name.indexOf(searchText) !== -1
});
render($container,foundUsers);
})
function render($container,users){
users.forEach(function(item){
$container.append(usersTemplate(item));
})
}
Here is simple example where you can see that your manipulate with data in the memory but not in DOM. Similar things you can do with your checkboxes.
I would just make one ajax request in the beginning, fill the page with data, marking every row with class name
jQuery.each(d, function(i,data) {
$("table.content").append("<tr class=\""+data.city+"\"><td>" + data.tag + "</td><td>" + data.city + "</td><td>" + data.num + "</td><td>" + data.state + "</td></tr>");
});
and use checkboxes to hide and show marked rows using jQuery hide(), show() methods.
Rows can have multiple classes meaning filtered by multiple columns, but logic will get more complicated.
see example http://jsfiddle.net/elshnkhll/czdongkp/
I would use cache technique to improve my performance.
We can't load our full record on a single page. It will slow down the main page loading.
But we can save loaded data in a variable with some key combination for different filter and page no..
eg. if we are loading data fir index page with no filter, the my key will be index and my variable will be like var cachevar = {"index":{1:"<my response>"}}, here "1" is page number
And if data is using filter, then my variable index key will be combination of filter ids saperated by '-'.
eg var cachevar = {"index":{1:"<my response>"}, "index-2-5-3":{1:"my response"}}
If user request a page, I just have to check if that page is available in cache or no, if it's available in cache variable, then show it, else request it from server.
In my PHP script, I have a variable that stores the length of an array in arrayLength. I am passing that length to javascript. I will try to keep it simple, but ideally, I am trying to provide each element in the array with it's own dynamic javascript button, each button having its own function. I need to store these strings in an array, because user input prevents me from knowing how many elements there will be, and how many buttons/functions I will need to have. I was previously able to get this working when I just had one button, without an array, but now I am trying to incorporate multiple dynamic buttons on one page, each belonging to a string in the array, and each button having its own function. Is my logic that follows correct? If you could help me, that would be much appreciated.
var arrayLength = "<?php echo $arrayLength; ?>";
var click = {
click_1: function() { }
};
for (var num=2;num<=arrayLength;num++) {
var newClick = "click_" + num;
click[newClick] = function() { // controls what will happen when button is clicked };
}
Apart from the fact that it would be better to provide $arrayLength not as a string, but as an integer, and that your comment cuts off the closing } of your function, your code does work, the mistake must be somewhere else.
I tried it in this fiddle, check the output of console.log(): it returns a nice object with a bunch of empty functions as properties.
I am working on a application which can save user-created HTML templates. Here, the user will have some HTML components at his disposal and would be able to create static HTML pages using those components.
I am auto saving the content of the page using a javascript function.
function saveContent(){
//var getContent=$('#mainWrap').children().removeAttr('id');
var $getContent=$('#mainWrap');
var $finalContent=$getContent.children().removeAttr('id');
var auto="auto";
var pageId = <?php echo $pageId;?>;
var webId = <?php echo $webId;?>;
var userId = <?php echo $userId;?>;
$.ajax({
url:"auto_save.php",
type:"POST",
dataType:"text",
data:"txtComp="+$('#mainWrap').html()+"&auto="+auto+"&pageId="+pageId+"&webId="+webId+"&userId="+userId
});
}
var interval = 1000 * 60 * 0.30; // where X is your every X minutes
setInterval(saveContent,interval);
Issue: I want to to remove the IDs from the HTML components that the user saves, because the IDs are auto generated and not needed when the user publishes the template (on his domain after creation). I have a main wrapper that wraps the entire page called id=mainWrap. If I try to remove the IDs like this $('#mainWrap').children().removeAttr('id'); they are also removed from the current context of the DOM, i.e they are removed from the page where the user is editing his template.
Question: How can I remove the IDs from the HTML elements without affecting the current context of the mainWrap object?
I tried assigning it to another object like this
var $getContent=$('#mainWrap');
var $finalContent=$getContent.children().removeAttr('id');
but still it failed.
Any comments or corrections on whether this is possible? Or am I going about this the wrong way?
Update : The issue is solved to some extent.
Next I want to add the id's back when the user comes back to the edit page.
I get the above saved content using this code
<?php
$sqlEdit = "select revisionContent from tbl_revision where revisionId='".$_SESSION['contentId']."'"; //The query to get the record
$rsEdit = $dbObj->tep_db_query($sqlEdit);//The database object to execute the query
$resEdit = $dbObj->getRecord($rsEdit);
$IdLessContent = $resEdit['revisionContent'];//Variable with the record
?>
Now,I want to use this PHP variable in javascript,so I did this.
<script language="javascript">
var getSavedContent = '<?php echo json_encode($IdLessContent); ?>';
var trimmedCont=($.trim(getSavedContent).slice(1));
//console.log(trimmedCont);
var lengthCont= trimmedCont.length;
var trimmedCont=$.trim(trimmedCont.slice(0,lengthCont-1));
var pageContent=$('<div class="addId">').append(trimmedCont); //Here I tried creating a div dynamically and appending the content to the div.But now I am not able to manipulate or work on this dyamic div and get NULL when I alert saying $('.addId').html();
$('.addId').children().attr('id', 'test'); //I tried doing this but does not work
This is not working.Can you throw some light on it
You can just cycle through the elements in your #mainWrap and remove the id like:
var getContent = $('#mainWrap');
var finalContent = getContent.parent().clone().find('*').removeAttr('id');
Example: http://jsfiddle.net/7m8g4/6/
Security wise you should realize this is a client-side script that is removing the id attributes from the html. There are ways though to manipulate the JavaScript or to bypass it by (for instance) calling the URL in your Ajax request directly with false data.
So you should never rely on your JavaScript only. Make sure your code will not cause problems if for any reason the JavaScript doesn't act as expected. You can do this for instance by searching for id attributes (use a regex) and generate an error message in case there are still some id attributes found. Another way would be to remove them server-side (in PHP) as well if any are found. To achieve this you could do a regex search and replace the matches with empty strings or by making use of substrings. Up to you!
Hope it all makes sense!
EDIT
If you want to add new id attributes back later on you can do something like:
var newContent = $(finalContent).first().wrap('<div class="addId" />');
newContent = $(newContent).parent().find('*').each(function(index, value) {
$(this).attr('id', index);
});
See that in work here.
This is my first attempt at jQuery and I'm using a basic tutorial I found here: http://papermashup.com/simple-jquery-showhide-div/#
This is my current code and how the jQuery works: http://jsfiddle.net/mZQsu/
As you can see, when you click the '+/-' it opens all 4 of the tables/DIVs.
How can I modify this code to open just the relevant secondary table/div according to the original table?
(Please note the secondary tables are generated dynamically from PHP and SQL data)
Thanks.
P.S all my code is here http://jsfiddle.net/mZQsu/ instead of clogging up this question page :)
DEMO fiddle
$('.toggler').click(function() { // had to differentiate the main togglers with a new class
var ind = $(this).parents('tr').index()-1; // could change
$(".slidingDiv").eq(ind).slideToggle();
});
$('.show_hide').click(function() { // this are the 'togglers' inside the big menus
$(this).parents(".slidingDiv").slideToggle();
});
The best solution would be if you tag each of your div's with an id. E.g.
<div class="slidingDiv" id="ip_127_0_0_1">
and then modify the equivalent links to do
$("#ip_127_0_0_1").slideToggle();
so just the associated div gets expanded.
See my updated fiddle: http://jsfiddle.net/mZQsu/1/
You can use the index of the row, and toggle only the matching row of the other table using jQuery index and eq
See the relivant docs here:
jQuery index
jQuery eq
This should work:
$('.show_hide').click(function() {
$(this).parents(".slidingDiv").slideToggle();
});
Since the slidingDiv class is a direct parent of the show_hide link, I could have used "parent" rather than "parents". The latter provides more flexibility because it traverses all ancestors looking for the class.
Here is a modified code - http://jsfiddle.net/mZQsu/3/
I have added show-hide1, show-hide2, show-hide3, show-hide4.
And clicking on it opens respectively slidingDiv1, slidingDiv2, slidingDiv3, slidingDiv4.
When you are binding to an event: You can always grab that event target and reference it.
$('.show_hide').click(function(e) {
$(e.target).parent("div.slidingDiv").slideToggle();
});
.parent() is a good place to start, but .closest() also might work. That being said, this is the preferred way to go about it.
On a side note if you ever want to do the opposite you could use .not(e.target) and all the other elements except for the one your click will be called.
Since your html is PHP-generated, it should not be a problem to include unique IDs for both +- links and sliding divs, for example:
a href="#" class="show_hide" id="show_hide2"
And
div class="slidingDiv" id="slidingDiv2"
Then in your click function you get the index of the div that you want to open:
$(.show_hide).click(function(){
var $str = $(this).attr('id');
var $index = $str.charAt( $str.length-1 );
});
Now you can use index to open the div:
var divName = "#slidingDiv" + $index;
$(divName).slideToggle();
how do i do that ?
my html structure looks like this
EDIT: i have updated to html so it fits the rules.
<td id="1" class="LinkWrap">link</td>
i use this code:
$(".link").click(function() {
$(this).parent();
//some ajax code
});
To select the td by the id LinkWrap, but i need the value of the class,
the class' value is fetched by php && mysql and is the id of the element thats i fetched. therefor the value is not a constant i and i cant just say chose class with value 1 it could be 2 or 5932.
i need that value to my ajax script so i can insert when the user clicks that link.
if theres a better method please let me know :)
Aside from the fact that it's not recommended to start class names with a number. Use attr to get the class attribute.
$(".link").click(function() {
alert( $(this).parent().attr('class') );
});
Edit: You're better of using the data attribute as stated by others as well.
HTML
<td data-rowid="1" class="LinkWrap">link</td>
Javascript
$(".link").click(function() {
alert( $(this).parent().data('rowid') );
});
It sounds like you're doing data storage in the class attribute. Classes cannot start with a digit, and this means your invalid usage may wind up causing glitches in some browsers. You'd be better off using jQuery's data() in conjunction with data-* attributes instead.
Interstellar_Coder and wilbbe01 are both right in the execution but there is one thing in your code that is going to bite you. The td has an ID that, if repeated, could cause you referencing issues. id attributes should be unique across a DOM instance at peril of very unpredictable results across different browsers.
aside from that ceejayoz solution is best.
Since, as I mentioned in my comment, it seems you mixed up the classes and IDs, and to avoid the problem noted by ceeyajoz, I'd suggest using another approach:
$('.link').click(function(e){
var the_id = $(this).closest('td').attr('id'); //or parent().
$.ajax({
url: 'http://www.mysite.com/index.php?page_id='+the_id,
success:function(response){
alert(response);
}
});
e.preventDefault();
});
And in your html:
<td class="LinkWrap" id="td_1">link</td>
And in your php:
$id = $_GET['page_id'];
$id = str_replace('td_','',$id);
echo $id;
I think what you will need is the following.
$(this).parent().attr('class');
Edit: Ditto the data attribute stated by others as well.