How image drag and display corresponding row and how take that image's name when sumit form we have four images on topof the page.each images have each value.then below that display some words row by row.whenever we drga tha image from the top to the corresponding words,then we can identify that image name,corresponding words when submitting the form.
my jquery code is here
<SCRIPT>
$(document).ready(function(){
$("#move").draggable();
});
</SCRIPT>
<SCRIPT>
$(document).ready(function(){
$("#move1").draggable();
});
</SCRIPT>
<SCRIPT>
$(document).ready(function(){
$("#move2").draggable();
});
</SCRIPT>
<SCRIPT>
$(document).ready(function(){
$("#move3").draggable();
});
</SCRIPT>
"image drag and display" indicates user interaction. This can't be done in PHP. Interaction like this needs to be done client-side which means javascript.
PHP is completely server-side.
EDIT: When I wrote the answer there was no mention of javascript or jQuery so I was pointing out that php couldn't do what he was asking since it's only tagged php (I'm about to edit that).
A better answer would be that the image would need to be a part of the form, otherwise it won't be submitted to php.
Related
I have a doubt. All right. I have a post in which users post comments and next to each post have a button belonging to each of them. Well, as I get when I click on each of these buttons me out a popup.
With that event ?. An event for several elements. But that is the same for all those buttons.
ahhh. These buttons are generated or printed with php, when the user posts something, that something has a button. Help!!!
HTML
<a id="popup" class="globes_post_giving">♠</a>
JS
<script type="text/javascript">
$(document).ready(function(){
$("#popup").on({ click:function(e){
alert('hola');
} });
});
</script>
The jQuery code seems not good.
There are syntaxes errors.
Here is my two cents :
<script type="text/javascript">
$(document).ready(function(){
$("#popup").click(function(e){
alert('hola');
});
});
</script>
In order to be used with multiple buttons you'd better use a class instead of an id and set the click event on it.
HTML
First link
Second link
Third link
JS
$(document).ready(function(){
$(".popup").click(function(e){
alert('hola');
});
});
That's all I can do without more code.
Hope it helps.
I have a form that is dynamically created, so I can't edit the layout of the form itself. However, I want to add a title above one of the text input fields in the form. I have given that field a unique css ID and am using the following script to try and add my heading before it:
<script type="text/javascript">
$('<h5 class="form_title">Calculate Return</h5>').insertBefore('#price');
</script>
For some reason this won't work though, can anyone think why that might be. Here is the page in question
http://www.theres-a-thought.com/client-yourdream/?page=property_submit
Add document ready to your code -
<script type="text/javascript">
$(document).ready(function() {
$('<h5 class="form_title">Calculate Return</h5>').insertBefore('#price');
});
</script>
Looking at your page, I don't see where #price is defined. Maybe it is added later via JS and i missed it..
You are using jquery in no-conflict mode, and you need to wrap your code in document ready..
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('<h5 class="form_title">Calculate Return</h5>').insertBefore('#price');
});
</script>
Running this; however, has no affect on the page(from what i can see).
The code below works because the ID exists. It isn't what you are trying to accomplish, but it should get you started.
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('<h5 class="form_title">Calculate Return</h5>').insertBefore('#property_name');
});
</script>
For a website I'm making for school, I'm trying my hand at using Jquery extensively for the first time, and even though I managed quite a bit so far, I'm stuck at two (most likely related) problems.
I'm aware that the upcoming case is somewhat long, but I feel it's necessary to submit all relevant code for everyone reading this to get a good image of what is happening.
Basically, the website is one index.html file, with the CSS thrown in, a few buttons, and one div with the ID content. I use this code to make this work:
<script type="text/javascript">
if ($('#content').innerHTML == " "){
$(document).ready(function(){
$('#content').load('main_text.html');
});
}
</script>
<script type="text/javascript">
function loadContent(elementSelector, sourceURL) {
$(""+elementSelector+"").load(""+sourceURL+"");
}
</script>
Then there is one content page, named search.html, which only contains a form that submits a search string to a search.php page (through ajax) that should then place the search results immediately back into a div called search_results in that same search.html file. The jquery that I use for this:
<script type='text/javascript'>
$(document).ready(function(){
$("#search_results").slideUp();
$("#search_button").click(function(e){
e.preventDefault();
ajax_search();
});
$("#search_term").keyup(function(e){
e.preventDefault();
ajax_search();
});
});
function ajax_search(){
$("#search_results").show();
var search_val=$("#search_term").val();
$.post("Functions/search.php", {search_term : search_val}, function(data){
if (data.length>0){
$("#search_results").html(data);
}
})
}
</script>
The issue that I'm having is as followed:
Before I had the first line of code: if ($('#content').innerHTML == " "){; implemented, I would open the site, main_text.html would nicely be loaded in, I could navigate to other subpages fine. But typing in something in the form field in search.html did not display any results (just typing should already trigger the function). When I hit the search button on this form, instead of seeing query results, the main_text.html file load again in the #content div. This made me assume that perhaps, somehow, that the code:
$(document).ready(function(){
$('#content').load('main_text.html');
});
was being called again unwanted. Hency why I implemented that check for whether innerHTML existed.
However, now, when I first load the page, the #content div does not load any initial content at all. (The section on the webpage just becomes black, like my page background) I have to click any button to get some content loaded again in my main content div. Also, when I now go back to the search.html, the typing anything to get results, like previously, still does not work. If I now hit the search button, I get the initial result again of what I'd see when I just opened the page: a blacked out #content div.
So somehow, the biggest issue is in the fact that the jquery to get results from my PHP do not seem to work. My problem with the content.innerhtml check might well be obsolete if the issue with the searchresults not displaying in the #search_result div on the search.html is fixed.
Anyone have any idea's what I could do to fix this. Or otherwise, what other approaches I could take for the kind of website I'm making. Since I'm trying to learn jquery here, better approaches are always appreciated, I'd rather learn myself doing this the right way and all. :)
Thanks for your time.
Few things to note here:
<script type="text/javascript">
if ($('#content').innerHTML == " "){
$(document).ready(function(){
$('#content').load('main_text.html');
});
}
</script>
<script type="text/javascript">
function loadContent(elementSelector, sourceURL) {
$(""+elementSelector+"").load(""+sourceURL+"");
}
</script>
In the above, you are testing to see if there is a space in the innerHTML of the element with an id of content.
jQuery uses .html() or .text() to make comparisons against the data being held within a container, so if you want to maintain using jQuery principles, change this line. Going along the same thought process, you are preparing an IF statement on an element before the document is actually ready and loaded.
You should move the document.ready function to the outside of the if statement. This will allow you to ensure that the element is available at DOM, and you can indeed perform checks against this element.
<script type="text/javascript">
$(document).ready(function(){
if ($('#content').html("")){
$('#content').load('main_text.html');
}
});
</script>
Also, while being readily provided and fully functional, I would recommend starting off using $.ajax instead of $.get / $.post. I have personal preferences as to why I think this, but I won't go into that, it's just that, personal.
$.ajax({
url: "Functions/search.php",
type: 'POST',
data: "search_term="+search_val,
success: function(data){
if (data.length>0){
$("#search_results").html(data);
}
});
Lastly, you should be using the GET method and NOT the POST method. Based on REST/SOAP practices, you are retrieving data from the server, and not posting data to the server. It's best practice to follow those two simple ideas. This isn't because web servers will have a difficult time interpreting the data; but, instead, it's to prepare you for working on larger scale application deployment, or future team-environments. This way everyone on the team has an expectation as to what method will be used for what purpose.
Anyway, long story short, you also leave semicolons off of the end of your closing }) brackets. While this is not an issue, nor will it cause flaws in your development, coding is all about uniformity. You've used the closing ; everywhere else, so try and maintain that same uniform design.
Best of luck.
I'm creating a system using jquery and php that pops up a small div when they get a private message on my website. The alert itself I have figured out, but I'm not sure how to gracefully cancel it.
I've made it so that clicking a link "[x]" hides the div, but how can I make the link send enough information to a php script to mark this alert as "read" in the database?
All the php script would need is the id of the alert in the database, but I've got no idea how to make it do that. There is also more than one notice displayed at a time, so I would need a way to have each link send the information necessary to the php script.
Here's the jquery that loads the div and the php that powers it.
<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$('#mc').load('/lib/message_center.php').show("slow");
}, 10000); // refresh every 10000 milliseconds
</script>
<script type="text/javascript">
$(document).ready(function(){
$('.delete').live('click', function(){
$('#mc').hide('slow');
});
});
</script>
The easiest solution would be to set the message you are displaying to read at the moment you display it. That would not require any additional communication between the browser and the server, just do it at the end of your /lib/message_center.php script for the messages you are displaying at that moment.
Set the href attribute for your X produced by php like href="javascript:killbox(5);" and give your div a unique id (i.e.id="boxtokill5"). Then you could use something like this:
function killbox(id){
$("#boxtokill"+id).hide();
var packet = {};
packet.clickedlinkid = id;
$.get("destination.php",packet,function(data){
// data = Response (output) from script
});
}
The destination.php receives the ID by $_GET['clickedlink'].
Trying to load an external php file into another onClick. Iframes will not work as the size of the content changes with collapsible panels. That leaves AJAX. I was given a piece of code
HTML
Get data
<div id="myContainer"></div>
JS
$('#getData').click(function(){
$.get('data.php', { section: 'mySection' }, function(data){
$('#myContainer').html(data);
});
});
PHP:
<?php
if($_GET['section'] === 'mySection') echo '<span style="font-weigth:bold;">Hello World</span>';
?>
I have tested it here http://www.divethegap.com/scuba-diving-programmes-dive-the-gap/programme-pages/dahab-divemaster/divemaster-trainingA.php and get the most unexpected results. It certainly loads the right amount of items as it says in the lower bar on safari but I see three small calendars and that is it. Can anyone see where I have made a mistake?
First things first, you want to have the jQuery bit inside the ready function $(document).ready(function(){..}. In your test page, there is already a ready function at the top which contains the line $('a[rel*=facebox]').facebox(), so you might want to put the code there.
Secondly, you want to prevent the link from going to the default action, which is to load the url '#'. You do that with the preventDefault() method.
I tested and confirmed that the following code should work for you:
<script type="text/javascript">
$(document).ready(function(){
$('#getData').click(function(event){
event.preventDefault();
$.get('test.php', { cat: 16 }, function(data){
$('#myContainer p').html(data);
});
});
});</script>
You can find more details and examples of jQuery's get function here.
http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/ this tutorial may helps you