bob_the _builder Posted September 5, 2012 Share Posted September 5, 2012 Hi, Whats the correct way to add more post fields into: data: "data=" + $("#data").val()&"data2=" + $("#data2").val(), Thanks Quote Link to comment https://forums.phpfreaks.com/topic/268011-jquery/ Share on other sites More sharing options...
gristoi Posted September 5, 2012 Share Posted September 5, 2012 data:{ data1 :$('#data1').val(), data2 :$('#data2').val(), data3 :$('#data3').val(), data4 :$('#data4').val(), }, Quote Link to comment https://forums.phpfreaks.com/topic/268011-jquery/#findComment-1375396 Share on other sites More sharing options...
bob_the _builder Posted September 5, 2012 Author Share Posted September 5, 2012 Worked great thanks.. So with the get method.. I think I have got the following code correct?.. but I can figure out how to access it via a link method? <script type="text/javascript"> $(document).ready(function(){ $("#clickme").click(function () { $("#content").html('Retrieving...'); $.ajax({ type:"GET", data:{ "fname":"12345","lname":"test" }, url: "jqueryresponce.php", success: function(msg){ $("#content").html(msg) } } ); }); }); </script> Thanks Quote Link to comment https://forums.phpfreaks.com/topic/268011-jquery/#findComment-1375400 Share on other sites More sharing options...
Adam Posted September 5, 2012 Share Posted September 5, 2012 What do you mean by "access it via a link method"? Quote Link to comment https://forums.phpfreaks.com/topic/268011-jquery/#findComment-1375406 Share on other sites More sharing options...
bob_the _builder Posted September 5, 2012 Author Share Posted September 5, 2012 I guess i mean, send the variable(s) via a link so i can query the database based on the variable(s) received within the div.. Opposed to doing it via a form and posting the variables.. Quote Link to comment https://forums.phpfreaks.com/topic/268011-jquery/#findComment-1375413 Share on other sites More sharing options...
bob_the _builder Posted September 5, 2012 Author Share Posted September 5, 2012 Not sure how to explain it.. But lets say via ajax I would send a request to be loaded in the div using: <a href="javascript: testAjax('myDIV')">Show Name</a> Not sure how to acheive the same thing using the jquery function above.. Thanks Quote Link to comment https://forums.phpfreaks.com/topic/268011-jquery/#findComment-1375591 Share on other sites More sharing options...
Adam Posted September 5, 2012 Share Posted September 5, 2012 jQuery provides a simplified method for making GET requests; jQuery.get(). Have a look through the documentation. I would personally wrap the functionality inside an object or a couple of functions, and re-use it for every link. With a simple selector you can match each anchor and hijack the normal behaviour. Quote Link to comment https://forums.phpfreaks.com/topic/268011-jquery/#findComment-1375592 Share on other sites More sharing options...
bob_the _builder Posted September 5, 2012 Author Share Posted September 5, 2012 Yea and from my understading the code below should work.. <script type="text/javascript"> $(document).ready(function(){ $("#clickme").click(function () { $("#content").html('Retrieving...'); $.ajax({ type:"GET", data:{ "data1":"12345","data2":"test" }, url: "jqueryresponce.php", success: function(msg){ $("#content").html(msg) } }); }); }); </script> <div id="content"> </div> In the page jqueryresponce.php, I have echoed out the get variables but noting loads in the div.. Quote Link to comment https://forums.phpfreaks.com/topic/268011-jquery/#findComment-1375615 Share on other sites More sharing options...
trq Posted September 5, 2012 Share Posted September 5, 2012 What does dev tools or firebug show in regards to your request / response ? Quote Link to comment https://forums.phpfreaks.com/topic/268011-jquery/#findComment-1375620 Share on other sites More sharing options...
bob_the _builder Posted September 5, 2012 Author Share Posted September 5, 2012 Never really used FireBug.. Have installed it.. not seeing any issue, where should I be looking to find them within firebug? Thanks Quote Link to comment https://forums.phpfreaks.com/topic/268011-jquery/#findComment-1375622 Share on other sites More sharing options...
bob_the _builder Posted September 6, 2012 Author Share Posted September 6, 2012 I know this works.. $(document).ready(function () { $('#code').load('jqueryresponce.php?data1=Some&data2=Data'); } ); But I want to click a link holding the variables and parse them to the div that way.. Im totally new to Jquery. Quote Link to comment https://forums.phpfreaks.com/topic/268011-jquery/#findComment-1375626 Share on other sites More sharing options...
.josh Posted September 6, 2012 Share Posted September 6, 2012 Okay, you need to be a little bit more proactive in a) explaining what you actually want, b) being our eyes as far as what is actually happening. Do you see your div update with that 'Retrieving...' message? In firebug there is a Net tab. Do you see a request being made to your script when you click the button? If so, does the request show your data? Don't just tell us "It doesn't work," tell us what you DO see happening. Quote Link to comment https://forums.phpfreaks.com/topic/268011-jquery/#findComment-1375632 Share on other sites More sharing options...
bob_the _builder Posted September 6, 2012 Author Share Posted September 6, 2012 I dont know how to explain it any better.. Another attempt: $("#clickme").click(function(){ $("#content").html('Retrieving...'); var url = $(this).attr('href'); $.get(url, function(response){ $("#content").html(response); },'text'); }); Link I beleave should work to access above function?: <a href="jqueryget.php?pid=$pid" id="clickme" onclick="#content">Show Details</a> Problem: The entire page reloads, instead of just the div area.. <div id="content"> </div> Thanks Quote Link to comment https://forums.phpfreaks.com/topic/268011-jquery/#findComment-1375662 Share on other sites More sharing options...
Adam Posted September 7, 2012 Share Posted September 7, 2012 Look into event.preventDefault(). Quote Link to comment https://forums.phpfreaks.com/topic/268011-jquery/#findComment-1376201 Share on other sites More sharing options...
bob_the _builder Posted September 8, 2012 Author Share Posted September 8, 2012 Ahh yes.. thats did the trick.. hard to explain some times Thanks.. Quote Link to comment https://forums.phpfreaks.com/topic/268011-jquery/#findComment-1376212 Share on other sites More sharing options...
bob_the _builder Posted September 8, 2012 Author Share Posted September 8, 2012 It would appear you cant u run a jquery function from within the div you are loading it into? Example This works.. <input id="email" type="text" value="" /> <input id="password" type="text" value="" /> <input type="button" id="clickme" value="submit" /> <div id="content"></div> <script type="text/javascript"> $("#clickme").click(function(){ $("#content").html('<img src="./loading.gif">'); var data = {email: $('#email').val(), password: $('#password').val()}; $.post("jqueryget.php", data, function(response){ $("#content").html(response); },'text'); }); </script> This doesnt work.. <div id="content"> <input id="email" type="text" value="" /> <input id="password" type="text" value="" /> <input type="button" id="clickme" value="submit" /> </div> <script type="text/javascript"> $("#clickme").click(function(){ $("#content").html('<img src="./loading.gif">'); var data = {email: $('#email').val(), password: $('#password').val()}; $.post("jqueryget.php", data, function(response){ $("#content").html(response); },'text'); }); </script> I am wanting the login process complete within the div tag id #content, not by placing the form outside of it? Quote Link to comment https://forums.phpfreaks.com/topic/268011-jquery/#findComment-1376256 Share on other sites More sharing options...
bob_the _builder Posted September 8, 2012 Author Share Posted September 8, 2012 So i think the anwer to the above question is the .live() function.. this seems to work great for GET data, but using POST no data seems to arrive after being submited.. Here is what I have now: <!-- Div to load content in --> <div id="content"> </div> <!-- To populate the #content div when page first loads --> <script type="text/javascript"> $('#content').load('jqueryresult.php'); </script> <!-- The query to process and pass on the form data --> <script type="text/javascript"> $("#clickme").live('click',function(){ $("#content").html('Retrieving...'); var data = {data1: $('#data1').val(),data2: $('#data2').val(),data3: $('#data3').val()}; $.post("jqueryresult.php", data, function(response){ $("#content").html(response); },'text'); }); </script> jqueryresult.php layout: <input id="data1" type="text" value="" /> <input id="data2" type="text" value="" /> <input type="button" id="clickme" value="Submit" /> <hr /> <?php echo ''.$_POST['data1'].' -- '.$_POST['data2'].''; ?> What am I missing for the variables not to be captured? If I place the button and fields outside the #content div it works fine.. Maybe <script type="text/javascript"> $('#content').load('jqueryresult.php'); </script> Maybe the above cancelling it out again? Quote Link to comment https://forums.phpfreaks.com/topic/268011-jquery/#findComment-1376265 Share on other sites More sharing options...
Adam Posted September 8, 2012 Share Posted September 8, 2012 The moment you click the #clickme button, this line is fired: $("#content").html('Retrieving...'); That removes all the content within #content, and replaces it with a text node. That means the form and buttons cease to exist any more, which is why you can't access them. Quote Link to comment https://forums.phpfreaks.com/topic/268011-jquery/#findComment-1376275 Share on other sites More sharing options...
bob_the _builder Posted September 8, 2012 Author Share Posted September 8, 2012 Hmm strugling to put this together.. It doesnt seem to do it when using get method.. I thought that $("#content").html('Retrieving...'); is just a loading screen while it processes the request.. assuming that it would still grab the posted variables and reload the div with the new data.. How should it be so I can have the entire script within the #content div without having to place the form outside the div? Thanks Quote Link to comment https://forums.phpfreaks.com/topic/268011-jquery/#findComment-1376278 Share on other sites More sharing options...
Adam Posted September 8, 2012 Share Posted September 8, 2012 I thought that $("#content").html('Retrieving...'); is just a loading screen while it processes the request.. Well that's what you get in-effect, but really you're just setting the HTML of #content to "Retrieving..." Essentially to: <div id="content">Retrieving...</div> So forms, inputs and all other elements are lost. To make it work you can simply capture the data before you set the HTML (i.e. switch around the lines). Although it may make more sense from a usability perspective just to move the form out of #content. Quote Link to comment https://forums.phpfreaks.com/topic/268011-jquery/#findComment-1376279 Share on other sites More sharing options...
Adam Posted September 8, 2012 Share Posted September 8, 2012 It doesnt seem to do it when using get method.. I can't see how it wouldn't. Can you show the whole code for each situation as it is when it's working / not working? Quote Link to comment https://forums.phpfreaks.com/topic/268011-jquery/#findComment-1376280 Share on other sites More sharing options...
bob_the _builder Posted September 8, 2012 Author Share Posted September 8, 2012 The form in this case is for login.. I really need it in the same div.. Basically the page called into the div: jqueryresult.php holds the php code to check against the email and password, relaod the form if match fails or set session data and show member panel.. If I shift the form to another div it will stay visable after successful login.. Quote Link to comment https://forums.phpfreaks.com/topic/268011-jquery/#findComment-1376281 Share on other sites More sharing options...
Adam Posted September 8, 2012 Share Posted September 8, 2012 Makes sense, so.. To make it work you can simply capture the data before you set the HTML (i.e. switch around the lines). Although it may make more sense from a usability perspective just to move the form out of #content. Quote Link to comment https://forums.phpfreaks.com/topic/268011-jquery/#findComment-1376283 Share on other sites More sharing options...
bob_the _builder Posted September 8, 2012 Author Share Posted September 8, 2012 By switch around do you mean: <script type="text/javascript"> $("#clickme").click(function(){ var data = {email: $('#email').val(), password: $('#password').val()}; $("#content").html('<img src="./loading.gif">'); $.post("jqueryget.php", data, function(response){ $("#content").html(response); },'text'); }); ? Is it possible that upon successful login I could clear the div holding the login form? Quote Link to comment https://forums.phpfreaks.com/topic/268011-jquery/#findComment-1376287 Share on other sites More sharing options...
Adam Posted September 8, 2012 Share Posted September 8, 2012 Yes that's what I mean. An if #content holds the login form, then you're already clearing it. Quote Link to comment https://forums.phpfreaks.com/topic/268011-jquery/#findComment-1376289 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.