jQuery load() replacing whole page instead of loading content into div - javascript

I am trying to load in thumbnail of an inputted webpage when the user clicks a button. The thumbnail is generated properly on the page by itself, but when I attempt to load it into the div element, it replaces the whole page. Currently, this is just a proof of concept. I will switch to user inputted url if I can get this working.
Here is my click event code:
$('#check_url').click(function() {
$('#thumb_loader').load('load_thumb.html');
});
thumb_loader is just a div. I have also tried it like this:
$('#check_url').click(function() {
$('#thumb_loader').html($('<div>').load('load_thumb.html'));
});
Here is load_thumb.html:
<div>
<script type="text/javascript">
wsr_snapshot('http://google.com', 'xxxxxxxxxxxxxx', 'Small');
</script>
</div>
wsr_snashot is WebSnapr. The image is generated on their server and appears where this code is.
First off, can I even load javascript like this? I have used load to drop in content that contains javascript before, so I doubt that is the case.
Anyone see any problems here?
EDIT:
Here is the table where the div I wish to load into is and the button that the user would click to trigger the AJAX.
<table>
<tr>
<td colspan="2">
<div id="thumb_loader"></div>
</td>
</tr>
<tr>
<td>
<label>Link Title:</label>
</td>
<td>
<label>Link Description:</label>
</td>
</tr>
<tr>
<td>
<input type="text" name="link_title" />
</td>
<td rowspan="3">
<textarea name="link_description"></textarea>
</td>
</tr>
<tr>
<td>
<label>Link URL:</label>
</td>
<td>
</td>
</tr>
<tr>
<td>
<input type="text" name="link_url" />
</td>
<td>
</td>
</tr>
<tr>
<td>
<input id="check_url" type="button" value="Check URL" />
</td>
<td align="right">
<input type="button" value="Cancel" /><input disabled="disabled" type="submit" value="Add Link" />
</td>
</tr>
</table>
I don't see anything else that could be relevant in the code. Hope this is enough.

Put JS code out of load_thumb file and keep in a new js file like image.js and use $.getScript to dynamically add it in your principal page:
$.getScript('path/image.js', function(){
// file loaded
});
You should put above code in your main file where you want to run your thumb image.
More:
http://api.jquery.com/jQuery.getScript/

jQuery#load(): When calling .load() using a URL without a suffixed selector expression, the content is passed to .html() prior to scripts being removed. This executes the script blocks before they are discarded. If .load() is called with a selector expression appended to the URL, however, the scripts are stripped out prior to the DOM being updated, and thus are not executed.
if wsr_snapshot('http://google.com', 'xxxxxxxxxxxxxx', 'Small'); contains any document.write calls, you're entire document is overwritten. Make sure you know what that function does.
Update:
according to the question's comments, this really is the issue. You need to figure out how wsr_snapshot() can be used in an asynchronous fashion. What API is that from anyways?

Related

Update background color jquery input inside td tag

