I have the following HTML page:
<div id="foobar">
<?php echo $dynamicVar; ?>
</div>
<input type="button" value="Submit" id="subButton"/>
When I press submit, the value of $dynamicVar will change. Is there a way, without using Ajax callbacks, .each(), or anything complicated, to do a dead-simple refresh of the div element? I know there's a jQuery function, I've seen it before, but I can't find it now. This function will just refresh an element. Everything I've found requires me to write unnecessarily complicated code to attempt to refresh a very small very simple element.
For example, if the the entire div had the value "1" inside of it, and I pressed the button, I want to refresh in order to show the value "n".
Here's the jQuery code:
$('#subButton').live('click',function() {
//dead-simple element refresh, nothing fancy necessary
});
Example #2:
<div id="foobar">
<?php echo time(); ?>
</div>
<input type="button" value="Submit" id="subButton"/>
Since time generally goes forward, the timestamp should be different from a few seconds ago when the web server gave me the timestamp. I would want to have the div element do a very simple update of itself so that I would see the new timestamp upon button click.
Any help?
Were you thinking of .load()? It's a high-level ajax function. You'd use it something like this:
$('#subButton').live('click',function() {
$('#foobar').load('thispage.php #foobar > *');
});
You'll have to use AJAX AFAIK, but in your $.ajax() callback, you can use $.replaceWith() (documentation).
$('#foobar').load('my/script.php');
Related
I want to create a button with press & release actions, so, for example, when i press it, it shows some text and when i release it it hides the text. Can anybody help?
What i have already tried:
<form action="forwardon.php" method="get">
<input type="submit" value="Forward">
</form>
This just creates a button which redirects to a page which is running the desired action: but you cant create press & release actions with this..
And i cant find any way how to do this.. Or is it just not possible with php?
Well, yes. It's not possible with php, you need to use javascript for that.
Every button has events: onmousedown and onmouseup. You can see the list of events here
Basically, you need to create functions, that will be fired in javascript while pressing/releasing. It would look like this
<html>
<-- your html here -->
</html>
<script>
document.getElementById('id-of-your-button')
.addEventListener('mousedown', function() {
//change the text you need here with pure javascript
});
</script>
The same goes with onmouseup event too.
To know more about javascript visit w3schools
Like James already said. In PHP it isn't possible to make something like button events, because PHP is a ServerSideLanguage.
As he also mentioned, you have to use for example JavaScript.
With the following script you are able to change the text with mouse events
<input type="button" value="Forward" onmousedown="getElementById('text').innerHTML = 'pressed';" onmouseup="getElementById('text').innerHTML = '';">
<p id="text"></p>
PHP won't be able to do this without refreshing the page/going to a new page.
JavaScript can give you what you are looking for.
see w3schools first example for showing text.
Hope this helps
I have a php page holding a data grid generated by jQuery lets say dataGrid.php
and 2 divs on the home page some thing like this
dataGrid.php
<script>
generate the grid
</script>
<body>
<lightbox><div> close me </div>
<div > holding the dataGrid </div>
</lightbox>
</body>
NOTE: I mean a popup box when I say this is not a real valid HTML tag I am using
and here is the home page
<body>
<div> click here to see the grid </div>
<div> <?php include dataGrid.php ?></div>
</body>
I have a close button on dataGrid.php. I am closing the include using jQuery remove() but remove() refreshes the home page which is what I don't want. I am also not sure id remove() command is really cross browser?
My question: Is there any way or method to close dataGrid.php and the light-box without refreshing the home page?
I have checked 3 other questions posted on stack-overflow with the same question title but different in the question body.
If your close button is interactive (i.e. a hyperlink) you'll need to call preventDefault() on the event to prevent the browser from treating it as interactive.
Before I begin it's worth reiterating what I said in my comment on this question: <lightbox> isn't a valid HTML element and will fail validation tests. For this answer, however, I'm going to use this as this is given the code you've provided.
Assuming your code is something like this:
<lightbox>
Close Me
...
</lightbox>
You'd prevent the hyperlink from functioning by passing in the event and calling event.preventDefault():
$('lightbox').on('click', 'a.close', function(event) {
event.preventDefault();
$('lightbox').remove();
});
Alternatively you can simply change your close button to something which isn't interactive, like a span for example:
<lightbox>
<span class="close">Close Me</span>
...
</lightbox>
$('lightbox').on('click', 'span.close', function() {
$('lightbox').remove();
});
For those who have it with an onclick, and doesn't know if the event is reachable within the function:
<button class="remove-form" onclick="remove_form(this);">Remove this form</button>
function remove_form(button){
jQuery(button).parent().remove();
event.preventDefault();
}
I have set the number X to 5.
When clicking a button a script is run to update the database without refreshing - that works fine.
Now i want a number on the page to update to 6, also without the page refreshing.
I tried JS, but ended up having the number in an input field which looks bad. Is there any other way, maybe with jQuery.
This will let you get the element by its id and update its value.
document.getElementById('theId').innerHTML = newValue;
If you are not currently using jQuery then do not use it just for this. If you are using jQuery you can do the following.
$('#theId').html(newValue);
or
$('#theId').text(newValue);
Depending on whether the newValue may or may not have html in it.
Both the jquery and straight javascript examples are equivalent.
You don't have to use jQuery.
You can update everything on page by pure JavaScript, without jQuery.
Example from Javascript Tutorial at tizag.com:
<script type="text/javascript">
function changeText()
{
document.getElementById('boldStuff').innerHTML = 'Fred Flinstone';
}
</script>
<p>
Welcome to the site <b id='boldStuff'>dude</b>
</p>
<input type='button' onclick='changeText()' value='Change Text'/>
with jquery $("your containerselector").html(parseInt($("your containerselector").html()) + 1) Though you need to be sure your container just contains on int.
I've been trying to make a multi-page poll with jQuery Mobile that is supposed to interact with my MySQL database through Ajax/PHP and have been having issues with it for a while now. It seems I have some problems submitting the form as a result of having it split into several pages. One requirements I need is that the page can not have a page reload.
In my first attempts I tried to divide the pages up into the following:
<div id="page1" data-role="page">
This however failed so many times no matter how I tried to code it. I can not get the submit button to work and I think it could be caused by the fact that I have split the form into several div "pages". I've also tried to make next/submit buttons rather than "Next, next, next ... submit" so that I can store the temporary data in the session, unsuccessfully.
I reworked my whole strategy into a code that hides the question divs that are not active. By this I mean I have one div with data-role set to page, and within it I have several divs with data-roles of content that are hidden/shown by clicking through the form with the next button. I managed to make a small sample form this way that submits the whole form and gets printed out perfectly with some PHP code. However I have yet to successfully validate this version. I can only get my script to validate the last page, and even then it requires ALL checkboxes to be checked, which is pointless. When I tried to implement this version into my real project I could not get it to submit to the .php script at all, but that might just be some syntax error that I will keep looking for.
So, have anyone done anything similar? I'm looking for potential other strategies to solve this issue, or perhaps someone has a theory as to why my aforementioned attemps have failed. Seems Ajax form submits are hard to get working within jQuery Mobile?
Also in case someone can spot a flaw in this I've attached this code that I use for submission, is there an easy way to make this into a function? Or is that pointless?
$(document).ready(function()
{
$("#submit").click(function()
{
var data_string = $('#form').serialize();
$.ajax(
{
type:'POST',
url:'add.php',
data:data_string,
success:function(response)
{
$("#answers").html(response);
}
});
})
});
I also use this function during window.onload to generate the poll with a lengthy .php script. Basically it generates the questions as , every other question variety has only name="answers[question_id]".
function getQuestions(id)
{
var xmlhttp = getHttpRequestObj();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById(id).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","poll2.php",true);
xmlhttp.send();
}
The form looks like this:
<form id="form">
<div data-role="content" id="form'.$page.'" class="section">
<fieldset data-role="controlgroup" data-type="vertical" data-mini="true" id="'.$question_id.'">
<input type="checkbox" name="answers['.$question_id.']['.$alt_id.']" id="'.$question_id.'_'.$alt_id.'" value="'.$alt_id.'"/>
<label for="'.$question_id.'_'.$alt_id.'">'.$alt_desc.'</label>
</fieldset>
<input type="button" name="next" value="Next" id="next" onClick="toggleVisibility(\'form'.($page+1).'\')" class="next-btn"/>
</div>
The last page has this code instead of the next button:
</div><input type="button" id="submit" value="Submit" class="submit-btn"/></form>
In my opinion, hiding the other options and open one by one is a better way (also called multi step form).
For validation, you can do it in client side with javascript or use ajax which triggers on appropriate event (you don't need to submit it for validation) and validates in server side.
You are in right track. The issue i see here is how you'l do the validation but that'l depend upon how your form is structured.
I have a button (styled as button with CSS). Next to it is an input field. I would like the button value to change dynamically as the user types a value in the textfield. What is the simplest way to do this?
My form:
<form>
<div class="span-3" id="bid_btns">
<div id="bid_button">
<?php echo $somethingwhichshouldchange; ?>
</div>
</div>
<div class="span-3 last" id="bid_btns">
<div id="bid_field">
<input type="text" class="title" name="bid_field" id="bid_field" maxlength="5"/>
</div>
</div>
</form>
PHP is a server side language, so you'll never be able to change a variable locally without re-serving the page. You need to investigate javascript to do what you're doing.
If you want to make the button label/value change as you type, PHP is not going to help. You need a script running in the browser - JavaScript. If you use jQuery (you did ask for the simplest way, and jQuery makes this much simpler), you need some code to change the button as the input value changes.
$(document).ready(function() {
$("#bid_field").keyup(function(){
$("#bid_btns").text($(this).val());
});
});
This bit of code will change the html inside the #bid_btns button to whatever is typed into the #bid_field input. If you're not familiar with jQuery, you can learn more by reading this article: http://docs.jquery.com/How_jQuery_Works
Note - edited per BenM's siggestion.
You can use jQuery to achieve this. You just need to bind a function to the onkeyup event:
http://jsfiddle.net/Vt6N9/