Ankündigung

Einklappen
Keine Ankündigung bisher.

Message Box ändern

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Message Box ändern

    Hallo liebe Community,

    anbei eine Frage.
    Ich habe folgenden Javascript Code, der sich unter meiner HTML Seite befindet, die mit Bootstrap erstellt wurde:

    PHP-Code:

    <script>
    $(
    document).ready(function(){
     
    fetchUser(); //This function will load all data on web page when page load
     
    function fetchUser() // This function will fetch data from table and display under <div id="result">
     
    {
      var 
    action "Load";
      $.
    ajax({
       
    url "action.php"//Request send to "action.php page"
       
    method:"POST"//Using of Post method for send data
       
    data:{action:action}, //action variable data has been send to server
       
    success:function(data){
        $(
    '#result').html(data); //It will display data under div tag with id result
       
    }
      });
     }

     
    //This JQuery code will Reset value of Modal item when modal will load for create new records
     
    $('#modal_button').click(function(){
      $(
    '#customerModal').modal('show'); //It will load modal on web page
      
    $('#first_name').val(''); //This will clear Modal first name textbox
      
    $('#last_name').val(''); //This will clear Modal last name textbox
      
    $('.modal-title').text("Create New Records"); //It will change Modal title to Create new Records
      
    $('#action').val('Create'); //This will reset Button value ot Create
     
    });

     
    //This JQuery code is for Click on Modal action button for Create new records or Update existing records. This code will use for both Create and Update of data through modal
     
    $('#action').click(function(){
      var 
    firstName = $('#first_name').val(); //Get the value of first name textbox.
      
    var lastName = $('#last_name').val(); //Get the value of last name textbox
      
    var id = $('#customer_id').val();  //Get the value of hidden field customer id
      
    var action = $('#action').val();  //Get the value of Modal Action button and stored into action variable
      
    if(firstName != '' && lastName != ''//This condition will check both variable has some value
      
    {
       $.
    ajax({
        
    url "action.php",    //Request send to "action.php page"
        
    method:"POST",     //Using of Post method for send data
        
    data:{firstName:firstNamelastName:lastNameid:idaction:action}, //Send data to server
        
    success:function(data){
         
    alert(data);    //It will pop up which data it was received from server side
         
    $('#customerModal').modal('hide'); //It will hide Customer Modal from webpage.
         
    fetchUser();    // Fetch User function has been called and it will load data under divison tag with id result
        
    }
       });
      }
      else
      {
       
    alert("Both Fields are Required"); //If both or any one of the variable has no value them it will display this message
      
    }
     });

     
    //This JQuery code is for Update customer data. If we have click on any customer row update button then this code will execute
     
    $(document).on('click''.update', function(){
      var 
    id = $(this).attr("id"); //This code will fetch any customer id from attribute id with help of attr() JQuery method
      
    var action "Select";   //We have define action variable value is equal to select
      
    $.ajax({
       
    url:"action.php",   //Request send to "action.php page"
       
    method:"POST",    //Using of Post method for send data
       
    data:{id:idaction:action},//Send data to server
       
    dataType:"json",   //Here we have define json data type, so server will send data in json format.
       
    success:function(data){
        $(
    '#customerModal').modal('show');   //It will display modal on webpage
        
    $('.modal-title').text("Update Records"); //This code will change this class text to Update records
        
    $('#action').val("Update");     //This code will change Button value to Update
        
    $('#customer_id').val(id);     //It will define value of id variable to this customer id hidden field
        
    $('#first_name').val(data.first_name);  //It will assign value to modal first name texbox
        
    $('#last_name').val(data.last_name);  //It will assign value of modal last name textbox
       
    }
      });
     });

     
    //This JQuery code is for Delete customer data. If we have click on any customer row delete button then this code will execute
     
    $(document).on('click''.delete', function(){
      var 
    id = $(this).attr("id"); //This code will fetch any customer id from attribute id with help of attr() JQuery method
      
    if(confirm("Are you sure you want to remove this data?")) //Confim Box if OK then
      
    {
       var 
    action "Delete"//Define action variable value Delete
       
    $.ajax({
        
    url:"action.php",    //Request send to "action.php page"
        
    method:"POST",     //Using of Post method for send data
        
    data:{id:idaction:action}, //Data send to server from ajax method
        
    success:function(data)
        {
         
    fetchUser();    // fetchUser() function has been called and it will load data under divison tag with id result
         
    alert(data);    //It will pop up which data it was received from server side
        
    }
       })
      }
      else  
    //Confim Box if cancel then 
      
    {
       return 
    false//No action will perform
      
    }
     });
    });
    </script> 

    Wenn ein Befehl ausgeführt wird zeigt das System mir einen Messagebox an wie z.B.

    PHP-Code:

      
    else
      {
       
    alert("Both Fields are Required"); //If both or any one of the variable has no value them it will display this message
      


    Ich würde gerne ein HTML Element als Messagebox anzeigen lassen. Kann mir einer sagen wie ich das realisieren kann?

    PHP-Code:
       <div class="alert alert-info" role="alert">   Both Fields are Required </div

    Freue mich auf Hilfe.

    Grüße

    Sebbi

  • #2
    https://getbootstrap.com/docs/4.0/components/modal/

    Kommentar


    • #3
      Danke für den Link.

      Ich habe jetzt bei

      PHP-Code:
       else
        {
         
      alert("Both Fields are Required"); //If both or any one of the variable has no value them it will display this message
        

      folgenden Code

      PHP-Code:
         $('#myModal').on('shown.bs.modal', function () {   $('#myInput').trigger('focus') }) 
      eingefügt. Dazu habe ich ein Modal mit der ID myModal erstellt.
      Wahrscheinlich mache ich noch ein Fehler denn es funktioniert nicht.

      Wäre klasse wenn man mir auf die Sprünge helfen könnte

      Kommentar


      • #4
        Nachdem dein Code ja nicht wirklich testbar ist, solltest du mal enien Beispielcode (z.B. auf JSFiddle) erstellen, bei dem das Problem nachvollziehbar auftritt.

        Kommentar


        • #5
          was passiert denn wenn du folgendes eingibst :
          HTML-Code:
          $('#myModal').modal('show');
          ?

          Kommentar


          • #6
            Danke für die Antwort. Jetzt öffnet er das Modal, wunderbar Vielen Dank

            Wie ist es wenn ich ein Alert angezeigt haben will? Also als Else Bedingung:

            PHP-Code:

            $("alert").alert('show'
            Und dann ruft er folgendes auf:

            PHP-Code:
               <div class="alert alert-warning" id="alert" role="alert">   This is a warning alert—check it out! </div

            Das HTML Element muss ich ja in meinem Main Code platzieren. Ich möchte aber, dass mir das Alert nur angezeigt wird, wenn man in die ELSE Bedingung reinrutscht..
            Andernsfalls ist der Alert Text die ganze Zeit da...



            Anbei noch einmal der ganze Code

            PHP-Code:

            <html>
             <
            head>
              <
            title>How to Read Mysql Data by using PHP PDO with Ajax PHP PDO CRUD with Ajax</title>
              <
            script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
              <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
              <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
              <style>
               body
               {
                margin:0;
                padding:0;
                background-color:#f1f1f1;
               }
               .box
               {
                width:1270px;
                padding:20px;
                background-color:#fff;
                border:1px solid #ccc;
                border-radius:5px;
                margin-top:100px;
               }
              </style>
             </head>
             <body>
              <div class="container box">
               <h1 align="center">PHP PDO CRUD with Ajax Jquery and Bootstrap</h1>
               <br />
               <div align="right">
                <button type="button" id="modal_button" class="btn btn-info">Create Records</button>
                <!-- It will show Modal for Create new Records !-->
               </div>
               <br />
               <div id="result" class="table-responsive"> <!-- Data will load under this tag!-->

               </div>
              </div>
             </body>
            </html>
            <!-- This is Customer Modal. It will be use for Create new Records and Update Existing Records!-->
            <div id="customerModal" class="modal fade">
             <div class="modal-dialog">
              <div class="modal-content">
               <div class="modal-header">
                <h4 class="modal-title">Create New Records</h4>
               </div>

               <div class="modal-body">
                <label>Enter First Name</label>
                <input type="text" name="first_name" id="first_name" class="form-control" />
                <br />
                <label>Enter Last Name</label>
                <input type="text" name="last_name" id="last_name" class="form-control" />
                <br />
               </div>
               <div class="modal-footer">
                <input type="hidden" name="customer_id" id="customer_id" />
                <input type="submit" name="action" id="action" class="btn btn-success" />
                <button type="button" class="btn btn-default" data-dismiss="modal">Schließen</button>
               </div>
              </div>
             </div>
            </div>
            <div class="modal" id="myModal" tabindex="-1" role="dialog">
              <div class="modal-dialog" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                  </div>
                  <div class="modal-body">
                    <p>Modal body text goes here.</p>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-primary">Save changes</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                  </div>
                </div>
              </div>
            </div>
            <div class="alert alert-warning" id="alert" role="alert">
              This is a warning alert—check it out!
            </div>

            <script>
            $(document).ready(function(){
             fetchUser(); //This function will load all data on web page when page load
             function fetchUser() // This function will fetch data from table and display under <div id="result">
             {
              var action = "Load";
              $.ajax({
               url : "action.php", //Request send to "action.php page"
               method:"POST", //Using of Post method for send data
               data:{action:action}, //action variable data has been send to server
               success:function(data){
                $('#result').html(data); //It will display data under div tag with id result
               }
              });
             }

             //This JQuery code will Reset value of Modal item when modal will load for create new records
             $('#modal_button').click(function(){
              $('#customerModal').modal('show'); //It will load modal on web page
              $('#first_name').val(''); //This will clear Modal first name textbox
              $('#last_name').val(''); //This will clear Modal last name textbox
              $('.modal-title').text("Arbeitskette hinzufügen"); //It will change Modal title to Create new Records
              $('#action').val('Hinzufügen'); //This will reset Button value ot Create
             });

             //This JQuery code is for Click on Modal action button for Create new records or Update existing records. This code will use for both Create and Update of data through modal
             $('#action').click(function(){
              var firstName = $('#first_name').val(); //Get the value of first name textbox.
              var lastName = $('#last_name').val(); //Get the value of last name textbox
              var id = $('#customer_id').val();  //Get the value of hidden field customer id
              var action = $('#action').val();  //Get the value of Modal Action button and stored into action variable
              if(firstName != '' && lastName != '') //This condition will check both variable has some value
              {
               $.ajax({
                url : "action.php",    //Request send to "action.php page"
                method:"POST",     //Using of Post method for send data
                data:{firstName:firstName, lastName:lastName, id:id, action:action}, //Send data to server
                success:function(data){
                 alert(data);    //It will pop up which data it was received from server side
                 $('#customerModal').modal('hide'); //It will hide Customer Modal from webpage.
                 fetchUser();    // Fetch User function has been called and it will load data under divison tag with id result
                }
               });
              }
              else
              {  
               $('#customerModal').modal('hide');
               $("alert").alert('show')
              }
             });

             //This JQuery code is for Update customer data. If we have click on any customer row update button then this code will execute
             $(document).on('click', '.update', function(){
              var id = $(this).attr("id"); //This code will fetch any customer id from attribute id with help of attr() JQuery method
              var action = "Select";   //We have define action variable value is equal to select
              $.ajax({
               url:"action.php",   //Request send to "action.php page"
               method:"POST",    //Using of Post method for send data
               data:{id:id, action:action},//Send data to server
               dataType:"json",   //Here we have define json data type, so server will send data in json format.
               success:function(data){
                $('#customerModal').modal('show');   //It will display modal on webpage
                $('.modal-title').text("Update Records"); //This code will change this class text to Update records
                $('#action').val("Update");     //This code will change Button value to Update
                $('#customer_id').val(id);     //It will define value of id variable to this customer id hidden field
                $('#first_name').val(data.first_name);  //It will assign value to modal first name texbox
                $('#last_name').val(data.last_name);  //It will assign value of modal last name textbox
               }
              });
             });

             //This JQuery code is for Delete customer data. If we have click on any customer row delete button then this code will execute
             $(document).on('click', '.delete', function(){
              var id = $(this).attr("id"); //This code will fetch any customer id from attribute id with help of attr() JQuery method
              if(confirm("Are you sure you want to remove this data?")) //Confim Box if OK then
              {
               var action = "Delete"; //Define action variable value Delete
               $.ajax({
                url:"action.php",    //Request send to "action.php page"
                method:"POST",     //Using of Post method for send data
                data:{id:id, action:action}, //Data send to server from ajax method
                success:function(data)
                {
                 fetchUser();    // fetchUser() function has been called and it will load data under divison tag with id result
                 alert(data);    //It will pop up which data it was received from server side
                }
               })
              }
              else  //Confim Box if cancel then 
              {
               return false; //No action will perform
              }
             });
            });
            </script> 

            Kommentar


            • #7
              Wenn du ein Element auf Deiner Seite haben willst musst du das initial verstecken (https://www.w3schools.com/cssref/pr_class_display.asp) und dann anschliessend beim richtigen Moment einblenden (https://api.jquery.com/show/)

              Kommentar


              • #8
                Okay habe es. Man muss folgendes noch einfügen beim Alert:

                PHP-Code:
                style="display:none;" 
                Wunderbar, vielen Dank für eure Hilfe

                Kommentar


                • #9
                  Tatsächlich habe ich zum folgendem Part noch eine Frage:

                  PHP-Code:

                   
                  //This JQuery code is for Delete customer data. If we have click on any customer row delete button then this code will execute
                   
                  $(document).on('click''.delete', function(){
                    var 
                  id = $(this).attr("id"); //This code will fetch any customer id from attribute id with help of attr() JQuery method
                    
                  if(confirm("Are you sure you want to remove this data?")) //Confim Box if OK then
                    
                  {
                     var 
                  action "Delete"//Define action variable value Delete
                     
                  $.ajax({
                      
                  url:"action.php",    //Request send to "action.php page"
                      
                  method:"POST",     //Using of Post method for send data
                      
                  data:{id:idaction:action}, //Data send to server from ajax method
                      
                  success:function(data)
                      {
                       
                  fetchUser();    // fetchUser() function has been called and it will load data under divison tag with id result
                       
                  alert(data);    //It will pop up which data it was received from server side
                      
                  }
                     })
                    }
                    else  
                  //Confim Box if cancel then 
                    
                  {
                     return 
                  false//No action will perform
                    
                  }
                   });
                  });
                  </script> 
                  Bei der Confirm Abfrage würde ich ebenfalls ein Modal von Bootstrap einsetzen, damit es alles einheitlich vom Design ist.
                  Das scheint wohl bisschen komplizierter zu sein da beim Klick auf einen Button( der sich im Modal befindet) ein bestimmter Inhalt gelöscht werden soll..

                  Kann mir jemand dazu das vorgehen sagen? Kann ich das wieder so lösen wie im Beitrag oben? Oder wie sind da die Ansätze?
                  Freue mich auf Rückmeldung.

                  Kommentar


                  • #10
                    Ja sicher, Modalfenster sind ja keine Fenster, sondern HTML-Elemente(meist DIV), die eingeblendet werden und lediglich die Darstellung ist einem Fenster bzw. Modal nachempfunden. Von daher kannst du dir so viele Modalfenster erzeugen wie du magst. Beim Javascript musst du mit den Ids unter Umständen acht geben, Vergebe für jedes Div das ein Modal sein soll eine eigene Id.


                    EDIT:
                    hellbringer hat dir ja sogar schon den Link dazu mitgeteilt, den sollte man natürlich auch mal lesen, nur durch ausprobieren und im Forum fragen wird das Nachlesen der Doku nicht ausser kraft gesetzt, das machen im schlimmsten Fall nämlich die Helfer für dich und das kann es auf Dauer ja nicht sein.

                    Kommentar


                    • #11
                      Okay, danke. Das habe ich nun verstanden.
                      Was ich aber nicht verstehe, wie ich das Modal in die Confirm Condition integriert bekomme...? Ich möchte über das Modal von Bootstrap die Einträge löschen.

                      PHP-Code:
                       if(confirm("Are you sure you want to remove this data?")) //Confim Box if OK then
                        

                      Kann man das Modal da im Code "anheften"? Oder muss der alte Code komplett weg?

                      Kommentar


                      • #12
                        Weisst du was eine IF-Bedingung ist?

                        Kommentar


                        • #13
                          Ja an sich schon. "Wenn auf Okay gedrückt wird führe folgenden Code aus...".
                          Ich verstehe nicht wie ich das Modal hinter die IF Bedingung bekomme sodass ich den "Confirm" Button vom Modal ansteuern kann und er dann den folgenden Code (das Löschen) ausführt.

                          Kommentar


                          • #14
                            Das wäre mein Ansatz.

                            PHP-Code:
                              $('#myModal').modal('show');
                              if($(
                            '#myModal').confirm)   {

                            ... 

                            Kommentar


                            • #15
                              Ich habe es einmal in JSFiddle hochgeladen. https://jsfiddle.net/ua4r209c/
                              Ich weiß nicht inwiefern es weiterhift, weil man den Code an sich nicht direkt ausführen kann, da das ganze noch mit einer Datenbank verknüpft ist.

                              Hier der Original Link, wo von ich den Code habe: https://www.webslesson.info/2017/01/...bootstrap.html

                              Kommentar

                              Lädt...
                              X