I have a table with tr that have this pattern
<tr>
<td width="37" align="left"></td>
<td width="200" align="left">
<input type="submit" name="s1" onclick="ChangeThis(this);" value="Update Color" id="s1" class="btn-blue">
<input name="info1" type="text" maxlength="6" id="info1" style="color:Red;background-color:#FFFFFF;font-weight:normal;width:90px;">
</td>
<td width="340" align="center">
<input name="extra1" type="text" maxlength="200" id="extra1" style="width:330px;">
</td>
<td class="hide"></td>
</tr>
What I want to do is onclick on this button which will have the same sequence matching the input example button id=s1 input id =info1
I want to change the background color. I prefer jquery or javascript is fine. I thought about the regex with starting with .. ^ ..
function ChangeThis(x) {
$(this).closest('td').find('input[type="text"]').css('backgroundColor', 'Yellow');
}
That doesn't work, I tried tr instead of td
UPDATE/EDIT
So Essentially what I want is that When the button is clicked that there are predefined things to change in the text
Font Color
Bold or not
Background Color
UPDATE
Ok, I think I understand what you'd like.
Let me know if this fiddle solves it:
https://jsfiddle.net/14ymd0pd/
Based on your description, I'm a little confused as to what you'd like.
I've created a JSFiddle with what I think is the intended functionality.
https://jsfiddle.net/tvu08yrm/
The main differences involved separating out the JavaScript, using the jQuery on event handler:
$('.color-btn').on('click', function(){
adding a new class (color-btn) so the buttons could be targetted and changing the functions which trraverse the DOM Elements.
A couple of notes:
You should not be using inline JavaScript. I've separated out the JavaScript in my fiddle.
Since I can only see a small section of code it's hard for me to say, but if the page isn't going to be displaying tabular data then don't display it in a table...use a div or ul or another relevant element, just not a table.
I haven't done it in my fiddle, but you should also move the inline css out of the markup and into an external css file.
The JavaScript is dependant on the structure of the table, if you change its structure you'll also need to update the jQuery selectors. This can be avoided by following a naming convention in the table rows and using these to target the appropriate elements instead of their relative positions.
Let me know if the fiddle answered your question :)
There are many solutions to get your code working.
First solution: use x instead of this inside the function
pro: code works
contra: bad coding style and you should not use inline javascript.
Second solution: change onclick="changeThis(this)" to onclick="changeThis.call(this)"
pro: the code works, and you can use this in function context
contra: you use this in function context... there are only a few situation to do that. this is not such a situation. and again: inline-javascript
Third solution: don't use onclick.
<tr>
<td width="37" align="left"></td>
<td width="200" align="left">
<input type="submit" name="s1" value="Update Color" id="s1" class="btn-blue">
<input name="info1" type="text" maxlength="6" id="info1" style="color:Red;background-color:#FFFFFF;font-weight:normal;width:90px;">
</td>
<td width="340" align="center">
<input name="extra1" type="text" maxlength="200" id="extra1" style="width:330px;">
</td>
<td class="hide"></td>
</tr>
$('input:submit[name="s1"]/* or a different selector... depends on your logic */').click(changeThis);
you should use the third one.

Retrieve nested id using repeated firstchilds in JavaScript

I am writing a web application that dynamically creates and names table elements, and I need to retrieve and parse a thoroughly nested id (not the value). The structure (and my latest attempt) are as such:
<table>
<tr onclick="alert(this.firstChild.firstChild.firstChild.id);">
<td>
<div>
<input type="text" id="thisIsTheNeededID">
</div>
</td>
</tr>
</table>
It keeps returning 'undefined', which confirms my suspicion that I do not know JavaScript as well as I should. I am also using jQuery, so those solutions would work.
If you need the exact one:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
<tr onclick="alert($(this).find('td:first-child').find('div:first-child').find('input:first-child').attr('id'));">
<td>
<div>
<input type="text" id="thisIsTheNeededID">
</div>
</td>
</tr>
</table>
This being an inline JavaScript, it is better to use unobtrusive JavaScript by delegating the events and make your code and presentation split, so that it will be clear. A fiddle of unobtrusive JavaScript is below.
$(function () {
$("table").on("click", "tr", function () {
alert($(this).find('td:first-child').find('div:first-child').find('input:first-child').attr('id'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
<tr>
<td>
<div>
<input type="text" id="thisIsTheNeededID">
</div>
</td>
</tr>
</table>
You don't need to keep on adding code for each <tr>.

Jquery get different input hidden value to a link

I making a context menu and it almost done, just left this problem for me, but i have no idea to do this:
This is the JS Fiddle
Get different value from input hidden to a single link, because I want to pass it into a controller action
<table>
<tr>
<td class="element">im here
<input type="hidden" id="theid" name="theid" value="1"/>
</td>
</tr>
<tr>
<td class="element">im there
<input type="hidden" id="theid" name="theid" value="2"/>
</td>
</tr>
<tr>
<td class="element">im where
<input type="hidden" id="theid" name="theid" value="3"/>
</td>
</tr>
</table>
<div type="context" class="menu"> // link
<label class="menuitem">Cancel this app</label>
</div>
I want to pass the value to theid , for example when right click im here the link should get the hidden value = 1 and so on, any suggestion to do that ? Thanks
The mouse event object contains the target you were clicking on. So you can access that, pass it to jQuery and do whatever you want with it, eg. accessing the ID of the input.
$(e.target).find('input').attr('id');
And as the other commentators, I'm hoping that your IDs are different ;)
Edit: I re-read your question, you just want the value. So you don't need the ID theid in your markup overall (for this usecase). Getting the value from the clicked element:
$(e.target).find('input').val();
And working, see the alert(): See this jsfiddle

How to show the form on click of a button?

I am facing a problem. I have created a form where a user has to input the details about a candidate and also upload his/her image. The problem is that in the form there is a button that says "Click To Add More Candidate", so when this button is clicked the same form should reappear under a division called "moreCandidates". Now to achieve this how should I go about it? Things that are coming in my mind is as follows:
To create a function in javascript that exactly creates the form contents (ie. all the input fields,etc) and onclick of the button "Click To Add More Candidate", call the function under the mentioned division. I can do this as in the past I have done something very similar to this. However, this time I don't think it would be good idea to create the whole form again as I have written a PHP function in between to read a directory.
Or the second thought that I have is to have the form code written in a file called candidate.php and call that file with AJAX. The problem here could be that I might be calling the whole form again (whereas I just want to call the contents of the form like the candidate name, and other stuff)
I very confused at the moment, and help from you all would be greatly appreciated. Thanks in advance.
My html code:
<div id="candidateForm">
<table border="0">
<form method="post" action="formDetails.php" enctype="multipart/form-date">
<tr>
<td>Candidate Name:</td>
<td><input class="candidateForm" type="textbox" name="candidateName" placeholder="Candidate's Name"/></td>
</tr>
<tr>
<td>Enroll No:</td>
<td><input class="candidateForm" type="textbox" name="enrollNumber" placeholder="Enroll No"/></td>
</tr>
<tr>
<td>Candidate Image:</td>
<td><input class="candidateForm" type="file" name="candidateImage" placeholder="Select a Image"/></td>
</tr>
<tr>
<td>Cadidate Post:</td>
<?php
//This is the target folder that is going to be read.
$target="uploads/";
//I an using a directory function in PHP scandir() which scans tha contains of the give directory
$dir=scandir($target);
?>
<td>
<select name="candidatePost">
<option value="candidatePost" select="selected">---------Select---------</option>
<?php
foreach($dir as $folders)
{
//When we loop throung the target folder/directory we get this annoying two folder that is "." and ".." so just to rule then out i m using an IF condition
if($folders!="."&& $folders!="..")
//echo $folders;
echo "<option class='candidateForm' value=$folders>$folders</option>";
}
?>
</select>
</td>
</tr>
<tr>
<td>About The Candidate:</td>
<td><textarea name="aboutCandidate" cols="40" rows="5"></textarea></td>
</tr>
<div id="moreCandidates"> </div>
<tr>
<td></td>
<td><input type="button" value="Click To Add More Candidate"></input> </td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="candidateFormSubmit" value="Press Here To Submit The Details" onclick=""/></td>
</tr>
</form>
</table>
</div>

how is once load js file to original page for .load()? [duplicate]

This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
jQuery .load() call doesn't execute javascript in loaded html file
on the page loading with .load(), can not be using jQuery?
do will re-load files js to page loading with .load()?
How can load once js file in page header?
This is content page that is loaded with .load()
<script type="text/javascript" src="files/js/jquery-1.6.min.js"></script>
<script type="text/javascript" src="files/js/ok.js"></script>
// not want this js files (jquery-1.6.min.js - ok.js) load here
//i once they to page original load, with this load is twice load
<div class="insert">
<form action="" method="post">
<table class="servicesT" cellspacing="1">
<tr>
<td colspan="2" class="servHd">
hello
</td>
</tr>
<tr>
<td>
<input type="text" name="name" placeholder="name" title="name">
</td>
<td class="servBodL">
</td>
<td class="servBodL">
</td>
</tr>
</table>
</form>
</div>
perhaps you meant this:
$("#someDiv").load("sompage.html .insert")
should load someDiv with the content of the div with class insert.
An ID would possibly be better and I do not know if the scripts are loaded, firebug would see if they were

Categories